웹 프로젝트를 시작하기 전, 알아야 할 HTML과 CSS의 기본

IT개발및프로그래밍

웹 프로젝트를 시작하기 전, 알아야 할 HTML과 CSS의 기본

devgodmj 2024. 11. 17. 16:48

📌 HTML 기본 태그와 기능

HTML은 웹페이지의 구조를 만드는 뼈대입니다. 주로 사용하는 태그들을 아래에 정리했습니다.

1. HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>내 웹페이지</title>
  </head>
  <body>
    <h1>환영합니다!</h1>
    <p>이곳은 웹의 세계입니다.</p>
  </body>
</html>

<!DOCTYPE html>: HTML5 문서임을 선언.
<html>: HTML 문서의 최상위 요소.
<head>: 메타데이터(제목, 스타일 등) 포함.
<body>: 화면에 표시되는 콘텐츠.

2. 자주 사용하는 HTML 태그들

📄 텍스트 관련 태그

<h1> ~ <h6>: 제목을 나타냅니다. 숫자가 작을수록 중요도가 높아요.

<h1>가장 큰 제목</h1>
<h3>중간 크기의 제목</h3>
<h6>가장 작은 제목</h6>

<p>: 단락을 표시합니다.

<p>이것은 단락입니다.</p>

<strong>: 텍스트를 굵게 강조합니다.

<!DOCTYPE html>
<html>
<head>
    <title>strong 태그 예제</title>
</head>
<body>
    <p>이 문장에서 <strong>강조된 텍스트</strong>는 중요한 부분입니다.</p>
    <p>예를 들어, <strong>공지사항</strong>이나 <strong>경고 문구</strong>에 사용할 수 있습니다.</p>
</body>
</html>

<em>: 텍스트를 기울여 강조합니다.

<!DOCTYPE html>
<html>
<head>
    <title>em 태그 예제</title>
</head>
<body>
    <p>이 문장에서 <em>강조된 텍스트</em>는 중요한 부분입니다.</p>
    <p>예를 들어, <em>의미를 강조</em>하거나 <em>특별한 단어</em>를 나타낼 때 사용할 수 있습니다.</p>
</body>
</html>

🔗 링크와 이미지

<a href="URL">: 클릭 가능한 링크를 만듭니다.

<!DOCTYPE html>
<html>
<head>
    <title>링크 태그 예제</title>
</head>
<body>
    <p>이 사이트를 방문해보세요: <a href="https://www.google.com">Google</a></p>
</body>
</html>

<img src="URL" alt="이미지 설명">: 이미지를 표시합니다.

<!DOCTYPE html>
<html>
<head>
    <title>이미지 태그 예제</title>
</head>
<body>
    <h1>내가 좋아하는 사진</h1>
    <img src="example.jpg" alt="예제 이미지">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>이미지 활용</title>
</head>
<body>
    <h1>이미지 활용 예제</h1>

    <!-- 기본 이미지 -->
    <img src="https://via.placeholder.com/150" alt="150x150 크기의 이미지">

    <!-- 이미지 크기 조절 -->
    <img src="https://via.placeholder.com/300" alt="300x300 크기의 이미지" width="150" height="150">

    <!-- 대체 텍스트와 툴팁 -->
    <img src="nonexistent.jpg" alt="이미지를 불러올 수 없습니다." title="이미지 설명">

    <!-- 배너 스타일 이미지 -->
    <img src="https://via.placeholder.com/600x100" alt="배너 이미지" width="100%">
</body>
</html>

📋 목록

<ul>: 순서 없는 목록(●, ○ 등).
<ol>: 순서 있는 목록(1, 2, 3...).
<li>: 목록 항목.

<ul>
    <li>아이템 A</li>
    <li>아이템 B</li>
</ul>

<style>
    ul.custom-list {
        list-style-type: square; /* 기호를 사각형으로 변경 */
    }

    ol.custom-list {
        list-style-type: lower-roman; /* 소문자 로마 숫자로 변경 */
    }
</style>

<ul class="custom-list">
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

<ol class="custom-list">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

