[1회차] HTML-①

강의명 : 오픈프레임워크 활용 디지털융합 SW엔지니어 양성 과정

강의 날짜 : 21.05.24

 

 

* 기본 구조

 

<tag name> contents </tag name>

아무리 짧아도 기본 구조는 지켜줘야 한다.

tag name은 동일해야 하며 '/'은 끝을 알리는 예약 문자이다.

 

< > : tag 괄호, 괄호 안에 공백이 들어갈 수는 없다.

JAVA가 이것을 보고 제네릭 괄호를 만들어냈다. 즉, JAVA보다 HTML이 먼저!!

 

 

 

1. <!DOCTYPE>

 

 웹 브라우저 시스템에게 DOCTYPE(=페이지)는 html이라고 선언! 이라는 의미이다.

 

html은 not case sensitive이다. 즉, 대소문자 구분이 존재하지 않는다.

하지만 보통 소문자로 많이 표기를 한다. css도 마찬가지로 소문자로 많이 표기한다. 

 

html은 5버전 이상이어야 모바일 최적화로 서버, 애플리케이션을 구축할 수 있다. 

(모바일 = touch pad가 장착된 모든 기종)

 

즉, 해당 태그는 웹페이지 생성을 위해 웹 페이지 구조를 정의해주는 것이다.

 

 

2. <meta charset="UTF-8">

UTF-8 : 한글 깨짐을 방지해주는 웹 인코딩 방식

text의 사이즈는 1~4바이트로 유동사이즈이다. 

해당 국가의 바이트 수에 맞춰 글자가 깨지지 않게 해준다.(인코딩 방식을 맞춰준다)

-> 새로운 언어 등으로 인해 계속 변화하는 중이다. 

 

브라우저 인코딩이랑 내가 짠 코드 인코딩이 안 맞으면 깨지게 되므로 인코딩 방식을 잘 맞춰주도록 한다.

개발자라면 모바일 기준으로 생각해주어야 한다.

모바일 앱까지 표현해주어야 하기 때문에!

DB도 UTF-8 인코딩 방식을 사용한다.

 

 

 

3. h 태그와 p태그

 

 

h태그와 p태그는 위, 아래 자동으로 빈 줄(여백)이 생성된다.

 

* h 태그(=heading text)

문단의 구성을 가지는 제목이다. 

그래서 위, 아래 빈 줄을 가지고 있다.

h1~h6까지 존재하며 순서대로 대제목- 중제목- 소제목- 본문 제목- 각주 제목 으로 생각하면 된다.(h6의 거의 안씀)

'진하게'(bold) 라는 서식이 들어가 있다.

 

*p 태그(=paragraph)

p태그는 그 적용이 수직 방향으로만 이루어진다!

 

줄 높이가 더 높은 쪽이 채택이 되고 더 낮은 쪽은 높은 쪽에 묻히게 된다.

 

 

 

4. image 태그

 

이미지를 보여주는 태그이다.

 

* 태그의 속성 기입

시작 tag 라인에 기술한다.

img 태그의 필수 속성은 이미지의 경로를 알려주는 src이다.

이 필수 속성을 적어주지 않으면 태그는 그저 의미없는 껍데기와 같다. 

 

이미지의 경로를 주는 방법은 상대 경로 방식과 절대 경로 방식이 있다.

상대 경로 방식은 같은 디렉토리에 있을 경우 사용하는 방식으로 위의 예제와 같다.

절대 경로 방식은 최상위 루트 디렉토리부터 해당 경로를 전부 적어주는 것이다.

 

속성명	설명
src	이미지의 경로를 알려주는 속성
width	가로 길이(픽셀 기준)
height	세로 길이(픽셀 기준)
title	풍선 도움말(=툴 팁)
alt	눈에 드러나는 속성이 아닌 읽어주는 속성이다.(자세한 설명)

 

* 이미지의 사이즈

속성으로 이미지의 크기를 강제로 조절할 수 있다. 

가로폭을 줄이게 되면 세로는 자동비율로 조절하여 줄이게 된다.

자동 비율이 되면 사진이 찌그러지지 않게 사이즈를 조절할 수 있다.

동영상도 이미지의 일종이기 때문에 똑같이 자동 비율 조절이 가능하다.

 

 

 

5. 글로벌 속성과 접근성 속성

 

글로벌 속성 : 모든 html 요소들이 가질 수 있는 속성

접근성 속성 : 웹 접근성을 향상시키기 위한 속성

 

접근성 규격이 법적으로 정해져 있는 유일한 나라가 한국이다.

