CSS 정복하기

duckbill413·2023년 9월 21일

CSS

HTML/CSS/JS

목록 보기

1/2

CSS

CSS 기본

스타일 우선 순위

스타일 적용 우선순위
- 인라인 스타일 > 내부 스타일 시트 > 외부 스타일

CSS 상속

CSS는 상속을 통해 부모 요소의 속성을 자식 요소에게 상속 시킨다.
상속되는 속성
- Text 관련 : font-family, font-size, font-weight, line-height, text-align
- opacity, visibility, color, list-style, white-space
상속되지 않는 속성
- Box Model 관련 : width, height, margin, padding, border, box-sizing, display
- Position 관련 : position, top/right/left/botton, z-index, overflow, float
- background, vertical-algin, text-decoration
상속되지 않는 속성을 상속받기
- inherit를 사용하여 상속받기
  - ex) margin: inherit

CSS 선택자

선택자 (Selector)

일반 선택자: 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자
복합 선택자: 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자
가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자

일반 선택자

전체 선택자 (Universal Selector) 사용법은 * {}이다.
HTML 문서 내 모든 element를 선택.
잘 사용되지 않으며 우선 순위가 가장 낮다.
일반 선택자의 우선순위는 전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자 이다.
타입 선택자(Type Selector)의 사용법은 elementName {}이다.
태그명을 이용해서 스타일을 적용할 태크를 선택.
1개 이상의 HTML 엘리먼트를 사용할 수 있다.
여러 엘리먼트를 선택할 때에는 컴마(,)로 구분.
클래스 선택자 (Class Selector)의 사용법은 .class-name {}이다.
ID 선택자 (ID Selector)의 사용법은 #id-name {}이다.
HTML 문서에서 동일한 ID를 중복 사용할 수 없다.
일반 선택자 중 가장 우선순위가 높다.

복합 선택자

하위 선택자 (Descentdant Selector) 사용법은 element element {}이다.
하위 선택자는 1단계 하위 요소(child)와 2단계 이상 하위요소 (descendant)에 모두 적용
자식 선택자 (Child Selector) 사용법은 element > element {}이다.
자식 선택자는 1단계 하위 요소 (child)에만 적용

인접 형제 선택자 (Adjacent Sibling Selector) 사용법은 element + element {}이다.
형제(sibiling) 관계인 엘리먼트가 여러 개 존재할 경우 첫 번째 엘리먼트만 선택.
일반 형제 선택자(General Sibling Selector) 사용법은 element ~element {}이다.
형제(sibling) 관계인 엘리먼트가 여러 개 존재할 경우 모든 엘리먼트를 선택.

가상 클래스 선택자

가상 클래스 선택자(Pseudo-Classes Selector)는 User Agent가 제공하는 가상의 클래스를 지정.
사용법은 가상 클래스 {}이다.
:nt-child(n)는 지정된 요소 부모의 n번째 자식들에 적용
괄호에 상수 뿐만 아니라 수열(2n+1)도 가능
n은 0부터 시작하며, 자식 순번은 1부터 시작
첫 번째 요소와 마지막 요소에 대한 스타일 지정은 :first_child와 :last-child 선택자를 사용
가상 엘리먼트 선택자(Psuedo-Element Selector)는 보이지 않는 가상의 엘리먼트를 선택
사용법은 ::가상 엘리먼트 {} 이다.
가상 클래스와 가상 엘리먼트를 구별하기 위해 double colon(::)으로 대체
결과 화면에서 마우스로 텍스트를 드래그하면 ::selection 스타일이 적용.

속성 선택자

특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
Existence([]), Equality([=]), Space([~=]), Prefix([^=]), Substring([*=]) 등이 있다.
속성 선택자를 사용하기 위해서는 HTML 문서를 작성할 때에 name, title등의 속성 값을 규칙적으로 정의
화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때 유용.

같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용

CSS 속성

Font 속성

