CSS 요소 다루기

11. 요소의 유형 <display>

display는 요소의 인라인, 블록 속성을 바꿔줌

• inline: 요소를 인라인 요소로 바꿈
• block: 요소를 블록 요소로 바꿈
• none: 요소가 코드에만 존재하고 실제로는 없는 것으로 처리, 화면에 나타나지 않음
• inline-block: inline 요소는 콘텐츠 크기만큼만 공간을 차지하므로 width나 height를 설정해도 안먹힘, inline-block을 설정하면 자기가 필요한 만큼의 공간만 차지하면서도 width나 height를 설정할 수 있음

12. 문서의 흐름 <float>

float을 사용하면 문서의 흐름에서 벗어나 상위 요소의 오른쪽이나 왼쪽에 붙는 형태로 배치됨

float의 역효과 방지

float을 사용하면 float을 사용하지 않은 요소들에게도 영향을 미침, 이를 방지하기 위해 float을 사용하지 않는 요소에 clear를 사용

left: 왼쪽 float 무시, right: 오른쪽 float 무시,
both: 양쪽 float 무시

13. 위치 지정하기 <position>

position은 문서 상에 요소를 배치하는 방법을 정의하고
top, right, bottom, left 값으로 위치를 결정

position의 유형

• static: 기본값, 문서에서의 원래 위치
• relative: 원래 위치를 기준으로 요소를 이동시킴
• absolute: position이 지정된 상위 요소를 기준으로 요소를 이동시킴, 기준점이 없으면 화면 기준, 이때 요소는 문서의 흐름에서 제외
• fixed: 화면을 기준으로 요소의 위치를 고정

14. 겹치거나 넘치는 요소 다루기 <z-index>

z-index

요소를 이동시켰을 때 요소끼리 겹치는 경우 z-index 사용
요소의 쌓임 순서(stack order)를 정의
정수 값으로 쌓임 맥락(stacking context)의 레벨을 정의함

• stacking -> 먼저 쌓인게(index가 낮은 게) 밑으로
• position이 정해진 요소에 대해서만 사용해야함

overflow

콘텐츠의 양이 많아 요소의 영역 밖으로 벗어나 넘치는 경우 overflow를 사용

• visible: 기본값, 그대로 보여줌
• hidden: 넘친 부분을 잘라내 보이지 않게 함
• scroll: 넘친 부분을 안보이게 하고 스크롤을 만들어 넘친 부분도 볼 수 있게 함
• auto: 웹 브라우저 설정 값을 다름, 보통 scroll

15. 선택자 더 알아보기

선택자	의미	사용기호
속성 선택자	특정 속성을 명시하여 요소 선택	[속성명]
하위 요소 선택자	상위 요소에 포함된 하위 요소 중 모두 선택	공백
자식 요소 선택자	상위 요소의 바로 한 단계 아래 하위 요소 모두 선택	>
인접 형제 선택자	형제 요소 중 자신 다음에 있는 첫 번째 형제 요소 선택	+
형제 요소 선택자	자신 다음에 있는 모든 형제 요소 선택	~

기호와 함께 사용하는 속성 선택자

• * : 값의 포함 여부
• ^ : 값의 시작 여부
• $ : 값의 끝 여부

예시)

/* width라는 속성에 2라는 값이 포함되어 있는 요소 선택*/
[width *= "2"]{
	border: 5px dashed red;
}

/* width에 1로 시작하는 값을 가지고 있는 요소 선택 */
[width ^= "1"]{
	border: 5px dashed red;
}

/* width에 0으로 끝나는 값을 가지고 있는 요소 선택 */
[width $= "0"]{
	border: 5px dashed red;
}

형제 선택자는 자기 자신 다음에 있는 형제들에게만 적용됨

16. 의사요소와 의사클래스

의사 클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미

예시)

/* h1 요소에 마우스가 올라오면 글자를 빨간색으로 변경 */
h1:hover{
	color: red;
}

nth-child()

형제 사이에서의 순서에 따라 요소를 선택

• li:nth-child(3) -> li의 3번째 형제
• li:nth-child(n) -> li의 모든 형제
• li:nth-child(2n) -> li의 짝수 번째 형제
• li:nth-child(2n-1) -> li의 홀수 번째 형제

의사 요소

의사요소는 선택자에 추가하는 키워드로, 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음

예시)

/* li 요소의 첫 번째 글자만 크기를 20px로 바꿈 */
li::first-letter{
	font-size: 20px;
}

자주 쓰이는 의사 요소들

• after: 요소의 뒤에 의사 요소를 생성 및 추가
• before: 요소의 앞에 의사 요소를 생성 및 추가
• marker: 목록 기호의 스타일 적용

예시)

/* a 요소 뒤에 "보기"라는 텍스트를 추가하고 색깔을 노란색으로 설정 */
a::after{
	content: "보기";
    color: yellow;
}