📌간단한 HTML, CSS 소개

김충·2025년 5월 20일

HyperText Mark-up Language

우리가 흔히 보는 웹사이트의 모습을 보여주기 위해 사용되는 마크업 언어이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Hello, artists!</p>
    </body>
</html>

HTML 코드의 기본 형식은 이런 형태로 이루어져 있으며, 크게 head 태그와 body 태그로 나뉘어져 있다.

🧠 head 태그

보통 head 태그 안에는

사이트 제목 (title)
문자 인코딩 방식 (meta charset)
인라인 CSS 정의 (style)
외부 파일 연결 (link)

으로 이루어져 있고, 코드는

    <head>
        <meta charset="utf-8">
        <title>간단한 HTML 소개</title>
        <link rel="stylesheet" href="style.css">
        <style>
        
        	(페이지 꾸미는 코드....)
            
        </style>
    </head>

위와 같이 구성되어진다. head 태그 영역은 페이지 자체에 대한 정보를 담는 영역이며, 말 그대로 문서 자체의 'head' 인 만큼 중요한 역할을 한다.

💪 body 태그

보통 body 태그 안에는

텍스트 (p)
이미지 (img)
링크 (a href)
레이아웃 컨테이너 (div)
버튼 (button)
스크립트 (script)

으로 이루어져 있고, 코드는

	<body>
        <p>Hello, world!</p>
        <img src="image.jpg" alt="예시 이미지">
  		<a href="https://example.com">test</a>
        <div></div>
        <button>버튼1</button>
        <script src="test.js"></script>
    </body>

같이 구성된다. body 태그 영역은 웹사이트 화면에 실제로 보이는 모든 요소를 담는 영역이며, 페이지의 'body' 역할을 한다.

Cascading Style Sheets

웹사이트의 스타일을 지정하기 위한 디자인 언어이다.

CSS의 역할은 웹의 '옷' 역할을 한다고 생각하면 편하다.

옷을 입지 않으면, 멋을 내기 힘든 것처럼 웹은 CSS 없이 HTML만으로 웹을 구성하기엔 많이 부족하다.

CSS는 이러한 역할들을 한다.

색상 지정
글꼴 스타일
레이아웃
반응형 디자인
애니메이션

그리고 작성 방식에도 차이가 있다.

인라인 스타일 (HTML 태그 안에 직접 작성)
내부 스타일시트 (style 태그 안에 작성
외부 스타일시트 (css 파일과 연결)

이렇게 나뉘지만, 대부분은 외부 CSS 파일을 따로 분리하여 작성한 뒤 연결한다. 이유는 유지보수가 편리하고, 문서 내 코드 가독성을 방해하지 않기 때문이다.

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

이런 방식으로 코드가 작성된다. 코드 속 선택자는 어떤 HTML 요소(h1, .class, #id)에 스타일을 적용할지 지정하며, 속성은 적용할 스타일 종류 (color, font-size, margin, padding) 작성하며, 값은 속성의 값 (blue, 30px, center)을 입력하여 요소를 디자인한다.

만약에 h1 태그에 파란색을 입히고, 글씨 크기는 30px, 가운데 정렬을 하고 싶다면..

h1 {
  color: blue;
  font-size: 30px;
  text-align: center;
}

이런식으로 코드를 작성하면 된다.

마무리..

CSS는 다룰 내용이 상당히 많으니 다음 시간에 자세히 다뤄보도록 하겠습니다~~!! 다들 좋아요, 댓글, 팔로우 부탁드립니다 ㅎㅎ

김충

FE 개발자 지망생

이전 포스트

💻프론트, 백, 서버, API

다음 포스트

📌CSS에 대하여..(1)

2개의 댓글

정세진

2025년 5월 20일

css가 무슨 약자인지 첨 알게됐어요!

1개의 답글