HTML

Front/HTML+CSS 2023. 1. 3.

Web이란 무엇인가?

  1. web의 개념 및 역사에 대해 알아본다
  2. web을 뒷받침하는 기술에 대해서 알아본다.

 

Web을 뒷받침하는 기술의 발명

Protocol : 컴퓨터들 간의 원활한 통신을 위해 지키기로 약속한 규약 (ex. 무슨 행동을 수행할 것인지, 언제 어떻게 호출할 것인지 순서 등)

URL : http(프로토콜)://wikibook.co.kr(정보자원을 가진 컴퓨터의 위치)/webtext(자원이 있는 폴더)/index.html(자원이름)
= 인터넷 주소

나 => 구글
나 : Client 요청 구글 : Server 응답

 

홈페이지는 무엇으로 만들어졌을까?

HTML CSS JS
뼈대 디자인 기능

 

HTML (Hyper Text MarkUp Language) 의 구성요소

  • HT : Hyper Text
    → 현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트(html의 기본이 됨)
  • ML : Mark Up
    → 태그

→ : 웹 페이지에 정보를 담아 표시하기 위한 마크업 언어

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item

<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위

태그의 종류

  1. 개행 <br>
  2. 강조 <strong>
  3. 리스트 태그
    • “리스트 선언”
      • ul (unordered list)
      • ol (ordered list)
      • text-decoration : none
      • (CSS 다 배우고 복습할 때 보면 됨)
  4. 리스트 내 실질적 데이터
    • li (list-item) ★★★
  5. 이미지 태그 <img>
    • 필수 속성 src 경로를 지정
    ( 1 ) 절대경로 외부소스
    • 현재를 기준으로 ./
    • 상위를 기준으로 ../
    • 여러번 상위로 ../ ../ ~~
    • 최상위로 /
  6. ( 2 ) 상대경로
  7. a태그 (anchor) 다른 문서로 즉시 이동
    • 필수 속성 href 어디로 이동?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hr color="red" width="150" size="140">
    <hr color="orange" width="150" size="120">
    <hr color="yellow" width="150" size="100">
    <hr color="green" width="150" size="80">
    <hr color="blue" width="150" size="60">
    <hr color="indigo" width="150" size="40">
    <hr color="purple" width="150" size="20">
</body>
</html>
  • <ul> : 번호 없는 목록을 사용할 때 사용하는 태그
  • → unordered list (나 리스트 사용한다~)
  • <ol> : 번호있는 목록을 사용할 때 사용하는 태그
  • → ordered list
  • <li> : 공통적으로 사용되는 태그
  • → list-item
<img src="https://item.kakaocdn.net/do/227099b086918f895eaa636a43fdc923ce9463e040a07a9462a54df43e1d73f1" width="300px">

<img src="../img/image.png" width="300px"> ./ 들어가기만 하면 & 파일 나가야 하면 ../*나가야하는 파일 개수 + / 최상위
저작자표시 동일조건

'Front > HTML+CSS' 카테고리의 다른 글

HTML_본문  (0) 2022.12.16
HTML_ready  (0) 2022.12.16
HTML_main  (0) 2022.12.16

티스토리툴바