🌱 HTML 복습

Yeonn·2024년 8월 13일

HTML+CSS

목록 보기

12/18

📖 `Web`

📌 World Wide Web
internet ? 인터넷은 TCP/IP 프로토콜을 사용하여 통신하는 전 세계 네트워크들의 집합체

하이퍼텍스트( Hypertext )로 표현되는 여러 문서들을 컴퓨터를 통해 모니터에 출력 !
하이퍼텍스트
- HTML( Hypertext Mark-up Language )로 작성
- HTTP프로토콜( Hypertext Transfer Protocol )을 통해 정보/데이터 송수신
웹 페이지의 구성요소( 웹의 3대 구성요소 )
- HTML( HyperText Markup Language ): 웹 페이지의 구조와 내용
- CSS( cascading Style Sheet ): 웹 페이지의 모양
- JavaScript: 웹 페이지의 동적 변경

❓ `HTML`

웹 페이지와 그 내용을 구조화하기 위한 마크업 언어
웹 문서의 구조와 내용을 정의
tag 를 이용하여 텍스트, 이미지, 링크 등의 요소를 표시하고 구성
- HyperText Markup Language
- HyperText: 웹사이트에서 ‘링크’를 이용해 다른 문서 / 사이트로 이동할 수 있는 기능
- Markup: 태그를 사용해 문서에서 해당 부분의 목적 / 의미를 설명

❓ `tag`

📌 요소의 시작과 끝을 표시하는 마크업 기호

✔️ `tag 기본 문법`

<태그이름 속성='속성값'> 콘텐츠 </태그이름>

태그 이름: 해당 태그가 어떤 컨텐츠를 표시하는지 의미
콘텐츠: 태그 사이에 태그가 실제로 표시할 콘텐츠( 내용 ) 작성
속성: 태그에 부가 기능 추가를 위해 작성하는 것( optional )
속성값: 속성에 부여된 기능이나 설정을 구체적으로 지정하는 값
self-closing tag: 태그 내부에 콘텐츠를 포함하지 않아 닫는 태그를 따로 작성하지 않음
- ex) <br /> <img /> <input /> …

✔️ `HTML 문서의 기본 구조`

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	// ...
</body>
</html>

!DOCTYPE html
- 모든 html 문서는 DOCTYPE 선언으로 시작
- 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문
- <!DOCTYPE html> 은 HTML5로 작성된 문서임을 선언하는 방법
html
- HTML 문서의 시작과 끝 선언
head
- HTML 문서의 title, 메타데이터( metadata ), 스타일 시트, 스크립트 포함
  - title: 브라우저의 탭에 표시되는 웹 페이지의 제목
  - 메타데이터: 웹 페이지 자체에 대한 정보나 다른 외부 요소들과의 연결을 정의하는 데이터
body
- 웹 페이지의 실제 내용

✔️ `HTML Tags`

🌱 `meta tag Attributes`

head 에 작성 !
charset="character_set" : 인코딩 방식 지정( 한글: “UTF-8” )
content="value(text)"

name="정보이름"

keywords: 검색 엔진을 위한 키워드를 정의
viewport: 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트를 설정
author: 문서의 저자를 정의
description: 웹 페이지에 대한 설명을 정의

<head>
	<meta charset="UTF-8">
	<meta name="keyword" content="HTML, meta, tag, element, reference">
	<meta name="description" content="HTML meta tag">
	<meta name="author" content="AAA">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML meta tag</title>
</head>

http-equiv: content 속성에 명시된 값에 대한 HTTP 헤더를 제공

content-type: 해당 문서의 문자 인코딩 방식 명시
default-type: 우선적으로 적용할 스타일시트 명시

refresh: 해당 문서를 새로고침(refresh)할 시간 간격 명시

<head>
	// 10초 마다 새로고침
	<meta http-equiv="refresh" content="10">
         
   // 5초 뒤에 abc 페이지로 리다이렉트
   <meta http-equiv="refresh" content="5;url=http://www.abc.com">
			</head>
			```

🌱 `container( non-semantic )`

요소들을 묶어서 구조화 / 스타일링 적용하는 역할
웹 페이지의 레이아웃과 내용 조직화
div : Block 요소( 새로운 줄 시작, 전체 너비 차지 )
span : Inline 요소( 줄 내에서 표시, 일부만 묶어 스타일 적용 )

🌱 `text`

h
- 제목 태그, 제목이나 부제목 표현
- h1~h6까지 존재하고 숫자가 작을 수록 큰 주제 표현 !
- 한 페이지 당 h1은 한개 !
p
- 단락 태그, 문단 표현
- 문단 내용을 열린 태그와 닫힌 태그 사이에 입력
ul / ol + li
- ul : unordered list, 순서가 없는 목록과 목록 요소 태그
- ol : ordered list, 순서가 있는 목록과 목록 요소 태그
- li : list item

	<ul> // ol도 동일 !
	  <li>item 1</li>
	  <li>item 2</li>
	  <li>item 3</li>
	</ul>

🌱 `others`

img
- 이미지 태그
- src: 이미지 파일 경로 지정 ( essential )
- alt: 이미지를 설명하는 대체 텍스트
  - 이미지가 로드 되지 않았을 때 표시되는 문구
    - 시각 장애인을 위한 스크린 리더를 위한 문구
    - SEO 순위 향상( 검색 엔진 최적화 )
```
<img src="./img.png" alt="대체 텍스트" />
```
a
- 다른 페이지로 이동
- href: 링크의 대상 url 지정( essential )
- target( optional )
- _self: 현재 탭에서 이동( default )
- _blank: 새로운 탭에서 이동
```
<a hrer="https://www.abc.com" target="_blank">링크 텍스트</a>
```
```
  
