FRONT-END

[HTML, CSS] HTML 과 CSS 기초 1

gudwns5533 2026. 6. 11. 18:33

HTML의 기본 구조

HTML(HyperText Markup Language)은 웹페이지의 구조와 컨텐츠를 정의하는 표준 마크업 언어이다.

웹의 기본 뼈대인 HTML과 함께 CSS(디자인) 및 JavaScript(기능)를 결합하여 완전한 웹사이트를 완성한다.

<!-- html version5를 의미, 첫줄에서 html의 버전을 알 수 있다 -->
<!-- (태그 속성)식으로 코드 작성 -->
<!DOCTYPE html>

<!-- 언어정보: 시각장애인을 위한 언어를 설정해줄 수 있다 -->
<html lang="ko">

<!-- head: 문서 정보 -->
<head>
    <!-- meta: 정보를 세팅 -->
    <meta charset="UTF-8"> 
    <!-- 반응형 화면을 위한 정보 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 제목표시줄에 들어가는 정보 -->
    <title>HTML</title> 
</head>

<!-- body: 실제 화면에 나오는 내용 -->
<body>            
    <!--
        HTML 주석문
        작성일: 2026-06-10
        작성자: 나
    -->
    HTML 이란?
</body>
</html>

<!-- Live server 여는 법: Alt+L+O -->
<!-- 주석은 소스코드보기로 모두 보이므로 중요한 정보는 주석에 넣으면 안된다 -->

HTML의 공간 개념 : 박스 모델

+---------------------------------------------------------+
|  Margin (바깥쪽 여백: 이웃한 다른 요소와의 간격)           |
|   +-------------------------------------------------+   |
|   |  Border (테두리: 눈에 보이는 외곽선)              |   |
|   |   +-----------------------------------------+   |   |
|   |   |  Padding (안쪽 여백: 내용과 테두리 사이)  |   |   |
|   |   |   +---------------------------------+   |   |   |
|   |   |   |  Content (내용: 텍스트나 이미지)  |   |   |   |
|   |   |   +---------------------------------+   |   |   |
|   |   +-----------------------------------------+   |   |
|   +-------------------------------------------------+   |
+---------------------------------------------------------+
  • content : 내용이 나오는 공간
  • padding : 내용과 테두리 사이의 여백
  • border : 내용에 대한 테두리 공간
  • margin : 여백 공간

블록 태그와 인라인 태그

  • 블록 태그 : 한 줄 전체를 차지하며 줄 바꿈이 자동으로 발생함.
  • 인라인 태그 : 내용만큼만 공간을 차지하며 줄바꿈이 발생하지 않음.

텍스트 태그

제목 태그

<h1>부터 <h6>까지 있으며, 숫자가 작을수록 상위제목이라 생각하면 된다.

<h1>안녕하세요. Heading</h1>
<h2>안녕하세요. Heading</h2>
<h3>안녕하세요. Heading</h3>
<h4>안녕하세요. Heading</h4>
<h5>안녕하세요. Heading</h5>
<h6>안녕하세요. Heading</h6>

 

제목 태그는 블록 태그이기 때문에 옆에 붙여 쓰더라도 줄 바꿈이 돼서 아래로 내려간다.

문단 태그

<p>태그를 사용하고, 하나의 독립된 문단을 만든다. (블록 태그)

 <p>문단을 만드는 태그</p>일반 텍스트

서식 태그

<p><b>굵게</b> 표현하기</p>
<p><strong>굵게</strong> 표현하기</p> <!-- strong태그를 쓰면 장애인 음성지원시 더 강하게 읽어줌 -->
<p><i>이탤릭체</i> 표현하기</p>
<p><em>이탤릭체</em> 표현하기</p>
<p><ins>밑줄</ins> 표현하기</p>
<p><del>삭제</del> 표현하기</p>
<p>x<sup>2</sup> + y<sup>3</sup> = z</p> <!-- 윗첨자 -->
<p>H<sub>2</sub>O</p> <!-- 아랫첨자 -->
  • <b> : 굵게 표시
  • <strong> : 굵게 표시 + 강조(스크린 리더에서 더 강하게 읽어준다)
  • <i> : 이탤릭체
  • <em> : 이탤릭체 + 강조(strong태그와 동일한 역할)
  • <ins> : 밑줄 추가
  • <del> : 취소선 추가
  • <sup> : 윗첨자
  • <sub> : 아랫첨자

목록 태그

순서가 없는 태그

<ul> 태그 안에 각 항목을 <li> 태그로 감싸서 사용

<ul>
    <li>김사과</li>
    <li>오렌지</li>
    <li>반하나</li>
</ul>

순서가 있는 태그

<ol>태그 안에 각 항목을 <li> 태그로 감싸서 사용

<ol>
    <li>김사과</li>
    <li>오렌지</li>
    <li>반하나</li>
</ol>

설명 목록 태그

<dl> : 설명 목록의 시작

<dt> : 제목

<dd> : 상세 설명 (기본적으로 들여쓰기 적용)

<dl>
    <dt>류정원 선생님</dt>
    <dd>김사과</dd>
    <dd>오렌지</dd>
    <dd>반하나</dd>
</dl>

이미지 태그

HTML에서 이미지를 넣고 싶을 땐 <img>태그를 사용한다. 

<img src="이미지_경로" alt="대체_텍스트">

이미지 경로

절대경로 : 이미지의 고유한 전체 주소 (디렉토리상의 주소나, 웹상의 URL)

