오늘은 3일차 HTML의 마지막 강의들을 보는 날이다.
오늘은 HTML의 기본 구조와 label 그리고 attributes들을 살펴보았다.
모든 태그와 attributes을 살펴볼 수 있는 사이트
https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
HTML의 모든 태그와 속성들을 외울 필요 전혀XXX
필요할 때마다 찾아서 꺼내 쓰면 된다!!
HTML의 기본 structure)
<!DOCTYPE html> // html 문서의 시작을 알림
<html lang="kr"> // 이곳에 넣는 모든것이 다 html이라고 알려주는 태그 + html 문서의 언어는 lang="언어" 로 표시
// head는 브라우저가 어떻게 보일지, 사이트의 부가적인 요소를 정해준다.
<head> //브라우저의 기본 세팅을 설정하는 head 태그
// link태그를 사용해 사이트 위쪽 대표 shortcut icon을 정하는 코드
<link
rel="shortcut icon"
sizies="16x16 32x32 64x64"
href="/favicon.ico?1"
/>
<title>home - my first wevsite.</title>
// title은 위쪽 웹의 제목을 정하는 태그 이다
이런식으로
// 사용하는 언어의 유형은 meta 태그와 charset attribute를 통해 표현한다.
<meta charset="utf-8" />
meta - content, name attributes -> text를 어떻게 그려야하는지 알려준다.
</head>
//콘텐츠를 담는 body
<body>
<h1>hello!</h1>
<p>
// mark- 형광표시 태그 abbr-마우스를 올렸을 때 약어의 전체 단어를 표시해주는 태그
my name is <mark><abbr title="rotoma">R</abbr></mark>
</p>
<form>
//label 에는 여러가지 속성들이 존재한다.
파일을 넣는다거나, 문자, 날짜 등을 입력한다거나 많은 기능이 있다.
또 각 label마다 for와 고유의 id를 지정해 이어줄 수도 있다.
//image 파일을 넣을 수 있는 코드
<label for="profile">profile photo</label>
<input id="profile" type="file" accept="image/*" />
// 계정 정보를 입력하는 칸을 생성하는 코드
required 입력이 되어야 아래의 create account 버튼을 누를 수 있음
minlength 7자리가 넘어야 버튼이 눌러짐
<label for="first-name">first-name</label>
<input id="first-name" required placeholder="Name" type="text" />
<input required placeholder="last Name" type="text" />
<input required placeholder="User name" type="text" />
<input required placeholder="password" minlength="7" type="password" />
<input type="submit" value="create account" />
// // website 입력 칸
<label for="website">website</label>
<input id="website" required placeholder="web" type="url" />
</form>
</body>
</html>
오늘은 이렇게 html의 기본적인 틀과 label의 속성들을 이용해 웹을 채워 보았다.
다음 시간 부터는 이 뼈대를 이쁘게 꾸밀 수 있는 CSS를 배우게 될텐데...
너무 기대 된다!! ㅎㅎ
오늘도 무사히 잘 마무리 한 것에 뿌듯함을 느끼며 내일 첫 CSS 발걸음을 잘 시작해야겠다!!!
화이티이이잉~~~><
'웹 스터디 > HTML' 카테고리의 다른 글
| [HTML] 웹 프로젝트 4일차! - 간단한 profile 웹 만들기!! (0) | 2021.07.08 |
|---|---|
| [HTML] 웹 프로젝트 2일차! ( tag & attributes ) (0) | 2021.07.06 |