```
table
- 표: 데이터를 행( row )과 열( column )로 구조화 하여 표현
- table , thead , tbody , th , tr , td

    <table>
		<thead>
			<tr>
        		<th></th>
        		<th></th>
        	</tr>
        </thead>
        <tbody>
        	<tr>
        		<td></td>
        		<td></td>
        	</tr>
        </tbody>
	</table>

form
- 사용자로부터 입력을 받는 양식
- form 태그 속성
- method (default): 사용자가 입력한 내용을 서버로 넘길 방법 지정
  - HTTP methods: GET, POST, DELETE, PUT
- name: 폼의 이름 지정
- action: 데이터를 전송할 url( 서버와 연결되는 주소 )
- form 태그 요소
  - label: 폼 요소에 레이블을 붙이기 위한 태그
  - input: 다양한 입력을 받고 type를 통해 종류 지정
  - type: text, number, radio, checkbox, password, tel, email, url…
  - placeholder: 입력 내용에 대한 힌트 제공
  - name: form 제출 시 입력 값의 이름( key )이 되는 값
  - textarea: 여러 줄의 텍스트를 입력할 수 있는 필드
  - button: ( disabled: 버튼 비활성화 ! boolean 값 가짐 )

	<form action="/submit" method="post">
    <label>
    이메일:
		<input type="email" name="email" placeholder="이메일을 입력하세요" />
    </label>
	<br />
	<label>
	비밀번호:
		<input type="password" name="password" placeholder="비밀번호를 입력하세요" />
  	</label>
  	<br />
  	<label>
    이름:
    	<input type="text" name="name" placeholder="이름을 입력하세요" />
  	</label>
    <br />
    <label>
    성별:
    	<input type="radio" name="gender" value="male" /> 남
      	<input type="radio" name="gender" value="female" /> 여
  	</label>
  	<button>submit</button>
	</form>

✔️ `Semantic tag`

해당 요소의 역할과 의미를 예측 가능하게 하는 컨테이너 태그
- 태그만 보고도 역할이나 위치를 대략적으로 파악 가능
- HTML 문서의 가독성과 유지보수성 향상
- 웹 브라우저가 HTML 소스 코드를 통해 제목, 본문 등을 구분 가능
- SEO 점수 향상: 검색 엔진 최적화
🌱 Semantic tags
- header: 웹 페이지, 섹션의 헤더( 제목, 로고 등 포함 )
- nav: HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합( 웹 페이지의 주요 링크 포함 )
- main: 주요 콘텐츠 영역, 1 페이지 당 1개
- section: HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합
- article: 독립적인 콘텐츠 블록
- aside: 사이드바
- footer: 저작권 정보, 연락처 정보, 관련 링크 등

Yeonn

이전 포스트

media query

다음 포스트

🌱 HTML 복습

HTML+CSS

📖 `Web`

❓ `HTML`

❓ `tag`

✔️ `tag 기본 문법`

✔️ `HTML 문서의 기본 구조`

✔️ `HTML Tags`

🌱 `meta tag Attributes`

🌱 `container( non-semantic )`

🌱 `text`

🌱 `others`

✔️ `Semantic tag`

media query

❓ HTML 전역 속성

0개의 댓글

🌱 HTML 복습

HTML+CSS

📖 Web

❓ HTML

❓ tag

✔️ tag 기본 문법

✔️ HTML 문서의 기본 구조

✔️ HTML Tags

🌱 meta tag Attributes

🌱 container( non-semantic )

🌱 text

🌱 others

✔️ Semantic tag

media query

❓ HTML 전역 속성

0개의 댓글

📖 `Web`

❓ `HTML`

❓ `tag`

✔️ `tag 기본 문법`

✔️ `HTML 문서의 기본 구조`

✔️ `HTML Tags`

🌱 `meta tag Attributes`

🌱 `container( non-semantic )`

🌱 `text`

🌱 `others`

✔️ `Semantic tag`