웹 CSS3 실습해보기 1

오늘은 학교에서 배우는 웹클라이언트컴퓨팅이라는 과목에서 CSS3를 다루는 파트가 있어서 정리해보려고 합니다.

개요

우선 CSS란 Cascading style sheet라는 용어의 약자로서. html 문서의 색과 모양을 꾸며주는 언어입니다.

css로 작성된 코드가 style sheet입니다.

예시

<!DOCTYPE html> 
<html> 
<head>
<title></title>
</head> 
<body> 
</body> 
</html>

위와 같은 일반적인 html코드가

<!DOCTYPE html> 
<html> 
<head>
<title></title> 
<style>
body { background-color : blue; } 
</style> 
</head> 
<body> 
</body> 
</html>

이 같이 css로 웹페이지를 푸르게 만들 수 있습니다.

selector

Selector라는 것은 css를 웹 페이지에 적용하도록 만드는 이름으로서, Selector에 지정한 이름의 태그들은 모두 css가 적용됩니다.

예시로

<style>
body { background-color : blue; } 
</style>

라고 하면, body가 selector로 됩니다.

추가로 background-color는 프로퍼티가 되고, blue는 값이 됩니다.

대소문자

이 모두 대소문자 구별을 하지 않습니다.

스타일 만들기

HTML 문서에 CSS3 style sheet 만드는 방법 3가지는

  • <style> </style> tag에 style sheet 작성하기

  • style 속성에 style sheet 작성하기

  • style sheet를 별도 파일로 작성하여 <link> tag나 @import로 불러 사용하기

가 있습니다.

<style> tag는 <head> tag 내에서만 사용가능 합니다.

일부분 스타일 적용

HTML tag의 style 속성에 CSS3 style sheet 작성하는 경우에는 그 태그안에서만 스타일이 적용됩니다.

<p style="color:red">text</p>

이와 같이 작성하면 해당 p 태그외에는 스타일이 적용되지 않습니다.

외부 저장

CSS2 style sheet만 떼어내어 .css 확장자를 가진 file에 style sheet 저장하는 방법도 존재합니다.

<link href="test.css" type="text/css" rel="stylesheet">

그 외에도 @import를 이용하여 스타일 태그에서 불러올 수도 있습니다.

내일 이어서 2편이 포스팅됩니다.

Written on March 27, 2018