1. CSS란? - 선택자, 속성, 값
- HTML은 문서를 구조화하는 것이고, CSS는 그런 HTML을 디자인하는 것
<style>은 무조건 <head>라는 태그 안에 넣어야 적용이 된다.
속성(키)와 값이 들어가는데 (중괄호 사용), 이건 [ : ] 으로 구분한다.
ex) p { font-size : 18px; }
2. margin, border, padding
[Margin]
[border / padding]
- display: inline; (거의 사용 X)
- display: inline; 은 쓰지 말 것 → 인라인은 무조건 내용물의 크기에 fix되므로 크기 적용이 되지 않는다. → height나 width를 설정해도 적용되지 않는다.
- display inline-block; (사용 권장)
<블락의 미지의 영역>
3. CSS는 따로 저장하고 가져와서 사용
- head에서 style을 다 작성하고 생성 → 그럼 css 파일을 만들어서 따로 저장 → log.html / log.css 이렇게 1:1로 매칭되도록 생성
- 관리하기 편하도록 css와 html을 분리 → html에서 해당 css파일을 상대 경로로 불러오는 방식을 사용
예제@charset "utf-8”;
CSS 파일의 첫번째 줄에는 반드시 해당 코드를 작성해야 한다. (세미콜론 필수)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="고양이가 좋아하는 것과 일상을 소개합ㄴ디ㅏ">
<title>고양이의 일상</title>
<link rel="stylesheet" href="ex04.css">
</head>
<body>
<h1>고양이의 하루</h1>
<p>계속 잠을 잡니다</p>
</body>
</html>@charset "utf-8";
body {
background-color: purple;
}
h1 {
color: #0bd;
}
p {
font-size: 20px;
}4. CSS 연습
Share article