font-size
text/css
)로 설정stylesheet
로 값을 설정해야 된다.하위 선택자
특정 요소의 하위에 있는 요소를 선택
div block //이라고 하면 div 하위에 있는 block 요소를 선택한다.
<div>
<block>
</block>
</div>
//------------------------------
//block 사이에 다른 요소가 더 있어도 선택이 된다.
<div>
<aside>
<block>...</block>
</aside>
</div>
자식 선택자
자식 선택자는 특정 요소의 자식 요소를 선택한다.
div > block
/*div 요소의 자식 요소 중 block을 선택한다. 주의할 점은 한단계 아래에 있는
요소만 선택한다.(직계 자식만 선택한다.)*/
//--------------------------------------
// *이런 구조로 되면 block을 선택하지 않는다.*
<div>
<aside>
<block>...</block>
</aside>
</div>
text-align
속성을 사용할 수 있다.box-sizing
의 값이 기본적으로 content-box
로 지정이 되있기 때문이다.이런 불편함을 계속 감수하며 써야할까?
A: 답은 box-sizing의 값을 border-box
로 변경하면 된다.
border-box의 width는 "패딩과 보더의 두께를 포함한 값"이다.
미리 선언한 width의 값에 padding을 주더라도 자동으로 실제 컨텐츠 부분의 width값이 줄어들면서 패딩이 안쪽으로 파고들어 실제 웹에서 보여지는 값이 내가 선언한 width값이랑 동일하게 유지된다.
position
속성을 사용하면 요소의 위치를 지정할 수 있다.
static
: 기본값, 다른 태그와의 관계에 의해 자동으로 배치relative
: 절대 좌표와 함께 위치를 지정해 줄 수 있다. left,top,right,bottom 의 요소를 사용 가능absolute
: 둥둥 떠다니는 것으로 폭을 설정할 수 있고 둥둥 떠다닌다.block
태그의 특징이 사라지게 된다.z-index : 요소의 수직 위치를 정하는 속성
position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 겹치는 요소들의 둥둥 떠 다니는 앞 뒷 면을 z-index로 정할 수 있다. 값은 숫자이며, 숫자가 클 수록 앞면 작을수록 뒷면으로 간다.
visibility 속성 : 요소를 숨기거나 표시할 수 있다.
visibililty
속성은 태그가 보이는(가시성)을 결정한다.visible
: 보임,hidden
숨김(자신의 영역은 계속 차지)collapse
: 겹치도록 지정(테이블의 행과 열 요소만 지정 가능하며, 그 요소를 지정하면 hidden으로 해석)inherit
: 부모 요소의 값을 상속float 프로퍼티는 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 프로퍼티이다.
float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게)한다. 여기서 떠 있다는 의미는 요소가 원래의 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 뜻한다.
float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 absolute
를 사용하면 안된다.
정렬
float 프로퍼티를 사용하지 않는 블록 요소들은 수직으로 정렬된다.
float 프로퍼티는 좌측,우측 가로 정렬만 할 수 있다. 중앙 가로 정렬은 위에 그림처럼 마진 값으로 정렬한다.
width
width 프로퍼티의 기본값은 100%이므로 width 프로퍼티값을 지정하지 않은 block 요소는 부모 요소의 가로폭을 가득 채운다.
width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 선언되면 width
가 inline
요소와 같이 content에 맞게 "최소화"되고 "다음 요소" 위에 떠 있게 된다.
붙는 것에 대한 문제점 해결
(1) 문제를 해결하는 가장 쉬운 방법은 float 프로퍼티가 선언된 자식 요소의 부모에게 overflow: hidden
프로퍼티를 선언하는 것이다.
(2) overflow: hidden
과 함게 많이 사용되는 방법은 ::after 가상 요소 선택자를 이용하는 것이다.
부모 요소에 clearfix 클래스만 추가해서 하는 것이 깔끔하다.
.clearfix:after {
content : "";
display: block;
clear: both;
}
참조 : "https://poiemaweb.com"