자주 쓰이는 CSS 태그
- 배경관련 background-color, background-image, background-size
- 사이즈 width height
- 폰트 font-size(px), font-weight, font-famliy color
- 간격 margin(바깥), padding(안쪽)
- 정렬 text align : left, right, center
💡 1. 크롬 개발자 도구에서 요소 선택 버튼을 누르고 요소를 선택하면 Elements 탭 안
HTML 소스 코드에서 그 요소를 찾을 수 있다.
2. Styles 탭에서 특정 스타일 적용을 해제하여 어떻게 영향을 미치는지 확인할 수 있다.
<CSS 적용 예시>
- 아무것도 안 했을 때
- 글씨색 바꾸기 - hotpink
- 글자체 바꾸기 - oblique(기울어진 글꼴)
- 첫번째 세부 구역 나누기 -wrap
- 두번째 세부 구역 나누기 -div > div > div
- 글자색 바꾸기 - purple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kassy의 css 사용하기</title>
<style>
.wrap {
width: 100%;
}
div {
color: hotpink;
}
#div-1 > h5 {
font-weight: normal;
}
.oblique-text {
font-style: oblique;
}
div > div > div {
background-color: rgb(141, 197, 235);
}
.div-2 {
width: 300px;
}
.purple-text {
color: purple;
}
#firstname {
text-align: center;
}
</style>
</head>
<body>
<h1>1번 h1</h1>
<div class="wrap">
<div>
<h2>2번 h2</h2>
<div id="div-1">
<h3 id="firstname" class="oblique-text">2번, 3번, 4번 h3</h3>
<h3>2번, 4번 h3</h3>
<h3 class="oblique-text purple-text">3번, 4번, 6번 h3</h3>
</div>
<div class="div-2">
<h4 class="purple-text">5번, 6번 h4</h4>
<h4>2번, 5번 h4</h4>
<h4 class="oblique-text">2번, 3번, 5번 h4</h4>
</div>
<h5>2번 h5</h5>
</div>
</div>
<h5>1번 h5</h5>
</body>
</html>
CSS 파일 분리 방법
- <style> ~ </style> 부분이 너무 길면 .css 파일로 따로 분리해낼 수 있다.
- 이렇게 분리한 파일은 다른 HTML 파일에서도 참조할 수가 있기 때문에 같은 스타일의 여러 페이지에 적용하고 싶을 때 유용하다.
- first_style(만들고 싶은 제목).css 라는 새 파일을 만들고 style 태그 안에 있는 내용을 붙여 넣는다.
- 원래의 html 파일에서는 style 태그를 지우고 대신 head 태그 안에 아래와 같은 내용을 붙여 넣는다.
- <link rel="stylesheet" type="text/css" href = "first_style(만들고 싶은 제목).css">
- 브라우저에 띄워 파일 분리 전과 똑같이 나오는 것을 확인한다.
'실습기록' 카테고리의 다른 글
| 7월 5일 project - 데이터베이스 뷰 생성(My SQL) (0) | 2023.07.08 |
|---|---|
| 7월 4일 project - AJAX (0) | 2023.07.05 |
| 7월 3일 project - CSS 레이아웃 (0) | 2023.07.04 |
| JavaScrip 버튼 눌러서 배경색 변경 (0) | 2023.02.18 |
| HTML 작성 예시 (0) | 2023.01.19 |