비전공자를 위한 CSS 기초

티스토리 뷰

IT/IT 이것 저것

비전공자를 위한 CSS 기초

KS짱짱맨 2025. 4. 8. 10:37

1. CSS가 무엇인가요?

HTML은 웹사이트의 뼈대(구조)를 만드는 언어입니다.
CSS는 그 웹사이트의 **모양(디자인)**을 꾸며주는 언어입니다.

예를 들어, 사람에게 옷(HTML)을 입혔을 때, 그 옷의 색깔·무늬·스타일(CSS)을 정해주는 것과 비슷해요.

정리하자면:

HTML = 뼈대 만들기
CSS = 예쁘게 꾸미기

참고서: https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics

CSS 구성 블록 - Web 개발 학습하기 | MDN

이 강의에서는 CSS 첫 번째 단계 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서

developer.mozilla.org

2. CSS 선택자(selector)란 무엇일까요?

웹사이트(HTML) 안에는 여러 가지 요소(예: 제목, 글, 그림 등)가 있어요.
이 중에서 "어떤 것을 꾸밀지" 알려주는 것이 **CSS 선택자(selector)**랍니다.

참고서 : https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Styling_basics/Basic_selectors

CSS 선택자 - Web 개발 학습하기 | MDN

CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합

developer.mozilla.org

● 대표적인 선택자

태그 선택자(tag selector)
- HTML의 태그 이름을 그대로 써서 선택해요.
- 예: body, h1, p 등
- p { color: red; } 라고 쓰면, 페이지에 있는 모든 <p> 글자들을 빨간색으로 바꿉니다.
클래스 선택자(class selector)
- 비슷한 역할을 하는 여러 요소들을 한꺼번에 꾸밀 때 사용해요.
- HTML에서 class="fruit"라고 적으면, CSS에서 .fruit로 꾸밀 수 있어요.
- 예: .fruit { color: orange; }
아이디 선택자(id selector) => 잘 안씀
- 하나의 요소를 특별하게 지정할 때 사용해요.
- HTML에서 id="banana"라고 적으면, CSS에서 #banana로 꾸밀 수 있어요.
- 예: #banana { color: yellow; }

#태그 선택자(tag selector)
h1 {
  color: blue;
}

#클래스 선택자(class selector)
.special {
  color: blue;
}

3. CSS가 HTML에 적용되는 로직(방법)은?

어떻게 CSS로 꾸민다고 HTML이 알아들을까요? 방법은 크게 두 가지가 있어요.

HTML 안에 직접 쓰는 방법 (Inline 또는 내부 스타일)
- HTML 파일 안에 <style></style> 태그를 넣어 그 안에 CSS를 써요.
- 또는 태그 자체에 style=""을 써서 꾸밀 수도 있지만, 아주 간단한 경우에만 사용해요.
- <style> p { color: red; } </style>
CSS 파일을 따로 만들어서 연결하기 (외부 스타일)
- 따로 만든 style.css 파일을 불러와서 꾸밀 수 있어요.
- 웹사이트가 커지면 이 방법을 주로 사용해요.
<head> <link rel="stylesheet" href="style.css"> </head>

4. CSS 레이아웃(Layout) 개념 이해하기

웹페이지 안에서 글, 그림, 버튼 등이 어떻게 배치되는지 정하는 것을 레이아웃이라고 해요.

● 가장 기본이 되는 속성: display

display: block; : 박스처럼 줄을 차지해요. 다음 요소는 줄바꿈되어 아래로 내려갑니다.
display: inline; : 글자처럼 옆으로 이어서 배치돼요.
display: flex; : 안에 있는 요소들을 가로 혹은 세로로 쉽게 정렬하고 배치할 수 있어요.
display: grid; : 격자 형태(가로·세로 칸)를 만들 수 있어요.

예시:

.container {
  display: flex;  /* 안에 있는 요소들을 한 줄에 쭉 나란히 배치 */
  justify-content: center;  /* 가운데 정렬 */
}

5. CSS의 스타일링을 위한 주요 속성들과 단위

이제 실제로 꾸밀 때 자주 쓰는 속성들을 알아볼까요?

● 글자 관련

color: 글자 색깔을 정해요. (예: color: blue;)
font-size: 글자 크기를 정해요. (예: font-size: 16px;)
font-weight: 글자의 굵기를 정해요. (예: font-weight: bold;)

● 배경 관련

background-color: 요소(박스)의 배경 색깔을 정해요. (예: background-color: yellow;)
background-image: 배경에 이미지를 넣어요. (예: background-image: url('banana.png');)

● 위치·여백 관련

margin: 박스 밖의 여백(바깥쪽 공간)을 정해요. (예: margin: 10px;)
padding: 박스 안의 여백(안쪽 공간)을 정해요. (예: padding: 10px;)
border: 테두리(두께, 모양, 색)를 정해요. (예: border: 2px solid green;)

● 크기 조절

width: 가로 길이를 정해요. (예: width: 200px;)
height: 세로 길이를 정해요. (예: height: 100px;)

● 자주 쓰는 단위

px: 픽셀이라는 컴퓨터 화면의 작은 점 단위. 숫자가 클수록 크기가 커져요.
%: 부모 요소(바깥 박스) 크기에 비례하여 퍼센트로 크기를 정해요.
em: 현재 글자 크기를 기준으로 비율을 정해요. (조금 더 깊이 있는 내용이지만, 기억만 해둬요)
rem: HTML 최상위 글자 크기를 기준으로 비율을 정해요.

정리 & 마무리

CSS는 웹사이트를 예쁘게 꾸며주는 언어입니다.
**선택자(selector)**를 이용해 "어떤 요소를 꾸밀지" 정합니다.
HTML과 CSS를 연결해 스타일을 적용합니다.
레이아웃은 웹페이지에서 요소들이 어떻게 배치되는지 정하는 방법입니다.
주요 속성들을 잘 외워두면 CSS로 여러 가지 멋진 디자인을 만들 수 있어요.
**단위(px, %, em, rem)**를 알면, 화면 크기에 맞춰서 자연스럽게 요소 크기를 조절할 수 있어요.

728x90

'IT > IT 이것 저것' 카테고리의 다른 글

비전공자를 위한 JS기초 (1)	2025.04.08
비전공자를 위한 HTML 기초 (0)	2025.04.08
Figma_아이콘을 어떻게 바꿀까? (How to change Icon in instance) (0)	2024.11.18
Django 시작하기 (1)	2024.03.27
Chat GPT API Document 공부 정리 (0)	2023.05.04

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/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

글 보관함

250x250

Doitman

티스토리 뷰