주어진 디자인을 적절히 해석하여 웹페이지 형식으로 구현
해상도의 개념이 중요하다. 모든 사람들이 똑같은 모니터를 쓰는게 아니기에...
PREVIEW
HTML
<! DOCTYPE html >
< html >
< head >
< title > wood </ title >
< link rel =" stylesheet " href =" style.css ">
</ head >
< body >
< header class =" header ">
< div class =" l_wrapper ">
< section class =" container ">
< div class =" container-main ">
< h1 > OAK LABORATORY </ h1 >
< p > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt
</ p >
</ div >
< img class =" container-cover " src =" ./images/container-bg.png " alt ="">
</ section >
</ div >
</ header >
< main class =" contents ">
< div class =" l_wrapper ">
< ul class =" l_row ">
< li class =" l_col ">
< section class =" card ">
< img class =" card-cover " src =" ./images/type-a.png " alt ="">
< h2 class =" card-title "> Tree House </ h2 >
</ section >
</ li >
< li class =" l_col ">
< section class =" card ">
< img class =" card-cover " src =" ./images/type-b.png " alt ="">
< h2 class =" card-title "> Furniture </ h2 >
</ section >
</ li >
< li class =" l_col ">
< section class =" card ">
< img class =" card-cover " src =" ./images/type-c.png " alt ="">
< h2 class =" card-title "> Wave Woods </ h2 >
</ section >
</ li >
</ ul >
</ div >
</ main >
< footer class =" footer ">
< div class =" l_wrapper ">
< div class =" l_footer ">
2022 © OAK LABORATORY
</ div >
</ div >
</ footer >
</ body >
</ html >
CSS
/* CSS Reset */
body , p , ul {
margin : unset ; /* 기본으로 body에 주어진 마진 값 초기화 */
padding : unset ;
}
li {
list-style-type : none ;
}
img { /* 이미지요소의 기본 스타일 초기화 */
vertical-align : top ;
}
h1 , h2 {
margin : unset ;
font-size : unset ;
font-weight : unset ;
}
/* layouts */
. l_wrapper { /* 공통 레이아웃 */
/* box-shadow: inset 0 0 20px gold; */
width : 960px ; /* 화면의 넓이 */
margin : 0 auto ; /* 중앙 정렬 */
}
. l_row {
/* box-shadow: inset 0 0 20px blue; */
font-size : 0 ;
margin : 0 -15px ;
}
. l_col {
/* box-shadow: inset 0 0 20px yellow; */
display : inline-block ;
font-size : initial ;
width : 33.33333% ;
padding : 0 15px ;
box-sizing : border-box ;
}
/* Typography */
: root {
font-family : ' arial ' ;
}
/* Componets */
. header {
/* box-shadow: inset 0 0 20px red; */
background-size : cover ;
padding-top : 100px ; /* 마진병합이 발생하므로 이미지의 패딩을준다. */
color : orange ;
}
. container {
border-width : 30px 30px 0 30px ;
border-style : solid ;
padding : 60px 60px 70px 60px ;
overflow : hidden ;
}
. container-main {
/* box-shadow: inset 0 0 20px purple; */
display : inline-block ; /* 이미지는 inline형태 */
width : 480px ;
}
. container-main h1 {
font-size : 32px ;
margin-bottom : 24px ;
width : fit-content ; /* fit-content를줘서 밑줄이 텍스트와 일치하게 */
letter-spacing : 0.2em ;
}
. container-main h1 :: after {
content : ' ' ; /* 가상요소의 필수 */
background-color : currentColor ;
display : block ;
height : 4px ;
border-radius : 4px ;
}
. container-main p {
line-height : 1.6 ;
}
. container-cover {
/* box-shadow: inset 0 0 20px darkblue; */
vertical-align : top ; /* baseline이 상단에 header글씨와 일치하게 딱 지정된다. */
margin-bottom : -120px ;
}
. contents {
/* box-shadow: inset 0 0 20px green; */
background-color : # ddd ;
padding : 30px 0 ;
}
. card {
background-color : white ;
color : orange ;
border-radius : 12px ;
overflow : hidden ;
}
. card-cover {
width : 100% ;
}
. card-title {
border-top : 4px solid ;
background-image : url ( ./images/play.png );
background-repeat : no-repeat ;
background-position : right center ;
height : 50px ;
line-height : 50px ;
padding : 0 14px ;
font-weight : 600 ;
}
. footer {
/* box-shadow: inset 0 0 20px blue; */
text-align : center ;
padding : 14px 0 ;
font-size : 14px ;
color : # aaa ;
letter-spacing : 0.2em ;
border-top : 2px solid ;
font-weight : 600 ;
}
■ 주요 레이아웃 구성 l_wrapper 에서 l은 layout의 약자이다. 항상 작업전 레이아웃을 구성하자.
우선 몇개의 레이아웃으로 구성되어있는지 확인한다.
See the Pen
Untitled by 윤형섭 (@mixrecgm-the-encoder )
on CodePen .
컨텐츠가 어떻게 구성되어있는지 전체적인 틀을 잡기 위해 시각적으로 확인
See the Pen
Untitled by 윤형섭 (@mixrecgm-the-encoder )
on CodePen .
body의 기본적인 마진이 잡혀있기에 css초기화한다. 차이점을 직접 보면 이해하기 쉽다.
하나의 wrapper를 만들어서 공통분모를 적용
header에 이미지를내부 노란 테두리 박스 만들기위해 header의 l_wrapper내부에 container 클래스를 작성한다.
container에 테두리와 상하좌우패딩과 내부 컨텐츠가 들어가있다. 우선 내부컨텐츠를 제외한 나머지를 적용해본다.
마진병합이 일어나므로 이미지의 패딩을 준다
처음에 작업전 레이아웃 구성이 필수라 하였을때, 똑같이 내부 컨텐츠 레이아웃도 구성한다
header의.l_wrapper 에는 2개의 레이아웃과 contents의 l_wrapper에 두개의 레이아웃, 또 l_main에는 세개의 레이아웃등으로 구성할 수있다.
내부 컨텐츠의 레이아웃은 2개로 볼수있다.
오른쪽에 이미지에 마크업<img>, 백그라운드 이미지 둘중 하나 사용해서 쓸수있다.
단, 백그라운드 이미지일때 두개의 레이아웃으로할땐 상관없지만 마크업으로 사용할땐 float:right로 써줘야 한다.
어차피 두 개의 레이아웃을 사용하는건 똑같다.
이미지는 인라인 형태를 띄우므로 inline-block
baseline은 header 글씨의 기준이다.그러므로로 이미지를 vertical-align:top으로 상단으로 기준점으로 잡아준다.
이런식으로 작업할때 고정이 중요하다.
올바른 방법은 아니지만 해당 이미지의 크기를 480px 줘서 오른쪽으로 이동시킨다.
그리고 네거티브 마진을 줘서 완성 이미지 처럼 도형이 짤리게 나오게 설정한다.
또한 컨테이너에 overflow:hidden 을 줘서 가려준다.
이제 h1와 p를 넣어줄차례
인라인 요소이므로 부모와 자식간에 마진병합이 일어나지 않았다
하지만 글씨제와 폰트 두께는 초기화 해준다. 재료손질 한다는 기본적인 일 이라고 보면된다. 본적격인 내부 구성 시작.
하기전에 우선적으로 꼭 폰트 스타일을 지정해준다.
가상요소를 사용하여 h1의 글씨 밑줄을 추가해줘야하는데
부가적으로 설정하자면
가상셀렉터 가 두개로 분리되는데 1,가상클래스,2.가상요소 두가지로 나뉘어지는데
: 하나는 가상클래스이고 :: 두개는 가상 요소로 불린다. (앞서 배운내용)
h1의 밑줄을 일치하게 하고 과 글간격을 지정해준다.
p의 줄 높이를 지정해줘서 최대한 예시와 비슷하게한다.
상단하단부분 공통분모이기에 footer 먼저한다.
콘텐츠의 공통 레이아웃 작업을 해보자면
이미지가 인라인 형식으로 보여지는데, 해당 방식을 그리드(grid)라고 한다.
다단구조, 즉 같은 간격, 크기로 반복되는 레이아웃 방식이다.
가장먼저 레이아웃을 구성한다.
ul li의 리셋한다.
가로배치는는 인라인 블록 하나 배웠다. col에 inline-block을 설정해준다.
그런데 사이간격 즉 띄어씨그가 되어있는데 저 개념을 없애기위해
row에 폰트0, col에 폰트를 이니셜 써서 살려준다(옳은방법x)
하나의 트릭에 불과하다.
사이간격이 사라졌다.
이제 3개로 분할해보자
카드는 이미지랑 텍스트 들어가므로 두 개의 레이아웃이 들어간다
이미지를 넣고 각 클래스를 적용해준다.
재생버튼은 백그라운드 이미지로 처리하고 첫 배경 적용시 이미지 반복삭제 및 위치 조정
만약 화면의 크기가 조절될경우 이미지가 잘리므로 커버의 너비를 100퍼로 설정해준다.
