HTML
HTML (HyperText Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어. HTML은 다양한 태그를 사용하여 텍스트, 이미지, 링크 등 다양한 요소를 표현하며, 브라우저가 이를 해석하여 사용자에게 웹 페이지를 표시.
기본 구조:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<!-- 내용이 여기에 들어갑니다 -->
<h1>Hello, World!</h1>
<p>This is a sample HTML page.</p>
</body>
</html><!DOCTYPE html>: 현재 문서가 HTML5 문서임을 정의.<html>: HTML 문서의 루트 요소.<head>: 문서의 메타데이터와 링크, 스타일, 스크립트 등을 정의.<meta>: 문서의 메타데이터를 정의. 문자 인코딩 및 뷰포트 설정 등이 여기에 해당.<title>: 문서의 제목을 정의.<body>: 문서의 본문을 정의.
태그와 속성:
-
텍스트 요소:
<h1>,<p>,<a>,<span>등은 텍스트를 표시하는 데 사용.<h1>제목 1</h1> <p>문단 내용</p> <a href="https://www.example.com">링크</a> <span>스팬 요소</span> -
이미지 요소:
<img>는 이미지를 삽입하는 데 사용.<img src="image.jpg" alt="이미지 설명"> -
목록 요소:
<ul>,<ol>,<li>는 목록을 표현하는 데 사용.<ul> <li>항목 1</li> <li>항목 2</li> </ul> <ol> <li>순서 있는 항목 1</li> <li>순서 있는 항목 2</li> </ol> -
폼 요소:
<form>,<input>,<button>은 사용자 입력을 받는 데 사용.<form action="/submit" method="post"> <label for="username">사용자명:</label> <input type="text" id="username" name="username"> <button type="submit">제출</button> </form>
CSS
CSS (Cascading Style Sheets)는 HTML 문서의 스타일을 정의하기 위한 스타일 시트 언어. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 폰트 등을 디자인할 수 있다.
기본 구조:
/* 주석은 이렇게 작성합니다 */
/* 선택자(selector)와 중괄호 안에 스타일 규칙을 작성합니다 */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}-
선택자: HTML 요소를 선택하는 패턴이며, 스타일을 적용할 대상을 지정.
-
속성(property)과 값(value): 스타일 규칙을 정의할 때 사용되며, 각각 어떤 스타일을 적용할지 결정.
주요 스타일 속성:
-
색상:
color,background-color등을 사용하여 글자색과 배경색을 지정할 수 있다.h1 { color: #ff0000; /* 빨간색 */ background-color: #ffffff; /* 흰색 */ } -
폰트:
font-family,font-size,font-weight등을 사용하여 글꼴과 글자 크기, 굵기 등을 지정할 수 있다.body { font-family: 'Helvetica', sans-serif; font-size: 16px; font-weight: bold; } -
레이아웃:
width,height,margin,padding등을 사용하여 요소의 크기와 여백을 조절할 수 있다..container { width: 80%; margin: 0 auto; /* 가운데 정렬을 위한 방법 */ padding: 20px; }
Thymeleaf
Thymeleaf는 서버 측 Java 템플릿 엔진으로, HTML, XML, JavaScript, CSS를 처리할 수 있다. 주로 Spring Framework와 함께 사용되며, 서버에서 동적인 웹 페이지를 생성하는 데 사용.
Thymeleaf 템플릿 예제:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Example</title>
</head>
<body>
<h1 th:text="${title}">Default Title</h1>
<ul>
<li th:each="item : ${items}" th:text="${item}">Item</li>
</ul>
<div th:if="${loggedIn}">
<p>Welcome, <span th:text="${username}">User</span>!</p>
</div>
</body>
</html>-
th:text: 텍스트 값을 출력하는 데 사용. -
th:each: 반복문을 나타내며, 리스트의 각 항목을 순회. -
th:if: 조건문을 나타내며, 지정된 조건이 참일 때 해당 요소를 렌더링.
Thymeleaf는 동적 데이터와 템플릿을 결합하여 HTML을 생성하므로, 서버 측에서 유연하고 동적인 웹 페이지를 만들 수 있다.
