1. HTML
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 문서의 구조를 정의하고 내용을 표시하는 데 사용됩니다. HTML은 웹 브라우저에게 어떻게 문서를 표시해야 하는지 알려주는 역할을 합니다.
아래는 HTML에 관련된 많은 정보들이 있는 사이트입니다.
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN (mozilla.org)
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에
developer.mozilla.org
2. CSS
CSS란 Cascading Style Sheets의 약자로서 HTML 요소의 스타일을 지정할 수 있는 기능을 말합니다.
CSS를 사용하여 웹 디자인을 꾸밀 수 있습니다.이러한 CSS를 적용하는 방법으로는 크게 3가지가 있습니다.
1) Inline CSS
Inline CSS는 HTML 태그에 style속성을 사용하여 직접 지정하는 방법입니다.
<p style="color: blue; font-size: 16px;">이 문장은 파란색이고 글자 크기가 16px입니다.</p>
이러한 방식은 권장되지는 않습니다. 왜냐하면 페이지가 많아지고 같은 스타일을 적용할 태그들이 많아질수록 유지보수가 점점 어려워지기 때문입니다.
2) Internal CSS
Internal CSS는 내부 스타일 시트라고도 하는데 style 태그를 사용하여 스타일을 정의하는 방법입니다.
아래 예시처럼 주로 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 CSS 예제</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문장은 녹색이고 글자 크기가 18px입니다.</p>
</body>
</html>3) External CSS
External CSS는 외부의 CSS파일을 만든 후 HTML 파일에 CSS파일을 링크하여 적용하는 방법입니다.
이 방법이 제일 권장되는 방법입니다.
style.css
/* styles.css */
p {
color: red;
font-size: 20px;
}
html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 CSS 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>이 문장은 빨간색이고 글자 크기가 20px입니다.</p>
</body>
</html>
4) CSS 선택자
아래 예제에서 주석으로 설명하겠습니다.
See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.
'WEB PUBLISHING > HTML-CSS' 카테고리의 다른 글
| HTML 태그 (0) | 2024.05.26 |
|---|