CSS는 어떤 기능을 간단하게 알아보겠습니다.
HTML과 CSS는 절대 떨어질 수 없는 사이입니다!
CSS(Cascading Style Sheets)
CSS는 HTML의 태그들에 디자인을 입혀주어 웹 사이트를 보다 더 화려하게 만들어줍니다.
1.CSS를 적용하는 방법은 3가지가 있습니다.
1) 인라인 스타일 : 태그 style속성에 직접 작성
<h1 style="color: red;">we are wecode</h1>
- 속성 안에 직접 작성하기 때문에 빠르고 편하다
- 유지보수에 불리하다.
예를 들어 바로 위 코드에서 보듯이 h1태그에 글씨 뿐만 아니라 색상, 폰드체 등등 적용해야 할 스타일이 많아진다면 코드 가독성은 당연히 떨어지게되겠죠?
그리고 html태그와 style코드가 혼재되어버리면 유지보수에도 영향을 끼칩니다.
2) style태그 : html파일 내에 css를 작성
<style> p{ font-size: 14px; color: #408090; font-weight:bold; } </style>
- 이 방법 또한 html파일에 HTML코드도 작성하고,CSS도 작성하여 편하고 빠른 방법이다.
- HTML구조와 디자인이 기능적으로 분리되지 않았기 때문에 유지보수에 적합하지 않다.
그렇다면, 어떤 방법이 개발하기 좋은 것일까요?
HTML을 수정하려면 html파일을 확인하고,
디자인을 수정하려면 css파일을 확인하는 것이 개발하기 좋습니다.
3) css파일에 작성
단, 1번 2번과 다르게 3번에서는 적용해야 할 것이 있습니다.
html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로,
링크를 해주는 태그를 추가해야 합니다.
link href="index.css" rel="stylesheet" type="text/css" />
태그를 설명하자면,
- link : link태그로 사용할 css파일을 링크해줍니다.
- href : href속성에 css 파일 경로를 작성합니다.
- type : link태그로 연결되는 파일이 어떤 것인지 알려줍니다.
css file을 연결하므로 type값은 항상 "text/css" - rel : HTML file과 CSS file과의 관계를 설명하는 속성
css파일을 링크할 때는 항상 "stylesheet"값을 대입
- CSS작성법
CSS에서는 HTML태그들을 꾸며주는 역할을 한다고 했는데 어떻게 꾸미냐?
우리는 HTML에서 디자인을 적용할 선택자(selector)를 지정해 작성하면 됩니다.
- 선택자: html에서 태그를 의미
blockquote { color:blue; font-weight:lighter; }
- blockquote(태그)는 selector, color와 font-weight는 Property(속성),
blue와 normal은 Property value(속성값)입니다. - 즉, 위의 코드는 blockquote라는 태그에 내용을 파란색으로 변경하고,
글자 두께를 상속된 값보다 얇게 한다는 의미입니다.
만약에 selector가 태그가 아닐 경우도 있을 수 있나?
YES!아닌 경우도 있습니다. class일수도!,id! 일 수도 있습니다.
그럴 경우에는 class는 selector에 .(dot)이 필요하다.
.className{
디자인내용;
}
id는 selector에 #이 필요하다.
#idName{
디자인내용;
}