HTML

7. empty-element

<!-- p>lorem -->
 <p>Lorem ipsum dolor

    <!-- empty element -->
    <!-- 콘텐트와 종결태그 없음 -->
    <br>
    sit amet consectetur adipisicing elit. Quo nemo numquam deserunt omnis libero, natus nihil in saepe ipsa earum accusamus officiis ea ut sint possimus sapiente, atque et pariatur.</p>

    <!-- 시작태그에 /를 작성해도됨 -->
    <br />도 가능함
</p>    
<p /> == <p></p>

8. HTML Attributes(속성/특성)

태그 안에 어떠한 코드가 추가되어있음. name=?이런것 들.
1.모든 element는 attribute을 가질 수 있다.
2.Attributes는 element의 부가적인 정보이다.
3.항상 시작태그에 들어간다.(빈것에도 가능함.)
4.이름="값" name="value"의 형태로 되어있다.
하면 기본 코드들 작성됨
<a href="">link1</a>
The <a> tag defines a hyperlink, which is used to link from one page to another.
'링크'를 만드는 코드이다. 다른 url로 연결해줌.
<a href="https://www.daum.net">다음으로 이동</a> 속성값을 넣어줘야한다.

element처럼 모든 Attributes를 알려줄순없고 사전을 알아야한다.
https://www.w3schools.com/tags/ref_attributes.asp Attributes reference에서 찾아보자.

html을 공부한다는 것은 어떤 element와 어떤 attribute이 있는지를 공부하는것이다.

8.1 Attribute 문제

1.title Attribute - Specifies extra information about an element
이미지 설명 링크 설명 등등 그런 느낌으로 이름을 달아주는 것 마우스올리면 title이 보이게됨.

2.witdh, height 넓이 높이

3.a href="" 링크

4.alt <img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.
해당 이미지를 위한 대체 텍스트를 명시함.
-만약 이미지가 정보를 포함하고 있다면, 텍스트는 이미지를 묘사해야 함.
-만약 이미지가 <a> 요소 내에 위치하고 있다면, 텍스트는 링크가 어디와 연결되어 있는지를 설명해야 함.
-만약 이미지가 단순한 장식이라면 alt=""와 같이 사용해야 함.

이제 코드를 볼때 어떤 element다. 어떤 Attribute가 있다를 알자.

9. title-attribute

툴팁이 뜨게 되는 것임.

<h1 title="부가정보1">Lorem, ipsum dolor.</h1>
<h1 title="마우스를올리면 보여요">Doloribus, adipisci autem!</h1>
<h1 title="html 재미있다.">Nemo, in cupiditate.</h1>

10. image-attribute

우리가 보는것은 전부다 txt이다.
이미지를보기 위해서는 이미지파일을 따로 두고 보여주는 것이다.
그림파일은 html과 별개로 따로 저장되어있음. https://www.w3schools.com/html/pic_trulli.jpg 사진링크로 들어가면 사진이 나오게됨.
웹페이지들에 사진파일이 있는 것임. 이것이 바로 그림파일을 따로 두는 것임.

10.1 img : 그림표시하는 요소

<img src="img/1.png" width="200" height="200" alt="img1" title="img1">
<br>
<img src="img/2.jpg" width="300" height="200" alt="img2">

같은 경로일때는 그냥 다른 파일일때는 경로작성
title달수도 있음.

10.2 alt attribute

<img src="3.jpg" width="300" height="200" alt="img3">

이미지를 표현할 수없을때 나타내는 표시임.
또한 screen reader로 출력되는 내용이기도 하다.
시각장애처럼 그위치에 어떤 그림이 있는지 볼 수 없는 사람에게 설명해줄때 사용한다.

11. HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
element에 색, 폰트, 크기 등등의 모양을 변경하는 역할을 한다.

style="color: blue;"
<h1>Lorem, ipsum dolor.</h1>
<h1 style="color: blue;">Quam, sapiente itaque.</h1>
<h1 style="color: red;">Atque, recusandae necessitatibus!</h1>
<h1 style="color: beige;">Itaque, nulla ratione?</h1>
<h1 style="color: purple">Voluptatibus, similique omnis.</h1>

style 속성 : 요소에 style(크기, 색, 모양, 위치 등등)
style 속성의 값 형식 : property-name: vaule; -> property(속성, 특성) : style 속성의 값(들)
style="color:blue; text-aling:center;" attribute안에 2개의 property가 있는 것임.
각각 property 세미콜론(;)으로 구분 property안에서 그 값을 표시하는것은 콜론(:)
h1[style]*3>lorem3 []안에 넣으면 attribute 한번에 여러번 입력가능

<h1 style="color: blue; background-color: yellow;">Lorem, ipsum dolor.</h1>
<h1 style="color: red; background-color: green;">Eligendi, cupiditate placeat!</h1>
<h1 style="color: purple; background-color: cyan;">Pariatur, blanditiis impedit?</h1>

여기들어가는것들이 property인데 풀네임이 무엇인가? css-property이다.
이재 css로 넘어가도록 하자.

12. HTML외전 zen coding

html>head+body>h1[style]*5>lorem3 이렇게 작성하는것을 zen coding 이라고 한다.
https://opentutorials.org/course/128/1395
에밋 플러그인 https://emmet.io/을 다운받아 사용하는 것이다.
Documentation을 보면 어떻게 사용하는지 보여짐. https://docs.emmet.io/cheat-sheet/ 요약본