본문 바로가기

Before May.5th.19(In Korea)/IT

워드프레스로 업무용 홈페이지 만들기2 CSS html 태그(1) 태그선택자 클래스선택자 아이디선택자

반응형

CSS 

 CSS는 웹을 만드는 요소 중 가장 익히기 쉽고 가장 간단한 언어이다. 웹문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트이다. 기존 HTML을 보완한 것이다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관선을 유지할 수 있다.

CSS에서 가장 중요한 요소는 선택자이다. Selector!

 선택자는 크게 3가지로 분류된다.

 1. 태그 선택자 2. 클래스 선택자 3. 아이디 선택자


1. 태그 선택자 : <p> <table> <td> <img> 같은 것을 말한다.

 태그 몇가지를 알아보자.

  1) h태그 : 제목을 표현하는 태그

  2) p태그 : 문단을 의미하는 태그로, 앞 뒤로 2줄씩 띄어서 하나의 문단을 만든다.

  3) br태그 : 엔터의 기능 즉 띄어쓰기!

 P{font-size:20px; color:red}

이렇게 CSS를 정의하면 HTML문서에서 P가 들어가 있는 모든 태그는 폰트 사이즈가 20픽셀, 색상은 전부 빨강으로 처리!


CSS 주석 달때, /*로 시작하고 */로 닫아준다.


2. 클래스 선택자 : 클래스 선택자는 점(.)으로 시작되는 선택자를 말한다.

3. 아이디 선택자 : 아이디 선택자는 CSS에서 #으로 시작하는 선택자를 말한다.

클랙스 선택자와 아이디 선택자의 구분 

#으로 시작하면 아이디 선택자

"."으로 시작하면 클래스 선택자

일반적으로 아이디 선택자는 문서의 레이아웃을 잡을 때 사용

클래스 선택자는 아이디 선택자 이외에 웹문서를 꾸밀 때 사용

반응형