position을 relative로 설정해야하는 이유는, Figma에 있는 레이아웃의 css속성들을 확인해보시면 알 수 있습니다.
대부분의 요소들이 "position: absolute"로 배치되어 있습니다.
position:absolute로 설정을 하면, position이 static이 아닌(absolute/relative/fixed) 부모 태그를 기준으로 배치가 됩니다. 만약 position이 static이 아닌 부모태그를 찾을 수 없으면, <body>태그를 기준으로 배치가 됩니다.
position
static : position을 따로 설정하지 않았을 경우 기본적으로 부여되는 포지션.
absolute : "position이 static이 아닌 상위 엘리먼트를 기준"으로 배치하는 것.
(position이 static이 아닌 상위 엘리먼트가 없을 경우 body태그를 기준으로 배치됨.)
"HEADING TITLE"의 상위 엘리먼트는 <div id="title">태그인데, title태그의 position은 static입니다.(포지션을 따로 설정하지 않았기 때문에 기본값인 static으로 설정되어있는 상태)
따라서 "HEADING TITLE"은 포지션이 static이 아닌 상위태그가 없어 body태그를 기준으로 배치가 됩니다.
그러니 body태그의 높이 기준으로 아래에서 48%만큼, 위에서 24% 떨어진 위치에 배치가 되는데,
직접 해보면 아시겠지만 제대로 된 위치가 아닌 이상한 위치에 배치가 됩니다.
제대로 배치되게 하려면 상위 엘리먼트인 <div id="title">태그 기준으로 배치되도록(title태그의 높이 200px 기준으로 위에서 24%, 아래서 48%떨어진 위치에 배치되어야 합니다)
<div id="title">태그의 position을 absolute, relative, 혹은 fixed 셋 중 하나로 설정해줘야합니다.
이 중 가장 적합한 속성은 relative입니다.
fixed는 스크롤을 올리거나 내려도 계속 같은 자리에 있는 광고배너와 같은 특수한 경우에만 사용하고, absolute를 선택한다면 아예 전체 레이아웃 틀 자체를 absolute로 다시 짜야합니다.(이 방법은 위에서처 height / grid 로 레이아웃을 짜는 것에 비해 복잡합니다.)
반면에 relative를 선택하고 top, left 값 등을 별도로 설정하지 않으면 원래 위치에 그대로 배치되기 때문에 우리가 앞에서 만든 레이아웃 틀을 건드리지 않고 진행할 수 있기 때문입니다.
------
여기까지 하셨다면 나머지 부분은 figma에 있는 속성들을 복사+붙여넣기 하시면 됩니다!
발표 때 제대로 보여드리지 못한 footerSections 배치하는 법만 추가로 설명해드리겠습니다
footerSections 배치하기
HTML문서의 <div id="footerSections"> 태그 안에 footer section의 요소들을 작성해줍니다.
아래 코드를 복붙하셔도 됩니다.
<div id="footerSection1">
<div class="sectionName">footer section 01</div>
<div class="line1"></div>
<div class="line2"></div>
<div class="explain">Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.</div>
</div>
<div id="footerSection2">
<div class="sectionName">footer section 02</div>
<div class="line1"></div>
<div class="line2"></div>
<div class="explain">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</div>
</div>
<div id="footerSection3">
<div class="sectionName">footer section 03</div>
<div class="line1"></div>
<div class="line2"></div>
<div class="explain">And the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver.</div>
</div>
<div id="footerSection4">
<div class="sectionName">footer section 04</div>
<div class="line1"></div>
<div class="line2"></div>
<div class="explain">Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.</div>
</div>
각 footer section안에 공통적으로 들어가있는 세부요소들(이름, 라인, 설명 등)은 id값 대신 class값을 지정해줬기 때문에 이렇게 한꺼번에 스타일을 적용할 수 있습니다.
(id값은 하나의 태그에만 지정할 수 있고, class값은 여러개의 태그에 지정할 수 있기 때문에 여러 개의 태그에 한꺼번에 공통된 스타일을 적용하려면 class값을 지정합니다.
Footer Section 제목과 아래 영어로 된 설명을 구분하는 라인이 보이시죠?
라인은 Figma에서 이미지로 export해서 써도 되지만 저는 직접 만들어봤습니다.
line1과 line2에 각각 background color와 height값을 설정해줘서(background 색상코드는 figma참고, height는 2px) 회색과 파란색, 두 개의 라인을 만들어 줍니다.
떨어져있는 라인 두개가 겹쳐지게끔 아래쪽에 있는 파란색 라인을 position:relative;로 설정한 다음bottom:2px;로 설정해서 위로 2px올라오게 합니다. 라인 두개가 겹쳐졌습니다.
파란색 라인의 길이를 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로 배치하는 대신 그냥 마진값과 포지션값을 살짝 조정해서 위치를 잡아줬습니다.
)
혹시라도 레이아웃을 만들면서 이해가 안되거나 어려운 부분이 있으시면 언제든지 저한테 질문해주세요~
