whatisthis?
HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation ) 본문
HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation )
thisisyjin 2021. 10. 4. 15:081. 태그 해부학
마크업을 하고자하는 내용과 <p> </p>와 같이
열림태그, 닫힘태그로 이루어져있다.
<p attr="value"></p>
태그 속성 속성값
<p lang="en"> thisisyjin </p>
lang이라는 속성은 언어를 나타내며, lang 속성에 대한 value가 궁금하다면
구글링 > html lang values
https://www.w3schools.com/tags/ref_language_codes.asp
◆ html [태그명] attributes
◆ html [속성명] values
2. 제목과 문단 (heading and paragraph)
제목에 해당하는 내용은 heading 태그를 써서 마크업한다.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
단락, 즉 본문에 해당하는 내용은 paragraph 태그, 즉 <p>태그로 감싸준다.
큰 제목과 소제목을 구분하는 것 또한
h1~h6 태그를 통해서 할 수 있다.
<h1> My favorite Language </h1>
<h2> javascript </h2>
<p> 자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다.</p>
<h2> python </h2>
<p>파이썬)Python)은 1991년 프로그래머인 귀도 반 로섬이 발표한 고급 프로그래밍 언어로, 플랫폼에 독립적이며 인터프리터식, 객체지향적, 동적 타이핑(dynamically typed) 대화형 언어입니다.</p>
3. 강조 Emphasis
emphasis = 강조하다
● <em> 내용 </em>
● <strong> 내용 </strong>
em과 strong의 차이점.
둘다 상관 없으니 아무거나 사용해도 괜찮음.
<p>파이썬)Python)은 1991년 프로그래머인 귀도 반 로섬이 발표한 고급 프로그래밍 언어로, <br>
플랫폼에 독립적이며 인터프리터식, 객체지향적, <strong>동적 타이핑(dynamically typed) 대화형 언어<strong>입니다.</p>
Point **
여기서 중요한것은, 글자 폰트가 두꺼워졌다는 것이 아니라, <Strong>태그를 통해서 우리가
웹브라우저에게 이 내용이 중요하다는 것을 알려줬다는 것이다.
글자 모양을 바꾸는 것은 언제든지 CSS로 처리할 수 있다!
즉, 우리가 strong 태그를 통해서 중요시 한 것은 '디자인'적인 것이 아닌, '내용의 강조'면이다.
= emphasis, 즉 강조.
+) <em>태그를 썼다면, 볼드체가 아니고 기울임 체가 된다. 이 또한 글자의 모양이 중요한 것이 아니라,
내용을 강조했다는 것이 의미있는 것임!
3. 링크 Anchor
= <a>태그는 anchor 이라는 의미.
** syntax (문법) 주의
다른 태그와 달리, href 라는 속성을 기본값으로 주어야 한다.
<a href> 내용 </a>
** href = hypertext reference (레퍼런스 = 주소값)
웹 URL
<a href="https://mywebproject.tistory.com">WEB LOG</a>
페이지 내 이동
이동할 부분의 id값을 적어주면 된다.
<a href="#history">History로 이동</a>
<section id="history">
<h1>History</h1>
<p>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.
</p>
<a href="#id값">내용</a>
메일주소
<a href="mailto:메일주소">
<a href="mailto:hnesb970@gmail.com"> thisisyjin에게 메일보내기 </a>
전화걸기 (mobile)
<a href="tel:전화번호">
<a href="tel:01012345678"> thisisyjin에게 전화걸기 </a>
- 모바일에서 확인시 바로 전화가 걸리도록 되어있음.
+) <a>태그의 target 속성
<a href=" " target="_blank"> 내용 </a>
<a href="https://mywebproject.tistory.com/"> 현재 창으로 열기 </a>
<a href="https://mywebproject.tistory.com/" target="_blank"> 새창으로 열기 </a>
** Value Description
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
_self, 즉 현재 창에서 여는 것이 기본값(default)이다.
예제.
<h1>target _blank</h1>
<p>
The target attribute specifies where the linked document will open when the link is clicked.
The default is the current window. If target="_blank", the linked document will open in a new tab or
(on older browsers) a new window.
</p>
<a href="https://html.com/attributes/a-target/#ixzz78IVjzlkx" target="_blank">Read More</a>
4. 이미지 Image
<img>태그는 src / alt 속성이 반드시 필요함.
src = source
alt = alternative text (대체 텍스트)
src는 이미지의 링크 (URL 또는 파일경로) / alt는 이미지가 뜨지 않을때 대체 텍스트(설명)
<h1>Image</h1>
<img src="image1.png" alt="web desinger"> // 방법 1
<img src="data:image/png;base64,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"
alt="web designer"></img> // 방법 2
- src="파일경로/파일명"
또는
- src="이미지 주소"
img 태그의 src 속성에는 다음과 같은 유형의 url들을 지정할 수 있다.
1. 상대경로
/ : ~에 있는 . : 이미지를 표시할 HTML 문서의 위치 .. : 상위 폴더 예> src="images/study.png" (./ 기호는 생략 가능) src="./images/study.png" |
2. 절대경로
"C:\Users\USER\Desktop\thisisyjin"
3. 웹서버 주소
구글링할때 사진 우클릭 - 이미지 주소 복사
인터넷(웹서버)에서 보았던 이미지가 HTML 문서를 통해서 표시됨.
** 주의 > 저작권 조심하자!
<예제>
6. 리스트 (List)
ul, ol 두 종류에 대해 먼저 알아보자.
- ol = ordered list
- ul = unordered list
ul과 ol의 자식 요소로는 <li>만 가능하다.
li = list item
li 안에 <a>를 넣든 뭘 넣든 상관은 없지만,
자식요소로는 <li>만 올 수 있다.
참고 > javascript에서 자식 요소의 개수 구하기 element.childElementCount |
여기서, ul의 경우에는 앞에 구문 문자인 ●가 붙는데, 이는 css로 처리할 수 있다.
즉, html은 마크업 언어이므로, 중요한 것은 웹브라우저에게 마크업 정보를 전달하는 것이다.
ul은 순서가 중요하지 않은 리스트,
ol은 순서가 정해진 리스트 ( 숫자 붙음 )
전체적인 구조는 다음과 같다.
예제.
<ul>
<li>item</li>
<li>item</li>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<li>item</li>
<li>item</li>
</ul>
다음과 같이 ul을 상-하위 리스트로 나누어서 사용할 수도 있다.
** 만약, 리스트 아이템에 <a>태그를 연결하고 싶다면?
방법 1. <li>를 <a>태그로 감싸준다.
<a href="https://mywebproject.tistory.com/">
<li> WEB LOG </li>
</a>
방법 2. <li>줄에 <a>를 입력한다.
<li><a href="https://mywebproject.tistory.com/"> WEB LOG </a></li>
다음과 같이 두가지 방법 모두 list 아이템에 <a>태그가 성공적으로 입력된 것을 알 수 있다.
7. 정의 리스트 Description List (dl)
<dl>은 중요하지 않게 생각할 수 있는데, 굉장히 유용한 리스트임.
1. 용어를 정의할 때
Syntax
<dl>
<dt>학습(學習)</dt>
<dd>
1. 배워서 익힘.
</dd>
<dd>
2. 험의 결과로 나타나는, 비교적 지속적인 행동의 변화나
그 잠재력의 변화. 또는 지식을 습득하는 과정.
</dd>
</dl>
● dt = discription Term
● dd = discription Data
** dt 대신 dfn(definition)을 사용하기도 함.
- [정의]를 할거라는 늬앙스의 의미임.
- 하나의 term에 여러개의 data 가능.
- 여러개의 term을 연속해서 적고, 그에 대한 설명을 적으면 ?
예제>
<dl>
<dt>thisisyjin</dt>
<dd>
<a href="https://mywebproject.tistory.com/">1. web log</a>
</dd>
<dd>
<a href="https://blog.naver.com/hnesb970">2. v-log blog</a>
</dd>
</dl>
2. key - value 형태로 정보를 제공할 때
{ key : value }
- js에서 object에서도 위와 같이 사용한다.
ex> 이름 : thisisyjin 직업 : 웹개발자 나이 : 22 [ key ] [ value ] |
<div>를 사용한 그룹핑 예제>
<dl>
<div>
<dt>thisisyjin</dt>
<dd>my tistory</dd>
</div>
<div>
<dt>injung</dt>
<dd>my blog</dd>
</div>
</dl>
총 두개의 term에 대해 설명하고 있다.
(thisisyjin, injung)
보기좋게 하기 위해서 div태그로 감싸준 것.
좋지 않은 <dl>의 예시.
1.
<dl>
<dt>WEB</dt>
<dd>html</dd>
<dd>css</dd>
<dt>Programming</dt>
</dl>
dt를 두개 이상 사용시, 반드시 term에 해당하는 data가 꼭 있어야 하는데,
위 코드에서 Programming이라는 term에 대한 데이터가 없으므로 안좋은 코드이다.
2.
<dl>
<section>
<dt>WEB LOG</dt>
<dd>tistory url</dd>
</section>
<section>
<dt>v-log MEMO</dt>
<dd>blog url</dd>
</section>
</dl>
dl 태그의 자식 태그가 될 수 있는 태그는 오로지
<dt>, <dd>, <div>밖에 없다.
* section 등은 사용할 수 없다.
3.
dt, dd 모두 다 단독적으로 <dl>없이 사용할 수는 없다.
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
HTML - 종료태그 생략 가능한 요소 (0) | 2021.10.08 |
---|---|
HTML) HTML 기초 中 ( Quotation / Div, Span / Form / Table ) (1) | 2021.10.04 |
HTML) 환경 세팅 - VScode / goorm ide (0) | 2021.10.04 |
CSS Flex, Grid (+Float와의 차이) (0) | 2021.09.04 |
CSS float 속성 (0) | 2021.09.03 |