-
[HTML-01] 배경지식 및 각종 태그들비전공자 공부일기/:: WEB & Front-End 2019. 6. 11. 18:55
2019. 06. 11 필기
● 배경지식
HTML (Hyper Text Markup Language) : 웹출력 전용언어
--- html 4.01 framset
--- html 4.01 transitional
--- html 4.01 strict : xhtml만큼은 아니지만, 문법적으로 엄격한 편(경고가 떨어짐)
XHTML : 문법적으로 엄격한 html
==> html과 xhtml의 장점을 혼합하여 만든 게 HTML 5 버전(windows8까지는 인식이 안 되므로 주의)
--- 한국은 IE때문에 아직 4버전을 많이 쓰므로 5버전만의 고유기능을 이용하는 것을 쉽게 권장하지 않음태그(tag)란? : 웹을 통해 보여지는 문서와 사이트를 구성하는 언어
--- 대소문자 미구분
--- 불필요한 공백 문자도 오류에 속함<tag> : 오픈태그 open tag --- 태그의 시작
</tag> : 클로즈태그 close tag --- 태그의 종료
--- 문법적으로 태그의 오픈, 클로즈가 하나의 짝으로 구성되지만, 독립태그도 존재
--- 태그에 속성(Attribute)과 속성값을 이용하여 태그 설정 가능HTML 문서의 필수적인 구성 <!DOCTYPE> -- HTML5문서임을 브라우저에 알리는 지시어(태그X). 반드시 첫 줄에 나타내야 한다. <!-- 주석문은 다음과 같은 괄호 안에 표현한다. 주석문은 화면에 출력되지 않음 --> <html> <head> 헤드에는 문서 제목, 자바스크립트 코드, CSS 스타일 정의, 메타 데이터 정의를 적는다 HTML 문서에 대한 정보를 하위태그로 제공하는 상위태그 => 하위태그 : meta, title, script, style, link 태그 </head> <body> 바디에는 문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등이 들어감 브라우저의 문서출력 영역에(Document) 출력될 내용을 하위태그로 제공 => 하위태그(=박스모델 BoxModel) : h1, div, p, img, span, input 등 </body> </html>시맨틱 태그(Sementic Tag) : 페이지의 구조를 표현하는 태그
--- HTML4.01과 HTML5의 가장 큰 차이는 '시맨틱 태그'가 훨씬 많이 지원된다는 점이다. 이전에는 header, footer 등의 영역 설정은 개발자가 임의로 설정해주는 데 그쳤지만, 시맨틱 태그를 통해 영역지정이 규정처럼 굳혀졌다고 볼 수 있음
--- <div>를 이용해 쓰는 건 4버전, html <footer>를 쓰는 건 5버전 ( <div ="footer"> 형식은 4버전)속성(Attribute) :
웹페이지 영역요소
<header>
<nav>
<article>
<section>
<aside>
<footer>퍼블리싱 Publishing : 누구나 사이트를 이용할 수 있도록 다양한 기능을 제공하는 것 --- 디자인과 반비례하게 됨
--- header, footer, nav, section, article 등의 태그 이용
● body 태그 안에 올 수 있는 태그들
<html> : HTML 문서의 최상위 태그
<lang> : HTML 문서에서 사용하는 언어 설정(생략 가능)
=> 하위태그 : head, body 태그<head> : HTML 문서에 대한 정보를 하위태그로 제공하는 상위태그
=> 하위태그 : meta, title, script, style, link 태그<meta> : HTML 문서에 대한 상세정보를 속성과 속성값으로 제공하는 태그
--- charset 속성 : HTML 문서에 대한 캐릭터셋을 설정하여 문자 인코딩 방식 제공
(기본값 : ISO-8859-1; 서유럽어--- UTF8 유니코드를 설정해야 한글이 깨지지 않음)따라서 한글을 제대로 출력하기 위해 다음과 같은 charset선언이 필요 <meta charset="UTF-8"><title></title> : HTML 문서의 제목 설정 >> 제목은 타이틀 바에 출력됨
<블록 태그 Block Tag> : 하나의 라인을 박스모델이 사용하는 태그 (div, h1, p, ol, ul, table 등)
<인라인 태그 Inline Tag> : 하나의 라인에 여러 개의 박스모델이 사용되는 태그 (span, img, input, select 등)
--- 블록태그의 하위태그로 인라인태그를 사용할 수 있지만, 반대는 불가능<h1~6> : 제목 출력(1~6 : 출력크기)
=> align 속성 : 출력 정렬 - left(기본), right, center, justify<hr> : 구분선 출력 --- 독립태그
=> width 속성 : 박스모델의 폭 설정(단위: px 또는 %)<h1 align="center"> 가나다라마바사 </h1> <hr width="600" align="right"><p></p> : 단락 나누기
-- </p> 다음에는 자동 줄바꿈 발생<br> : 줄바꿈 -- 독립태그
● 텍스트태그
<i> : 기울기
<b> : 진하게
<em>: 기울기 + 의미부여
<strong> : 진하게 + 의미부여
<mark> : 형광펜효과
<sup> : dummytext윗첨자
<sub> : dummytext아래첨자<div> : 영역 설정(블록태그) --- <p>는 줄간격이 넓지만, <div>는 그렇게 넓지 않음
<span> : 영역 설정(인라인 태그)
=> style 속성 : CSS속성과 속성값을 이용하여 태그에 디자인 구현<div style="font-size: 24px"> 이 글은 <span style="color:red">예시로</span> 보여드리는 텍스트입니다.</div>==> [출력] 이 글은 예시로 보여드리는 텍스트입니다.
● img 태그
<img> : 서버에 존재하는 이미지 파일을 출력 --- 이미지 파일 : GIF 파일, PNG 파일, JPG 파일 등
=> alt 속성 : 출력 이미지에 대한 설명을 속성값으로 설정(음성지원) --> 일부 외국에서는 법적으로 반드시 설정
=> src 속성 : 출력될 이미지 파일의 경로(URL)를 속성값으로 설정 -->
=> title 속성 : 출력 이미지에 대한 설명을 속성값으로 설정(툴팁)
--- 동일 서버에 존재하는 자원은 컨텍스트의 자원으로 표현 >> 해당 자원이 존재하지 않을 경우 404(Not Found) 발생절대경로 absolute path : Root 디렉토리( / )를 기준으로 자원(파일) 경로를 표현 >> /ContextName/Directory/File
--- CSL(HTML, CSS, JavaScript)에서는 Root 디렉토리가 Context 외부에 표현
--- 왠만하면 절대경로를 사용하는 것을 권장!
상대경로 relative path : 현재 문서를 기준으로 자원경로를 표현
>> 동일한 레벨에 있는 이미지소스는 파일명만 표기해도 됨
=> / : 루트
=> ./ : 현재 경로
=> ../ : 현재 경로의 상단폴더
<!-- MarkUp Language 주석문 --> <!-- 이 괄호 안에 글자를 적는다 -->▲ 신기하게도 코드블록으로 묶어주지 않으면 화면에서 사라짐.
'비전공자 공부일기 > :: WEB & Front-End' 카테고리의 다른 글
[CSS-01] background 설정 (0) 2019.06.17 [웹개발 기초] 여러가지 선택자와 속성들 (0) 2019.06.14 [HTML-03] 여러가지 중요 태그들2 (0) 2019.06.13 [HTML-02] 여러가지 중요 태그들 (1) 2019.06.12 웹개발 기초 - 프로그램 설치 및 서버 환경설정 (0) 2019.06.10