1. Position 속성
position 속성은 웹 문서 안의 요소를 자유자재로 배치해 주므로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하다.
position 속성을 이용하면 텍스트가 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다.
position 속성값(4가지)
(1) static
문서의 흐름에 맞춰 배치하며, 기본값이다.position: static; 이 설정된 엘리먼트는 그다지 특별한 방식으로 위치가 지정된 것이 아니다.
정적(static) element는 위치가 지정된 것이 아니라고 표현하며, static 이 아닌 다른 값으로 지정된 element에 대해 위치가 지정됐다고 표현한다.
.static {
position: static;
}(2) relative
위치 값을 지정할 수 있다는 점을 제외하면, 별도의 property를 지정하지 않는 이상static 과 동일하게 동작한다.
상대 위치가 지정된 엘리먼트에 top 이나 right, bottom, left 를 지정하면 기본 위치와 다르게 위치가 조정된다.
다른 콘텐츠는 해당 element에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것이다.
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}(3) fixed
브라우저 창을 기준으로 위치를 지정해 배치한다.
고정(fixed) element는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.relative와 마찬가지로 top 이나 right, bottom, left property가 사용된다.
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}(4) absolute
relative 값을 사용한 상위 element를 기준으로 위치를 지정해 배치한다.
position 속성 중에서 absolute 값을 사용할 때는 주의가 필요하다.
element에 position: absolute 라고 한 후 위치 값을 지정하면, element 중에서 position: relative 를 사용한 element를 기준으로 위치를 결정한다. 만약 부모 element 중에 없으면 상위 element를 찾아보고, 그래도 없다면 더 위의 element(document body)를 찾아본다.
다시 말해, 어떤 요소에 position: absolute 를 사용하려면, 부모 요소에는 position: relative 라고 지정해야 원하는 대로 배치할 수 있다.
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}2. display 속성
display 속성을 사용하면 block 레벨 요소와 inline 레벨 요소를 서로 바꿔서 사용할 수 있다. display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.
모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값이 있습니다. 대부분의 엘리먼트에 대한 기본값은 보통 block이나 inline입니다. 블록 엘리먼트는 블록 레벨 엘리먼트라고 부를 때도 있으며, 인라인 엘리먼트는 늘 인라인 엘리먼트라고 부릅니다.
주요 display 속성값(3가지)
(1) inline
<span>, <a>, <img> 요소는 대표적인 인라인(inline) 요소이다.
block 레벨 요소를 inline 레벨 요소로 만든다.
display 속성값이 inline인 요소는 새로운 라인(line)에서 시작하지 않으며 또한, 요소의 너비(width)도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
(2) inline-block
inline 레벨 요소와 block 레벨 요소의 속성을 모두 가지고 있다.
display 속성값이 inline-block으로 설정된 요소들은 inline 요소처럼 한 줄로 늘어서게 된다.
하지만, block 요소처럼 width, height, margin, padding 을 설정할 수 있게 된다.
따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용된다.
(3) block
<div>, <h1>, <p>, <ul>, <ol>, <form>요소는 대표적인 블록(block) 요소이다.
inline 레벨 요소를 block 레벨 요소로 만든다.
display 속성값이 block인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비(width)를 차지한다.
3. float
웹 문서를 만들다 보면 <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있다. 그런데 <p> 는 block 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다.
이럴 때는 float 속성을 사용하여 이미지를 표시하고 주변에 텍스트가 둘러싸도록 할 수 있다.
float 속성은 웹 요소를 문서 위에 떠 있게 만든다.
여기서 '떠 있다' 는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 말한다.
float 속성값(3가지)
(1) left : 해당 요소를 문서의 왼쪽에 배치한다.
(2) right : 해당 요소를 문서의 오른쪽에 배치한다.
(3) none : 좌우 어느 쪽에도 배치하지 않는다. 기본값이다.
[ex] 이미지를 왼쪽(오른쪽)에 배치한 후, 오른쪽(왼쪽)에 오는 텍스트와 적당한 간격을 유지하도록 margin-right(margin-left) 속성도 함께 사용한다.
img { float: left; margin-right: 40px; }
float 속성을 해제하는 clear 속성
float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다.
따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데, 그것이 바로 clear 속성이다.
clear 속성값(3가지)
(1) left : float: left 를 해제한다.
(2) right : float: right 를 해제한다.
(3) both : float 속성값이 left 인지 right 인지와 상관없이 무조건 기본 상태로 되돌리고 싶다면 clear: both 라고 지정하면 된다.
#box1 {
float: left;
#box2 {
float: left;
#box3 {
clear: left;
}<출처>
1. https://learnlayout.com/
2. HTML+CSS+자바스크립트 웹표준의 정석(2021. 고경희 지음)
