[정리] CSS 요약

적다보니 양이 생각보다 많아져서 2~3파트로 나눠서 올리기로 했다.

---

 

css

 

CSS (Cascading Style Sheets)

Cascading Style Sheets(CSS)는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.

쉽게 말해 HTML은 문서의 내부적인 골격을 말한다면 css는 그것을 효과적으로 표현하기 위해 꾸미는 스타일을 의미한다.

[스타일을 지정하기 위한 언어]

 

 

css 구문 - 용어

 

• 속성(property) : 어떤 스타일 기능을 변경할지 결정한다.
• 값 (value) : 어떻게 스타일 기능을 변경할지 결정한다.

 

CSS 선택자 ( selector )

• 요소 선택자
  • HTML 태그를 직접 선택

 

• 클래스 (class) 선택자
  • 마침표( . ) 문자로 시작하며, 해당 클래스가 적용된 항목을 선택

 

• 아이디( id ) 선택자
  • # 문자로 시작하며, 해당 아이디가 적용된 항목을 선택
  • 일반적으로 하나의 문서에 1번만 사용, 여러 번 사용해도 동작하지만, 단일 id를 사용하는 것을 권장한다.

 

 

 

CSS 적용 우선 순위 ( cascading order )

[요약]

! important > 인라인 > id > class, 속성, pseudo-class > 요소, pseudo-element > css 파일 로딩 순서

 

 

 

CSS의 크기 단위

• px ( 픽셀 )
  • 모니터 해상도의 한 화소인 '픽셀' 기준
  • 픽셀의 크기는 변하지 않기 때문에 고정적인 단위이다.

 

• %
  • 백분율 단위
  • 가변적인 레이아웃에서 자주 사용된다.

 

• em
  • (바로 위, 부모 요소에 대한) 상속의 영향을 받는다.
  • 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가진다.

 

• rem
  • (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않는다.
  • 최상위 요소(html) 사이즈를 기준으로 배수 단위를 가진다.
  • 최상의 요소(html)의 사이즈는 기본 상태 16px 이므로 0.5rem의 경우 8px를 의미한다.

 

• viewport
  • 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역 ( 디바이스 화면 )
  • 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정된다.
  • vw, vh, vmin, vmax

 

 

결합자 (combinators)

# 자손 결합자
- selector A 하위의 "모든" selector B 요소
div span {
    color: red;
}

 

# 자식 결합자
- selector A 바로 아래의 selector B 요소

div > span {
    color: red;
}

 

# 일반 형제 결합자
- selector A의 형제 요소 중 뒤에 위치하는 selector B 요소를 모두 선택

p ~ span {
    color: red;
}

 

# 인접 형제 결합자
- selector A의 형제 요소 중 바로 뒤에 위치하는 selector B 요소를 선택

p + span {
    color: red;
}

 

Box model

css 원칙에 의해, 모든 요소는 네모(박스 모델)이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다.

• 하나의 박스는 네 부분 (영역)으로 이루어진다.
  • content
  • padding
  • border
  • margin

 

 

 + margin과 padding은 shorthand로 표현이 가능하다

 

.margin-1: 20px; /* 상하좌우 모두 20px */
.margin-2: 10px 20px; /* 상하 10px, 좌우 20px */
.margin-2: 10px 20px 30px; /* 상 10px, 좌우 20px, 하 30px */
.margin-4: 10px 20px 0 15px; /* 상부터 시계 방향으로 상우하좌 순 */

 

display

• display: block
  • 줄 바꿈이 일어나는 요소
  • 화면 크기 전체의 가로 폭을 차지한다.
  • 블록 레벨 요소 안에 인라인 레벨 요소가 들어갈 수 있다.

 

• display: inline
  • 줄 바꿈이 일어나지 않는 행의 일부 요소
  • content 너비만큼 가로 폭을 차지한다.
  • width, height, margin-top, margin-bottom을 지정할 수 없다.
  • 상하 여백은 line-height로 지정한다.

 

• display: none
  • none의 경우 요소가 존재하지 않는다

 

• visibility="hidden"
  • display요소는 아니지만 비슷한 용도로 사용된다. 
  • hidden은 눈에만 보이지 않고 공간은 확보되어 있다.

 

 

CSS Position

• 문서 상에서 요소의 위치를 지정한다.

 

• static: 모든 태그의 기본 값을 의미한다.
  • 일반적인 요소의 배치 순서에 따른다 (좌측 상단)
  • 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치된다.

 

• relative: 상대 위치
  • 자기 자신의 static 위치를 기준으로 이동한다. (normal flow 유지)
  • 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

 

• absolute: 절대 위치
  • 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않는다.
  • static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동한다.

 

• fixed: 고정 위치
  • 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않는다.
  • 부모 요소와 관계없이 viewport를 기준으로 이동한다.

 

 

CSS Layout

float는 넘어가고 flexbox와 grid만 적도록 하겠다. (flexbox가 float의 상위 호환)

 

• CSS Flexible Box Layout
  행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델

 

flexbox의 메인 축과 교차 축, flex-direction을 통해 주축을 바꿀 수 있다.

 

Flex 속성

• 배치 설정
  • flex-direction : container 안의 item들의 나열되는 방향
  • flex-wrap : container안의 item들의 크기가 container의 크기보다 클 때 줄 넘김
  • flex-flow : 위 두 항목의 shorthand 두 설정값을 차례로 작성한다.

 

•  공간 나누기
  • justify-content (main axis) : 메인 축의 정렬을 제어한다.
  • align-content (cross axis) : wrap 속성에 의해 여러줄이 발생한 경우 교차 축의 정렬을 제어한다.

 

• 정렬
  • align-items (모든 아이템을 cross axis 기준으로) : 교차축의 정렬을 제어한다.
  • align-self : 개별 아이템의 정렬을 제어한다.

 

Flex 속성 : justify-content

 

 

Flex 속성 : align-content

justify-content와 유사하나 교차축이 기준이 된다.

 

 

Flex 속성 : align-items

 

+ 색상표 

                = rgb(0, 0, 0) #000000 rgba(0, 0, 0, 1)

                = rgb(255, 255, 255) #FFFFFF rgba(255, 255, 255, 1)

---

인용
CSS: Cascading Style Sheets - MDN Web Docs
https://developer.mozilla.org/ko/docs/Web/CSS