2일차 과제(220330)

1. 오늘까지 공부한 HTML 태그들 처음부터 쭉 살펴보기

2. 예제 페이지들의 마크업 구조 그려보기(다음 시간까지)

text-level semantics

조그마한 단어들을 이용할때 쓰는 태그들이다.
contents의 영역만큼만 차지하고 있음
but, section과 grouping요소들은 옆 끝까지 다 차지한다.

<br> <wbr>

줄바꿈을 위한 태그

<p style="word-break:keep-all"></p>을 입력하면 한국어도 단어 덩어리로 내려간다.

ex)

<p>
    <!-- 공백병합 -->
    Lorem 
            
            
            
    ipsum <br> 
    <br> 
    <br> 
    dolor sit amet
</p>
<p>풀밭에 같지 전인 노년에게서 청춘의청춘의청춘의<wbr> 방지. 전인 열락의 풀이 것이다.</p>

<a href="경로">

앵커는 HTML의 핵심적인 요소, 링크를 만들때 사용
자바스크립트로 경로를 지정할 수도 있지만 웹 접근성에 위배됨으로 href 속성을 사용해야한다.
target="_blank" : 새로운 창에서 이동

ex)

<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>  
<a href="./index.html">click</a>
<a href="#three">click</a> <!-- 해쉬 링크 -->
<a href="./index.html" download>click</a>
<a href="./hello.hwp">hwp click</a>
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<a href="./hello.pdf">pdf click</a>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>

<b> <strong>

굵은 글꼴을 나타낼때 사용
css등장으로 잘 사용되지는 않지만 전에 사용 많이 함!
중첩해도 더 굵어지지 않는다.

ex)

<p>
    <strong>hello</strong> 
    adipisicing <b>elit</b>. 
</p>

<i> <em>

<i> : 글꼴을 기울인다 주언어와 다른 언어로 표현된 부분에 사용
<em> : 같은 기울임 글꼴 + 강조

ex)

<p>시장안은 사람들의 활기로 가득차 있었다.</p>
<p>
   상인 : 이 상품은 현재 <em>30%</em> 할인중입니다!
   나 : 아하 그렇군요! <i> '흠.. 왜 하필 지금 할인하는걸까?!' </i> 좀 더 구경하고 올게요!
</p>
<p>나는 상인의 의도를 의심할 수 밖에 없었다.</p>

<dfn>

정의를 나타내는 용어
<p> 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명한다.
문서에서 처음 나타났을때 사용!

ex)

	<dt>WWW</dt>
	<dd>
	    <dfn>WWW</dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

<abbr>

준말, 약자를 나타내고 싶을 때 사용한다.
보통은 홀로 쓰이고 dfn 태그로 으로 감싸주기도함!

ex)

<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn><abbr title="World Wide Web">WWW</abbr></dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

<sup> <sub>

<sup> : 윗첨자, <sup> : 아랫첨자
화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용한다.

ex)

<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>

<span>

별 다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용한다.
<span> : 글자들을 묶을때 사용
<div> : 요소들을 묶을때 사용
div와 마찬가지로 최후의 수단...

ex)

...중략...
<style>
#명언 {
   color:red;
}
</style>
...중략...
<p><span id="명언">제발 그만해.. 이러다 다~~ 죽어!</span>라고 오일남이 소리쳤습니다.<p>

Embedded content

<img>

<IMG> : 이미지를 삽일할때 사용 
(따로 닫는태그가 없어서 자식요소로 뭘 넣을 수가 없다 !)

• src (source) : <img>는 src 필수

<img src = " /imges/"> (절대경로)
<img src = " ./imges/"> (상대경로) : 현재거기
<img src = " ../imges/"> (상대경로) : 하나 밖

• alt (alternative text) : 대체 텍스트이다.

  	<img src="img/a.jpg" alt="이미지 없음">
  	<img src="img/a.jpg" alt="">
  	<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구"> 
  	(화면에 보이진 않지만 스크린리더기에서 읽혀진다, 마우스 포인터를 올려도 나오지 않는다.)
  	alt="" 빈값으로 넣어 쓸데없이 설명하는 것을 방지! 

<picture>

<source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여준다. 
<img>의 srcset 이 화면에 따른 이미지의 크기를 조절한다면 <picture> 요소는 이미지 포맷 자체를 변경 할 수 있다.

ex)

<picture>
   <source srcset="babies_large.jpeg" media="(min-width:960px)">
   <source srcset="babies.jpeg" media="(min-width:620px)">
   <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

• media : 각기 다른 display or device에 따라 조건에 맞는 이미지를 보여준다.

  	img의 srcset이 화면에 따른 이미지를 조절한다면 picture 요소는 이미지 포맷자체를 변경 할 수 있다.

• type : img의 포맷타입을 브라우저에게 알려줌.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>

• 면접 예상 질문!!
  

  ---

  오늘은 한재현 강사님이 진행해주셨다. 이호준대표님과 함께 근무하셔서 그런지 재치있게 수업해주셔서 시간 가는줄 모르고 학습했다. 조급해지말고 공부 하고, 또 하고, 또 하면 된다고 말씀해주셨다. 학교의 졸업 여부는 그만두게 된 이유가 가장 중요하다. 각종 동물책들은 아직 초심자들에겐 가성비가 좋지 않다 말씀해주셨다. 4개월이란 시간동안 쉽지않고, 진도를 놓칠 것인데 당연한 것이다. 자책하며 자존감을 갉아먹지 않도록 하자 !!!
  -div 밭은 포트폴리오 광탈!
  쿠팡을 지원한다 예를 들면, 웹으로 다들어가보고 '어라 ? 파이어폭스에서는 좀 깨지는데 이거 이래이래하면 되지않을까요 ?' 하면 합격! 크로스 브라우징 확인하기 !!
  내일도 화이팅 !!!!!!