- 웹 문서의 레이아웃을 만들 때 사용하는 웹 요소 배치 방법 등에 대해 알아본다.
1. 배치 방법 결정하는 display 속성
display속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.
🔹 display 속성값
block인라인 레벨 요소를 블록 레벨 요소로 만든다.
inline블록 레벨 요소를 인라인 레벨 요소로 만든다.
inline-block인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
none해당 요소를 화면에 표시하지 않는다.
2. 왼쪽이나 오른쪽으로 배치하는 float 속성
float 속성은 웹 요소를 문서 위에 떠 있게 만드는 것, 따라서 요소가 왼쪽이나 오른쪽 구석에 배치된다는 것을 말한다.
웹 문서를 만들때 <p>태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있을 때, <p>태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다. 이럴 때 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸이도록 할 수 있다.
🔹 float 속성값
left해당 요소를 문서의 왼쪽에 배치한다.
right해당 요소를 문서의 오른쪽에 배치한다.
none기본값이며, 좌우 어느 쪽에도 배치하지 않는다.
3. float 속성을 해제하는 clear 속성
float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.
🔹 clear 속성값
leftfloat: left를 해제한다.
rightfloat: right를 해제한다.
bothfloat: left 와 float: right를 해제한다.
4. 웹 요소의 위치를 정하는 left, right, top, bottom 속성
웹 문서에서 요소를 원하는 곳에 갖다 놓으려면 위치를 지정해야 한다. 이때 사용하는 속성이 left, right, top, bottom 이다. 즉 position속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정하면 된다.
🔹 left, right, top, bottom 속성
left기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다.
right기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다.
top기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다.
bottom기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다.
5. 배치 방법을 지정하는 position 속성
position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고, 원하는 위치를 선택할 수 있다.
🔹 position 속성값
static기본값이며, 문서의 흐름에 맞춰 배치한다.
relative위치값을 지정할 수 있다는 점을 제외하면 static과 같다.
absoluterelative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
fixed브라우저 창을 기준으로 위치를 지정해 배치한다.
[참조 링크 1]
https://developer.mozilla.org/ko/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/float
https://developer.mozilla.org/ko/docs/Web/CSS/position
[참조 링크 2]
https://caniuse.com/
