.CSS (Cascading Style Sheet)
: CSS는 HTML 문서에 색이나 모양,
출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를
Style Sheet라고 부릅니다.
CSS는 CSS1이 나온 2002년 이후 CSS2, CSS3로 발전하였고,
CSS3를 CSS 레벨3라고 부르는데,
CSS버전3라고 부르지 않는 이유는 과거 레벨과
호환을 이루면서 새로운 기능을 추가하기 때문입니다.
. CSS3는 많은 기능을 가지고 있지만 요약 하면 아래와 같습니다.
. 색상과 배경
. 텍스트
. 폰트
. Box Model
. 비주얼 포맷 및 효과
. 리스트
. 테이블
. 사용자 인터페이스
. HTML에 CSS를 적용시키는 방법은 세가지가 있습니다.
각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다.
: Inline Style Sheet
*HTML 태그*의 style 속성에 CSS 코드를 넣는 방법입니다.
: Internal Style Sheet (내부 스타일시트)
*HTML 문서 안*의 <style> 과 </style>안에
CSS 코드를 넣는 방법입니다.
: Linking Style Sheet(외부 스타일시트)
*별도의 CSS 파일*을 만들고 HTML 문서와 연결하는 방법입니다.
. Inline Style Sheet
: Inline Style Sheet 는 HTML 태그의 스타일 속성에
CSS 코드를 넣어 적용시키는 방법입니다.
예 =>
<p style="color: blue">
Lorem ipsum dolor.
</p>
해당 태그(p)가 선택자(selector)가 되고,
CSS코드에는 속성(property)과 값(value)만 들어갑니다.
따라서 꾸미는데 한계가 있으며,
*재사용이 불가능하다는 단점이 있습니다.*
. Internal Style Sheet (내부 스타일시트)
: Internal Style Sheet는 HTML 문서 안에
스타일 코드를 넣는 방법입니다.
<style>과 </style> 안에 CSS코드를 넣습니다.
예=>
<style>
h1 { color: blue;}
</style>
<style>태그는 보통 <head>와</head>사이에 넣으나,
HTML 문서의 어디에 넣어도 잘 적용됩니다.
이 방법은 HTML문서 안의 여러 요소를 한번에 꾸밀 수 있다는
장점이 있으나,
*또 다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.*
. Linking Style Sheet(외부 스타일시트)
: Linking Style Sheet는 별도의 CSS 파일을 만들고
HTML 문서와 연결하는 방법입니다.
: 예를 들어 모든 h1 요소와 글자를 빨간색으로 하고 싶다면,
다음의 내용으로 style.css 파일을 만듭니다.
(CSS파일의 확장자는 css입니다.)
h1 {
color: red;
}
. 적용을 원하는 HTML문서에 다음의 코드를 추가합니다.
<link rel="stylesheet" href="style.css">
. 이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다.
style.css 를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 됩니다.
. 다음은 가장 간단한 CSS 코드입니다.
h1{ color : red;}
h1, color, red 세 개의 단어가 있는데 각각
선택자, 속성, 값이라고 합니다.
. 선택자(selector) : 무엇을 꾸밀지 정합니다.
h1은 h1요소를 꾸미겠다는 뜻입니다.
. 속성(property) : 어떤 모양을 꾸밀지 정합니다.
color는 색을 꾸미겠다는 뜻입니다.
. 값(value) : 어떻게 꾸밀지 정합니다.
red는 빨간색으로 만들겠다는 뜻입니다.
즉, CSS 코드는 다음처럼 구성됩니다.
selector { property : value }
이때 property 와 value를 합쳐서 선언(declaration)이라고 합니다.
. 셀렉터는 많은 여러 타입이 존재합니다.
: 이것은 셀렉터의 일반적인 타입들입니다.
셀렉터이름 선택하는 것 예시
. 엘리먼트 셀렉터
(떄때로 태그 또는
타입 셀렉터라 불림) <p>를 선택
특정 타입의 모든 HTML 엘리먼트
. 아이디 셀렉터 특정 아이디를 가진 페이지의 엘리먼트 #my-id
(주어진 HTML 페이지에서, <p id="my-id"
아이디랑 딱 하나의 엘리먼트만 허용됩니다.) 또는<a id ="my-id"를 선택
. 클래스 셀렉터 특정 클래스를 가진 페이지의 엘리먼트 .my-class
(한 페이지에 클래스가 여러번 <p class="my-class"> 와
나타날 수 있습니다) <p class="my-class">를 선택
.속성 셀렉터 특정 속성을 갖는 페이지의 엘리먼트. img[src]
<img src="myimage.png">를 선택하지만
<img>는 선택 안 함
. 수도(Pseudo) 클래스 셀렉터 특정 엘리먼트지만 특정 상태에 있을 때만 a: hover
예를 들면, hover over 상태일 때 <a>를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
: CSS3의 표준 단위
단위 의미 예
em 배수 font-size:3em /* 현재 폰트의 3배 크기 */
% 퍼센트 font-size:500% /* 현재 폰트의 500% 크기 */
px 픽셀수 font-size:10px /* 10 픽셀 크기 */
cm 센티미터
mm 밀리미터
in 인치 1in = 2.54cm=96px
pt 포인터 1pt = 1 / 72 in
pc 피카소(picas) 1pc = 12pt
deg 각도 transform:rotate(20deg) /* 시계 방향 20도 회전 */
```
꾸준함의 가치를 믿는 개발자