티스토리 뷰

프로그래밍/HTML

HTML 스타일 시트

2017. 4. 5. 21:50

안녕하세요. 오늘은 HTML 스타일 시트에 대해서 알아보도록 하겠습니다.

스타일 시트는 CSS라 부르며 Cascade Style Sheet의 약자 입니다. 스타일 시트는 파일로 따로 작성 할 수도 있고

하나의 태그에만 정의 할수도 있습니다.



각각 작성해 보도록 하겠습니다.

 

1. 태그에 적용하는 방법

  - 태그에 Style이라는 속성을 사용하는 방법으로 인라인 방식이라고 합니다.



span 태그의 스타일을 적용한 예제 입니다. "스타일 적용 부분" 백그라운드 색깔을 빨간색으로 지정 하였습니다.



2. 웹페이지 전체에 스타일 적용

  - <head> 와 </head> 태그 사이에 스타일을 지정한 뒤 웹 페이지 안에서 불러와 사용할 수 있습니다.



td 태그의 style을 head 부분에 적용한 예제 입니다. head 부분에 특정 태그에 대한 스타일을 적용하면 <body> </body> 사이에 있는 해당 태그는 자동으로 적용됩니다.


특정 부분에만 스타일을 적용하고 싶다면 클래스 스타일을 이용하시면 됩니다. 예제에서 보시면 .blue 클래스 스타일을 생성후 <td class="blue"> 태그에서 사용 하였습니다.




3. 별도의 파일로 만드는 방법

  - 여러 경우에 적용되는 스타일 시트를 모두 모아서 별도의 외부 파일로 만들어 두는 방식 입니다.



외부 스타일 시트 파일의 확장자는 CSS이며 스타일을 적용하려면 <link> 태그를 사용해 불러오기만 하면 됩니다. 이때 외부 파일이 해당 파일보다 먼저 실행되어야 하므로 <link> 태그는 보통 <head> 와 </head> 태그 사이에 둡니다.


위의 예제를 보시면 클래스 스타일의 경우는 적용되지만, 특정 태그에 대해서는 적용이 안되는 사실을 알 수 있습니다.

 

지금까지 html 스타일 시트에 대해서 알아보았습니다. 스타일 시트에대한 속성 정보는 다음에 정리 하도록 하겠습니다.



'프로그래밍 > HTML' 카테고리의 다른 글

HTML table 태그 알아보기  (0) 2017.01.30
HTML 폼 관련 태그(input , select , textarea)  (0) 2017.01.30
공유하기 링크
댓글