CSS 강좌 01강 - CSS 시작하기(CSS개념)
※CSS란 무엇일까요?
지금까지 HTML, HTML5 강좌를 보셨거나 경험한 적이 있다면..
적어도 한번 이상 CSS라는 단어를 본 적이 있을겁니다.
CSS는 웹 페이지를 개발하는데 있어서 필수는 아니지만 웹 페이지를 꾸미는데 있어서 필수입니다.
HTML이 웹페이지의 정보를 표현한다고 하면, CSS는 웹페이지를 시각적으로 꾸며주는 역할을 합니다.
※CSS를 왜 사용해야 할까요?
CSS를 사용하여 웹페이지를 디자인 하는 경우 다음과 같은 효과를 얻을 수 있습니다.
▷정보(HTML)와 디자인(CSS)을 분리할 수 있습니다.
▷디자인만 독립적으로 수정할 수 있습니다.
▷검색엔진은 HTML을 해석할 수 있습니다. 그렇기에 많은 방문자들의 유입을 유도할 수 있습니다.
▷HTML에서 디자인으로 분리가 되면 스크린리더(시각장애인을 위한 프로그램)가 HTML을 해석할 수 있습니다.
※CSS를 사용하기 위한 준비물
▷브라우저
우리는 크롬 브라우저를 사용해 CSS를 테스트 하도록 할게요.
크롬 브라우저가 없는 분들은 설치하시길 추천합니다.
▷에디터
소스코드를 작성하는데 필요한 에디터는 에디트 플러스를 사용하겠습니다.
에디트 플러스가 필요한 분들은 이메일 주소를 남겨주세요.
▷인스팩터
웹페이지의 코드를 분석하고, 조작할 수 있는 도구입니다.
우리는 구글 크롬 개발자도구를 사용하도록 하겠습니다.
※CSS를 사용하는 방법
CSS를 사용하는 방법은 세 가지가 있습니다.
1. inline 방식
인라인 방식은 엘리먼트에 스타일을 직접 기술하는 방식 입니다.
인라인 방식을 사용하면 CSS 선언이 분명해서 영향을 주고 있는 CSS를 추적하기가 쉽습니다.
반면에 코드가 많아지고, 정보와 디자인의 분리라는 CSS의 취지에서 벗어나죠.
예제1)
<h1 style="color:red">Go Learning!</h1>
2. style tag 방식
HTML문서 헤더부분에서 style 태그를 코딩하는 방식입니다.
inline 방식에 비하면 경제적인 코딩이 가능합니다.
정보와 디자인의 분리라는 CSS의 취지에 부합합니다.
예제2)
<html>
<head>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Go Learning!</h1>
<p>CSS는 알아보기</p>
</body>
</html>
3. 외부 파일 방식
CSS를 별도의 파일로 분리해서 링크로 불러오는 형태 입니다.
CSS파일의 교체로 디자인을 변경할 수 있다는 장점이 있어서 유지보수가 편리합니다.
예제3)
03.html 파일의 내용
<html>
<head>
<!-- CSS 파일의 경로를 입력 -->
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<h1>Go Learning!</h1>
<p>CSS는 알아보기</p>
</body>
</html>
style.css 파일의 내용
h1
{
color:red;
}
p
{
color:blue;
}
모든 코드는 직접 코딩하면서 테스트를 해보세요 :)
예제파일 다운로드
01.zip'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
|---|---|
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |
| CSS 강좌 03강 - CSS 선택자 조합 (1) | 2016.03.03 |
| CSS 강좌 02강 - CSS 선택자 (0) | 2016.03.02 |