개발 환경 프로그램 소개(NotePad++)
NotePad++는
HTML Editor로 가벼운 프로그램이고
이번 강의에서 주로 활용할 프로그램이다.
https://notepad-plus-plus.org/
현재 version 7은 메타데이터를 다루는데
문제가 있어 version 6을 다운받아준다.
다른 이름으로 저장할 때 확장자명을 '.html'로 저장해주면
웹브라우저에서 확인할 수 있다.
이외에도 Visual Studio 2019, Windows 메모장 등
페이지 환경을 제공하는 프로그램만 있다면
어디서든 html을 개발할 수 있다.
NotePad++ 설치 후
■ 환경설정 => 새문서 => UTF-8
■ Save(as) => Hello.html
다른 이름으로 저장할 때 확장자명을 '.html'로 저장해주면
웹브라우저에서 확인할 수 있다.
■ View in Web Browser (Chrome)
Basic Elements
이제부터 가장 기본적인 요소를 알아보겠습니다.
그전에 웹사이트를 하나 추천해줄게요
https://www.w3schools.com/
html의 바이블이라고 할 수 있는데
표준이 아닌 최신 기술 등이 바로바로 반영이 되기때문에
모든 웹 표준 기술을 확인해볼 수 있습니다.
▶ HTML5의 구조 [사진]
기본적인 HTML 구조는 위의 사진과 같은데
HTML5에서는 약간 인코딩 방식이 변경되었습니다.
head 부분과 body부분으로 나뉩니다.
head 부분은 타이틀, javascript 코드, CSS 스타일 정의, 메타데이터 정의가 들어갑니다.
body 부분은 텍스트, 이미지, javascript 코드, 비디오 등
문서 표현에 해당하는 부분이라고 볼 수 있습니다.
▶ HTML5의 태그
아래와 같은 태그들이 꼭 필요합니다.
<!DOCTYPE html>
<html>, <head>, <title>, <body> tags
문서의 틀을 구성하는 요소입니다.
▶ HTML의 태그 속성
태그의 속성을 보여주는 속성 부분들이 존재해요.
이 속성은 태그마다 다릅니다.
사이트 'w3school'에 방문하면 다양한 속성과 태그들을 볼 수 있습니다.
이 속성은 css와 javascript로 변형시킬 수 있습니다.
태그들 중에서도 start와 end를 둘다 가지는 태그가 있고
start만 가지는 독립적인 태그도 있습니다.
▶ 태그는 대문자와 소문자를 구분하지 않습니다.
각 속성들도 구분하지 않습니다.
▶ HTML5 표준에선 값을 대입할 때 불필요한 공백이 없는지 확인해야합니다.
태그 소개
Title of Webpage
Title 타이틀은 브라우저의 타이틀바에 보여집니다.
Text 표현
Text 표현은 특별한 태그 사용없이 <body></body> 태그안에 적으면
됩니다 텍스트가 화면에 표출됩니다.
만약, 단락을 구성하는 태그를 사용하지 않으면
띄어쓰기가 되지 않은 채 문장이 연속적으로 출력됩니다.
<p></p> 단락 태그
문서 구조를 정형화 시켜서 작성할 수 있는 단락 태그입니다.
단락과 단락사이에는 공백이 추가됩니다.
<br> 줄바꿈 태그
줄바꿈 태그로 엔터한 것과 같은 효과입니다.
=> HTML 코드작성 시 엔터키는 줄바꿈을 의미하지 않습니다.
<p></p> 과 <br> 태그로 줄바꿈을 표현할 수 있습니다.
<pre></pre> 태그
프로그래머가 작성한 코드 그대로 출력이 되는 태그로
단락과 줄바꿈을 코드에 적었다면 출력화면에도 표현됩니다.
많이 사용되는 기능이 아닙니다.
<h#>~<h#> 헤딩 태그
각 단락을 나타내는 헤딩을 나타내는 태그입니다.
h1~h6까지 있으며 폰트효과(size/bold)는 웹브라우저마다 다릅니다.
우리가 보통 문서를 쓰면 A4용지에 적히게 되는데
웹브라우저는 상하좌우가 무한히 넓을 수 있습니다.
우리가 보는 화면의 크기에 따라 달라질 수 있습니다.
주석 태그
<!--주석이 들어가는 부분-->로 표현합니다
웹브라우저에서는 보이지 않습니다.
Text format을 바꾸는 태그들
<b>...</b> 볼드체로 만든다.
<i>...</i> 이탤릭체로 만든다.
<strong>...</strong> 텍스트를 강하게 표시한다
<em>...</em> 텍스트를 강조한다.
<code>...</code> 텍스트가 코드임을 표시한다.
<sup>,,,</sup> 위첨자(superscript)
<sub>...</sub> 아래첨자(subscript)
<strong>태그와 <b>태그는 브라우저에 따라 차이가 없는 경우도 있다.
<em>태그의 경우도 <i>태그등과 효과과 같은 경우도 있다.
<hr> 수평선 태그
수평선을 그리는 태그입니다.
특수문자 표현 [사진]
태그 소개(2)
리스트 태그
<ol>...</ol> 순서를 갖는 리스트
<ul>...</ul> 순서가 없는 리스트
<dl>...</dl> 정의 리스트
리스트의 타입을 정하는 태그이다.
<li>...</li> (</li> 생략가능)
리스트의 요소인 태그이다.
예전 html 구조에선 속성을 태그안에서 정의해주었지만
최근에 css3가 되면서 속성을 최소화하고
디자인적인 요소를 전부 css에서 정의하는 것을 권장하고 있습니다.
<dl>...</dl> 리스트는
<dt> 키워드 태그와
<dd> 설명 태그가 있습니다.
지금부터는 우리가 지금까지 배운 태그 중
가장 중요한 Hyperlink를 알아보겠습니다.
<a>...</a>
어떤 링크를 클릭하면 어떤 문서 페이지로
이동할 수 있는 계층구조를 제공합니다.
<a> 태그는 링크를 만들 때 사용합니다
href 속성은 링크의 목적지를 나타냅니다.
링크 텍스트는 클릭할 수 있는 정보로
밑줄이 그어지며 화면에 보여진다.
target 속성은 링크를 클릭했을 때
빈창, 빈탭, 현재 페이지에 보여질지
특정합니다.
(일반적으로 _blank 을 많이 사용합니다.)
id 속성은 문서구조에서 특정 위치로
이동할 때 쓰이며 특정 위치를 나타냅니다.
<img> 이미지 태그
혼자 쓰이는 단일태그로 이미지를 넣습니다.
src 속성은 이미지 파일 이름을 지정합니다
width, height 속성은 이미지의 크기를 정합니다.
alt 속성은 이미지가 표시되지 못하는 경우(서버에 이미지가 없는 경우)
화면에 표시되는 텍스트이다.
브라우저가 이미지를 표현하는 구조
1. HTTP Request로 클라이언트가 서버에 파일을 요청합니다
2. HTTP Response로 웹서버에서 클라이언트에 파일을 보냅니다.
페이지에 이미지가 있을 때마다 요청하고 받는 과정을 반복한다.
따라서 페이지에 많은 이미지가 있으면 속도가 느려지는 것이다.
img 태그의 크기 조절 속성인 width, height는 보여지는 크기를
조절하더라도 서버에 요청해서 받는 이미지는 원본 크기의 이미지다.
웹 패킷의 양이 커지면 서버의 응답속도가 매우 느리게 때문에
웹브라우저의 환경에 따라 원본 이미지의 크기를 잘 조절해야 한다.
<table> 태그
기본적으로 thead, tbody, caption, /foot 태그를 사용한다.
테이블 태그 구조는 많이 쓰는 구조로
디자인 속성은 css로 표현하는 것을 추천한다.
tr은 한 행을 정의합니다.
th는 bold체로 적습니다.
td는 일반체로 적습니다.
열 병합은 rowspan="#" 속성으로 표현할 수 있다.
행 병합은 colspan="#" 속성으로 표현할 수 있다.
'기술' 카테고리의 다른 글
| 05/19 Lighting Tech. (0) | 2020.05.19 |
|---|---|
| 05/14 Lighting Tech. (0) | 2020.05.14 |
| 빅오표기법 - 시간복잡도 (0) | 2020.05.04 |