1-3) HTML기초

HTML

1. heading : <h1> ~ <h6>

2. 문단, 본문, 단락, ...

paragraph : <p>            //가장 기본

<span>

<div>                          //HTML에서 용도가 상당히 많음

위의 1, 2번 태그들을 다른 표현으로 block tag 라고도 함.

! block tag - 별다른 엔터를 쳐 주지 않아도 알아서 한 블럭을 차지.

 - 태그가 웹브라우저 안에서 차지하는 비중으로 나눠보면

! block tag : 한 블록을 다 차지하는 태그

! inline tag : 한 블록을 다 차지하지 않는다. img 같은 태그들

# 위 예제에서 보더라도 제일 큰 제목, 두번째 큰 제목 등 따로 엔터를 치지 않았음에도

한 블럭을 모두 차지하고 있다. block tag 이기 때문

인라인 태그라면 별다른 개행태그가 없을 시 옆에 곧장 이어서 출력됨.

*) 웹에서 사용되는 엔터 : <br>

3. 목차 : list, 항목 : list item -> <li>

1) 정렬된 리스트 : ordered list

<ol> </ol>

2) 비 정렬된 리스트 : unordered list

<ul> </ul>

# 요즘은 이런 리스트 아이템들을 네비게이션 바 에 많이 활용한다.

보통은 ul 을 더 많이 사용. 디자인 하기 편하기 때문.

# <ol> </ol>을 쓸 경우

# <ul> </ul>을 쓸 경우

# 물론 원하는 표현방식에 따라 내부에 또 집어넣을수도 있다.

4. 그림 : image -> <img>

 - 얘도 대표적인 셀프클로징 태그 중 하나.

<img> ... </img>

원래대로면 이런식으로 써야하는데 이미지는 저 사이에 집어 넣을수가 없다.

컨텐츠를 넣어야하는데, 이미지파일은 문자로 표현될 수 없는 파일이다.

즉, 바이너리 데이터이기 때문에 집어넣을수 가 없다는것.

*)HTML은 기본적으로 문자로 표현될 수 없는 데이터는 표현될 수 없음

그래서 그런점을 보완하려면?

[속성] : attribute

요소(elements)만 가지고는 표현의 한계가 있기 때문에, 속성 을 갖게 됨.

 - 오프닝(시작) 태그에 작성

 - 요소별로 속성 항목은 다를 수 있다.

따라서 image 태그 같은경우는, 이미지의 콘텐츠를 사이에 껴서 표현이 불가능하기 때문에

(<img> 이미지 </img> 이런것 불가능)

셀프클로징을 사용하고, 속성으로 그 부족한 부분들을 표현.

* 속성(Attributes) 확인은 www.w3schools.com 확인. 

이 중, src 항목이 중요하다. 내가 표현할 그림의 위치를 담는 역할.

반드시 로컬 상에 없어도 URL로 표현 가능하다. (URL : http + domain 형태)

1) 개별 속성 : 특정 요소만 가질 수 있는 속성

2) 글로벌 속성 : 상관없이 어떠한 태그던 공통적으로 사용할 수 있는 속성 

 - 이벤트 속성 : mouse, keyboard, ...

 - 스타일 속성 : 스타일과 관련된 속성. 크기, 색깔, 폰트, 정렬 등..

    이 스타일 속성을 따로 뺀 것이 CSS (Casding Style Sheet)

 - id, class

*) CSS 분야는 디테일한 것들이 너무 많기때문에 Bootstrap 또는 Materialize 같은

프레임워크(디자인 서식)를 가져다 쓰며 실습을 진행해 볼 예정.

# 위와같은 코드 입력시

# 위와같이 이미지 표현 가능.

# 전체 코드. 아래는 크기조절에 대한 예시를 같은 이미지로 진행하는게 좋을것같아 수정해보았다.

5. 표 : table

# 테이블의 기본 구조.

# 위와같은 코드로 우측에 표시된 표를 작성 할 수 있다.

6. 링크 : anchor, link

 - 하이퍼 링크 : 웹이 현재의 웹까지 이르도록 발전하게 된 가장 큰 역할을 함

    빅데이터 - 웹페이지 스크롤링 기술 또한 링크를 이용하면 쉽게 접근이 가능하다.

 - anchor : <a href="path|url"> 링크문자 </a>

# 위와같은 방식으로 입력 가능.

# 배웠던것을 이용하여 가사를 제공하는 웹페이지 예제이다.

<style> </style>을 head부분에 선언하여 간단하게 디자인을 변경할 수 있다.

*)_style

1. style 속성을 이용한 스타일 지정

2. <style> 태그를 이용한 방법

<style>

selector {

}

</style>

* selector : tag name, id, class

3-1.html

3-1.txt

3-2.txt

lyrics.html