HTML(HyperText Markup Language)
- HTML은 웹 페이지를 만들기 위한 언어입니다.
- HTML은 어떤 컴퓨터 언어보다 쉽다.
- 그렇지만 중요하다.
- HTML은 Public Domain의 일종이다.
- HTML은 모든 웹의 골격
- HTML은 이미지, 텍스트 또는 비디오와 같은 콘텐츠를 구조에 담아서 제공합니다.
- Markup Language : 텍스트의 구조와 표현을 정의하는 컴퓨터 언어
- HyperText : 하이퍼링크를 통해 다른 텍스트에 대한 액세스를 제공하여 컴퓨터 또는 장치에 표시시켜주는 텍스트
- HTML을 알고 있으면 뉴스레터, 블로그 또는 웹사이트 템플릿에 코드로 글을 작성할 수 있다.
- 브라우저는 HTML을 해석해서 웹 페이지를 생성
- .html확장자를 가진다.
Public Domain
모든 사람들에게 공짜로 제공한다. 당장에 바로 돈으로 연결되지 않는 것 처럼 보이지만 사용하기도 편하고 많은 사람들이 계속해서 사용하고 있어서 느리지만 꾸준히 발전한다는 특징을 가진다.
혼자가면 빨리 갈지 몰라도 멀리는 못간다. 하지만 함께하면 멀리갈 수 있다.
1. TAG
- 새 옷을 사면 붙어있는 태그와 같다.(태그는 옷을 설명)
- 컴퓨터공학의 용어 대부분은 이런식의 비유가 많이 사용된다.
- 상황에 맞는 태그가 필요 -> 브라우저가 해석할 수 있음
예시
<strong></strong>
<u></u>
<h1></h1>
...
<h6></h6>
<br>
<img>
<p></P>br태그는 단지 줄을 바꿔고 p태그는 어떤부분이 단락인지 파악할 수 있게 해준다. 태그들은 이렇게 그냥 단순 기능만 제공하는 경우도 있고 의미를 내포하는 경우도 있다. 이를 잘 활용하면 html의 근본가치인 정보전달로서의 도구로 더 잘 활용할 수 있다. 즉, 정보로서 더 가치있게 태그를 거는 것이 중요하다.
<span style="font-size:24px;">coding</span>
<h3>coding</h3>- 위의 코드를 실행시키면 똑같은 크기의 문자를 만든다.
- 하지만 검색엔진은 html을 토대로 검색한다.(h3태그가 더 많이 검색됨)
- 그저 검색이 많이 된다는 것은 결국 정보로서 더 가치있다는 말이다. (검색뿐만 아니라 다른 개발자들이 코드를 봤을때도 더 전달이 잘된다.)
- 사이트를 이쁘게 꾸미기 위해 이미지로 문자를 만들면 정보로서의 가치는 떨어지게 된다.
Accessibility
- html은 모든 운영체제에서 동작한다.
- 소스코드는 누구나 볼 수 있다.
- 저작권이 없는 순수한 공공재이다.
- 스크린 리더와 같은 각종 보조장치들은 html에 접근해서 정보를 읽어 줄 수도 있다. (이미지로 된 문자는 시각장애인에게는 없는 정보)
웹이 다른 여러 기술들과 다른 특별한 기술인 이유는 신체적 장애가 있어도 모두 접근 할 수 있다!
올바른 태그를 사용해서 웹페이지를 만드는 것이 정보전달의 첫 출발이다.
HTML은 비지니스적으로나 휴머니즘적으로나 중요한 기술이다!
부모-자식-손자(계층구조)
<parent>
<child>
</child>
</parent>- 태그는 서로 부모-자식 관계가 가능하다.(자식태그가 부모태그에 중첩돼 있다고 표현)
- 특정태그는 부모-자식 태그로 함께 사용된다.
Ex. ul-li(Unordered List)
ol-li(Ordered List)
table-tr-td(table의 경우 3대가 함께)
2. 속성(attribute)
<img src="coding.jpg" width="100%" />- 위의 이미지 태그안에 src와 width같은 것(?)들을 속성이라고 한다.
- 태그의 이름만으로 정보가 부족할 때 사용한다.
- 작성하는 순서는 정해져있지 않다.
- 어떤 tag인지에 따라 적용할 수 있는 attribute가 달라진다.
- 한번에 여러 속성 추가 가능
<div id="profile" class="content-wrap"></div>
<img src="./hi.png" alt="내사진" width="200px" height="200px">cf) img태그에서 alt는 이미지를 설명해준다.(오류로 인해서 이미지가 나타나지 않을때 alt값이 화면에 보임)
3. 문법(구조)
- 책을 쓰기 위해서는 문서의 구조를 알아야된다. -> html도 마찬가지
- 문서 -> 문장 -> 페이지 -> 책
- element
- html기본 틀
<!doctype html>
<html>
<head>
<title></title>
<meta>
</head>
<body>
</body>
</html>- !doctype html : 해당 문서는 html(HTML5버전)임을 선언
- title : 페이지의 제목, 검색엔진에서 검색될때 활용됨
- meta : 문서를 여는 방식을 설정해줘야됨(문자 인코딩, 디바이스 가로크기와 웹 페이지 가로 크기 비교)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">- body : 본문
- 텍스트, 이미지, 버튼 등 다양한 콘텐츠를 담는 공간(화면에 보여지는 공간)
- head : 해당 문서의 설명, 사이트의 제목, 설명, 부가 정보, 기술적 내용(ex. 이 사이트는 주로 모바일용인지)
- html : body, head를 묶어줌, html이 시작됐는지 인지
4.
a tag
- anchor(닻)을 의미 -> 링크를 정박한다는 표현으로 비유
- 속성
- href(hypertext reference) : 이동하려는 주소
- target Ex)target="_blank" : 새탭에서 열기
- title : 링크 설명
- 링크는 실과 본드 처럼 페이지와 페이지를 엮어서 책(Website)으로 만들어준다.
div tag
- division : 페이지에서 요소들은 구룹화해주는 섹션(컨테이너)
- HTML에서 가장 많이 사용되는 요소 중 하나
- 그룹화해서 스타일을 적용할 수 있다(CSS)
- class나 id attribute를 부여해서 CSS적용
- 본질적인 의미를 가진 태그는 아니다.
span tag
- 주로 텍스트를 넣어줌
- inline-element(줄바꿈x)
p tag
- 텍스트를 자주 넣지만 paragraph의 줄임말로 문단이 주로 온다.
- box-element(줄바뀜)
id attribute
- 각 tag에 이름을 주는 속성
- 주민등록번호와 같이 웹페이지에서 고유한 값(웹피이지당 하나만 가질 수 있음)
- id값을 줘서 그 태그에만 스타일을 주고 싶을때 주로 사용
- JS에서도 id로 접근하기 쉽다.
class attribute
- id와 같이 이름을 주는 속성이지만 이름그대로 학급 하나를 만들 듯이 그룹화 해줄 수 있다.(중복가능)
적(는)자생존, 기록은 기억을 이긴다.