즉, 무조건 그 규격을 지켜야한다는 의미이다.

 

눈에 보이는 display 속성들은 css에서 기재하는 것이 권고사항이다.

 

title과 alt속성은 글로벌 속성인 동시에 접근성 속성이다.

title은 마우스 커서를 위에 올리면 풍선말이 뜨는 속성으로 간단한 제목을 기재한다.

alt속성은 이미지 등이 깨지게 되면 그에 대한 설명 등을 적어서 최대한 접근성을 높여준다.

 

 

 

6. a 태그(링크 태그, 메뉴태그)

 

 

a 태그의 필수속성은 href이다. 

제대로 그 tag가 자기 속성으로서의 일을 할 수 있게 해 주는 것이 필수 속성이다. 

그러나 무조건 기재를 ㄹ해야만 하는 것은 아니다.

 

필수 속성이 해당 tag의 성격을 다 가지고 있다.

필수 속성이 없으면 그 성격이 없다. 그저 일반 텍스트로 표현이 된다.

 

속성	설명
id	이름 정의 속성, identity, UNIQUE 속성(중복 불가, 유일 식별)
href	hyperlink+ reference, 참조해야할 웹문서의 경로

 

href 속성

title, 언더바 style

한 번이라도 방문하면 쿠키라는 속성으로 메모리를 추적하며 그 색을 표기

클릭 이벤트가 들어가있어 해당 경로로 접속

마우스의 모양을 포인터로 바꾸어 줌

#(북마크)(DB의 savepoint와 비슷)

 

내가 만든 웹 페이지를 링크하고 싶으면 상대경로를 주고, 이미 존재하는 웹 사이트를 링크하려면 절대경로를 준다.

"mailto:" - 메일 보내기

"http://...." - 웹사이트가 그 통신규약을 지켰다는 의미가 http이다. 그러므로 모두 기술해 줄 것.

"#..." - ...로 점프!

"#" - 가장 꼭대기(Top)로 점프.

 

문서의 body구역에서의 Top가 아니라 Scroll Bar의 꼭대기가 Top이다.(좌표 0픽셀)

수평 스크롤은 가능한 한 띄우려고 하지 말 것.

모바일 브라우저는 수평 스크롤을 띄울 수 없다는 것이 철칙이다.

 

Scroll이 더 이상 내려갈 수 없는 곳이 bottom이고 좌표는 bottom의 0픽셀이다.

왼쪽 끝단은 left 끝단의 0픽셀, 오른쪽 끝단은 스크롤이 들어가기 전이고 좌표는 right축의 0픽셀이다.

 

즉, 스크롤은 body 것이다.

웹 브라우저는 투명박스로 둘러 쌓인 개체들을 그려주고 있다. 

그래서 어떻게 그려지는지 정확하게 파악하는 것이 중요하다.

 

 

 

7. ul, ol 태그

 

태그명	설명
ul	unordered list 순서없는 목록
ol	ordered list 순서있는 목록
li	list 실제 리스트
dl	description list 정의 리스트
dt	description title 제목
dd	description data 정의 내용

 

<ul>와 <ol>는 child tag들을 담아야 하는데, 그 대상이 실제 list를 담당하는 <li>이다.

즉, <li>는 <ul>과 <ol>의 child tag이다.

두 단계로 들어온 tag들이라서 2depth tags라고 한다.

계층, 족보 형식의 cascading인 것이다.

child tag들은 자신의 parent tag의 속성을 상속받는다.

 

정의 목록은 그 단계가 더 들어간다.

 

*<ul>

문단 기능을 가지고 있다.

<p>가 들어있다. (앞, 뒤 공백) 

 

* <li>

수평 방향으로 나열한다.

자동 줄 넘김을 한다. 하지만 <br>은 아니다.

들여쓰기 서식을 가지고 있다. (정확히 말하면 ul에게 물려받음)

즉, 스타일 얘기할 때 ul 대상으로 얘기해야한다. 

내용 앞의 이미지 아이콘을 내가 원하는 이미지 아이콘으로 대체할 수 있다.

 

 

 

8. table

 

 

html은 기본적으로 선 같은 것을 가지고 나오지 못한다.

구조 정도만 가지고 나온다. 즉, 면만 가지고 나온다. 

테이블 모양(선, 여백 등)은 css에서 처리하는 것이다.

 

태그명	설명
table	표 구조
caption	표의 제목(위치는 항상 위쪽 중앙으로 고정)
tr	table row. table태그의 필수 태그
th	table의 heading text. 컬럼의 제목 역할(정중앙, bold)
td	table data. 실질적인 값