728x90
반응형
HTML은 웹 페이지의 구조를 정의하며, CSS는 해당 구조를 디자인합니다. 이번 글에서는 HTML과 CSS의 기초 문법과 구조에 대해 알아보고, 간단한 예제 코드를 통해 학습해보겠습니다.
1. HTML 기초 문법
1.1. HTML 문서의 기본 구조
HTML 문서는 기본적으로 다음과 같은 구조를 가집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
<body>
문서 내용
</body>
</html>- <!DOCTYPE html>: 문서의 형식을 정의합니다. HTML5를 사용한다는 것을 나타냅니다.
- <html>: HTML 문서의 시작을 알립니다.
- <head>: 문서의 정보를 포함합니다. 보이지는 않지만, 검색 엔진 등에서 사용됩니다.
- <meta charset="UTF-8">: 문서의 문자 인코딩을 정의합니다. UTF-8은 대부분의 언어를 지원합니다.
- <title>문서 제목</title>: 문서의 제목을 정의합니다. 브라우저의 탭에 표시됩니다.
- <body>: 문서의 내용을 포함합니다.
1.2. HTML 태그
HTML 문서는 여러 가지 태그를 사용하여 구성됩니다. 태그는 <태그이름>과 </태그이름>으로 이루어져 있으며, <태그이름>은 태그의 시작을, </태그이름>은 태그의 끝을 나타냅니다. 태그 사이에는 내용이 들어갑니다.
제목과 단락 태그
문서의 제목이나 단락을 나타내기 위해 다음과 같은 태그를 사용합니다.
- <h1> ~ <h6>: 제목을 나타냅니다. 숫자가 작을수록 중요도가 높습니다.
- <p>: 단락을 나타냅니다.
링크 태그
다른 웹 페이지나 문서로 이동할 때 링크를 사용합니다. 링크 태그는 <a>입니다.
<a href="링크주소">링크텍스트</a>이미지 태그
이미지를 삽입할 때는 <img> 태그를 사용합니다.
<img src="이미지파일경로" alt="대체텍스트">- src: 이미지 파일의 경로를 지정합니다.
- alt: 이미지가 로드되지 않았을 때 대체로 사용할 텍스트를 지정합니다.
1.3. HTML 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>나의 웹 페이지</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>나의 웹 페이지</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>소개</h2>
<p>안녕하세요. 나의 웹 페이지에 오신 것을 환영합니다.</p>
<p>저희는 웹 페이지 개발을 전문으로 하는 회사입니다.</p>
</section>
<section>
<h2>서비스</h2>
<ul>
<li>웹 페이지 제작</li>
<li>반응형 웹 페이지 제작</li>
<li>웹 페이지 유지보수</li>
</ul>
</section>
<section>
<h2>문의</h2>
<form>
<div>
<label for="name">이름</label>
<input type="text" id="name">
</div>
<div>
<label for="email">이메일</label>
<input type="email" id="email">
</div>
<div>
<label for="message">메시지</label>
<textarea id="message"></textarea>
</div>
<button type="submit">전송</button>
</form>
</section>
</main>
<footer>
<p>© 2023 나의 웹 페이지</p>
</footer>
</body>
</html>2. CSS 기초 문법
2.1. CSS 문법
CSS는 선택자와 규칙의 조합으로 이루어져 있습니다. 선택자는 스타일을 적용할 요소를 지정하고, 규칙은 선택한 요소에 적용할 스타일을 정의합니다.
선택자 {
속성: 값;
속성: 값;
...
}- 선택자: 스타일을 적용할 요소를 선택합니다.
- 속성: 적용할 스타일의 종류를 정의합니다.
- 값: 속성에 적용할 스타일의 값입니다.
2.2. CSS 적용 방법
CSS는 다음과 같은 방법으로 HTML 문서에 적용할 수 있습니다.
인라인 스타일
요소의 style 속성을 사용하여 스타일을 직접 적용하는 방법입니다.
<p style="color: red;">이 문장은 빨간색입니다.</p>내부 스타일 시트
HTML 문서 내부에서 <style> 태그를 사용하여 스타일을 정의하는 방법입니다.
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>이 문장은 빨간색입니다.</p>
</body>외부 스타일 시트
CSS 파일을 따로 만들어 HTML 문서에서 불러와 사용하는 방법입니다.
<head>
<link rel="stylesheet" href="style.css">
</head>2.3. CSS 예제 코드
/* 제목 스타일 */
h1 {
color: blue;
font-size: 30px;
text-align: center;
}
/* 단락 스타일 */
p {
color: green;
font-size: 20px;
line-height: 1.5;
}
/* 링크 스타일 */
a {
color: red;
text-decoration: none;
}
/* 이미지 스타일 */
img {
width: 100%;
height: auto;
}
728x90
반응형
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
|---|---|
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
| [HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 (0) | 2023.02.26 |
| [HTML/CSS] CSS 선택자의 종류와 활용 방법 (0) | 2023.02.26 |
| [HTML/CSS] 자주 쓰이는 HTML 태그 (0) | 2023.02.25 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
| [HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 (2) | 2023.02.23 |
| [HTML/CSS] HTML5와 CSS3에서 추가된 기능 (0) | 2023.02.22 |
댓글