- CSS의 스타일 형식과 기본 선택자 및
스타일 우선 순위 등에 대해 알아본다.
CSS에서 'C'는 Cascading의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 즉 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
selector {
property:value; *Declaration(선언) 선택자가 어떤 효과를 줄 것인가에 해당
}
*세미콜론(;): Declaration이 시작되고 끝나는 것을 구분하기 위해
/* 여러 줄짜리 주석 표기
소스를 이해하기 쉽고
나중에 수정할 때에도 편리하다. */
/* 한 줄짜리 주석 표기 */
* { 속성: 값; ..... }
* { margin: 0; }
태그명 { 스타일 규칙 }
p { font-size:italic; }
.클래스명 { 스타일 규칙 }
.class { font-size:italic; }
#아이디명 { 스타일 규칙 }
#id { font-size:italic; }
선택자1,선택자2 { 스타일 규칙 }
p,h1 { font-size:italic; }
스타일 규칙의 중요도와 적용 범위에 따라 그 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.
1. Author Style(제작자 스타일)
2. User Style(사용자 스타일)
3. Browser(브라우저 기본 스타일)
- !important
(어떤 스타일보다 우선 적용하는 스타일, 되도록 사용하지 않을 것을 권장.)- 인라인 스타일
(태그 안에 style속성을 사용해 해당 태그만 스타일 적용한다.)- id 스타일
(#id, 지정한 부분에만 적용되는 스타일, 한 문서에 한번만 적용한다.)- class 스타일
(.class, 지정한 부분에만 적용되는 스타일, 한 문서에 여러번 적용한다.)- 타입 스타일
( 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용한다.)* 소스 작성 순서: 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
🔹 글자와 관련된 속성
font-family
글꼴 종류를 지정한다.
font-size
글자 크기를 지정한다.
font-style
글자를 이탤릭체로 표시할지 지정한다.
font-weight
글자의 굵기를 지정한다.
🔹 텍스트 스타일 속성
color
글자색을 지정한다.
text-decoration
텍스트에 밑줄이나 취소선을 표시할지 여부를 지정한다.
text-transform
텍스트 전체, 또는 첫 글자를 대문자로 표시한다.
text-shadow
텍스트에 그림자를 추가한다.
letter-spacing
글자 사이의 간격을 지정한다.
word-spacing
단어 사이의 간격을 지정한다.
text-align
텍스트 정렬 방법을 지정한다.
line-height
줄 간격을 조절한다.
🔹 웹에서 색상을 지정하는 방법
16진수
빨강,초록,파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현한다.rgb,rgba
rgb(R,G,B)
빨강,초록,파랑의 양을 0~255 사이의 숫자로 표현한다.
rgba(R,G,B,a)
rgb 형식에 불투명도를 함께 표현한다.hsl,hsla
hsl(H,S,L)
색상,채도,명도의 값으로 색상 표현한다.
hsla(H,S,L,a)
hsl 형식에 불투명도를 함께 표현한다.- 색상 이름: red, yellow, black과 같은 색상 이름을 사용한다.
[참조 링크]
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference