언유상씨의 건전한 취미생활
01. HTML 기본 다지기(문서 기본 구조 ~ 특수문자) 본문
웹 편집기 : 웹 문서를 작성하는 프로그램
웹 브라우저 : 웹 문서를 보는 프로그램
소스에서 <, > 으로 묶인 부분 -> 'HTML 태그(tag)'
태그를 붙이는 것 -> '마크업'
HTML5 + CSS3 -> 반응형 웹 디자인도 가능
반응형 웹 디자인이란?
접속하는 기기에 따라 자동으로 레이아웃이 바뀌는 것.
태그는 < 와 > 를 이용해 구분하며, 소문자로 작성한다.
닫는 태그가 필요한 경우 반드시 닫도록 하자.
C언어와 같이 띄어쓰기를 여러칸 하더라도 하나로 여기므로, 보기 좋게 적당하게 들여쓰도록 하자.
태그는 속성과 함께 사용할 수 있다.
포함 관계를 명확히 하자.
HTML의 문서 기본 구조는 다음과 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html> <!--문서 유형 설명-->
<html lang = "ko"> <!-- 문서에서 사용할 언어를 설정한다. en = 영어, ja = 일어 등-->
<!--언어 정보를 알고 있으면 검색시 용이하다!-->
<head> <!-- 화면에는 보이지 않는 내부 정보들 -->
<title> 문서제목 </title> <!-- 제목 표시줄에 뜨는 이름 -->
<meta charset = "UTP-8"> <!-- 인코딩 지정 -->
<meta name = "viewport" content = "width = device-width, initial-scale = "1.0">
<!-- 모바일 기기를 위한 것 -->
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<!-- 인터넷 익스플로어의 문제점 보완 -> 최신 표준 모드로 볼 수 있도록 해준다-->
<meta name = "keywords" content = "~~~~~">
<!-- 문서의 키워드 -->
<meta name = "description" content = "~~~~~">
<!-- 문서 설명 -->
<meta name = "author" content = "~~~~~">
<!-- 문서의 제작자 -->
</head>
<body>
<!-- 실제 브라우저에서 표시되는 부분 -->
</body>
|
cs |
특수기호 사용하기
엔티티 코드표(https://entitycode.com/)를 참고하거나, 한글 자음과 한자키를 누르면 된다.
Entity Code - A Clear and Quick Reference to HTML Entities Codes
About EntityCode The idea came from my constant need to add those hard to remember HTML entity codes, such as the copyright symbol ( © ), every time I’m developing a new website or writing a new article. Usually, I either open one of my previously done
entitycode.com
위의 홈페이지로 들어가서 필요한 특수 문자를 확인한 뒤, 알맞은 코드를 사용하면 된다.
UTP-8의 경우 특수문자가 깨지지 않지만, W3C에서는 특수문자가 깨질 수 있으므로, 특수문자를 사용할 때에는 엔티티 코드표를 이용하도록 하자.
웹과 연결할 서버는
윈도우 -> ASP, ASP.NET
리눅스 -> PHP로 진행하면 된다.
'건전한 학습생활 - HTML & CSS' 카테고리의 다른 글
| 02 - 2 . 텍스트 관련 태그들 (중) (5) | 2020.11.15 |
|---|---|
| 02 - 1. 텍스트 관련 태그들(상) (2) | 2020.10.10 |
| 00. HTML & CSS 시작하면서 (2) | 2020.10.08 |
