css 기본 문법

css 기본 문법

ChatGPT의 말:

CSS(Cascading Style Sheets)는 HTML 요소의 스타일(모양과 느낌)을 지정하는 언어입니다. 아래는 CSS의 기본 문법과 주요 개념들입니다.

---

✅ 1. 기본 문법

선택자 {
  속성: 값;
  속성: 값;
}

예시:

h1 {
  color: blue;
  font-size: 24px;
}

• h1은 선택자(selector) — 어떤 요소에 스타일을 적용할지 지정.
• color와 font-size는 속성(property).
• blue, 24px은 값(value).
• 각 선언은 속성: 값; 형식이며, 세미콜론 ;으로 끝냄.

---

✅ 2. 선택자 종류

선택자	설명	예시
*	전체 선택자	* { margin: 0; }
태그	특정 태그	p { color: gray; }
클래스 (.)	class 속성에 적용	.menu { font-size: 18px; }
아이디 (#)	id 속성에 적용	#header { background: black; }
자식 (>)	자식 요소	ul > li { list-style: none; }
후손 (공백)	모든 하위 요소	div span { color: red; }
그룹 (,)	여러 선택자에 적용	h1, h2, h3 { font-weight: bold; }

---

✅ 3. 주요 속성

▸ 텍스트 관련

color: red;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: underline;

▸ 박스 모델

width: 300px;
height: 100px;
margin: 10px;
padding: 20px;
border: 1px solid black;

▸ 배경

background-color: #f0f0f0;
background-image: url('bg.jpg');
background-size: cover;

▸ 위치

position: relative;
top: 10px;
left: 5px;
z-index: 1;

▸ Flexbox (레이아웃)

display: flex;
justify-content: center;
align-items: center;

---

✅ 4. 주석

/* 이 부분은 주석입니다 */

---

✅ 5. CSS 작성 방법

1. 인라인 스타일

<p style="color: red;">Hello</p>

 

 

2. 내부 스타일시트

<style>
  p { color: red; }
</style>

 

3. 외부 스타일시트

<link rel="stylesheet" href="style.css">

 

필요하다면 CSS 레이아웃, 반응형 디자인, 애니메이션 같은 고급 주제도 알려드릴 수 있어요. 원하시나요?

나의 말:

css 레이아웃, 반응형 디자인

ChatGPT의 말:

좋습니다! 이제 CSS 레이아웃과 반응형 디자인의 핵심 개념과 자주 쓰는 방법들을 간단한 예제와 함께 정리해 드릴게요.

---

🧱 1. CSS 레이아웃 기본

레이아웃은 HTML 요소를 화면에 어떻게 배치할지 결정하는 방식입니다. 주요 레이아웃 기법은 다음과 같습니다:

---

✅ 1-1. display: block / inline / inline-block

속성	설명
block	한 줄 전체를 차지 (div, p 등)
inline	콘텐츠만큼만 차지 (span 등)
inline-block	콘텐츠만큼 차지하면서 width, height 지정 가능

---

✅ 1-2. float (예전 방식)

.box {
  float: left;
  width: 50%;
}

 

지금은 Flexbox나 Grid를 주로 사용합니다.

---

✅ 1-3. Flexbox (추천)

.container {
  display: flex;
  justify-content: space-between; /* 가로 정렬 */
  align-items: center;            /* 세로 정렬 */
}

• 주로 1차원(가로/세로 한 방향) 레이아웃에 적합
• 유연하게 크기 조절 가능

---

✅ 1-4. Grid Layout

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3등분 */
  gap: 10px;
}

• 2차원 레이아웃을 구성할 때 유용
• 행/열 정렬이 쉬움

---

📱 2. 반응형 디자인 (Responsive Design)

다양한 화면 크기(모바일, 태블릿, 데스크탑 등)에 맞게 자동으로 조정되는 레이아웃을 만드는 기법입니다.

---

✅ 2-1. 미디어 쿼리 (Media Queries)

/* 기본: 데스크탑 */
.container {
  width: 800px;
}

/* 모바일용 */
@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

뷰포트 너비가 600px 이하일 경우 스타일 변경

---

✅ 2-2. 유동적인 단위 사용

• px (고정): 픽셀 단위 → 반응형에 불리함
• %, vw, vh: 뷰포트 기준 단위
• em, rem: 글꼴 기준 상대 단위

예시:

width: 100%;       /* 부모 너비의 100% */
font-size: 1.5rem; /* 기본 글꼴 크기의 1.5배 */

---

✅ 2-3. Flexbox + 미디어 쿼리

.wrapper {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  .wrapper {
    flex-direction: column; /* 모바일에서는 세로 배치 */
  }
}

---

✅ 2-4. 모바일 우선 개발 (Mobile First)

/* 모바일용 기본 스타일 먼저 작성 */
.container {
  width: 100%;
}

/* 큰 화면에 맞춘 스타일을 나중에 덮어씌움 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

---

💡 팁

• meta viewport 태그를 HTML에 포함하세요:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 반응형 웹 디자인을 더 쉽게 하고 싶다면 CSS 프레임워크를 활용해 보세요:
  • Tailwind CSS
  • Bootstrap
  • Vuetify (Vue 기반)