HTML이란 ?
- Hyper Text Markup Language의 약자로 웹페이지를 제작할 때 기본 구조를 만드는 언어이다.
- 태그 : 명령어의 형태가 <>로 되어있는 것들.
- 요소: 태그의 시작(<>)과 끝(</>)의 한 쌍을 의미.
- 마크업: 요소들을 이용하여 웹 문서를 작성하는 것.
- 속성 : 태그의 요소에 지정하는 것들. ex) `<a href="#">` <= 여기에서 href를 속성이라고 부름
<!doctype html> 에서 html
<html lang="ko"> 에서 html 부분은 같아야한다 반드시!!tip
<TAG></TAG>
<TAG>내용내용내용</TAG>위와 같은 구조를 가진다.
<a href="www.naver.com" class="naver-link">네이버로 가기</a>
<!-- 해석 --> <= 주석은 command + /
<앵커태그 링크주소="www.naver.com" 태그별칭="naver-link">네이버로 가기</앵커태그>속성은 위처럼 태그 안에 작성하고 띄어쓰기해서 구분할 수 있다.
<부모태그>
<자식태그1><자식태그1>
<자식태그2><자식태그2>
<자식태그3><자식태그3>
</부모태그>부모요소와 자식요소로 단계적 구성을 한다.
<nav>
<h1>대전 맛집</h1>
<ul>
<li>맛1</li>
<li>맛2</li>
<li>맛3</li>
</ul>
<nav>
- <h2>가 있으려면 <h1>이 반드시 먼저 나와 있어야 한다.
- 메뉴등 순서가 중요하지 않고 나열할 때 <ul>을 사용하며 보통 <ul>을 쓴다.
- <li>는 <ul>에서만 사용이 가능하고 그 사이에 다른 것들이 없어야 한다.
블록요소와 인라인요소
- 블록 요소 (Block Element) - 영역을 만드는 것
- 블록 요소는 마크업시 자동으로 줄바꿈이 일어나는 요소
- 블록요소 안에 또 다른 블록요소<div></div>, 인라인 요소 포함 가능 <span class="inline-element">inside</span>
- 대표적으로 <div>, <h1~6>, <p> 등 거의 대부분의 태그가 블록요소의 성질을 갖고있음
- 인라인 요소( Inline Element) 텍스트 만드는것
- 인라인 요소는 마크업시 자동으로 줄바꿈이 나지 않는 것
- 인라인 요소 안에는 텍스트와 인라인 요소 포함 가능 하지만 블록 요소를 포함할 수 없음.
- 필요한 만큼 너비를 사용하고 가로세로 크기지정이 된다.
- 대표적으로 <span> , <a>, <strong> 등 있다.
명령어들
<head>: 문서 정보들 추가, 라이브러리등 불러올 것들, 가장 위에 있기 때문에 로고를 많이 사용.
<ul>, <ol>, <li>: 순서 없는 목록(점 리스트)과 순서 있는 목록(번호 리스트)을 정의
<link>: css 연결
<style>: 헤드 타이틀 밑에
<body>: 문서의 본문
<h1> to <h6>: 숫자가 작을 수록 큰 제목
<a>: 하이퍼링크
<img>: 이미지 삽입
<p>: 문서의 단락을 정의
<script>: js 연결할 때 바디 가장 밑에
html 코딩에 유용한 단축키들.
&&&&&&&&&&& 단축키 &&&&&&&&&&&&
&&&&&&&&&&& 단축키 &&&&&&&&&&&& 숫자 3은 예시 숫자
h1 + tap
h1 + div + p + tap
h$ * 3 + tap
h${숫자} * 3 + tap
h${숫자$} * 3 + tap
option + 방향키
shift + option + 방향키
ol>li*3 + tap
ul>li*3 + tap
'HTML5' 카테고리의 다른 글
| [중앙정보처리학원] HTML* 입력 양식과 전역속성 (1) | 2024.03.11 |
|---|