tag 관련 속성은 CSS Property로 대체 가능하므로 추천하지 않는다.
font는 하나의 선언에서 여러 font관련 속성을 지정
font-family
- E { font-family: 글꼴이름, 글꼴이름 --- }
font-style
- normal, italic, oblique
font-variant
- normal (소문자를 작은 대문자로 변환)
- smaill-caps
font-weight
- normal, bold, bolder, lighter
- 초기값은 normal이며, 100~900까지 숫자 값으로 사용 가능 (400: normal, 700: bord)
font-size
- xx-small, x-small, small, medium, large, x-large, xx-large
- 상대 사이즈 속성 값은 larger, smaller가 있다.
- px, cm, % 단위도 사용 가능
font 속성은 font-style, font-variant, font-weight, font-size등을 한번에 지정 가능한 단축형
속성 값은 font-style -> font-variant -> font-weight -> font-size/line-height -> font-family순으로 작성
- font-size와 font-family는 필수 값이며, 생략 시 기본 값이 적용

Text 속성

text-decoration
- none, underline, overline, line-through
text-indent
- px, pt, em, cm, 배율(%)
text-transform
- capitalize, uppercase, lowercase, none
- capitalize는 첫 글자를 대문자로, uppercase는 글자 전체를 대문자로, lowercase는 전자 전체를 소문자로 변경
white-space
- normal, pre, nowrap, pre-line, pre-wrap
letter-spacing
- normal, length(px, cm)
word-spacing
- normal, 상대 값, 절대 값, 비율

사용자 인터페이스 속성

화면에 출력될 엘리먼트들에 디자인 요소를 추가하는 속성
display

화면에 나오는 엘리먼트는 inline과 block 두 가지로 분류된다.

inline-level 엘리먼트는 줄 바꿈 없이 연속으로 이어지며 이 대표적이다.

block-level 엘리먼트는 줄 바꿈이 생기며
가 대표적

none, block, inline | ---
background-color
- color (색 이름, RGB 값, RGB 코드), transparent (투명색)
background-image
- 배경 이미지가 격자모양으로 반복하여 나타남
- 스크롤 할 경우 배경 이미지도 반복적으로 나타남
- none, url

background-repeat

- repeat-x(수평 반복), repeeat-y(수직 반복), no-repeat
- repeat-x는 배경을 수평으로 반복, repeat-y는 배경을 수직으로 반복
- background-position 속성 사용법은 `E {background-position: 백분율(%) | 길이 값 | 수평 값 수직 값`이다.
- 수평 값은 left, center, right을 가지며 수직 값은 top, center, bottom을 갖는다.

테이블 & 테두리 속성

table 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬
테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정
table-layout
- E { table-layout: auto(default) | fixed }
- table cell의 width, height 고정 여부를 지정
-
tag의 첫 번째 과 요소를 통해 table-layout 지정
- cell의 width를 지정하지 않을 경우 데이터가 cell을 넘치는 경우 사용
border-collapse
- 테두리 모델은 불리된 테두리 모델과 통합된 테두리 모델로 분류
- border-collapse 속성 사용법은 E { border-collapse: separate(default) | collapse }이다.
- cell은 개별 테두리를 갖으며, border-spacing은 분리된 테두리 모델에서 인접 cell 사이의 거리를 지정
- 사용법은 E { border-spacing: 수평길이 수직길이 }이며, 길이 값은 양
border-style
- E { border-style: none | solid | hidden | --- }
- 값이 1개일 때 모든 면에 적용, 값이 2개일 때 1번쨰는 {top, bottom}에 2번째는 {right, left}에 적용
- 값이 3개일 때 1번째 값은 {top}, 2번째 값은 {right, left}, 3번째 값은 {bottom}에 적용.
- 값이 4개 일 때는 {top, right, bottom, left} 순으로 적용
border-width
- E { border-width: thin | medium | thick | 길이 값 }이다.
- 테두리 너비 설정에 사용하며, 미리 정의된 “thin”, “medium”, “thick” 문자열 중 선택 가능
- 1~4개의 값을 가질 수 있으며, 적용 규칙은 border-style과 같다.
- border-style이 border-width보다 앞에 정의 되어야 한다.
border-color
- E { border-color: color | transparent }
- 테두리에 color 값을 적용
- 1~4개의 값을 가질 수 있다. 적용 규칙은 위와 같다.
- border-color가 border-width보다 앞에 정의되어야 한다.
border
- 약식 표현으로 한번에 테두리 관련 속성들을 적용
- border-width, border-style, border-color 순으로 작성해야 한다.
- margin, padding의 약식 속성과 달리 4개의 테두리에 다른 값을 적용하지는 못한다.