HTML 태그 정리 – 이해하고 활용하기
안녕하세요! 노코딩입니다 😊
이번 글에서는 이전 게시판 만들기 글에서 사용했던 HTML 태그들을 하나하나 다시 정리해볼 거예요. 각 태그의 역할과 쓰임새를 제대로 이해하는 것은 웹 페이지를 만드는 데 정말 중요하거든요.
<html> 태그: 웹 페이지의 시작과 끝을 감싸는 태그입니다. 모든 HTML 코드는 이 태그 안에 포함됩니다.
예시 코드:
<!DOCTYPE html>
<html lang="ko">
<!-- 여기에 모든 HTML 코드가 들어가요 -->
</html>
<head> 태그: 웹 페이지의 메타 정보를 담는 부분입니다. 제목, 외부 CSS 연결 등 브라우저에는 보이지 않는 정보를 포함합니다.
예시 코드:
<head>
<meta charset="UTF-8">
<title>내 게시판</title>
<link rel="stylesheet" href="style.css">
</head>
<title> 태그: 브라우저 탭에 표시되는 페이지 제목을 지정합니다.
예시 코드:
<title>나만의 게시판</title>
<link> 태그: HTML에 외부 CSS 파일을 연결합니다. rel 속성으로 관계를 지정하고, href 속성으로 파일 경로를 지정합니다.
예시 코드:
<link rel="stylesheet" href="style.css">
<body> 태그: 화면에 표시되는 모든 내용이 들어가는 부분입니다.
예시 코드:
<body>
<h1>게시판 제목</h1>
<p>여기에 게시판의 내용이 표시됩니다.</p>
</body>
<header> 태그: 웹 페이지의 상단 영역을 정의합니다. 보통 제목, 로고, 네비게이션 메뉴 등을 포함합니다.
예시 코드:
<header>
<h1>게시판 제목</h1>
</header>
<section> 태그: 웹 페이지의 주요 내용을 나눌 때 사용합니다. 여러 개의 <section>을 이용해 웹 페이지를 구성할 수 있습니다.
예시 코드:
<section class="board">
<h2>게시판 목록</h2>
<ul>
<li>첫 번째 게시글</li>
<li>두 번째 게시글</li>
</ul>
</section>
<div> 태그: 웹 페이지의 특정 부분을 묶어서 스타일을 지정하거나, 특정 기능을 추가할 때 사용합니다.
예시 코드:
<div class="board-header">
<h2>게시판 제목</h2>
<button>글 작성</button>
</div>
<ul> 태그: 정렬되지 않은 목록을 정의합니다. 여기에 <li> 태그를 사용해 항목을 추가합니다.
예시 코드:
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<li> 태그: 목록의 항목을 정의합니다. <ul> 또는 <ol> 태그 안에서 사용됩니다.
예시 코드:
<ul>
<li>첫 번째 게시글</li>
<li>두 번째 게시글</li>
</ul>
<span> 태그: 텍스트의 특정 부분에 스타일을 적용할 때 사용합니다. 다른 태그들과 달리 별도의 줄 구분 없이 사용됩니다.
예시 코드:
<span class="highlight">강조된 텍스트</span>
<footer> 태그: 웹 페이지의 하단 정보를 정의합니다. 저작권 정보나 연락처를 포함할 때 자주 사용됩니다.
예시 코드:
<footer>
<p>Copyright © 2024</p>
</footer>
이번 글에서 사용된 CSS 속성 설명과 예시 코드
- font-family: 글꼴을 설정하는 속성입니다.
- 예시 코드:
body {
font-family: Arial, sans-serif;
}
background-color: 요소의 배경색을 지정합니다.
예시 코드:
header {
background-color: #333;
color: white;
}padding: 요소의 안쪽 여백을 설정합니다.
예시 코드:
.board {
padding: 20px;
}
margin: 요소의 바깥쪽 여백을 설정합니다.
예시 코드:
.board {
margin: 30px 0;
}
display: flex: 요소들을 가로로 정렬해주는 속성입니다.
예시 코드:
.board-header {
display: flex;
justify-content: space-between;
}
justify-content: 요소들을 가로 방향으로 정렬하는 속성입니다.
예시 코드:
.board-header {
justify-content: space-between;
}
text-align: 텍스트를 가로 방향으로 정렬하는 속성입니다.
예시 코드:
header {
text-align: center;
}
box-shadow: 요소에 그림자를 추가하는 속성입니다.
예시 코드:
.board {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
border-radius: 모서리를 둥글게 만드는 속성입니다.
예시 코드:
.board {
border-radius: 10px;
}
color: 텍스트의 색상을 지정합니다.
예시 코드:
.post-title {
color: #333;
}
transition: 요소의 변화를 일정 시간 동안 일어나게 하는 속성입니다.
예시 코드:
.write-btn {
transition: background-color 0.3s;
}
:hover: 마우스가 요소 위에 올라갔을 때의 스타일을 지정합니다.
예시 코드:
.write-btn:hover {
background-color: #45a049;
}
지금은 보시는 분도 적고 댓글도 적지만,
제가 만약 유명해진다면 여러분은 "나 이때부터 이 사람 알았다"라고 자랑하실 수 있을 거예요!
지금부터라도 이웃 추가와 댓글 많이 남겨주시면, 한 분 한 분 전부 기억하겠습니다! 여러분과 함께 성장하고 싶어요 😊
어떠한 경로로 들어왔든 이 글을 본 모두는 하루의 시작, 중간, 마무리일 텐데 행복하셨으면 좋겠습니다! 😊
감사합니다!
'IT > 프로그래밍' 카테고리의 다른 글
| HTML에서 Class와 ID 구분자에 대해 완벽 정리 – 차이점과 사용법 이해하기 (0) | 2024.10.23 |
|---|---|
| 게시판 기본 틀 만들기 – HTML과 CSS의 기초부터 시작해요! (1) | 2024.10.23 |
| WEB 코딩을 위한 환경 세팅: Notepad++ 다운로드부터 시작! (7) | 2024.10.22 |
| 개발자 취업? 프로그래밍 몰라도 이 블로그만 보면 OK!🔥 (13) | 2024.10.21 |