<ul>
    <li>외부 목록 1
        <ul>
            <li>내부 목록 1-1</li>
            <li>내부 목록 1-2</li>
        </ul>
    </li>
    <li>외부 목록 2</li>
</ul>

📊 테이블

<table>: 테이블 생성.
<tr>: 행.
<td>: 열(셀 데이터).
<th>: 테이블 헤더.

<!DOCTYPE html>
<html>
<head>
    <title>테이블 예제</title>
</head>
<body>
    <h1>학생 성적표</h1>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>수학</th>
            <th>영어</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>김영희</td>
            <td>95</td>
            <td>92</td>
        </tr>
    </table>
</body>
</html>

추가속성

border
- 테이블에 테두리를 추가합니다.

<table border="1">
    <!-- 테이블 내용 -->
</table>

colspan
- 셀이 가로로 몇 칸을 병합할지 지정합니다.

<td colspan="2">합병된 셀</td>

rowspan

셀이 세로로 몇 칸을 병합할지 지정합니다.

<td rowspan="2">합병된 셀</td>

병합된 셀 예제

<table border="1">
    <tr>
        <th>이름</th>
        <th>과목</th>
        <th>점수</th>
    </tr>
    <tr>
        <td rowspan="2">홍길동</td>
        <td>수학</td>
        <td>90</td>
    </tr>
    <tr>
        <td>영어</td>
        <td>85</td>
    </tr>
</table>

🎨 CSS 기본 속성

CSS는 HTML의 꾸미는 도구입니다. 색깔, 배치, 글자 크기 등 다양한 스타일을 지정할 수 있죠.

1. 텍스트 관련 스타일

color: 글자 색상을 지정합니다.
예) color: blue;
font-size: 글자 크기를 설정합니다.
예) font-size: 16px;
font-weight: 글자의 굵기를 설정합니다.
예) font-weight: bold;
text-align: 텍스트 정렬. (left, center, right)
예) text-align: center;

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트 스타일링</title>
    <style>
        /* 글자 색상 설정 */
        .colored-text {
            color: blue; /* 글자 색상: 파란색 */
        }

        /* 글자 크기와 굵기 설정 */
        .large-bold-text {
            font-size: 24px; /* 글자 크기: 24픽셀 */
            font-weight: bold; /* 글자 굵기: 굵게 */
        }

        /* 텍스트 정렬 */
        .centered-text {
            text-align: center; /* 텍스트를 가운데 정렬 */
        }

        /* 여러 스타일을 조합 */
        .styled-text {
            color: green;
            font-size: 20px;
            font-weight: bold;
            text-align: right; /* 텍스트를 오른쪽 정렬 */
        }
    </style>
</head>
<body>
    <h1 class="colored-text">파란색 텍스트</h1>
    <p class="large-bold-text">큰 크기의 굵은 텍스트</p>
    <p class="centered-text">가운데 정렬된 텍스트</p>
    <p class="styled-text">초록색, 굵기, 오른쪽 정렬 텍스트</p>
</body>
</html>

2. 박스 모델(Box Model)

모든 HTML 요소는 박스 모델로 구성됩니다.

margin: 요소 바깥 여백.
padding: 요소 안쪽 여백.
border: 테두리 설정.
width, height: 요소의 크기 설정.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 모델 예제</title>
    <style>
        /* 컨테이너 스타일 */
        .box {
            width: 300px; /* 너비 */
            height: 150px; /* 높이 */
            margin: 20px; /* 바깥 여백 */
            padding: 20px; /* 안쪽 여백 */
            border: 2px solid black; /* 테두리 */
            background-color: #f0f0f0; /* 배경 색상 */
        }

        /* 외부 여백 강조 */
        .box.margin-highlight {
            margin: 50px; /* 큰 바깥 여백 */
            background-color: #d9f2e6; /* 연한 초록 배경 */
        }

        /* 안쪽 여백 강조 */
        .box.padding-highlight {
            padding: 50px; /* 큰 안쪽 여백 */
            background-color: #f2d9e6; /* 연한 분홍 배경 */
        }
    </style>
