반응형
CSS 사용 용도
HTML을 더 편하게 꾸미는 코드.
요소 선택
태그명/id/class
CSS 작성법
- 페이지 전체에 적용 : <head>에 정의한다.
- 요소 한개에 적용 : style 속성으로 css를 작성한다.
이 중 자기 태그에 있는 CSS가 더 우선시된다.
<head>
<style type="text/css">
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 {
background-color: black;
}
h3.c2 { /* 코드 상세하게 작성 */
background-color: black;
color: white;
}
</style>
</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>
이 모든 것들이 한 파일 안에 들어가 있으면 복잡하니, 코드를 CSS 파일로 저장해 필요할 때마다 import 하는 방법이 있다.
반응형
반응형
CSS 사용 용도
HTML을 더 편하게 꾸미는 코드.
요소 선택
태그명/id/class
CSS 작성법
- 페이지 전체에 적용 : <head>에 정의한다.
- 요소 한개에 적용 : style 속성으로 css를 작성한다.
이 중 자기 태그에 있는 CSS가 더 우선시된다.
<head>
<style type="text/css">
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 {
background-color: black;
}
h3.c2 { /* 코드 상세하게 작성 */
background-color: black;
color: white;
}
</style>
</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>
이 모든 것들이 한 파일 안에 들어가 있으면 복잡하니, 코드를 CSS 파일로 저장해 필요할 때마다 import 하는 방법이 있다.
반응형
