본문 바로가기
Front end/CSS

웹 문서에 디자인 입히기

by re-hwi 2022. 8. 20.

저번 단원에서 html을 마치고 css를 처음 시작했다. css는 웹의 보이는 모습을 만들고 움직이는 형태까지 만들 수 있다길래 어렵지 않을까 생각했었는데 생각보다 쉬웠고 재미있었다.

 

아 그리고 하나 궁금증이 생겼는데 ID선택자는 문서에서 한 번만 적용할 수 있다고 한다. 그러면 굳이 ID를 만들지 않아도 인라인 스타일을 사용해서 원하는 줄의 스타일을 바꾸면 되지 않을까하는 것이다.

 

그런데 지금 생각해보니까 외부 스타일을 이용하기 위해서는 ID 선택자를 쓸 수밖에 없을 것 같다.


CSS(Cascading Style Sheet)

 

CSS를 사용하는 이유

  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다
  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다

 

CSS의 스타일형식

선택자 {속성1 : 속성값 1; 속성 2 : 속성값 2;}

 

스타일 시트

: 스타일 규칙을 한 눈에 확인하고 필요할 때마다 수정하기 쉽도록 한군데 묶어  놓은 것

  • 브라우저 기본 스타일 : CSS가 적용되지 않은 상태. 브라우저가 인식하는 기본 스타일
  • 사용자 스타일 : 
    1. 인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
    2. 내부 스타일 시트 : <head> 태그 안에서 스타일을 정의 
    3. 외부 스타일 시트 : 다른 외부의 파일에서 스타일을 지정 .css 파일로 저장되고 불러오기 위해선 <head> 태그 안에서 <llink> 태그로 불러온다.

 

css의 기본 선택자 종류

  • 전체 선택자 : 선택자 자리에 *을 넣어 사용한다. 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
  • 타입 선택자 : 특정 태그를 사용한 모든 요소에 스타일을 적용한다. 
  • 클래스 선택자 : 특정 부분만 선택해서 스타일을 적용하기 위해 사용. 재사용이 가능하며 클래스의 이름 앞에는 .(dot)을 붙여야 한다
  • ID 선택자 : 특정 부분을 선택해서 스타일을 적용한다는 점은 클래스와 같지만 재사용이 불가능하다는 차이점이 있다. 또 ID의 이름 앞에는 #을 붙여야 한다.

 

CSS의 우선순위

웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정

  1. 사용자 스타일
  2. 제작자 스타일
  3. 브라우저 기본 스타일 

이 때 중요도가 같은 스타일인 경우 적용 범위가 좁은 순으로 우선순위가 높아진다.

  1. ! important (가장 우선순위가 높음)
  2. 인라인 스타일
  3. id 스타일
  4. 클래스 스타일
  5. 타입 스타일
반응형

댓글