</head>
<body>
    <h1>박스 모델 예제</h1>

    <div class="box">
        기본 박스 (너비: 300px, 높이: 150px)
    </div>

    <div class="box margin-highlight">
        바깥 여백 강조 (margin: 50px)
    </div>

    <div class="box padding-highlight">
        안쪽 여백 강조 (padding: 50px)
    </div>
</body>
</html>

3. 배경

background-color: 배경 색상 지정.
예) background-color: #f0f0f0;
background-image: 배경 이미지를 설정.
예) background-image: url('example.jpg');

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배경 색상 및 이미지 예제</title>
    <style>
        /* 배경 색상만 적용 */
        .background-color-box {
            width: 300px;
            height: 150px;
            background-color: #f0f0f0; /* 연한 회색 배경 */
            border: 1px solid #ccc; /* 테두리 */
            margin: 10px;
            padding: 10px;
        }

        /* 배경 이미지 적용 */
        .background-image-box {
            width: 300px;
            height: 150px;
            background-image: url('https://via.placeholder.com/300');
            background-size: cover; /* 이미지가 박스를 채우도록 조정 */
            background-position: center; /* 중앙 정렬 */
            border: 1px solid #ccc;
            margin: 10px;
        }

        /* 배경 색상과 배경 이미지 함께 사용 */
        .background-mixed-box {
            width: 300px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */
            background-image: url('https://via.placeholder.com/300');
            background-blend-mode: overlay; /* 색상과 이미지를 섞음 */
            background-size: cover;
            background-position: center;
            border: 1px solid #ccc;
            color: white; /* 텍스트 색상 */
            display: flex; /* 텍스트 정렬을 위한 flexbox 사용 */
            justify-content: center; /* 가로 중앙 정렬 */
            align-items: center; /* 세로 중앙 정렬 */
        }
    </style>
</head>
<body>
    <h1>배경 색상 및 이미지 예제</h1>

    <!-- 배경 색상만 적용 -->
    <div class="background-color-box">
        배경 색상 적용
    </div>

    <!-- 배경 이미지 적용 -->
    <div class="background-image-box">
        배경 이미지 적용
    </div>

    <!-- 배경 색상과 이미지 함께 사용 -->
    <div class="background-mixed-box">
        배경 색상 + 이미지
    </div>
</body>
</html>

4. 배치와 위치

