쥬로그
HTML 기본 본문
브라우저 화면에 정보를 보여주기 위한 가장 기본적인 도구
-> HTML, CSS
* HTML 이란?
HyperText Markup Language
하이퍼텍스트 마크업 랭귀지
• 하이퍼텍스트 (HyperText)
: 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능
• 마크업 (Markup)
: 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 것
: tag = 꺽쇠 괄호 (<, >)로 묶인 부분
: Markup = 태그를 붙이는 것
: 꺽쇠 안의 내용은 웹 브라우저 화면에 나타나지 않는다.
→ 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
• *.html (or *.htm) 확장자
* 웹 표준
• 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있도록 제작 시 지켜야 할 약속(규칙)
• 최신 웹 표준에 맞는 웹 사이트 제작 가능
→ PC나 스마트폰 등 모든 전자 기기에서 웹 문서 내용 정확하게 파악 가능
→ CSS 를 이용해 반응형 웹 디자인 실현 가능
• 앱 화면 디자인의 기초
→ HTML5의 API와 CSS3로 모바일 운영체제와 상관없이 실행되는 웹앱 제작 가능
! 자바스크립트에 대한 이해 필요
* 웹 브라우저 (web brower)
• 웹 문서를 보는 프로그램 & 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 프로그램
→ 윈도우에 포함되어 있는 인터넷 익스플로러나 엣지, 크롬, 파이어폭스 같은 프로그램
• http://HTML5test.com/ 을 통해 사용하고 있는 웹 브라우저의 html5 지원 정도를 알 수 있다.
* 웹 편집기 (web editor)
• 웹 문서를 작성하는 프로그램
• 텍스트를 입력할 수 있는 프로그램이면 모두 가능
→ 메모장, 텍스트 편집기, 노트패드++, 비주얼 스튜디오 코드 등
* 기본 문서 구조
• 마크업 (Markup)
: 이미지, 텍스트를 표시하는 것
• 태그 (tag)
: 마크업할 때 사용하는 약속된 표기법
: 소문자 사용 추천
: < 와 >로 묶인 부분
: 여는 태그와 닫는 태그는 set
: 여는 태그에서 다는 태그까지를 태그의 적용 범위로 인식
: 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식
: 소스를 들여 쓸 때는 tab 키 사용
: <태그 속성="속성 값" 속성="속성 값"...> 처럼 태그는 속성과 함께 사용 가능
: 태그 안에 다른 태그 포함 가능
ex) 이미지 - <img>
텍스트 문단 - <p>
ex) <h1> ~ </h1>
<p> ~ </p>
ex) <img src="images/first.jpg" width="200" height="300" alt="꽃 이미지">
ex) <u><i> 주주디의 sw 이야기 </i></u>
• 필수 요소
→ <!DOCTYPE>
: 문서 유형을 지정하는 선언문
→ <html> ~</html>
: 웹 문서 시작을 알리는 태그
→ <head> ~</head>
:브라우저에게 정보를 주는 태그
→ <body> ~ </body>
: 실제 브라우저에 표시될 내용
😉 html 간단 해석!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<h1>안녕 난 루피야</h1>
<img src="images/fnvl.png">
<p>너두 할 수 있어<br>
야 너두 웹 페이지 만들 수 있어!!</p>
</body>
</html><!DOCTYPE html>
: 현재 문서가 HTML5 언어로 작성된 웹 문서이다.
<html> ~ </html>
: 웹 문서의 시작과 끝을 나타내는 태그
: lang="ko" 는 한국어로 작성된다는 속성, 값 이다.
<head> ~ </head>
: 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분
: 실제 문서 내용이 아니기 때문에 title 만 표시되고 나머지는 표시되지 않는다.
: charset="UTF-8" 는 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할 지 지정하는 것이다.
: http-equiv="X-UA-Compatible" content="IE=edge" 는 현재 웹 문서를 최신 표준 모드로 해석하라는 것이다.
: name="viewport" content="width=device-width, initial-scale=1.0" 는 모바일 기기를 위한 소스이다.
<body> ~ </body>
: 실제로 웹 브라우저 화면에 나타날 내용
: <h1> ~ </h1> 화면 상단에 표시될 문장을 삽입할 때 사용하는 태그
: <p> ~ </p> 는 parahraph의 약자인 텍스트 문단을 삽입할 때 사용하는 태그
: <img> 는 이미지를 추가할 때 사용하는 태그
😎 필수 태그 자세히 살펴보기
<!DOCTYPE html>
: 문서 유형(document type) 지정하는 태그
: HTML은 대·소문자 구별이 없지만 강조하기 위해 대문자 사용 추천
<html> ~ </html>
: 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
→ 속성 lang
: 문서에서 사용할 언어 지정
ex) lang="ko"
<head> ~ </head>
: 웹 브라우저 정보가 들어있는 태그
: 웹 화면에는 표시되지 않는다.
!
→ <title> 문서 제목 </title>
: 모든 웹 브라우저의 제목 표시줄에 표시된다.
: 페이지의 전체 내용을 추측할 수 있는 내용을 넣는 것이 좋다.
: 특수 기호를 사용할 수 없다.
: 반드시 사용해야 하는 필수 태그 중 하나이다.
: '즐겨찾기'에 추가할 때 <title> 태그 안의 내용으로 표시된다.
→ <meta>
: 데이터에 대한 데이터
: 웹 문서와 관련된 정보들을 지정하는 태그
⇒ <meta charset="UTF-8">
: 문자 세트 지정
: 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정
: UTF-8 은 한글이 깨지지 않는 type
⇒ <meta name="viewport" content="width=device-width, initial-scale=1.0">
: 모바일 기기 고려
⇒ <meta http-equiv="X-UA-Compatible" content="ie=edge">
: 인터넷 익스플로러에서 현재 웹 문서를 최신 표준 모드로 해석하라는 태그
⇒ <meta name="keywords" content="html5, 웹표준">
: 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정하는 태그
: 검색 엔진에서 사이트를 검색할 때 참조하는 정보
: 해당 문서의 키워드, 설명, 소유자 또는 제작자에 대한 정보를 저장할 수 있다.
<body> ~ </body>
: 실제 화면에 표시될 내용
→ <br> 줄 바꿈
* 비주얼 스튜디오 코드
• 웹 개발을 위해 무료로 제공하는 편집기
• 대부분의 주요 플랫폼에서 모두 사용 가능
→ 윈도우, 맥 OS, 리눅수 모두 무료로 사용
• 태그와 CSS 속성을 간편하게 입력하고 설명을 알 수 있다.
• 간편한 확장
→ Live Server (Ritwick Dey)
→ http://marketplace.visualstudio.com/vscode 에서 C#, 파이썬 Go, AngularJs 등 최신 웹 기술들을 통합 사용할 수 있다.
• 에밋(Emmet) 기능
: 웹 문서의 태그를 자동으로 입력해 주는 기능
* 호스팅 서버
•작성한 HTML 웹 사이트를 다른 사람들이 볼 수 있도록 하려면 서버 컴퓨터로 옮겨야 한다.
•개인의 경우 서버를 직접 구축하기 어렵기 때문에, 일부 공간을 대여하는 서비스를 이용한다.
→ 서버 호스팅 서비스
→ 웹 호스팅 서비스
→ 클라우드 서버 호스팅
* HTML 문서 만들기
: 비주얼 스튜디오 코드에서 간단한 HTML 문서 작성 및 웹 브라우저로 확인하기
* HTML 주석
: 소스에 대한 설명 및 페이지 내용을 쉽게 이해할 수 있도록 설명하는 글
→ <!-- ~~~ -->
* CSS 주석
→ /* ~~~ */
😊 Do it! HTML5 + CSS 웹 표준의 정석 책으로
독학하는 코린이의 공부 기록
'Study > HTML CSS' 카테고리의 다른 글
| 웹 이미지 형식 - GIF, JPG/JPEG, PNG (0) | 2021.09.14 |
|---|---|
| HTML 이미지 태그 (image tag) (0) | 2021.09.14 |
| 폰트(Font) - OTF / TTF 가 뭐야? (0) | 2021.09.09 |
| HTML 텍스트(Text) 2 (2) | 2021.09.08 |
| HTML 텍스트(Text) 1 (0) | 2021.09.08 |
