whatisthis?

HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation ) 본문

WEB STUDY/HTML,CSS

HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation )

thisisyjin 2021. 10. 4. 15:08

1. 태그 해부학

마크업을 하고자하는 내용과 <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 ISO Language Code Reference

HTML Language Code Reference ISO Language Codes You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers: ... In XHTML, the language i

www.w3schools.com

 

◆ 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>

<a href="mailto:   "> 사용시

 

전화걸기 (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>

 

target  속성의 value들

 

** 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을 상-하위 리스트로 나누어서 사용할 수도 있다.

 

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을 연속해서 적고, 그에 대한 설명을 적으면 ?

thisisyjin과 injung을 일종의 그룹핑하듯이 둘은 비슷한 의미임을 나타냄.

 

예제>

<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
'WEB STUDY/HTML,CSS' Related Articles more