CSS (Cascading Style Sheets)
HTML이 '뼈대'와 '구조'를 정의한다면, CSS는 '디자인'과 '배치'를 담당
- HTML과는 다르게 단독으로 사용될 수 없는 언어
HTML :
<button class="primary-btn">장바구니에 추가</button>
CSS :
.primary-btn {
/* 배경색을 녹색 계열(#4CAF50)로 지정 */
background-color: #4CAF50;
/* 글자색을 흰색(white)으로 지정 */
color: white;
/* 추가: 버튼처럼 보이게 하는 기본 스타일들
(찜 목록 CSS에 이미 포함되어 있습니다)
*/
padding: 1rem; /* 안쪽 여백 */
border: none; /* 테두리 없음 */
border-radius: 5px; /* 모서리 둥글게 */
cursor: pointer; /* 마우스 올리면 손가락 모양 */
}기본 구조
연결
별도의 .css 파일을 만들어 <link> 태그로 HTML <head> 안에서 연결 (가장 권장되는 방식)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>장바구니 목록</title>
<!-- CSS 연결 -->
<link rel="stylesheet" href="style.css">
<script src="./js/app.js"></script>
</head>
...
선택자(selectors)
선택한 태그의 속성을 변경
/* "h1" 태그를 선택 */
h1, h2 { /* 선택자(Selector) */
color: #2c3e50; /* 속성(Property): color, 값(Value): 진한회색 */
text-align: center;
margin-bottom: 1.5rem;
}
박스 모델 (Box Model)
모든 HTML 요소는 박스로 이루어져 있으며, 4가지 영역으로 구성된다.
- Content : 내용
- Padding : 안쪽 여백
- Border : 테두리
- Margin : 바깥쪽 여백
Display 속성
요소가 화면에 어떻게 배치될지 결정한다.
- display: block; : 한 줄을 전부 차지 (<div>, <p>,<h1>)
- diplay: inline; : 자기 크기만큼만 차지하며 옆으로 붙음 (<span>, <a>, <img>)
- diplay: flex; : 가로로 나란히 배치
- display: none; 화면에서 사라지게 만듬
'웹 > 관련 지식' 카테고리의 다른 글
| HTTP (HyperText Transfer Protocol) (0) | 2026.05.27 |
|---|---|
| JavaScript (0) | 2026.05.26 |
| HTML (HyperText Markup Language) (0) | 2026.05.26 |
