본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[CSS] 스타일 정의 기본 형식

by [바가지] 2018. 1. 26.
반응형

CSS 정의하는 방법


[CSS] 스타일 정의 기본 형식




스타일의 정의는 스타일을 적용 할 대상과 대상에 적용할 속성과 속성값으로 구성 됩니다.


태그를 이용한 스타일 정의

스타일을 적용할 대상을 선택자 selector 라고 한다면 일반적으로 HTML 태그들이 선택자로 사용 됩니다.

선택자에 대하여 속성과 속성값을 설정 하는 부분은 { 와 } 안에서 설정을 하게 됩니다.

속성과 속성값은 콜론(:) 으로 연결하여 정의 하게 됩니다.


예를 들어 <P> 태그에 속성과 속성값을 적용 해 보도록 하겠습니다.

예> P {font-size:12px}


하나의 태그에 하나의 속성 뿐 아니라 여러 개의 속성을 지정 할 수 있습니다.

한쌍의 속성과 속성값이 정의되고 난 후 또 한쌍의 속성과 속성값을 설정하기 위한 구분값은 세미콜론(;) 이 사용 됩니다.

예를 들어 <P> 태그에 텍스트 사이즈와 색상 두 개의 속성을 주도록 하겠습니다.

예> P {font-size:10px; color:blue}


여러 가지의 태그에 동일한 속성을 지정해야 하는 경우 가 있습니다.

그럴 경우 같은 스타일을 적용 할 선택자들을 구분자 콤마(,)로 하여 설정 하게 됩니다.

예를 들어 H1 {color:sky} 와 H2 {color:sky} 로 각각 설정하지 않고  H1, H2 {color:sky} 한번에 정의가 가능합니다.


CLASS 속성을 이용한 스타일 정의

클래스를 사용하면 원래 정의 된 태그 스타일이 있더라도 그 스타일을 적용하지 않고, 클래스 스타일로 정의 된 속성이 적용 됩니다.

형식> <태그명 CLASS="클래스명"> 내용 </태그명>

예> <P CLASS="test"> 내용 </P>


특정 태그에만 적용되는 클래스의 스타일을 정의도 가능합니다. 그러기 위해서는 선택자로 스타일을 적용하고자 하는 태그의 이름을 쓰고, 점과 클래스 명을 사용하면 됩니다.

예를 들어 <P> 태그 중 클래스 명이 test 인 태그에만 스타일을 지정하는 방법입니다.

예> P.test {color:red}


모든 태그에 적용되는 클래스 스타일을 적용하는 방법은 다음과 같습니다.

예> .클래스명{속성:속성값}


ID 속성을 이용한 스타일 정의

그리고 클래스와 비슷하게 정의하여 사용 할 수 있는 방법이 아이디 속성을 이용하여 스타일을 정의 하는 방법입니다.

ID 속성 점 대신에 #을 이용하여 지정한다는 것만 다릅니다.

예> <태그명 ID="ID이름"></태그명>     

      #ID이름 {속성:속성값}


반응형