반응형
CSS 파일 링크
css 스타일을 파일로 만들어 적용한다.
CSS 파일을 생성
mystyle.css 파일을 생성해준다. CSS 파일 생성하면된다.
복잡한 CSS 요소를 파일로 따로 저장해주고 HTML 에서 불러오는 것이다.
@charset "UTF-8";
h1 {
width: 150px;
height: 100px;
background-color: yellow;
}
body {
color: blue;
}
/* id를 할당하고 그에 따라 디자인 채워넣기 */
/* 아이디가 h1_1인 요소 */
#h1_1 {
color: red;
}
/* h1요소 중에서 아이디가 h2_2 인 요소 */
h1#h1_2 {
color: green;
}
/* 태그 종류 상관없이 클래스가 c1인 요소 */
.c1 {
background-color: black;
}
/* h3 태그 중 클래스가 c2인 요소 */
h3.c2 {
background-color: black;
color: white;
}
HTML 파일에 CSS 파일 주소 입력
<link rel="stylesheet" href = "mystyle.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href = "mystyle.css">
</head>
<body>
<!-- class 이름을 모두 c1으로 줌 -->
<h1>aaa</h1>
<h2 class="c1">bbb</h2>
<h1 id="h1_1">ccc</h1>
<h2>ddd</h2>
<h1 id="h1_2">eee</h1>
<h2 class="c1"
style="width: 100px; height: 100px; background-color: pink">fff</h2>
<!-- 요소 하나에 대해 스타일을 적용하고 싶으면 간단하게 css style 로 요소 적용 -->
<h3 class="c2">ggg</h3>
<h4 class="c2">hhh</h4>
</body>
</html>
반응형
