CodeIt_Sprint/CSS_레이아웃14 (15)CSS_레이아웃_3_Grid-3-4-뮤직 매거진 프로젝트 ※연습문제 : 음악 플레이어 - CSS 레이아웃 | 코드잇 ● 문제 조건 :○ 조건1_ 스크롤했을 때 사이드 바 영역(”Codeit Music” 부분)이 화면 왼쪽에 고정되어 보이도록 배치했다. ○ 조건2_ 스크롤했을 때 플레이어 영역(” After Sunset” 부분)이 화면 하단에 고정되어 보이도록 배치했다. ○ 조건3_ 플레이어 영역의 컨트롤 요소들을 디자인과 같이 배치했다 ● 해결과정 :○ 조건1,2 과정1_ ★main Box의 margin-bottom , margin-left에 각각 footer.Box의 height, sidebar.Box의 width만큼 준다.body의 구조파악을 해보면, 크게 3가지의 Box로 각각 사이드바 (Div sidebar Box), main Box , foote.. 2024. 11. 5. (14)CSS_레이아웃_3_Grid-3-3-음악 사이트 프로젝트 ※ 연습문제 : ● 해결 방법 (핵심만) :내가 약했던 부분 : 1_ 맨 위 상단 로고 고정바 (header.Box)● 순서 1 : 상단 로고는 스크롤을 해도,맨 위에 계속 고정 출력=> position : fixed + top , left , right : 0 ● 순서 2 : 스크롤 하면서, 다른 Box들과 겹칠 때, 더 위에 출력 되어야함=> z-index : 1 // 0보다 큰값(default 값)2_ 비디오 + 광고 텍스트 (hero.Box) //궁금한 점은 이렇게 많이 되어있던데, 다른방법안사용하고 이 기법을 자주 사용하나??● 순서 1 : 비디오(bg.Box) , 광고 텍스트 (hero-heading.Box)를 모두 감싸는 부모 Box를 position : relative를 걸고, pos.. 2024. 11. 5. (13)CSS_레이아웃_3_Grid-3-2-비트코인_프로젝트 : grid-area,grid-template-areas를 사용하는 궁극적인 이유 ※ 연습문제 : ● 문제 조건 : 앞에서 배운 포지션, 플렉스박스, 그리고 그리드를 사용해서 요소들을 위 스크린샷처럼 배치해 보세요. 필요하면 태그를 추가하면서 정렬하셔도 좋습니다. 이번 레슨에서는 포지션, 플렉스박스, 그리드를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다. ● 해결 방법 (핵심만) :○ 과정1 : 구조 파악부모Box(main) 내의 컨텐츠 3개 : Section.prices Box , Section.assets Box, Section.order Box○ 과정2 : grid-area와 grid-template로 푸는 이유와 전략이유 :★ 저렇게 빈공간이 있는 구부정한 구조에 grid-area와 grid-template로 푸는 것이 .. 2024. 11. 5. (12)CSS_레이아웃_3_Grid-3-원하는 셀에 특정 요소 배치하기_방법2 : 각 요소에 이름을 붙여, 셀에 기입하여 배치 : grid-area 속성, grid-template-areas : "~~" ; ＃알아야 할 개념 :● 개념_ grid - area , grid-template-areas 사용법순서1_ : 부모 Box 내 모든 요소들을 " grid-area : 이름 ; " 으로 각 요소의 이름 붙이기순서2 _ : 요소에 전부 이름을 지정했다면, 부모 Box에 grid-template-areas = "요소 1x1 이름 요소 1x2 이름2 ...""요소 2x1 이름 요소 2x2 이름2 ...".."요소 nx1 이름1 요소 nx2 이름2 ..." ;문법으로 속성값 대입한다.○ Ex1 _ 순서1 : 요소들 이름 지정 - red.Box 셀렉터 => grid-area : R; //요소이름을 R로 지정 - green.Box 셀렉터 => grid-area : G //요소이름을 G로 지정 .. 2024. 11. 5. 이전 1 2 3 4 다음