<img src="C:\SHJ\4_HTML_CSS\spring1.png" alt="봄">
<img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고">
  • 절대경로에 디렉토리상의 주소를 사용하게 되면 서버에 올렸을 때 다른 사람들은 이미지를 볼 수 없다.
  • 인터넷에 공개된 이미지는 웹주소를 통해 넣어도 되지만, 그 이미지가 그 주소상에서 사라졌을 때는 이미지 표시가 안된다.

상대경로 : 작성중인 HTML 파일을 기준으로 이미지의 위치를 찾아가는 방식

<img src="spring1.png" alt="봄">
<img src="images/spring2.png" alt="봄2">

이미지 포맷

웹에서 사용 가능한 주요 이미지 포맷들은 다음과 같다

포맷 특징
PNG 투명도 표현이 가능하고, 화질 손실이 없다.
JPEG / JPG 압축률이 우수하여 용량이 작다.
GIF 여러 프레임을 합쳐 움짤을 만들 수 있지만, 해상도가 낮다.
WebP JPG, PNG, GIF의 장점을 모두 합친 포맷, 하지만 아직 호환성이 떨어진다.
SVG 코드로 이루어진 벡터 이미지로, 확대해도 깨지지 않는다.

하이퍼링크 태그

HTML에서 링크를 만들 때는 <a> 태그를 사용한다.

<a href="이동할_주소">클릭할_텍스트_또는_이미지</a>

링크 경로

절대 경로 : 인터넷상의 고유한 전체 URL 주소를 그대로 적어준다.

<a href="https://www.naver.com">네이버</a>
<a href="https://tcpschool.com"><img src="https://tcpschool.com/img/logo.png" alt="TCP스쿨 로고"></a>

 

상대 경로 : 현재 HTML 파일이 위치한 곳을 기준으로 다른 파일의 위치를 찾아 연결해준다.

 <a href="./4_이미지.html">이미지 페이지</a>
 <a href="./pages/subpage.html">서브페이지</a>

CSS

CSS(Cascading Style Sheets)는 HTML과 함께 사용되며 웹 페이지의 스타일과 레이아웃을 정의하는 스타일시트 언어.

선택자 { 
    속성: 값; 
    속성: 값;
}
  • 선택자 : 스타일을 적용할 HTML 요소를 선택.
  • 속성 : 바꾸고 싶은 디자인 항목.
  • 값 : 속성에 부여할 구체적인 스타일 내용.

CSS 스타일 적용 방법

1. 인라인 스타일 : HTML 태그 안에 직접 style 속성으로 CSS를 작성하는 방식

<p style="color: gold;">안녕하세요. css입니다.</p>

 

2. 내부 스타일 : <style> 태그를 사용하여 CSS를 작성하는 방식

<style>
    body { background: deepskyblue; }
    h1 { color: white; text-align: center; }
</style>

 

3. 외부 스타일 : CSS 코드를 별도의 .css 파일에 작성하고, HTML문서에서 link 태그로 연결하는 방식

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

 

👉 CSS 스타일 적용 우선순위

1. 인라인 스타일

2. 내부 스타일시트 / 외부 스타일시트 (우선순위가 같으며, HTML 코드 상 더 아래쪽에 쓴 것이 최종 반영됨)

CSS 선택자

1. 태그 선택자

특정 HTML 태그 전체에 스타일을 적용.

h1 {
    color: deepskyblue;
    text-align: center;
}

2. 클래스 선택자

HTML 태그에 클래스를 붙여서 그룹으로 꾸밀 때 사용. 이름 앞에 ( . ) 을 붙인다.

.intro {
    font-weight: bold;
    color: deeppink;
}

3. 아이디 선택자

단 하나밖에 없는 요소에 고유한 이름을 붙여 꾸밀 때 사용. 이름 앞에 ( # ) 을 붙인다.

#favorite-list {
    background-color: ivory;
    padding: 10px;
}

4. 그룹 선택자

여러 선택자에 똑같은 스타일을 한 번에 적용하고 싶을 때 ( , ) 로 연결해서 사용한다.

p,
li {
    font-size: 20px;
    /* pc기본 글꼴 사이즈는 16px */
}

5. 의사 클래스 선택자

요소의 특정한 '상태'에 스타일을 부여한다. ( :hover ) 는 마우스를 올렸을 때 작동한다.

a:hover {
    color: yellowgreen;
    text-decoration: none;
}

6. 속성 선택자

HTML 태그가 가진 특정 속성과 그 값을 확인해서 일치하는 요소만 선택한다.

h1[title="제목"] {
    background-color: ivory;
}

7. 자식 선택자

부모 바로 밑에 있는 직계 자식만 선택한다.

ul#favorite-list>li {
    list-style-type: square;
}

8. 자손 선택자(자식 포함)

선택자 사이에 공백을 주면, 자식뿐 아니라 그 아래 자손까지 선택한다.

ul#favorite-list p {
    color: violet;
    font-weight: bold;
}

9. 형제 선택자

부모가 같은 형제들 중, 인접한 형제를 선택한다.( + ) 사용. 모든 형제 선택 시 ( ~ )  사용.

p.intro+p {
    background-color: aqua;
}

'FRONT-END' 카테고리의 다른 글

[JavaScript] JaveScript 기초 3 (함수, 스코프, 배열)  (0) 2026.06.16
[JavaScript] JavaScript 기초 2 (연산자, 제어문)  (0) 2026.06.16
[JavaScript] JavaScript 기초 1 (개요, 변수, 자료형)  (0) 2026.06.15
[HTML, CSS] HTML 과 CSS 기초 3  (1) 2026.06.15
[HTML, CSS] HTML 과 CSS 기초 2  (0) 2026.06.12

'FRONT-END'의 다른글

  • 현재글[HTML, CSS] HTML 과 CSS 기초 1

관련글

티스토리툴바