TIL 05___CSS basic 1(선택자)

Young A·2021년 11월 5일
0

css

목록 보기
1/6

  • CSS의 스타일 형식과 기본 선택자 및
    스타일 우선 순위 등에 대해 알아본다.

▶︎ CSS (Cascading Style Sheet)

CSS에서 'C'는 Cascading의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용된다. 즉 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.


1. CSS 스타일 형식

selector {
  property:value; *Declaration(선언) 선택자가 어떤 효과를 줄 것인가에 해당
}

*세미콜론(;): Declaration이 시작되고 끝나는 것을 구분하기 위해 

🔹 스타일의 주석 표기 방법

/* 여러 줄짜리 주석 표기
   소스를 이해하기 쉽고
   나중에 수정할 때에도 편리하다. */

/* 한 줄짜리 주석 표기 */

2. CSS 기본 선택자

🔹 전체 선택자(*): 문서의 모든 요소에 스타일을 적용한다.

* { 속성: 값; ..... }

* {
   margin: 0;
}

🔹 타입 선택자: 특정 태그를 사용한 모든 요소에서 스타일을 적용한다.

태그명 { 스타일 규칙 }

p {
  font-size:italic;
}

🔹 클래스 선택자(.): 특정 부분만 선택해서 문서 안에 여러 번 적용한다.

.클래스명 { 스타일 규칙 }

.class {
  font-size:italic;
}

🔹 id 선택자(#): 특정 부분만 선택해서 문서 안에 한 번만 적용한다.

#아이디명 { 스타일 규칙 }

#id {
  font-size:italic;
}

🔹 그룹 선택자: 여러 요소에 같은 스타일을 적용할 때 사용한다.

선택자1,선택자2 { 스타일 규칙 }

p,h1 {
  font-size:italic;
}

👉 HTML BOX를 잘 나누어야 함은 레이블링이 쉬워지기에, CSS를 꾸밀때 선택자(selector)를 고르기가 용이해지는 장점이 있다.


3. 스타일 우선 순위

스타일 규칙의 중요도와 적용 범위에 따라 그 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다.

1. Author Style(제작자 스타일)
2. User Style(사용자 스타일)
3. Browser(브라우저 기본 스타일)

■ 적용 범위: 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있다. 따라서 스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일 일수록 우선순위가 높아진다.

  1. !important
    (어떤 스타일보다 우선 적용하는 스타일, 되도록 사용하지 않을 것을 권장.)
  2. 인라인 스타일
    (태그 안에 style속성을 사용해 해당 태그만 스타일 적용한다.)
  3. id 스타일
    (#id, 지정한 부분에만 적용되는 스타일, 한 문서에 한번만 적용한다.)
  4. class 스타일
    (.class, 지정한 부분에만 적용되는 스타일, 한 문서에 여러번 적용한다.)
  5. 타입 스타일
    ( 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용한다.)
* 소스 작성 순서: 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

4. 스타일 상속

태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.


5. 텍스트를 표현하는 스타일

🔹 글자와 관련된 속성

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

profile
야금야금. 즐겁게, 개발 🙂

0개의 댓글