JS Bin

태그에 **height 값을 설정**해서 레이아웃을 구성하는 방법입니다. 우리가 만들 레이아웃은 위에서 아래로, 세로로 쌓아나가는 **기본적인 배치**이기 때문에 \

태그로 묶인 각각의 '박스'에 높이만 설정해줘도 레이아웃의 틀이 완성됩니다. ```bash /* height 설정으로 layout 만들기 */ #navBar { height: 64px; } #title { height: 200px; } #wrapper { height: 712px; } #footerSections { height: 184px; } #bottomBar { height: 48px; } ``` 높이는 Figma에서 보고 그대로 써줬습니다. (반응형 웹이라 가로길이는 화면너비에 따라 유동적으로 만들지만, 세로 길이는 그냥 '픽셀'을 사용해서 고정해줬습니다.) 두번째는, 'grid'속성을 이용하는 방법입니다. grid는 표를 만드는 것처럼 레이아웃을 구성합니다. 우리가 만드는 레이아웃이 5행으로 이뤄진 표라고 생각하고 ```bash #layout { display: grid; grid-template-rows: 64px 200px 712px 184px 48px; } ``` 각 행의 높이를 64px, 200px, ...으로 설정했습니다. (rows는 행을 의미합니다) 첫번째 방법과 동일한 틀이 만들어집니다. 단, grid속성은 인터넷익스플로러에서는 지원이 되지 않거나 일부만 지원되니 참고하세요!() ### Position을 설정합니다 ( 중요!! ) navBar, title, wrapper, footerSections, bottomBar의 position을 relative로 설정해주세요! ```bash #navBar { position: relative; } #title { position: relative; } #wrapper { position: relative; } #footerSections { position: relative; } #bottomBar { position: relative; } ``` 아래와 같이 한꺼번에 설정할 수도 있습니다. ```bash #layout > * { position: relatvie; } /* layout 태그의 하위 태그들에 한꺼번에 스타일이 적용됩니다. */ ``` position을 relative로 설정해야하는 이유는, Figma에 있는 레이아웃의 css속성들을 확인해보시면 알 수 있습니다. 대부분의 요소들이 "position: absolute"로 배치되어 있습니다. **position:absolute**로 설정을 하면, **position이 static이 아닌(absolute/relative/fixed) 부모 태그를 기준으로 배치**가 됩니다. 만약 position이 static이 아닌 부모태그를 찾을 수 없으면, \태그를 기준으로 배치가 됩니다. {% hint style="info" %} **position** **static** : position을 따로 설정하지 않았을 경우 기본적으로 부여되는 포지션. **absolute** : "position이 static이 아닌 상위 엘리먼트를 기준"으로 배치하는 것. (position이 static이 아닌 상위 엘리먼트가 없을 경우 body태그를 기준으로 배치됨.) **relative** : "원래의 위치 기준"으로 배치하는 것 **fixed** : "전체화면 기준"으로 배치하는 것 {% endhint %} 예를 들어 Figma에서 "HEADING TITLE" 요소를 보면 , position: absolute; left: 5.78%; right: 5.62%; top: 24%; bottom: 48%; 으로 배치가 되어 있습니다. "HEADING TITLE"의 상위 엘리먼트는 \

태그인데, title태그의 position은 static입니다.(포지션을 따로 설정하지 않았기 때문에 기본값인 static으로 설정되어있는 상태) 따라서 "HEADING TITLE"은 포지션이 static이 아닌 상위태그가 없어 body태그를 기준으로 배치가 됩니다. 그러니 body태그의 높이 기준으로 아래에서 48%만큼, 위에서 24% 떨어진 위치에 배치가 되는데, 직접 해보면 아시겠지만 제대로 된 위치가 아닌 이상한 위치에 배치가 됩니다. 제대로 배치되게 하려면 상위 엘리먼트인 \

태그 기준으로 배치되도록(title태그의 높이 200px 기준으로 위에서 24%, 아래서 48%떨어진 위치에 배치되어야 합니다) \

