CSS

CSS 화면 표시 속성

CSS로 요소가 어떤 모습을 보일지 결정

display:

• block

기존에 블럭 요소가 아닌 요소를 블럭 속성을 갖도록 함

span {
	display: block;
}

기존에 인라인 요소가 아닌 요소를 인라인 속성을 갖도록 함

• inline

div {
display: inline;
}

• inline-block

인라인요소에 높이와 상/하 패딩, 마진값을 줄 때 사용

span { display: inline-block; }

• none

해당 요소와 그 하위 요소들이 보이지 않고 공간도 차지하지 않음

Visibility

• hidden

화면에서 차지하던 공간은 그대로인체 투명해짐

div {
	visibility: hidden;
}

Overflow

화면 넘침 표시 방법

div {
	overflow: hidden;
	overflow: visible;
	overflow: auto;
	overflow: scroll;
}

CSS float속성

• float를 사용하면 해당 요소를 문서의 흐름과 별개로 취급하여, 왼쪽이나 오른쪽으로 띄워줌
• 자신이 있던 위치에서 지정된 위치로 float되고 나머지는 다시 재정렬
• 부모 엘리먼트보다 가로가 길 경우 한 칸 아래에 표시됨
• block요소가 있다면 그 요소가 가로 전체를 차지하기 때문에 한 칸 아래에 표시

clear 속성

float속성을 해제, 왼쪽의 float속성을 해제한다면 왼쪽에 float를 만나지 않게 새로운 왼쪽을 차지하려고 동작한다.

p {
	clear: both;
	clear: left;
	clear: right;
}

float 레이아웃

CSS로 레이아웃을 구현할 때 float속성을 자주 사용함

가상선택자

.float-frame::after { content: ‘’; clear: both; display: block; height: 0; }

block은 한 줄을 끝까지 차지하기 때문에 clear

CSS 포지션

static relative fixed absolute

Sass (다시 이해)