CSS를 HTML에 적용하는 방법은 총 3가지가 있다.
1)인라인 스타일:태그 style 속성에 직접 작성할 수 있습니다.
<h1 style="color: red;">FRONTEND 101</h1>빠르고 편하지만 가독성이 떨어지고 유지보수에도 좋지 않다.
2)style 태그: < style > 사이에 css문법을 사용하여 스타일을 작성합니다.
<style>
h2 {
color: #408090;
}
</style>
<style>
h2 {
color: #408090;
}
</style>3)css 파일에 작성:html 파일과 분리하여 css파일에 따로 작성하는 방법입니다.
html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다.
<link href="style.css" rel="stylesheet" type="text/css" />link — link태그로 사용할 css파일을 링크해준다.
href — href 속성에 css 파일 경로를 작성한다.
type — link태그로 연결되는 파일이 어떤 것인지 알려주고 여기서 css file을 연결하므로 type값은 항상 "text/css"이다.
rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성으로, css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.
CSS 작성법
디자인을 적용할 선택자(selector)를 지정하고, 어떤 디자인을 적용할지 작성한다.
왼쪽의 color는 property(속성)이라고 하며,
오른쪽의 red는 속성 값입니다.
selector(선택자)는 여러 종류가 올 수 있고, 태그이름도 올 수 있고, class이름도, id 이름도 올 수 있다.
tag: 태그이름
p { font-size: 12px; }
lass: .클래스이름
selector가 태그였을 때는 단순히 태그이름만 적어주었지만, 그런데 클래스에 디자인을 적용하고 싶을 때는 selector에 .(dot)이 필요하다..profile-detail { font-weight: bold; }
"profile-detail" 이라는 클래스가 적용된 태그에는 모두 글씨 두께가 두꺼워 집니다.
<p class="profile-detail">이것도 두꺼워 지고</p> <span class="profile-detail">이것도</span> <div class="profile-detail">그리고 이것도..</div> <p class="profile-detail">이것도 두꺼워 지고</p> <span class="profile-detail">이것도</span> <div class="profile-detail">그리고 이것도..</div>
id: #아이디이름
id에 디자인을 적용하고 싶을 때는 selector에 #이 필요하다. 아래와 같이 id이름 앞에 #을 붙여 selector를 작성해주어야 한다.#profile { border-width: 1px; border-color: black; border-style: solid; text-align: center; }
