엘리스트랙

HTML/CSS 복습!

Zmann 2023. 12. 14. 20:01
728x90

 

 

 

 

 

 

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