웹 문서에 디자인 입히기

저번 단원에서 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의 우선순위

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

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

티스토리툴바