HTML 기초

HTML Hyper Text Markup Language

팀 버너스 리 (웹의 아버지)

연구자들마다 파일형식, 규칙을 모두 다르게 썼음. 연구자료를 주고 받을 때 불편 했음.

하이퍼텍스트 : HyperText

• 다른 문서 (혹은 웹 페이지) 로 이동 할 수 있는 텍스트
• e.g. 구글 페이지에서 Gmail링크를 클릭해서 페이지를 이동하는것이 하이퍼 텍스트의 대표적인 예시

ML : 마크업 언어 Markup Language

• 태그(tag)를 사용하여 문서를 구조화 하고, 내용을 표현 하는 언어
  • 이것보다 더 간편한 기법을 만들고자 markdown을 만듬
• Gmail은 <a> 태그로 정의된 텍스트이며, 클릭하면 다른 페이지로 이동한다

<a href="<https:/>/mail.google.com/>">Gmail</a>
<!--태그를 쓸때 다른 언어 알파벳과 헷갈리지 않게 <>기법으로 만듬-->

요소

• 웹 페이지의 구조와 컨텐츠를 만드는 기본단위
• HTML 문서는 수 많은 요소들로 구성되고, 각 요소는 특정 기능과 의미를 가진다

요소의 구조

태그 :

<태그 속성 = "값">내용</태그>

index.html

• 목차
• 책에서 가장 먼저 보이는게 목차이다. 몇페이지에 무엇이 있고 등등.
• naver의 첫 화면이 목처와 동일한 개념이다. 각각의 버튼이나 링크를 눌러서 이동 혹은 검색.
  • 관습적으로 웹서비스의 첫 html 문서는 index라고 정해졌다.

open 태그는 <> 닫는 태그는 </> 슬래쉬를 추가

<a> 태그는 anchor이다. 다른곳과 연결을 해 준다는 뜻. 어떤 경로를 참조할건지 정하기위해 href (hyper reference) 라는 속성을 가진다.

<a href="https://naver.com"> : = 으로 속성과 값을 연결

<h1></h1>~<h6></h6> : 섹션을 나눌때 많이 쓴다

<img alt="대체 텍스트" src=""> : 여는 태그와 닫는 태그가 따로 없고 하나의 태그로 표현을 한다.

• ![대체텍스트](이미지경로,source)

<br> : break 줄바꿈. 닫는 태그가 없는 빈 요소 empty element 이다

<hr> : horizontal rule 수평선 문서에 구분선을 넣을때 사용.

• 예전엔 단순이 ‘줄’을 긋는 용도 였지만 현재는 의미론적으로 내용의 구분(주제 전환)을 나타낸다.
• 닫는 태그가 없는 빈 요소 이다.

주석

• html의 주석은 <!----> 로 표현 한다. 단축키는 ctrl+/

속성

• 요소에 추가적인 정보와 기능을 제공
• 이름과 값으로 구성

id속성과 class 속성

• id 속성 : 요소에 고유한 식별자를 부여

• 중복된 id속성의 값이 존재해서는 안된다

  • 특정 요소들을 선택하기 위해서 id속성을 쓰는것이기 때문

<p id="1">1</p>
<p id="2">2</p>

<p>4</p>
<p>4</p>
<p class="5">5</p>
<p class="5">5</p>
<p>6</p>

• class는 여러개의 공통된 요소들을 묶어 그룹화 하는 역할을 한다.
• id와 class의 값은 소문자 알파벳으로 시작
  • 띄어쓰기가 불가능. - , _ 를 사용해야 한다

<p class="fruit red">빨간 사과</p>
<p class="fruit red">빨간 딸기</p>
<p class="fruit blue">파란 포도</p>
<p class="animal red">빨간 강아지</p>
<p class="animal blue">파란 고양이</p>

구조화 하기 위해 요소를 중첩한다 하는 개념이 중요하다

<div> :

• division(분할) 별다른 고유한 기능이 없다. 요소들을 묶어서 분할 하는 태그이다. 가장많이 사용 하는 태그.

• 블록 레벨(block-levle) 요소 이다.

  • 따라서 기본적으로 한줄 전체(수평영역)를 차지 한다.
  • semantic 의미 없음. -> 묶음/그룹 역할만 한다.
• <div> 자체에는 눈에 보이는 스타일이 없음.
  • 대신 한 줄 전체를 차지하는 투명한 영역을 만들기 때문에, 여러 개 두면 자동으로 줄바꿈됨

브라우저 개발자 도구

F12 또는 Ctrl + Shift + I

개발자들이 웹서비스를 만든 후 디버깅을 위한 도구

요소 (elements)메뉴

• html 문서 구조와 css 스타일을 실시간으로 분석하고 수정할 수 있다
• 왼쪽 상단의 검사요소 선택 버튼을 활용해서 특정 요소를 선택할 수 있다.

태그 분류

HTML 태그들을 기능, display 속성, 의미론적 특성 에 따라 분류 하는 방법

• 각 태그 분류의

p 태그와 span 태그

인라인 태그: 줄바꿈이 발생 하지 않는 태그

레이아웃 태그

멀티미디어 콘텐츠 태그

상호작용 태그

display 속성에 따른 분류

의미론적(semantic) 비의미론적(non-semantic) 태그

리스트

ul, ol, li

- / 1. 2.

<ul>
  <li>순서가 없는 태그 1</li>
  <li>순서가 없는 태그 2</li>
</ul>

<ol>
  <li>순서가 있는 태그 1</li>
  <li>순서가 있는 태그 2</li>
</ol>