Notice
Recent Posts
Recent Comments
Link
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

코딩일기

CSS 기초 스터디 (얄코님의 HTML & CSS 강좌) 본문

HTML & CSS

CSS 기초 스터디 (얄코님의 HTML & CSS 강좌)

codingdiary0613 2025. 5. 3. 13:32

1️⃣ CSS 적용 방식 3가지

 

HTML에 스타일을 적용하는 방법은 총 3가지이다. 

 

1. 인라인 스타일: HTML 태그 안에 직접 style 속성으로 작성

<p style="color: blue;">파란색 문장.</p>

=> 이렇게 작성하면 "파란색문장"의 글자 색이 파란색이 된다. 

 

2. 내부스타일 : <head>안에 <style> 태그를 사용해서 스타일 작성 

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

 

3. 외부 스타일시트 : .css파일을 따로 만들고 <link>를 이용해서 HTML과 연결

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

 

* 개인적으로 외부 스타일 시트를 연결해서 작업하는 것이 가장 편리한 것 같다. 

 

 

 

 

2️⃣ 선택자(Selector)

css는 어떤 요소에 스타일을 적용할 것인가를 선택자(selector)로 지정한다. 

 

(.html)

<p class="box1">box1</p>
<h1 id ="title">제목</h1>

 

 

다음은 위의 html파일에 연결한 .css파일이다. 

 

1. 태그 선택자 

p {
  font-size: 16px;      /* 글자 크기 */
  font-weight: bold;    /* 굵기 */
  font-family: Arial;   /* 글꼴 */
  color: #333333;       /* 글자 색상 */
  text-align: center;   /* 정렬 */
}

 

2. 클래스 선택자

.box1 {
  color: red;
  font-weight: bold;
  background-color: #fff0f0;
}

 

 

3. 아이디 선택자

#title {
  font-size: 32px;
  text-align: center;
  color: darkblue;
}

 

 

 

📦 박스 모델(Box Model)

html 요소는 보이지 않더라도 기본적으로 박스 형태로 존재한다.

1. margin : 요소의 바깥 여백

2. border : 테두리

3. padding : 콘텐츠와 테두리 사이 여백 

4. content : 실제 내용 

(margin과 padding이 좀 헷갈렸었다.. .... 😅)

 

(예시)

.box1 {
  margin: 20px;
  padding: 10px;
  border: 1px solid black;
}

 

* 박스 크기 조절 

- width(가로) height(높이) 를 이용해서 크기를 조절할 수 있다. 

- max-width/ min-width / max-height/ min-height 등오로 최소, 최대도 설정 가능하다.

- **box-sizing : border-box를 설정하면 padding과 border를 포함해서 전체 크기를 계산한다. **

 

 

 

😇display 속성

기본 디스플레이 방식은 크게 두 가지로 나눌 수 있다. 

1) block: 줄 바꿈 발생 - 예_  <div> , <p> 등 

2) inline: 줄 바꿈 x  - 예_ <span>, <a> 등 

 

 

(기타 유용한 display 값)

  • inline-block: inline처럼 배치되면서 block처럼 크기 지정 가능
  • none: 화면에서 숨김
  • flex: Flexbox 레이아웃 사용 (다시 공부) 
  • grid: Grid 레이아웃 사용 (다시 공부) 

 

🤖 position 속성 : 요소의 위치 조절 

  • static: 기본값, 흐름대로 배치
  • relative: 기준 위치에서 상대 이동
  • absolute: 가장 가까운 relative 부모 기준으로 절대 위치
  • fixed: 화면 기준으로 고정
  • sticky: 스크롤 위치에 따라 고정됨

 

Flexbox 레이아웃 시스템

display: flex 를 사용하면 수평, 수직 정렬을 할 수 있다. 

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

 

((주요속성들))

flex-direction: row / column

justify- content: flex-start, center, space-between 등 

align-items: stretch, center, flex-end 등. 

gap: 자식 요소들 사이 간격 

 

 

미디어 쿼리로 반응형 웹 만들기는 다음 편에 다시 적는걸로 ..! 

'HTML & CSS' 카테고리의 다른 글

[CSS] Flexbox  (0) 2025.05.23
CSS 속성  (0) 2025.05.10
HTML 스터디- (얄코님의 HTML & CSS 강좌)  (0) 2025.05.02
'HTML & CSS' Related Articles more