TIL | HTML - LayOut을 어떻게 구상해야할지 고민인 당신을 위해

송치헌·2021년 8월 3일

TIL | Wecode - HTML/CSS/PYTHON

목록 보기

4/12

relative : relative 자체로는 어떠한 움직임이 없다. 'top', 'right', 'left', 'bottom' property로 값을 주게 되면 원래 위치에서 그 값만큼 움직이게 된다.

.relative {
  position: relative;
}
.top-20 {
  top: -20px;
  left: 30px;
}

제일 아래 있는 사각형은 원래 위치에서 왼쪽으로 부터 30px, 위에서 부터 -20px 만큼 이동했다.

absolute : 말 그대로 '절대적'이다. 특정 부모를 기준으로 절대적인 위치로 움직인다. 부모 태그 중 position이 relative, absolute, fixed 중 하나라도 있으면 그 부모 태그를 기준으로 절대적으로 움직인다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

p태그는 원래 block 요소이기 때문에 한칸을 전부 차지해야 한다. 그 이유는 position을 absolute로 설정했기 때문이다. absolute로 설정하면 내용의 크기만큼만 너비가 설정된다.

fixed : 고정된 위치. 보통 웹 페이지에서 상단 메뉴바나 상단 로고를 고정시키고 싶을 때 사용한다. fixed로 설정하면 스크롤을 위, 아래로 내려도 설정한 위치에 딱 고정된다. 예를 들어 top: 30px 로 설정하면, 모니터 상단에서 30px만큼 떨어진 곳에서 고정된다.

2. inline, inline-block, block

inline : content(내용)의 크기만큼만 너비가 설정된다. 다음 요소에 대해 줄바꿈이 없다. 대표적인 예로 span태그가 있다. span태그의 content의 크기만큼만 가로 너비가 설정되고 따로 CSS로 width, height, margin 등 의 크기를 바꿀 수 없다.
inline-block : 얘는 그래도 inline보다는 낫다. inline이긴 하지만 block처럼 크기를 바꾸는 것이 더 자유롭다.
block : 내용이 얼마나 길든 짧든 부모 태그의 한 칸을 차지한다. 즉, 부모 태그 너비의 100%만큼의 크기를 가지게 된다. width, height, margin의 크기를 설정할 수 있다. 대표적으로 div, img, p 태그 등이 있다.

참고로 위 속성값들은 display 속성의 값이고 span의 디폴트가 inline이라는 것이지 span을 inline-block이나 block 값으로 변경하지 못하는건 아니다.

float는 사진의 border 테두리를 따라 글씨를 쓸 때 유용한 속성이다.

출처 : www.bilgisayarkutuphanesi.com

위 사진은 이미지 요소의 float 속성값을 none, left, right로 설정했을 때의 각각의 모습이다.
float를 잘 이용하면 페이지 전체의 레이아웃(Layout)을 잡을 때 좋다.

그러나 float를 쓰게 되면 부모가 자식의 높이를 알지 못해서 부모를 벗어나 버리는 경우가 있다. 이를 해결하기 위해 2가지 방법이 있다.

overflow: "hidden";
- float가 적용된 요소의 부모 요소에게 overflow속성을 주고 속성값을 hidden으로 설정하면 된다.
- 그러나 이 방법의 문제점은 부모 요소에 새로운 자식 요소(div)를 만들어 줄 때 그 자식이 부모의 크기보다 크면 전체적인 내용이 안나오고 잘려서 나올 수가 있다.
- 추가할 요소가 없을 경우에 사용하기 좋다.
clear: "both"
- float가 적용된 요소의 형제 요소를 하나 만들어서 그 요소에 clear속성을 주면 된다.
- clear속성은 float를 해제시키기 위한 속성이다. clear: "left"는 float: "left"가 설정된 요소를 해제시키고 clear: "right"는 float: "right"가 설정된 요소를 해제시킨다. 그리고 clear: "both"는 둘 다 해제시켜 준다.
- 그러나 이 방법은 쓸데 없는 div 요소를 새로 만들어야 한다는 단점이 있다.
- 따라서 float가 적용된 요소의 부모 요소의 가상 요소를 만들어서 그 가상 요소에 clear속성을 적용해 주면 된다. 참고로 이 방법으로 적용하게 될 때 주의할 점은 가상 요소는 내용이 필수이기 때문에 꼭 content: ""; 를 설정해준 뒤 clear: "both"를 해주는 것이 좋다.