display: 요소의 배치 방식(block, inline, flex).

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display 속성 예제</title>
    <style>
        .block {
            display: block;
            width: 100%;
            background-color: #f0f0f0;
            padding: 10px;
            margin: 5px 0;
        }

        .inline {
            display: inline;
            background-color: #d9f2e6;
            padding: 5px;
            margin: 5px;
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
            background-color: #f2d9e6;
            padding: 10px;
        }

        .flex-item {
            background-color: #fff;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>`display` 속성 예제</h1>

    <h2>Block</h2>
    <div class="block">Block 요소</div>

    <h2>Inline</h2>
    <span class="inline">Inline 요소 1</span>
    <span class="inline">Inline 요소 2</span>

    <h2>Flex</h2>
    <div class="flex-container">
        <div class="flex-item">Flex Item 1</div>
        <div class="flex-item">Flex Item 2</div>
        <div class="flex-item">Flex Item 3</div>
    </div>
</body>
</html>

position: 요소의 위치 설정(static, relative, absolute, fixed).

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position 속성 예제</title>
    <style>
        .static {
            position: static;
            background-color: #f0f0f0;
            padding: 10px;
        }

        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            background-color: #d9f2e6;
            padding: 10px;
        }

        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: #f2d9e6;
            padding: 10px;
        }

        .fixed {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: #ffe0b2;
            padding: 10px;
        }

        .container {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <h1>`position` 속성 예제</h1>

    <h2>Static (기본값)</h2>
    <div class="static">Static 요소</div>

    <h2>Relative</h2>
    <div class="relative">Relative 요소</div>

    <h2>Absolute</h2>
    <div class="container">
        <div class="absolute">Absolute 요소</div>
    </div>

    <h2>Fixed</h2>
    <div class="fixed">Fixed 요소</div>
</body>
</html>

z-index: 쌓이는 순서를 설정.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index 속성 예제</title>
    <style>
        .box1 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: #ffcccc;
            z-index: 1;
        }

        .box2 {
            position: absolute;
            top: 70px;
            left: 70px;
            width: 100px;
            height: 100px;
            background-color: #ccffcc;
            z-index: 2;
        }

        .box3 {
            position: absolute;
            top: 90px;
            left: 90px;
            width: 100px

5. 플렉스박스(Flexbox)

레이아웃 배치에서 자주 사용됩니다.

display: flex;: 플렉스 컨테이너를 생성.
justify-content: 가로축 정렬.
align-items: 세로축 정렬.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 예제</title>
    <style>
        /* Flex 컨테이너 스타일 */
        .flex-container {
            display: flex; /* 플렉스 컨테이너 생성 */
            width: 100%;
            height: 200px;
            border: 2px solid #ccc;
            background-color: #f9f9f9;
        }

        /* Flex 아이템 스타일 */
        .flex-item {
            width: 100px;
            height: 100px;
            background-color: #ffcccb;
            margin: 5px;
            display: flex; /* 아이템 내부에서 중앙 정렬 예제용 */
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #333;
            border: 1px solid #aaa;
        }

        /* 가로축 정렬 예제 */
        .justify-center {
            justify-content: center;
        }

        .justify-space-between {
            justify-content: space-between;
        }

        .justify-space-around {
            justify-content: space-around;
        }

        /* 세로축 정렬 예제 */
        .align-center {
            align-items: center;
        }

        .align-start {
            align-items: flex-start;
        }

        .align-end {
            align-items: flex-end;
        }
    </style>
</head>
<body>
    <h1>Flexbox 예제</h1>

    <h2>가로축 정렬 (`justify-content`)</h2>
    <h3>1. 가운데 정렬</h3>
    <div class="flex-container justify-center">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h3>2. 공간 나누기 (space-between)</h3>
    <div class="flex-container justify-space-between">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h3>3. 공간 분배 (space-around)</h3>
    <div class="flex-container justify-space-around">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h2>세로축 정렬 (`align-items`)</h2>
    <h3>1. 가운데 정렬</h3>
    <div class="flex-container align-center">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h3>2. 상단 정렬 (flex-start)</h3>
    <div class="flex-container align-start">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    <h3>3. 하단 정렬 (flex-end)</h3>
    <div class="flex-container align-end">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

가로축 정렬 (justify-content)

center:
- 모든 아이템을 가운데로 정렬.
space-between:
- 아이템 간 최대한의 공간을 분배, 양쪽 끝에 정렬.
space-around:
- 아이템 주변에 균일한 여백을 분배.

세로축 정렬 (align-items)

center:
- 모든 아이템을 세로축 가운데로 정렬.
flex-start:
- 모든 아이템을 세로축 상단에 정렬.
flex-end:
- 모든 아이템을 세로축 하단에 정렬.

활용 팁

Flex 컨테이너 속성

display: flex: 플렉스 컨테이너를 생성.
flex-direction: 가로축(row, 기본값) 또는 세로축(column) 설정 가능.
gap: 아이템 간 간격 조절.

Flex 아이템 속성

order: 요소의 순서 변경.
flex-grow: 아이템이 가로 공간을 차지하는 비율 설정.

현재글웹 프로젝트를 시작하기 전, 알아야 할 HTML과 CSS의 기본

devgodmj

devgodmj 님의 블로그 입니다.

Spring, 자바입문, c프로그래밍, 구조체, 배열, 리터럴과값차이, 반복문, 자바, 아두이노, c언어배열과구조체, 스프링, 반복제어, 미니디지털피아노, 함수호출과복귀, 자동으로led색변경, led깜빡이기, 프로그래밍기초, 구구단출력프로그램, 동적자료구조, 삼색led, 자료구조, 포인터와연결리스트, 순차제어, 선택제어, led밝기조절, 자바기초, 피에조스피커, 리터럴종류, 명령어제어구조, 버튼으로led색변경,

Today :
Yesterday :

일	월	화	수	목	금	토
		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

devgodmj