민자의 지식창고

HTML 기본 정리1 본문

개발노트/HTML

HTML 기본 정리1

전지적민자시점 2020. 8. 31. 12:51

HTML과 CSS 학습을 기초 부분 정리 노트 입니다.

developer.mozilla.com의 가이드를 참고해서, 하나하나 정리해나가고 있습니다.

https://developer.mozilla.org/ko/docs/Learn/HTML

CSS 선택자(Selector)  종류

 .class명 (클래스 선택자) : <p class='클래스명'>를 선택 

#id명(아이디 선택자) : <p id='id명'>, <a id='id명' 를 선택

a:hovor Pseudo 클래스 선택자 : <a>를 선택하지만, 마우스 포인터가 링크 위에 있을때만 선택

 

CSS 모델은 박스모델을 주 기반으로 합니다

padding : 컨텐츠 주위의공간

border : padding의 바깥쪽 놓인 실선

margin : element의 바깥쪽 공간 

 

속성에는 

width : 너비

background-color : element의 배경색 

color : 한 요소의 색

이벤트

Element에 이벤트를 붙이는 방법은 많이 있습니다. 여기서 HTML Element를 선택하고, onclick 핸들러 프로퍼티에 클릭 이벤트가 실행할 코드를 갖고 있는 익명(anonymouse)함수를 할당 합니다.

 

개인화된 환영 메세지

해당 사용자가 떠났다가 돌아오더라도 유지되게 만듭니다. Web storage api를 이용합니다

<title> 북마크를 할때, <title>의 내용물을 추천하는 북마크 이름으로 사용하기도 합니다. <title>은 검색결과로 사용되기도 합니다.

메타데이터 <meta> 요소

메타데이터는 데이터를 설명하는 데이터입니다. 공식적으로 메타 데이터를 적용하는 방법이 <meta> 입니다.

검색 결과 페이지에도 사용이 된다

<meta>의 name과 content 속성이 있습니다.

<meta name = "description" content="test page">

요세는 사용하지 않음. 스팸기능으로 등록되어버려서, 검색 엔징들이 아예 무시하고 있습니다.

 

 

oepn grapic data는 Facebook에서 제공하는 더 풍부한 메타 데이터를 제공하기 우해 발명한 메타 데이터 프로토콜 이다

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.

favicon 16x16 pixel 

index.html에 같은 위치체 favicon.ico 포멧의 파일을 저장합니다.

<link rel="shourtcut icon" href="favicon.ico" type="image/x-icon">

 

요즘은 많은 다른 아이콘 타입이 있으며, MDM 홈페이지에서 다음과 같은것을 발견 할수 있습니다.

주석에 따라 고해상도 아이콘을 제공하는것을 포함합니다

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

<link>와 <script>

*특히 script 설정시(head) defer 와 async 요소 확인

<!**-link 요소는 항상 head부분에 우치한다 rel=stylesheet는 문서의 스타일 시트임을 나타냄-**!>
<link rel="stylesheet" href="./styles/style.css" >

<!** script는 head에 필요없음. **!>
<script src="main.js"/>

문서의 기본 언어 설정

<html lang="en-US">

HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화 됩니다. 

HTML text fundamentals

 heading 요소는 총 6개가 있으며, <

h1 태그

메인 제목

h2 태그

소 제목

h3 태그

내용들

h4 태그

내용들

h5 태그

내용들


가급적 h1은 페이지당 하나만 사용 합니다. 3개이상 heading 요소를 사용하지 마세요. 탐색하기가 어렵습니다.

why?

검색 엔진들은 당신의 페이지 내 heading을 페이지 검색 순위에 영향을 주는 중요한 키워드를 고려해 indexing 합니다. 검색엔진의 최적화에 관해서는 형편 없게 도빈디ㅏ. (search engine optimization)

Sementic은 과거의 경험으로부터 일상적인 대상의 기능이 무엇인지 구분을 합니다.


<span style="font-zise:32px ; margin: 21px 0; >it is a top level heading </sapn>

Emphasis and importance

강조 Example : em은 element는 mark up. broswer style은 as italic by default.

I am glad you wern't late.

Stong Example: strong은 markup. the document more usefulm again these are recognized by screen and spoken in a different tone of voic

this liquid is toxic .

Hyper Link 

A basic link is created by wrapping the text(or other content, see block level links) you want to turn into a linke inside an <a> element

 

링크 만들기 예제

 

the Mozilla homepage.

 

URL과 path에 대한 기본 지침

link target에 대한 완전한 이해하기 위해, URL과 파일 path에 대하여 이해를 할 피룡가 있습니다.

URL : uniform resource locator 단순히 무언가가 웹상의 어디에 위치하는지 결정하는 한의 텍스트 문자열 입니다.

  • .. 상위 디렉토리 이동
  • / 하위 디렉토리 이동
  • . 동일 디렉토리(같은 폴더)

만약 특정 ID에 연결하려면 URL 끝에 해시/파운드 기호를 포함하면 됩니다.

contactscs.html의 <h2 id-"maling">main address </h2>

 

<p> move our letter <a href="contatcs.html#mailing"> maling address </a> </p>

 

절대URL과 상대 URL

절대 URL은 root폴더의 특정 폴더(project)에 index.html이 있다면,

https://www.example.com/project/index.html

상대 URL은 Link 하고 있는 파일로부터 상대적인 위치를 가리킵니다. 

가능하면 상대 Link를 사용하기

다른 웹사이트를 연결시에는 절대 링크를 사용해야 하지만, 그 외 경우는 상대적 경로를 사용한다.

우선 코드를 스캔하는 것이 훨씬 쉽다

절대 URL은 브라우저는 DNS로 도메인 이름을 쿼리하여, 서버의 실제 위치를 조회하는 것을 시작하고, 그 서버로 가서 요청되고 있는 파일을 찾는다. 반면에 ㅅ아대적인 URL을 사용하면, 브라우저는 요청되고 있는 파일을 같은 서버에 찾아 볼뿐이다.

 

비 HTML 리소스 연결시 

Description lists : <dl>,<dt>,<dd> 

테스트 문장1
테스트 문장 입니다. 들여쓰기를 합니다.
테스트 문장2
테스트 문장 입니다. 들여쓰기를 합니다

 

728x90
저작자표시 비영리 변경금지

'개발노트 > HTML' 카테고리의 다른 글

HTML 기본정리3  (0) 2020.09.02
HTML 기본 정리2  (0) 2020.08.31
HTML& CSS 기초1  (0) 2020.08.31
HTML의 <div> ,<span>  (0) 2020.08.24
스마트폰 페이지 전환 효과 익히기  (0) 2018.06.12
'개발노트/HTML' Related Articles more