해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 8~10의 내용인 position, float, 상속, 캐스캐이딩에 대해 알아보겠습니다.
8. 요소의 위치 정의 (Position)
position 프로퍼티
요소의 위치를 정의합니다.
top
, bottom
, left
, right
와 함께 사용됩니다.
static (기본 위치)
position 프로퍼티의 기본 값이며 좌표 프로퍼티는 같이 사용할 수 없습니다.
위 → 아래, 왼쪽 → 오른쪽 순서에 따라 배치됩니다.
부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치됩니다.
relative (상대 위치)
기본 위치를 기준으로 좌표 프로퍼티를 사용해 위치를 이동시킵니다.
static과의 차이는 좌표 프로퍼티의 동작 여부이며, 이 외는 동일하게 작용됩니다.
.relative-box {
position: relative;
top: 50px;
left: 50px;
}
absolute (절대 위치)
부모 요소 or 가장 가까이 있는 조상 요소를 기준으로 좌표 프로퍼티 만큼 이동합니다. (static
제외)
부모 or 조상 요소가 static인 경우 document body
를 기준으로 위치하게 됩니다. → 부모 요소에 relative 정의할 것
선언 시에 block 레벨 요소의 width는 content에 맞게 변화 되므로 적절한 width를 지정해줘야 하며, 다른 요소가 먼저 위치에 있어도 덮어쓰게 됩니다.
relative
는 무조건 부모를 기준으로 위치하지만, absolute
는 부모에 position이 지정되어 있을 경우에만 위치하게 됩니다.
fixed (고정 위치)
부모 요소와 관계없이 브라우저의 viewport
기준으로 좌표 프로퍼티를 사용해 이동합니다.
스크롤이 되어도 화면에서 사라지지 않고 항상 같은 곳에 고정되어 있습니ㅏㄷ.
또한 block 레벨 요소의 width는 content에 맞게 변화 되므로 적절한 width를 지정해줘야 합니다.
z-index 프로퍼티
큰 숫자값을 지정할 수록 화면 전면에 출력되며 position 프로퍼티가 static 이외인 요소에만 적용됩니다.
overflow 프로퍼티
자식 요소가 부모 요소의 영역을 벗어 났을 때 처리 방법을 정의합니다.
프로퍼티 값은 다음과 같습니다.
visible : 기본 값, 영역을 벗어난 부분 표시
특정 방향으로만 스크롤을 표시하고자 할 때는 overflow-x
or overflow-y
를 사용합니다. → overflow-y: auto;
9. 요소 정렬 (Float)
레이아웃을 구성할 때 block 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법입니다.
flexbox
를 지원하지 않는 브라우저를 고려해야 할 때 사용하기도 합니다.
float 프로퍼티는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것입니다.
프로퍼티 값은 다음과 같습니다.
none
: 기본 값, 요소를 떠 있게 하지 않음
right
: 오른쪽으로 이동시킴
left
: 왼쪽으로 이동시킴
정렬
보통의 block 요소들은 수직으로 정렬됩니다.
float: left;
를 사용하면 왼쪽부터 가로 정렬이 됩니다.
float: right;
를 사용하면 오른쪽부터 가로 정렬이 되므로 순서가 역순이 되는 걸 확인할 수 있습니다.
왼쪽, 오른쪽 가로 정렬만 가능하며 중앙 가로 정렬은 margin: 0 auto;
를 사용해야 합니다.
width
기본 값은 100&로 width를 지정하지 않은 block 요소는 부모 요소의 가로폭을 다 채웁니다.
.d1 {
float: left;
background: red;
}
.d2 {
background: orange;
}
width를 선언하지 않은 block 요소에 float이 선언되면 inline처럼 content에 맞게 최소화되고 떠있게 됩니다.
위의 예시에서 d2에는 float을 선언하지 않았기에 본래의 width(100%)를 유지한 상태에서 d1이 그 위에 위치하게 됩니다.
float 프로퍼티 관련 문제 해결 방법
float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제
해당 프로퍼티를 선언하지 않은 요소에 overflow: hidden;
프로퍼티를 선언하면 됩니다.
float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제
해당 프로퍼티를 선언된 요소에 overflow: hidden;
프로퍼티를 선언하면 됩니다.
이와 더불어 많이 사용되는 방법은 ::after
가장 요소 선택자를 이용하는 방법입니다.
셀렉터:after {
content: "";
display: block;
clear: both;
}
또는 부모 요소에 float 프로퍼티를 선언하면 되지만 자식 요소의 콘텐츠를 표시할 수 있는 만큼 작게 줄어들기에 권장하는 방법은 아닙니다.
display: inline-block;
을 선언하는 방법도 있지만 inline 요소를 연속으로 사용하는 경우 정의하지 않은 공백이 자동으로 지정될 수 있습니다.
10. 스타일의 상속과 적용 우선 순위(Inheritance & Cascading)
상속(Inheritance)
상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것을 의미합니다.
모든 프로퍼티가 상속되는 것은 아니며, W3C가 제공하는 Full property table의 Inherited?
가 yes
인 프로퍼티만 상속됩니다.
상속되지 않는 경우 inherit
키워드를 사용해서 명시적으로 상속받게 할 수 있습니다.
캐스캐이딩(Cascading)
요소는 1개 이상의 CSS 선언에 영향 받을 수 있는데, 이 때의 충돌을 피하기 위해서 CSS 적용 우선순위가 필요합니다.
이를 캐스캐이딩이라고 하며 다음과 같은 규칙이 있습니다.
중요도
: CSS가 어디에 선언 되었는지에 따라서 우선순위 달라짐
명시도
: 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위 높아짐
선언 순서
: 선언된 순서에 따라 우선순위 적용 → 나중에 선언된 게 우선 적용됨
중요도
<head>
내의style
요소<head>
내의style
요소 내의@import
문<link>
로 연결된 CSS 파일<link>
로 연결된 CSS 파일 내의@import
문- 브라우저 디폴트 스타일시트
명시도
!important
> 인라인 스타일
> 아이디
선택자 > 클래스/어트리뷰트/가상
선택자 > 태그
선택자 > 전체
선택자 > 상위 요소에 의해 상속된 속성
선언 순서
p { color: blue; }
p { color: red; }
.red { color: red; }
.blue { color: blue; }
<p>front-end</p>
<p class="blue red">back-end</p>
선언 순서에 따라 위의 예시에서 “front-end”는 red색이 지정되고, “back-end”에는 blue색이 지정됩니다.
여기까지 position, float, 상속, 캐스캐이딩에 대해 알아보았습니다.
다음 글은 벤더 프리픽스, shadow, gradient, transition에 대해 설명해보겠습니다.