개발일지/HTML

HTML - 1

ZI_CO 2022. 11. 2.

* 브라우저의 목적 ?

HTML 문서를 읽고 올바르게 표시하는 것

모든 HTML 문서는 문서 유형 선언으로 시작해야 한다 : <!DOCTYPE html>

<!DOCTYPE html>는 웹 페이지를 올바르게 표시하는데 도움을 준다.

<!DOCTYPE html> html5 버전 입니다.

HTML 문서는 <html> </html> 끝나며

HTML 문서에 보이는 부분은 <body> </body> 사이 이다.

선언문은 한번만 나타나야 합니다. 선언문은 대소문자 구분하지 않는다

* HTML 5란

기존 텍스트와 하이퍼링크, 기본적인 태그만 표시하던 녀석을

멀티미디어 등 다양한 애플리케이션까지 표현, 제공 하도록 진화한 웹 프로그래밍 언어

특징 : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접 제어 가능

Web Socket 가능이 있어서 양방향 통신이 가능하다.

semantics - 웹 자료에 의미를 부여하여 사용자에게

의도에 맞는 맞춤형 검색을 보다 잘 제공이 가능하다.

* Elements (요소) 는 "시작태그", 컨텐츠, "종료태그" , 셀프 클로징 태그

중첩된 HTML 요소도 있다.

※ 끝태그는 건너띄지 말기!

HTML은 대소문자를 구분하지 않으나 표준은 소문자를 권장한다.

* HTML은 속성을 제공한다. 요소에 대한 추가 정보를 제공 !

모든 HTML 요소는 속성을 가질 수 있다.

속성은 항상 시작태그에서 작성을 한다.

속성은 일반적으로 name ="value" 와 같이 key/value 구조로 제공 된다.

lang 언어 속성이다. - 웹브라우저 검색엔진과 브라우저를 지원하기 위한 것!

HTML 5
의미가 있는 태그 (semantic)	의미가 없는 태그 (non-semantic)
semeantic 태그를 사용하면, 구조파악이 빨라지고 검색엔젠에 좀 더 최적화된 문서를 만들 수 있다.	X
<header>, <address> 등	<div>, <span>, <p>

★★★ display ★★★
block 속성	inline 속성
양 옆에 다른 박스가 올 수 있다.	양 옆에 다른 박스가 올 수 없다.
<span>	<div> , <h> , <p> , <address>

<!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>
    <style>
        * { padding:0;}
    </style>
</head>
<body>
    <header>
        <h1>Boot Web Site</h1>
    </header>
    <main>
        <p>문단</p> 여기서도 글써볼까 ? ? 
        <sapn>짧은 글을 작성할 때 사용</sapn> 11111여기서도 작성해볼까? <br/>
        <span>부산시 진구</span>
        <address>부산시 우동</address>

    </main>
    
    <footer>
        2022 boot camp
    </footer>
</body>
</html>

[ 다양한 태그들 ]

<div> </div>	여러 소스를 묶는 태그 division 이라는 단어에서 시작됨 (분할, 경계선, 구분) 박스 / 기본적으로 div 박스는 양 옆으로 붙일 수 없다. non-semantic 태그이다 document에서 봤을 때 아무런 값도 없는 박스
<h> </h>	제목을 나타내는 태그
<p> </p>	문단(단락)을 나타내는 태그
<sapn> </sapn>	짧은 글을 작성할 때 사용하는 태그
<address> </address>	주소를 나타낼 때 사용하는 태그
<br>	한 줄 띄워쓰기

<FORM 태그>

<form 속성="속성값"> 폼 요소</form>

의견이나 정보를 알기 위해 입력할 틀을 만드는 태그
입력된 데이터를 한꺼번에 서버로 전송

<form> </form>	id = " "	아이디를 지정 (중복 불가, 단 한개만 존재해야함)
	name = " "	폼 이름 지정
	action = " "	서버 프로그램 지정
	target = " "	열어볼 파일 위치 지정

<Label 태그>

★ 기본형 <label>레이블명<input></label>

★ 기본형 - for 속성과 폼 요소의 id를 연결 시키기
<label for="id명">레이블명<input id="id명"></label>

<body>
    <form action="www.naver.com" id="webSite">
        <label for ="web_site">WEBSITM</label>
        <input type="text" name ="" id="web_site" required>
        
        <label for ="first_name">First Name</label>
        <input type="text" name ="" id="first_name" placeholder="이름을 입력"> 

        <br/> <br/> <br/>

        <label for ="files">파일 추가하기</label>
        <input type="file" id="files" accept=".png">

        <br/> <br/> <br/>

        <div></div>
        <input type="email">
        <input type="range" min="1" max="10" step="2">
        <input type="date">

        <br/> <br/> <br/>
        <input type="submit" value="서버로 전송하기">

    </form>
</body>

<input 태그>

- input 의 type 속성 값들

type=	text	한 줄 텍스트
	password	비밀번호
	search	검색
	url	url
	email	이메일 주소
	tel	전화번호
	checkbox	체크박스 (중복 체크)
	radio	라디오 버튼 (unique 체크)
	number	숫자 스핀 박스(버튼으로 숫자 조절)
	range	숫자 슬라이드 막대
	date	local - 연, 월, 일
	month	local - 연, 월
	week	local - 연, 주
	time	local - 시, 분, 초, 분할 초
	datetime	UTC - 연, 월, 일, 시, 분, 초, 분할 초
	datetime-local	local - 연, 월, 일, 시, 분, 초, 분할 초
	submit	전송 버튼
	reset	리셋 버튼
	image	submit 버튼 이미지
	button	일반 버튼
	file	파일 첨부 버튼
	hidden	사용자에게 보이지 않는 값 필드

- input 의 다른 주요 속성들

autofocus=	페이지를 불러오자마자마우스 포인터가 표시
placeholder=	힌트를 표시, 내용을 입력하면 사라짐
readonly=	읽기 전용
required=	필수 입력 필드

'개발일지 > HTML' 카테고리의 다른 글

정방향 세로배치, 역방향 세로배치 - flex-direction (0)	2022.11.07
정방향 가로배치, 역방향 가로배치 - flex-direction (0)	2022.11.07
justify-content 와 align-items 차이점 (0)	2022.11.07
flex란 (0)	2022.11.07
HTML이란? (0)	2022.11.02