태그의 position을 absolute, relative, 혹은 fixed 셋 중 하나로 설정해줘야합니다. 이 중 가장 적합한 속성은 relative입니다. fixed는 스크롤을 올리거나 내려도 계속 같은 자리에 있는 광고배너와 같은 특수한 경우에만 사용하고, absolute를 선택한다면 아예 전체 레이아웃 틀 자체를 absolute로 다시 짜야합니다.(이 방법은 위에서처 height / grid 로 레이아웃을 짜는 것에 비해 복잡합니다.) 반면에 relative를 선택하고 top, left 값 등을 별도로 설정하지 않으면 원래 위치에 그대로 배치되기 때문에 우리가 앞에서 만든 레이아웃 틀을 건드리지 않고 진행할 수 있기 때문입니다. \------ 여기까지 하셨다면 나머지 부분은 figma에 있는 속성들을 복사+붙여넣기 하시면 됩니다! 발표 때 제대로 보여드리지 못한 footerSections 배치하는 법만 추가로 설명해드리겠습니다 ### footerSections 배치하기 HTML문서의 \

태그 안에 footer section의 요소들을 작성해줍니다. 아래 코드를 복붙하셔도 됩니다. ```

footer section 01

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.

footer section 02

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished

footer section 03

And the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

footer section 04

Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

``` 이제 footerSection1, 2, 3, 4의 자리를 각각 잡아줘야합니다. Figma에서 Footer\_section\_v01 , v02, v03, v04의 속성을 각각 복사해와서 붙여넣기 해주시면 돼요. ``` #footerSection1 { position: absolute; left: 5.62%; right: 73.12%; top: 20.69%; bottom: 31.03%; } #footerSection2 { position: absolute; left: 28.12%; right: 50.62%; top: 20.69%; bottom: 31.03%; } #footerSection3 { position: absolute; left: 50.62%; right: 28.12%; top: 20.69%; bottom: 31.03%; } #footerSection4 { position: absolute; left: 73.12%; right: 5.62%; top: 20.69%; bottom: 31.03%; } ``` 각 섹션들의 자리배치를 해줬습니다. 이제 세부적인 스타일을 적용해야합니다. ``` .sectionName { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.8); margin-bottom: 15px; } .line1 { background: rgba(0, 0, 0, 0.08); height: 2px; } .line2 { background: linear-gradient(234.67deg, rgba(255, 255, 255, 0.16) 0.24%, rgba(255, 255, 255, 0) 100.87%), #006BE8; height: 2px; width: 30%; position: relative; bottom: 2px; } .explain { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.64); margin-top: 15px; } ``` 각 footer section안에 공통적으로 들어가있는 세부요소들(이름, 라인, 설명 등)은 id값 대신 class값을 지정해줬기 때문에 이렇게 한꺼번에 스타일을 적용할 수 있습니다. (id값은 하나의 태그에만 지정할 수 있고, class값은 여러개의 태그에 지정할 수 있기 때문에 여러 개의 태그에 한꺼번에 공통된 스타일을 적용하려면 class값을 지정합니다. Footer Section 제목과 아래 영어로 된 설명을 구분하는 라인이 보이시죠? 라인은 Figma에서 이미지로 export해서 써도 되지만 저는 직접 만들어봤습니다. 1. line1과 line2에 각각 background color와 height값을 설정해줘서(background 색상코드는 figma참고, height는 2px) 회색과 파란색, 두 개의 라인을 만들어 줍니다. 2. 떨어져있는 라인 두개가 겹쳐지게끔 아래쪽에 있는 파란색 라인을 position:relative;로 설정한 다음bottom:2px;로 설정해서 위로 2px올라오게 합니다. 라인 두개가 겹쳐졌습니다. 3. 파란색 라인의 길이를 30%로 설정해주세요.( width: 30%; ) 이렇게 하면 라인이 완성됩니다. 그리고 추가로 .sectionName에는 margin-bottom:15px; .explain에는 margin-top:15px; 마진을 각각 설정해줬습니다. (figma에서 footer section을 보시면 섹션이름과 라인, 아래 설명이 각각 15px만큼 떨어져있기 때문이에\~) 이 외에는 전부 피그마에서 복붙하시면 완성입니다! (참고! 안읽어도 상관없음 * 사실 Figma의 레이아웃은 footer section의 모든 요소 하나하나에 일일히 다 id값을 주고 absolute로 위치를 잡아주는 방식으로 되어있는데요. 이렇게 하려면 중복된 소스코드가 많아지기 때문에 저는 그냥 footer section1, 2, 3, 4로 각각 묶어준 다음 이렇게 묶어준 네 개의 섹션만 absolute로 배치를 했어요. * 그리고 그 안의 세부적인 요소들은 absolute로 배치하는 대신 그냥 마진값과 포지션값을 살짝 조정해서 위치를 잡아줬습니다. ) 혹시라도 레이아웃을 만들면서 이해가 안되거나 어려운 부분이 있으시면 언제든지 저한테 질문해주세요\~ 아니면 아래에 있는 소스코드를 잘 읽어보시면 어느정도 해결이 되실 거에요 그럼 화이팅!! :D ### ※ 전체소스코드 HTML 전체 소스코드입니다 ``` JS Bin

heading title

heading subtitle text

footer section 01

Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.

footer section 02

By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished

footer section 03

And the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.

footer section 04

Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

ㅁ

``` CSS 전체 소스코드입니다 {% code title="style1.css" %} ```bash #layout > * { border: 1px solid gray; position: relative; } #layout { display: grid; grid-template-rows: 64px 200px 712px 184px 48px; margin-bottom: 60px; } #logo { position: absolute; width: 104px; height: 32px; left: 5.62%; top: 16px; } #menu { position: absolute; left: 15%; right: 18%; top: 28.57%; bottom: 42.86%; text-align: center; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; /* identical to box height, or 114% */ text-align: center; letter-spacing: 0.04em; text-transform: uppercase; /* Text_blue */ color: rgba(0, 0, 0, 0.88); } .links { margin-left: 3%; } #signIn { position: absolute; left: 86.88%; right: 5.62%; top: 12.5%; bottom: 12.5%; } #title { background: linear-gradient(263.53deg, rgba(255, 255, 255, 0.32) 0.24%, rgba(255, 255, 255, 0.08) 100.87%), #006BE8; } #heading { position: absolute; left: 5.78%; right: 5.62%; top: 24%; bottom: 48%; font-family: Roboto; font-style: normal; font-weight: 500; font-size: 64px; line-height: 56px; /* identical to box height, or 87% */ align-items: center; text-align: center; letter-spacing: 0.08em; text-transform: uppercase; font-variant: small-caps; /* #FFFFFF */ color: #FFFFFF; } #subtitle { position: absolute; left: 5.78%; right: 5.62%; top: 64%; bottom: 24%; font-family: Roboto; font-style: normal; font-weight: 500; font-size: 24px; line-height: 24px; /* identical to box height, or 100% */ align-items: center; text-align: center; letter-spacing: 0.32em; text-transform: uppercase; /* #FFFFFF */ color: #FFFFFF; } #wrapper { background: gray; } #inner { height: 584px; margin-top: 48px; margin-bottom: 80px; margin-left: 8%; margin-right: 8%; display: grid; grid-template-columns: 300px 1fr; } #box1 { background-color: white; margin-right: 16px; } #box2 { background-color: white; } #footerSections { position: relative; } #footerSection1 { position: absolute; left: 5.62%; right: 73.12%; top: 20.69%; bottom: 31.03%; } #footerSection2 { position: absolute; left: 28.12%; right: 50.62%; top: 20.69%; bottom: 31.03%; } #footerSection3 { position: absolute; left: 50.62%; right: 28.12%; top: 20.69%; bottom: 31.03%; } #footerSection4 { position: absolute; left: 73.12%; right: 5.62%; top: 20.69%; bottom: 31.03%; } .sectionName { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.8); margin-bottom: 15px; } .line1 { background: rgba(0, 0, 0, 0.08); height: 2px; } .line2 { background: linear-gradient(234.67deg, rgba(255, 255, 255, 0.16) 0.24%, rgba(255, 255, 255, 0) 100.87%), #006BE8; height: 2px; width: 30%; position: relative; bottom: 2px; } .explain { font-family: Roboto; font-style: normal; font-weight: normal; font-size: 12px; line-height: 20px; /* or 167% */ letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.64); margin-top: 15px; } #copyright { position: absolute; left: 41.25%; right: 41.25%; top: 33.33%; bottom: 33.33%; font-family: Roboto; font-style: normal; font-weight: 300; font-size: 12px; line-height: 16px; text-align: center; letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.48); } #instagram { position: absolute; left: 93.12%; right: 5.62%; top: 33.33%; bottom: 33.33%; } #twitter { position: absolute; left: 91.25%; right: 7.5%; top: 33.33%; bottom: 33.33%; } #facebook { position: absolute; left: 89.38%; right: 9.38%; top: 33.33%; bottom: 33.33%; } ``` {% endcode %}