whatisthis?
HTML) HTML 기초 下-(2) ( Doctype , Structure / Style, Script / Meta ) 본문
HTML) HTML 기초 下-(2) ( Doctype , Structure / Style, Script / Meta )
thisisyjin 2021. 10. 15. 22:1520. ETC.
1) <abbr> 태그
= 약자. abbriation
** 필수 속성 = title 속성
예제-
<p>
What is <abbr title="Attention-Deficit Hyperactivity Disorder">ADHD</abbr>
</p>
title = " " 안에 입력한 값이 툴팁 형식으로 나타난다.
** title 속성
title 속성은 element에 적용할 수 있으며
해당 요소에 마우스를 올릴 경우 툴팁창이 나타남.
2) <address> 태그
- 연락망
주소 / URL / E-mail주소 / 전화번호 / SNS 등.
<address>
<h1>
thisisyjin
</h1>
<a href="https://mywebproject.tistory.com/">https://mywebproject.tistory.com/</a>
</address>
3) <pre> & <code> 태그
pre = preformatted element.
-> 미리 포맷이 정해진 것.
<p>
thisis
yjin
</p>만약 우리가 위와 같이 코드를 입력하면,
우리는 줄바꿈을 해서 입력했음에도 웹브라우저상에서는 한줄로 나타나게 된다.
하지만, <pre>태그에 입력하면, 우리가 입력한 그대로가 출력이된다.
<pre>
thisis
yjin
</pre>
21. Doctype & Document Structure
** 매우 중요 **
html 문서의 구조와 기본 규격.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
1. DOCTYPE 선언
<!DOCTYPE html>
-> 반드시 대문자로 작성.
이 문서는 가장 최신의 웹표준에 맞는 HTML5버전으로 작성된 문서이고,
웹브라우저에게 그에 맞춰 오류없이 잘 렌더링 해달라는 정보를 담음.
document = html 그 자체.
___
2. html 태그
- <html>태그의 하위 요소는 오직 두개. (head / body)
** head 태그 = 사람의 뇌와 같이 많은 정보를 담고 있음. 메타데이터 선언.
** body 태그 = 컨텐츠. 내용.
22. Title, Link / Style, Script
- <head> 태그 내에 존재.
1. <title> 태그
head 태그 내 필수적인 요소.
html문서 탭에 뜨는 문서의 제목과 같은 역할.
-> 검색 최적화에 매우 중요.
| S E O = Search Engine Optimization (검색 최적화) |
** 검색최적화를 위한 적합한 title
- 단순한 키워드 나열은 X.
- 페이지마다 다르게 설정
- 너무 짧게는 X / 무엇에 대한 내용인지 센스있게.
2. <link>태그
- CSS 스타일시트를 첨부할 때 이용.
-예>
<link rel="stylesheet" href="./style.css">
** 필수 attribute
- rel (relation , 즉 연결 관계)
- href (hypertext reference) --> <a>태그에서도 사용하는 속성.
1. 상대경로
| / : ~에 있는 . : 이미지를 표시할 HTML 문서의 위치 .. : 상위 폴더 ./ : 현재 폴더 예> src="images/study.png" (./ 기호는 생략 가능) src="./images/study.png" |
2. 절대경로
경로 복사하는 방법
"C:\Users\USER\Desktop\thisisyjin"
-그 외에도 font를 사용할 때에도 <link>태그로 url로 가져올 수 있다.
예>
https://spoqa.github.io/spoqa-han-sans/
Spoqa Han Sans Neo
Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ
spoqa.github.io
위 사이트에서 보면 ttf, otf등을 다운로드 하는 방법도 있지만,
[웹폰트로 사용하기] 로 폰트를 이용할 수 있다.
첫 번째 방법의 경우엔
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
style.css 파일의 아래에 위 코드를 입력하면 된다.위 url을 들어가보면css파일, 즉 스타일시트가 입력되어있는 것을 알 수 있다.
두번째 방법은, 아래 코드를 html문서 내에 head>link 태그로 입력하는 것이다.
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>위와 같은 코드를 입력한 후에,
반드시 css 파일 내에도 해당 폰트를 사용했음을 명시해주어야 적용된다.
* { font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }여기서, *은 모든 요소를 선택하는 선택자(Selector)이다.
+) 추가 - <link>요소의 type 속성
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>여기서는 rel / href 속성과 추가로 type속성도 주어진 걸 알 수 있다.
**참고 - > type 속성
우리가 전에 배웠던 <input> element의 type attribute는
<input> 요소가 나타낼 타입을 명시했었다.
<link> 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시한다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있다.
cr: http://tcpschool.com/html-tag-attrs/link-type
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
3. <style>태그
- 이 태그는 비추. 보통 css를 적용할 때 link를 씀.
<head>내에 <style>에 직접 css를 작성하는 것.
- 캐싱 기능이 없음.
4. <script>태그
- HTML 문서 내에 js 파일을 첨부할 때 사용함.
Emmet TIP!
+) 그 외에도 : 를 이용하여 다양한 속성+값 자동완성 가능함.
__
<script src="script.js"></script>동일폴더 내에 있으므로 ./는 생략되어 js파일명만 적어줌.
- script는 css로 치면 <link>태그와도 같은 기능을 하지만,
style 태그와 같이 직접 html 문서 내에 작성할 수도 있음!
예>
<script>
alert("이것은 경고창입니다.");
document.write("텍스트출력");
</script>결과>
-> 즉, 두가지 방법으로 사용할 수 있는 것.
| 방법1 | .js 파일을 src속성으로 링크. |
| 방법2 | javascript 직접 작성. |
방법 2의 경우에는
body 안에서 모든 컨텐츠가 다 로드 된 후에,
마지막으로 작성해주는 것이 바람직하다.
script의 경우에 head에 적어버리면 body를 불러오기 전에 script를 불러오기 때문에
굉장히 비효율적으로 렌더링된다는 것을 알 수 있다.
-> 따라서, js파일을 링크하거나 / 직접 작성시 body태그의 컨텐츠를 다 적은 후 마지막 부분에 입력해주자.
여기서, 렌더링(rendering)이란 무엇인지.
아래 포스팅에 작성하여 공부하였다. 참조바람.
https://mywebproject.tistory.com/78
etc. 브라우저의 렌더링 과정
** 렌더링이란? HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있음. <렌더링 엔진> 크롬 블링크(Blink) 사파
mywebproject.tistory.com
23. Meta
head 태그 내.
데이터를 정의(설명)하는 데이터 = 메타데이터(meta data)
- title , link , style, script 로 설명할 수 없는 내용을 meta를 통해 정의.
필수 속성
name / content
<meta name=" " content=" ">
예>
<meta name="viewport" content="width=device-width, initial-scale=1.0">요즘에는 컴퓨터 / 모바일 / 태블릿 등 다양한 브라우저로 사용하기 때문에
디바이스 사이즈에 따라 자동으로 반응형 사이트를 만들 수 있게 해야 함.
따라서 위 viewport 는 거의 필수 요소라고 보면 됨.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
= 가로(너비)사이즈는 디바이스 너비에 맞게 / 초기 배율은 1배로.
그 외에도 다양한 name이 있다.
예>
<meta name="author" content="thisisyjin">
<meta name="description" content="practice meta element">
<meta name="keywords" content="html, web, study">
다양한 meta데이터의 종류는 아래 링크를 참고하자.
참고: https://seo-ox3.tistory.com/44
1. Keywords (검색엔진에 의해 검색되는 단어 지정)
2. Description(검색 결과에 표시되는 문자 지정)
3. robots (검색 로봇 제어)
4. charset (문자 코드의 종류 설정)
5. Date (날짜- 제작일)
6. Content-Script-Type (웹페이지에 쓰인 언어)
7.. subject (홈페이지 주제 지정)
8. title (제목)
9. Author (페이지 작성 제작자명)
... etc.
+) meta 의 또다른 속성 http-equiv
<meta http-equiv = "항목명" content=" ">
웹 브라우저 서버에 명령을 내리는 속성임.
- name 속성을 대신해 사용할수 있음
- content 속성의 정보 / 값을 위한 HTTP header를 제공
예>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
++) 주의 - meta 태그도 종료태그가 없는 element이다.
작성할때 태그의 종료를 알리기 위해서 < /> 와 같이 작성해주자.
예>
<meta charset="UTF-8" />
24. 마무리
마크업의 기술.
사고의 과정.
html 마크업 훈련법.
나만의 마크업 접근 사고방식 만들기.
정해진 답은 없다.
html 훈련 편에서 계속.
REFERENCE LECTOR
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
| html) a href="#"의 용도 (0) | 2021.10.19 |
|---|---|
| HTML 훈련 - (1) Ad Banner (0) | 2021.10.18 |
| CSS3 - flex (positioning) (0) | 2021.10.12 |
| HTML) HTML 기초 下-(1) (Table/ Media File / Etc) (0) | 2021.10.12 |
| HTML - 종료태그 생략 가능한 요소 (0) | 2021.10.08 |
