text-align (수평 정렬)
-
인라인 태그에 text-align을 적용하면 아무 효과 없음 내용물 크기 = 영역 크기라 움직일 공간이 없기 때문 인라인 태그를 정렬하려면 부모 블럭 태그에 text-align을 적용해야 함
-
블럭 태그는 너비가 100%라 내용물 수평 정렬 가능 단, width를 명시적으로 지정하면 블럭 태그 자체는 부모에 의한 수평 정렬 불가
-
블럭 태그 내용물 정렬 → text-align 사용
-
블럭 태그 자체 정렬 → margin-left: auto / margin-right: auto 사용
visibility vs display
-
visibility: hidden - 요소가 사라져도 원래 차지하던 영역은 그대로 남음
-
display: none - 요소가 사라지면 원래 차지하던 영역도 함께 사라짐
display 속성값
-
none - 요소와 영역 모두 제거
-
block - 블럭 태그처럼 출력
-
inline - 인라인 태그처럼 출력
-
inline-block - 인라인처럼 흐르되 width/height 지정 가능
opacity (불투명도)
-
rgba() - 특정 색상의 불투명도만 조절
-
opacity - 요소 전체(텍스트, 배경, 자식 요소 포함)의 불투명도 조절
-
값의 범위: 0(완전 투명) ~ 1(완전 불투명)
float
요소를 일반적인 문서 흐름(normal flow)에서 벗어나 컨테이너의 왼쪽 또는 오른쪽 끝에 배치하는 속성
-
float: left - 해당 라인의 맨 왼쪽 끝에 출력
-
float: right - 해당 라인의 맨 오른쪽 끝에 출력
레이아웃 작업 방식 변화
CSS1/CSS2 → table(표) 기반 레이아웃
CSS2 → float 기반 레이아웃
CSS3 → flex, grid 기반 레이아웃 (현재 권장)요소간의 공백 제거하기
1. 소스상의 공백 문자를 직접 제거 > 비추천(가독성 하락)
2. font-size
3. float