veamcamp HTML+CSS 재미있게 입문하기 4주차

이제 좀 눈에 들어오는 것 같다.

4주차의 주요 내용은 float와 overflow.
inline-block의 대안(?) float는 inline-block에서 생기는 의도치 않은 spacing을 컨트롤할 수 있게 해준다. 그리고 overflow는 float의 부작용을 컨트롤 해준다. 물론 float와 overflow가 요소의 가로 배치를 위해 만들어진 기능은 아니다.

컨텐츠의 가로 배치를 고려할 때 선택사항 세가지.
1. inline-block : inline tag 특성상 생기는 띄어쓰기 공백 문제
2. float + overflow
3. grid : 브라우저 하위 호환성 문제
→ float + overflow !

몇 가지 속성에 대해..

> line-height : p 태그 내 컨텐츠에서 한 행이 갖는 높이를 설정한다. '1'이라 하면 1em과 같은 효과로 지정된 font size만큼의 행 높이가 설정된다. 기본적으로 웹사이트 내 font size는 16px라 한다. ! 태그가 차지하는 높이가 200px라 하고, line-height가 200px면 세로축 가운데 정렬과 같은 효과를 만들어낼 수 있다. 다만 영어의 경우 y, g와 같이 꼬랑지가 붙는 경우가 있기 때문에 완전히 가운데 정렬처럼 보이진 않는다.
> letter-spacing : 글자 사이의 간격
> vertical-align : 인라인 태그에 대한 수직 정렬을 제공한다. 기본 값은 baseline. 주의할점은 middle값이 line-height의 정가운데를 의미하진 않는다는 것이다. 실제론 서체의 영어 소문자 기준 가운데를 가리킨다. ! inline-block으로 나열된 상황에서 요소의 수직축 정렬이 상하로 뒤틀어지는 현상이 생길 수 있다. 이런 경우엔 vertical-align을 top으로 조정해주면 다시 원하는대로 정렬이 가능하다. vertical-align 기본값이 baseline이라 발생하는 현상으로 자세한 내용은 생략..
> text-indent: 들여쓰기 속성으로 -9999px와 같이 매우 작거나 매우 큰 값을 지정하면 text를 사라지게 하는 표현을 할 수 있다. SEO를 위해 이미지 a태그에 text를 넣어주고 text를 날리는 식으로 실무에서 쓰이는 듯 함.

em?

부모 태그에 font size가 50px라 되어있고, 자식 태그에서 font size를 0.5em라 되어있다면 자식 태그의 font size는 50px * 0.5 = 25px가 된다.
em은 font size에만 적용되는 개념이 아니고 일반적인 단위의 개념이다. 따라서 margin과 같은 속성에 em값을 지정 해줄 수 있음.

float

float는 컨텐츠를 화면에 띄우는 역할로, height를 갖지 않는 특징이 있다. 원래는 이미지와 텍스트 컨텐츠를 어우러지게 하는 목적으로 고안된 기능이지만 이를 응용해 요소들을 가로배치 하는데에도 응용된다. inline-block을 활용해 가로배치할 때 생겼던 띄어쓰기 여백을 없앨 수 있다.
float 사용에서 주의할점은 float 사용이 끝나면 해제(clear) 해주어야 한다. 그렇지 않으면 float가 선언된 이후의 모든 요소에 float 속성이 전달된다. float: left는 clear: left, float: right는 clear: right로 해제하는데, 그냥 clear: both로 하는게 일반적.

overflow

원래 목적은 문서 내 새로운 영역을 생성(격리)하는 것이지만 overflow가 갖는 성질을 이용한 각종 trick이 여러 곳에 쓰인다. 대표적으로 float와 같이 쓰거나 마진 겹침 현상을 해소해주기 위해 쓰인다.
overflow는 격리될 때 overflow가 품는 자식 요소의 모든 시각적인 표시 범위를 떠안고 격리되어진다. 앞서 적혀있듯이 float된 요소엔 따로 height 값이 없기 때문에 float의 부모도 마찬가지로 height가 적절히 지정되지 않게 된다. 이러한 부분에서 오는 여러 문제가 생길 수 있는데 float의 부모에 overflow: hidden; 속성을 줌으로 이러한 문제를 해결할 수 있다. overflow: hidden;은 부모 요소에 대해 자식 요소가 흘러 넘치면 그 내용을 숨기라는 의미지만 부모 요소에 height가 없기 때문에 부모는 어쩔 수 없이 자식 요소를 감싸야 하는 책임이 주어져 float된 만큼의 height 값을 갖게 되는 것이다. (직접 해보면 이해가 빠름.)
overflow: hidden; → float가 적용된 부모에게 overflow: hidden을 지정하면 문제 해결! 글로 적긴 힘듦..
overflow: scroll; → 부모 요소에 대해 자식 요소가 흘러 넘치면 스크롤을 붙여라. (height가 지정될 때만 동작)

이미지-스프라이팅

브라우저 렌더링 속도를 끌어올리기 위한 trick. 페이지에 담기는 이미지를 하나의 통-이미지로 만들어 각각의 요소에 통-이미지의 특정 영역을 지정해 주는 방식. 위 그림의 이미지 링크가 스프라이팅 기법으로 되어있다.
.icon a.view { background-position: left top; }
.icon a.like { background-position: center top; }
.icon a.share { background-position: right top; }

애니메이션

transition 속성으로 단순한 애니메이션 기능을 넣을 수 있다. 아래는 예시. li의 a태그 기본 상태에서 hover될 때 바뀌는 변화를 0.5초 이내에 브라우저가 부드럽게 표현해준다. 익스플로러 하위 버전에선 동작하지 않는다고 함.

.sidebar .menu li a {
    display: block;
    padding: 10px;
    background-color: #222;
    border-left: 5px solid #333;
    transition: all 0.5s;
}

.sidebar .menu li a:hover {
    border-color: dodgerblue;
    color: dodgerblue;
    background-color: #111;
    padding-left: 20px;
}