개인 학습을 위해 만들어진 글입니다.

TIL 201117, 정리 18일

웹페이지 레이아웃

position 속성

• position: relative; 는 offset property top down left right를 사용하여 default static position(position: static)에서 상대적인 위치를 나타낸다. 만약 position: static을 사용하였다면 offset property가 있어도 위치가 바뀌지 않는다.
• position: absolute;는 다른 elements에 대해서도 절대적으로 위치를 차지하게 된다. offset properties를 사용하면(혹은 사용하지 않더라도) closest positioned parent element를 기준으로 relative한 위치(사용하지 않으면 그 부모 element의 가장 왼쪽 위)에 자리하게 된다.
• position: fixed;는 사용자의 웹 페이지 scrolling과 관계없이 화면에서 계속 해당 위치에 고정되어 나타나게 된다. navigation bar에 사용된다.

Inline, inline-block, block

모든 HTML element는 default display property값을 가지고 있다. 그 default 값은 inline, block, inline-block이 될수 있으며 직접 CSS 파일에서 정해줄 수도 있다.

• inline element는 새로운 line으로 이동하지 않고 기존의 line에서 필요한 만큼만 공간을 차지한다. anchor tag가 그 예시이다. 어떤 글에서 중간에 하이퍼링크가 된 글자는 그 라인에서 해당 글자만 링크가 가능한 글자가 된다. 그렇기 때문에 따로 heigth나 length를 지정해 줄 수 없다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

• block-level element는 해당 웹 페이지의 전체 width를 차지하게 된다. 크기(height, length) 정해 줄 수 있으며 heading element나 footer element가 그 예시이다.

• inline-block element는 두가지 특성을 모두 가지고 있다. inline-block element끼리 서로 좌우에서 위치할 수 있으며 heigth나 length를 지정해 줄 수 있다.

float

float, clear

float property로 고정된 위치가 아니라 페이지에 맞춰서 좌우로 위치시킬 수 있다. 이미지를 텍스트로 감싸는 형태의 웹 페이지에서 사용하거나, 페이지 전체의 레이아웃 그러나 의도와 맞지 않게 element끼리 원하지 않는 좌우 위치에서 충돌(적절히 위치 하지 않음)할 수 있다.

1. 이 때 clear property는 그 값으로 left right both none을 가지며 해당 방향으로는 다른 element와 만나지 않게 방지해 줄 수 있다. 하지만 이 방법을 사용할 경우, clear 속성을 가지는 HTML 요소를 따로 더 추가해야 하는 부담이 있다.
2. 다른 방법으로 바깥 div 에 overflow: hidden 속성값을 주는 것으로 원하지 않는 충돌을 해결할 수 있다.

float 관련 학습 자료: https://learnlayout.com/float.html

레이아웃 만들기

HTML5에서 추가된 여러가지 영역 태그(semantic tags)를 사용하여 웹페이지 레이아웃을 구상하자. div 태그만을 사용하여 레이아웃을 만드는 것 보다 더 바람직하다. 위에서 정리한 내용과 display: flex 속성을 이용하여 웹 페이지 레이아웃을 구상할 수 있다.
flex 학습 자료: https://flexboxfroggy.com/#ko

레이아웃의 설계의 정답은 없지만 여러 좋은 사이트의 레이아웃 구상을 보고 좋은 레이아웃이 무엇인지 배울 수 있다.