-
HTML/CSS 복습!엘리스트랙 2023. 12. 14. 20:01728x90
HTML의 기본 구조
<!DOCTYPE html> <---- html5 문서의 선언 부분
<html> <---- html 문서의 시작
<head>
<meta charset="UTF-8">
<title>웹사이트 제목 입력</title>
</head>
<body> <---- 웹사이트의 내용
</body>
</html> <---- html 문서의 끝
로 이루어져 있다.
HTML의 기본 태그
<h> 태그: 주로 제목이나 부제목 표현에 쓴다.
ex) <h1>제목</h1> 이런식으로 사용하며 숫자가 작을수록 크기가 크다.
<p> 태그: 본문의 내용을 표현한다.
<img> 태그: 이미지 삽입에 쓰며 닫힌 태그가 아니다
ex) <img src="image.png" alt="이미지">
src는 이미지 파일의 경로이고 alt는 이미지를 불러오지 못했을 때 대체되는 텍스트이다.
<ul> 태그: 순서가 없는 리스트 생성
ex)
<ul>
<li>1</li>
<li>2</li>
</ul>
구조를 잡을 때 사용하는 태그
웹사이트의 목차를 나타내는 <header>, <nav>
<header> 태그: 웹사이트의 머리글을 담는 공간
<nav> 태그: 메뉴를 담당하는 공간으로 주로 <ul>, <li>, <a> 태그와 함께 사용된다.
웹사이트의 본문을 나타내는 <main>, <article> 태그
<main> 태그: 문서의 주요 내용이 들어있다.
<article> 태그: 문서의 주요 이미지나 텍스트가 들어있는 구역을 설정하고 <h>태그가 존재해야 한다.
페이지의 하단을 나타내는 <footer> 태그도 있고
공간을 나누어주는 <div> 태그도 있다.
CSS
CSS는 HTML로 작성된 정보를 꾸며주는 역할을 한다.
CSS의 구성 요소는
선택자 {
속성: 속성값;
}
으로 이루어져 있으며
선택자에는 디자인을 적용할 HTML 영역을 나타내며 h1과 같은 태그에 직접 적용하거나
class나 ID를 지정해 적용할 수 있다.
CSS 연동 방법
<h1 style="color: red;">hi</h1>
이런 방식으로 직접 안에 넣어 사용하는 방법도 있고
HTML파일 내부에서 <head>태그 안에 <style>태그를 넣어 사용하는 방법도 있다.
아니면 외부 .css 파일을 <head>태그 안에 <link>태그로 불러와 사용하는 방법도 있다.
728x90'엘리스트랙' 카테고리의 다른 글
SQL 복습! (0) 2023.12.24 자바 클래스 복습! (0) 2023.12.23 자바 OOP 복습! (0) 2023.12.22 Git 복습! (0) 2023.12.16 리눅스 복습! (0) 2023.12.16