2日目チャレンジ(220330)

1.今日勉強したHTMLタグを最初から見る

2.次のレッスンまで、サンプルページの寸法構造を描画します。

text-level semantics

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

줄바꿈을 위한 태그

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Embedded content

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

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

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

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

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

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

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

面接予想質問!!

今日は韓在顕講師が司会しました.李浩俊代表と一緒に仕事をしたせいか、才能のある授業を受けて、時間がどうやって過ぎたのか分からず、勉強しました.
勉強を急ぐな
やれ、やれ、またやればいい.
学校を卒业するかどうかは、辞める理由が一番大切です.
いろいろな動物の本は初心者たちに性価が高くないと言っている.4ヶ月の時間は容易ではなく、進度を逃してしまうのは当然です.自責しないで、プライドを黒くしなさい!!
-div田はポートフォリオだ!
例えば、私はクーボンを支持して、すべての人がネットに入った.
「うん?「Firefoxではちょっと割れてるけど、これでいいんじゃない?」合格しました!クロスブラウズをチェック!
明日もがんばれ!!!