CSS 공부 기록 핵심 정리 #2

flexbox

• flexbos란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
• flexbox를 1차원 모델이라 부르는 이유는,
• 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성때문
•  
• flex 컨테이너라고도 함 (요소들을 포함하기 때문)
• flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 함.
• "주축(main-axis)" = 가로 / "교차축(croos-axis)" = 세로

 

flex-direction

• flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정
• row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일
• row-reverse : 주축은 행이고, 방향은 콘텐츠의 방향과 반대
• column : 주축은 열이고 방향은 콘텐츠의 방향과 동일
• column-reverse : 주축은 열이고 방향은 콘텐츠의 방향과 반대

 

 

3줄요약

1. flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
2. 행 또는 열이 주축이 되어 요소의 정렬 방향을 결정한다.
3. flex-direction 속성은 요소를 배치할 때 사용할 주축 및 방향을 지정

 

---

flexbox #2

• 주축 배치 방법 : justify-content :  center / flex-start / flex-end / space-around / space-between
• 교차축 배치 방법 : align-items : 위와같음.
• 교차축 개별요소 배치 방법 : align-self    >> div class에 self 개별 self 넣어주고 설정
• 줄 바꿈 여부 : flex-wrap / flex-wrap-reverse

 

 

4줄요약

1. justify-content는 flexbox 주축에서의 요소 배치 방법 정의
2. align-items는 flexbox 교차축에서의 요소 배치 방법 정의
3. align-self는 flexbox 내 개별 요소의 교차축 배치 방법을 정의
4. flex-wrap은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향 정의

 

---

 

선택자 #2

 

 

선택자의 종류

• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소

 

 

특성 선택자(속성 선택자)

• 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택함.
• 기호를 추가하여 요소를 선택하는 방식을 다양화 할 수 있음.

 

[class]{

   background-color: tomato;

}

→ 클래스 속성을 가지고 있는 요소를 선택하기

 

 

[class="item"]{

   background-color: tomato;

}

→ 클래스가 "item"인 요소를 선택하기

 

 

[class *= "it"]{

     color: white;

}

→ 클래스 값에 "it"가 포함되는 요소를 선택

 

 

 

[class ^= "it"]{

     color: white;

}

→ 클래스 값이 "it"로 시작하는 요소를 선택하기

 

 

[class $= "it"]{

    color: white;

}

→ 클래스 값이 "it"로 끝나는 요소를 선택하기

 

 

 

 

 

 

결합 선택자

• 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택
• 자손 결합자 / 형제 결합자

 

1. 자손 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있음.

 

 

div p{ color: white; }

→ div 요소 안에 위치하는 모든 p 요소를 선택하기

 

 

div > p{ color: white; }

→ div 요소의 바로 아래에 위치하는 모든 p 요소를 선택하기

 

 

 

2. 형제 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있음.

 

 

h1 ~ p{ color: red; }

→ h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기

 

h1 + p{ color: red; }

→ h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기

 

 

 

4줄요약

• 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소 선택
• 특성 선택자는 값의 포함 여부, 포함 위치 등을 통해서도 선택할 수 있음.
• 결합 선택자는 여러 선택자를 결합하여 요소를 선택
• 자손 또는 형제 중에서 특정 조건을 만족하는 요소를 선택할 수 있음.

 

 

 

---

 

의사 클래스(가상클래스)

• 선택자에 추가하는 키워드
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
• hover : 마우스 포인터가 요소에 올라가 있다.
• active : 사용자가 요소를 활성화 했다 ( 예를 들면, 마우스로 누르기와 같은)
• focus : 요소가 포커스를 받고 있다.
• disabled : 비활성 상태의 요소
• nth-child () : 형제 사이에서의 순서에 따라 요소 선택

 

 

 

 

3줄 요약

• 의사클래스는 선택자에 추가하는 키워드
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
• 콘텐츠 자체적인 내용 뿐 아니라 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어 유용함!

 

---

 

의사요소

• pseudo-elements
• 선택자에 추가하는 키워드   p::
• 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 잇음.
• after : 요소의 앞에 의사 요소를 생성 및 추가
• before : 요소의 뒤에 의사 요소를 생성 및 추가
• first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용
• marker : 목록 기호의 스타일을 적용
• placeholder : 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용

 

 

 

3줄요약

의사요소는 선택자에 추가하는 키워드

의사요소는 요소의 특정 부분에만 스타일을 적용하고자 할 때 사용

HTML 문서가 포함하지 않는 개체(목록 구분점, 플레이스홀더 등)를 선택할 수 있어 무척 유용함!

 

 

---

 

상속 그리고 공용 키워드

 

 

상속(Inheritance)

하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다!

 

 

 

공용 키워드

• 모든 CSS 속성에 사용 가능한 키워드
• 때문에 이를 "전역 값" 이라 표현하기도 함
• inherit : 상위 요소로부터 해당 속성의 값을 받아 사용
• initial : (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용
• unset : 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 intial처럼 적용!

 

 

 

 

6줄 요약

1. 상속은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것
2. 상속 가능 여부는 속성마다 다름
3. 모든 속성에 대해 사용 가능한 키워드 속성값이 있다
4. (inherit, initial, unset)

 

---

 

z-index (가로와 세로만 있는게 X).

• 요소의 쌓임 선서(stack order)를 정의할 수 있음
• 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용
• 위치 지정 요소에 대해 적용할 수 있는 속성
• 위치 지정 요소란? = position 속성이 정의되어 있는 요소
• 동일한 위치에 요소들이 배치되면, 요소들은 z축에 쌓이게 됨!
• z-index의 기본값은 auto이다.
• auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태.
•  

 

 

3줄요약

z-index는 요소가 쌓이는 순서를 결정할 수 있음

기본값은 auto이며, 정수값으로 정의

정수값은 쌓임 맥락에서의 레벨을 의미하며, 값이 클수록 전면에 표시