□ HTML이란?
- Hypertext Markup Language
- HTML은 프로그래밍 언어가 아닌 마크업(Markup) 언어
마크업 언어란? 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
- 웹페이지의 구조와 내용 기술
□ Visual Studio Code로 작성하기
- 새 파일 -> 언어선택 -> html -> 저장시 이름.html 형식으로 저장
- VSC에서 코드작성할 때 단락 자동 정렬해주는 extension
확장 탭에서 beauty 검색 -> 설치
정렬 원하는 코드 드래그 -> command+shift+b (Win: Ctrl+shift+b)
□ Element의 구조
- Opening tag(여는 태그): 요소 이름과 꺽쇠(<>)로 구성, 요소 시작
- Closing tag(닫는 태그): 여는 태그와 같은 모양 + 요소 이름 앞에 슬래시(/), 요소의 끝에 위치
- Contents(내용): 요소의 내용
- Element(요소): 여는 태그, 닫는 태그, 내용을 통틀여서 요소라고 함
- Attribute(속성): 요소에 추가적인 내용을 담고 싶을 때 사용, 속성 이름(Attribute name)과 속성 값(Attribute value)로 구성
□ 요소의 중첩
- 요소안에 내포되게 중첩할 수 있음
- 어떤 요소의 여는 태그와 닫는 태그 사이에 새로운 요소 넣을 수 있음
- 안에 내포된 요소가 닫힌 후에 포함하고 있는 요소가 닫혀야 함
<head>
<title>Test page</title>
</head>
□ 블럭 레벨 요소vs 인라인 요소(Inline level elements)
1. 블럭 레벨 요소(Block-level elements)
- 웹페이지에 블럭을 넣는 요소
- 블럭 레벨 요소 앞뒤에 새로운 Line 만들어서 블럭 레벨 요소 이전과 이후 요소 사이의 줄을 바꿈
- 페이지의 단락(Paragraph), 목록(list), 네비게이션 메뉴(Navigation Menu, 꼬리말(Footer) 등을 표현
- 인라인 요소에 중첩될 수 없음
- 블럭 레벨 요소는 다른 블럭 레벨 요소에 중첩될 수 있음
ex)<p> : 문단요소
2. 인라인 요소(Inline elements)
- 항상 블록 레벨 요소에 포함되어 있음
- 새로운 Line을 만들지 않음
- 인라인 요소에 블럭 레벨 요소를 넣을 수는 없음
ex) <a> : 하이퍼링크 정의
<em> : 텍스트 이테릭체
<strong> : 텍스트 볼드체
- 인라인과 블럭 레벨 요소의 특징이 섞인 Inline-Block 레벨 요소도 있음(
□ 빈 요소(Empty elements)
닫는 태그가 필요없이 단일 태그(Single tag)로 사용
닫는 태그를 사용해도 되지만 비효율적!
Ex) <img> : 이미지 삽입, <br> : 줄바꿈 요소, <hr> : 가로줄, <input> : 사용자에게서 데이터 받을 수 있는 요소, <link> : 외부 리소스의 관계 명시, <meta> : 해당 문서에 대한 정보인 메타데이터 정의
□ 속성(Attribute)의 규칙
- 요소 이름 다음에 오는 속성과 요소 사이엔 공백, 여러개의 속성 작성 할 땐 속성 사이에 공백
- 속성 이름 다음에 등호(=) 작성
- 속성 값은 따옴표(“”또는 ‘’)로 감싸야 함 (생략가능하지만 오류 발생할 수 있음)
<input type="text" placeholder="type here">
□ 요소에 속성 추가하기
<a href="https://naver.com" title="네이버" target="_blank">naver</a><a> : anchor 의미, 닻이 배를 항구로 연결하듯 텍스트를 감싸서 하이퍼링크를 만듦
href: 연결하고자 하는 웹 주소 지정
title: 링크에 대한 정보 추가, 마우스 옮겼을 때 나타남
target: 링크가 어떻게 열릴 것인지 지정, target=“_bland”는 새 탭에서 보여줌
□ 참과 거짓 속성(Boolean attributes)
값이 없는 속성
그 속성의 이름과 동일한 하나의 값만을 가짐
ex) disabled : 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시)
<input type="text" disabled>
□ 주석
<!- 주석내용 ->
사용자에게 보이지 않음
메모, 코딩 설명
□ 자주 쓰는 요소들
<!DOCTYPE html>: 초창기부터 쓰던 문법, 현재는 제대로 작동하기 위해 포함되어야하는 역사적 유물
<html></html> : html 요소, 전체 페이지의 콘텐츠 포함, 기본요소
<head></head> : 페이지에 보여지지 않지만 검색 결과에 노출될 키워드, 설명, CSS 스타일 등 페이지의 모든 내용 담음
<meta charset="UTF-8"> : 문서의 문자 인코딩을 UTF-8로 지정
UTF-8이란 전세계 대부분의 문자를 포함한 유니코드 인코딩 방식, 가장 많이 사용됨
<title></title> : 브라우저 탭에 표시되는 이름
<body></body> : 텍스트, 이미지, 링크, 비디오, 오디오 등 페이지에 표시되는 모든 콘텐츠 포함
<ul></ul> : Unordered list 순서없는 리스트
<ol></ol> : Ordered list 순서있는 리스트
<ls></ls> : list 목록
<p></p> : paragraph 문단
<div></div> : division 앞뒤로 줄 바꿈됨
<span></span> : 인라인, 줄 바꿈 x, 문단내에서 일부에만 속성 적용할 때 주로 사용
<a></a> : 하이퍼링크
<img src="경로"> : 이미지 삽입
<input type="text" placeholder="입력 전 메세지"> : 사용자가 입력할 수 있는 박스, type의 기본값은 text
<button>버튼 안의 텍스트</button> : 클릭할 수 있는 버튼 박스
<link rel="stylesheet" href="경로"> : 외부 리소스 연결 요소, 주로 head에 작성, CSS 파일이나 웹 폰트 연결할 때 사용
참고 링크
W3 School : https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML
튜토리얼: https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started
HTML 시작하기 - Web 개발 학습하기 | MDN
HTML 기본 사항을 둘러 보셨기를 바랍니다.
developer.mozilla.org
'TIL(Today I Learned)' 카테고리의 다른 글
| 5/2 (월) Linux 기초 (0) | 2022.05.02 |
|---|---|
| 4/29 (금) 페어 프로그래밍 회고 / 트위틀러 목업(Twittler Mockup) 만들기 (2) | 2022.04.29 |
| 4/28 (목) 페이지 레이아웃 / FlexBox (0) | 2022.04.28 |
| 4/27 (수) CSS 기초 (0) | 2022.04.28 |
| 2022.4.26 (화) 프로그래밍 기초 (0) | 2022.04.26 |