[CSS] 기초 공부 3

조합 선택자

특정 요소 하위에 있는 요소를 선택한다.

• 자식 조합 선택자 : > 기호 사용
• 자손 조합 선택자 : 띄어쓰기 사

<div>
	<h1>
    	<span>
        	뱃지
        </span>
    </h1>
</div>

 

이 경우

h1 > span {
	...
}

 

이와 같이 사용하면 된다. 안에 코드를 색상을 red로 지정한다면 이와 <h1> <span> 이런 경우가 나온다면 모두 red로 색이 지정된다.

---

상태 선택자

: (콜론) 기호를 사용한다. 요소가 특정 상태가 되었을 때만 선택된다.

• 반응 선택자 : hover(마우스 커서가 위에), active(활성화된), visitied(방문한 링크) 등
• 상태 선택자 : focus(입력, 버튼에 포커스), enabled(사용가능한), disable(사용불가능한) 

어느 사이트를 들어갔다 나오면 해당 사이트가 보라색으로 변해있는 걸 볼 수 있는데 이런걸 visitied라고 생각하면 된다. 그리고 마우스 커서가 위에 올라가면 기본 상태보다 다르게 변경되는데 이게  hover이다.

---

특성 선택자

요소에 부여된 특성의 존재 여부나 그 값에 따라 선택. 대괄호를 사용해서 특성을 지정함.

• a[href] : href 속성이 지정된 요소
• a[href = https://www.naver.com] : href 속성이 네이버 사이트 주소인 경우의 요소

 

위에 나온 세개의 선택자로 웬만한 경우 모두 사용이 가능하다.

---

여백 관련 속성

여백 관련 속성으로는 Margin과 Padding이 있다.

CSS 여백 관련 속성

 

테두리(외곽선)가 있다고 가정했을 때 Padding이 테두리 안쪽이라고 생각하면 되고 Margin이 테두리 바깥쪽이라고 생각하면 된다.

• padding 혹은 margin : 40px; → 상하좌우 여백
• padding 혹은 margin : 20px 40ox; → 상하, 좌우 여백
• padding 혹은 margin : 15px 5px 15px 5px; → 상, 우, 하, 좌 여백 (시계방향)
• margin : {특정숫자} auto; → 좌우 여백은 중앙에 맞게 알아서 적용

 

Width + Padding : 블록 요소가 실제 사람 눈에 표현되는 너비

Height + Padding : 블록 요소가 실제 사람 눈에 표현되는 높이

---

배경 속성, background

• background-color : 배경 색
• background-image : 배경 이미지
• background-repeat : 배경 이미지 반복 여부
• background-position : 배경 이미지 위치

---

요소들의 위치 규칙

• display : 해당 요소가 어떻게 보여질지 (block, inline-block, inline 등)
• float : 화면 내용들을 무시하고 좌측이나 우측으로 위치 조정 (left, right)
• position : 위치 값을 직접 정할 수 있는 규칙 적용 (absolute, relative, fixed)

---

display

• none : 화면에 보이지 않게 한다.
• block : 블록 요소 형태로 표현한다. 내용과 관계엾이 너비를 전부 차지한다.
• inline : 인라인 요소 형태로 표현한다. 내용에 따라 너비가 결정된다.
• inline-block : 블록 요소로 표현하되 양 옆에 다른 요소가 위치할 수 있다.
• flex : flex 레이아웃을 사용할 수 있다.
• grid : grid 레이아웃을 사용할 수 있다.

---

position

position 속성은 left, top, right, bottom 속성과 같이 사용해서 특정 요소의 위치를 직접 지정한다.

• absolute : 문서 내 절대 좌표로 요소를 위치시킨다. (ex_ left : 10px; top : 0px;)
• relative : 바로 앞의 요소에 대해 얼마나 떨어져 위치 할지를 지정한다.
• fixed : 화면 스크롤과 관계 없이 위치시킨다.
• static(기본값) : 아무 것도 지정하지 않는 것과 동일하다.