개발툴 : Sublime Text3 (메모장으로 하셔도 상관없습니다)
▼다운로드 링크▼
Download - Sublime Text
Sublime Text 3 is the current version of Sublime Text. For bleeding-edge releases, see the dev builds. Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit f
www.sublimetext.com
제가 Sublime Text를 사용하는 이유는 대부분의 언어들을 코딩할 수 있다는 장점이 있어 선택하게 되었습니다.
밑에 네모 상자 칸을 눌러 HTML로 변경해준뒤 <html>을 입력하면 자동으로 구조를 입력해줍니다.
HTML 개요
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만드는 데 사용하는 언어입니다.
HTML 태그는 태그 이름을 꺽쇠 괄호(<>)로 감싸서 표현합니다.
ex) "<태그이름></태그이름>"
*<img><br><hr> 등은 종료 태그 없이 시작 태그만을 가집니다.
HTML 구조
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다.
<html> : HTML 문서의 루트(root) 요소를 정의합니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> ~ <h6> : 제목(heading)을 나타냅니다.
- 숫자가 커질수록 크기가 작아지며, 이 태그의 위아래로는 약간의 여백이 삽입됩니다.
- 보통 검색엔진에서 <h>태그를 이용하여 키워드를 수집하고, 그 내용을 파악하기 때문에 문서에 포함되는 제목은 <h> 태그로 작성해야만 제대로 검색될 확률을 높일 수 있습니다.
<p> : 단락(paragraph)을 나타냅니다.
HTML 요소
HTML 요소는 여러 속성을 가질 수 있으며, 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공합니다.
<태그이름 속성이름 = 속성값> 내용 </태그이름>
ex) <p class="para"> HTML </p>
속성 이름은 소문자를 권장하며, 속성값은 따옴표로 감싸야 합니다.
세미콜론(;)을 이용하여 style을 여러개 추가할 수 있습니다.
HTML 스타일(Style)
CSS 스타일을 설정하는 요소입니다.
ex) <태그이름 style="속성이름:속성값">
1) 배경색
<p style = "background-color:black"> <p>
2) 글자색
<p style = "color:black"> <p>
3) 글자크기
<p style = "font-size:250%"> <p>
4) 문단 정렬
<p style = "text-align:center"> <p>
HTML 링크(Link)
하이퍼 링크를 만드는 요소이며, target 속성을 이용해 링크로 연결된 문서를 어디에서 열지 명시해줍니다.
ex) <a href="링크주소" target="속성값">HTML 링크<a>
target 속성값
1) _blank : 링크로 연결된 문서를 새 창이나 새 탭에서 엽니다.
2) _self : 링크로 연결된 문서를 현재 프레임에서 엽니다. (default)
3) _parent : 링크로 연결된 문서를 부모 프레임에서 엽니다.
4) _top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임에서 엽니다.
5) 프레임이름 : 링크로 연결된 문서를 지정된 프레임에서 엽니다.
HTML 이미지(Image)
이미지를 띄울 때 사용하는 요소이며, 주로 JPEG, GIF, PNG를 사용합니다.
ex) <img src = "이미지 주소" alt = "대체 문자열>
alt 속성은 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.
HTML 리스트(List)
여러 요소들을 일렬로 나열한 목록이나 명단을 나타내주는 요소이며, 세 가지의 형태의 리스트를 제공합니다.
ex) <원하는 리스트 속성><li></li></원하는 리스트 속성>
target 속성값
1) 순서가 없는 리스트 <ul>
리스트 요소 앞에 기본 마커로 검정색의 작은 원(disc)이 위치합니다. CSS 속성을 이용해 다른 모양으로 변경 가능합니다.ex) <ul style = "list-style-type : circle"><li></li> </ul>
circle : 흰색 작은 원 모양
square : 사각형 모양
2) 순서가 있는 리스트 <ol>
리스트 요소 앞에 기본 마커로 아라비아 숫자(decimal)가 위치합니다. CSS 속성을 이용해 다른 모양으로 변경 가능합니다.
ex) <ol style = "list-style-type : upper-alpha"><li></li></ol>
upper-alpha : 영문 대문자
lower-alpha : 영문 소문자
upper-roman : 로마 숫자 대문자
lower-roman : 로마 숫자 소문자
3) 정의 리스트(description list) <dl>
용어와 그에 대한 정의를 모아놓은 리스트dlau, <dt> 태그에는 용어의 이름이 들어가고, <dd> 태그에는 해당 용어에 대한 정의가 들어갑니다.
ex) <dl><dt>용어</dt><dd>해당 용어에 대한 정의</dd></dl>
HTML 테이블(Table)
표를 작성하는 요소입니다. CSS 속성을 이용해 테두리를 설정할 수 있습니다.
ex) <table> <tr> <th>열의 제목</th></tr> <tr> <td>열 내용</td></tr></table>
<tr> : 테이블에서 열을 구분해줍니다.
<th> : 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다.
<td> : 테이블의 열을 각각의 셀로 나눠줍니다.
더 자세한 내용들은 웹을 만들어보면서 배워나가겠습니다 ~!