[HTML/CSS] 4. CSS 기본

문정준

Mar 07, 2025

Contents

1. 레이아웃 (Layout)2. CSS 태그

1. 레이아웃 (Layout)

HTML로만 모든 페이지를 작성하기에는 어려움이 있음

그래픽 요소가 적어, 페이지를 보기 좋게 꾸미기 어려움

CSS를 활용하여, 각 블럭의 배치를 유동적으로 설정할 수 있음

이때 페이지 구역을 나누는 레이아웃 설계가 중요

레이아웃에 따라 각 컴포넌트를 설정하면, JS에서도 이를 반복문으로 활용할 수 있음

한 번 만들어둔 양식을 잘 다듬어 재사용 가능

2. CSS 태그

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/css/default.asp

<style></style> : 태그 설정 ( Head )

각 태그의 성질을 변경할 수 있음

html 문서의 <head></head> 부분에 작성

태그 지정 방식에 따라 변경되는 범주가 달라짐

div : div 태그 전체에 속성 부여
.box : class가 box인 태그 전체에 속성 부여
#box : id가 box인 <span>태그에 속성 부여 (여러 개 변경 불가)

태그의 속성은 매우 많으므로, 자주 쓰는건 외우되 그때그때 찾아보면서 설정할 것

속성 : 상태값; 형태로 부여

background-color : 배경색
border : 테두리

크기 설정 : px or n%
테두리 선 설정 : solid, dotted, …
테두리 색 설정

padding : 내부 여백
margin : 외부 여백
border-radius : 둥근 모서리
display : 표시 상태 (Inline, Block, …)
font-size : 글꼴 크기
font-weight : 글꼴 굵기


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .red-box {
            background-color: red;
        }

        .box {
            border: 1px dotted black;
            padding: 10px;
            margin: 10px;
            border-radius: 10px;
        }

        #box {
            display: block;
        }

        div {
            background-color: rgb(255, 208, 232);
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>Hello World</div>
    <div class="box">Hello World</div>
    <div class="box">Hello World</div>
    <span id="box">Hello World</span>
    <span>Hello World</span>
    <div class="red-box">빨간 박스</div>
</body>

</html>

See more posts

[HTML/CSS] 4. CSS 기본

1. 레이아웃 (Layout)

2. CSS 태그

<style></style> : 태그 설정 ( Head )

[HTML/CSS] 6. CSS Flexbox

[HTML/CSS] 5. CSS : Display

[HTML/CSS] 3. 학교 시간표 만들기

[HTML/CSS] 2. HTML 실습