오늘은 CSS 에 대해서 작성해보겠습니다.
CSS란 HTML을 꾸미는 기술입니다. CSS의 핵심은 HTML의 어떤 부분을 어떻게 꾸밀 것인가 입니다.
HTML과 CSS 연결
1. 대상 태그 내부 style 속성 사용
<h1 style="color:red">하이</h1>
2. head 태그 내부 style 태그 선언
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>빨간맛</h1>
</body>
</html>
3. 파일 분리 (이 방법을 주로 사용)
<head>
<link rel="stylesheet" href="style.css">
</head>
CSS 선택자
선택자는 HTML의 '어떤 부분'을 정의하는데 필요한 개념입니다.
p {
color: red;
}
p는 선택자(selector), color는 속성(property), red는 속성값(property value)
1. 전체
-> 문서 전체를 선택하는 선택자
-> * 을 사용
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2. 태그
-> 태그 이름 사용
div {
}
3. id
-> 앞에 #을 붙여줌
#id {
color: green;
}
4. class
-> 앞에 .을 붙여줌
.blue {
color: blue;
}
5. 특성(attribute)
-> [속성] or [속성 = 속성값]
-> hover: 마우스가 올라간 상
[href]
{
background-color: black;
}
[href = "https://www.naver.com"]
{
background-color: black;
}
p: hover {
background-color:balck;
}
css 우선순위
id > class = attribute > tag
CSS 사이즈 단위
1. px
2. rem
-> html 태그에 걸려있는 fontsize를 따라감
3. em
-> 부모 요소의 글꼴 크기
4. %
-> 부모 요소의 크기에 대해 %를 설정
CSS 박스 모델
content: 실제 html 태그 내 컨텐츠로써 내용이 차지하는 영역
padding: 테두리(border)와 컨텐츠 사이의 여백
border: 박스의 테두리
margin: 테두리 바깥 여백
width, height: 너비, 높이
max/min wdith/height: 너비, 높이의 최대, 최솟값
CSS font
'프로젝트' 카테고리의 다른 글
| 맛집지도 만들기 - 서버 (2) | 2025.01.22 |
|---|---|
| 맛집지도 만들기 - Javscript 비동기 처리 (2) | 2025.01.22 |
| 맛집지도 만들기 - javascript (1) | 2025.01.22 |
| 맛집지도 만들기 - client(3) (1) | 2025.01.20 |
| 맛집지도 만들기 - client(1) (0) | 2025.01.16 |