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 밭은 포트폴리오 광탈!
쿠팡을 지원한다 예를 들면, 웹으로 다들어가보고 '어라 ? 파이어폭스에서는 좀 깨지는데 이거 이래이래하면 되지않을까요 ?' 하면 합격! 크로스 브라우징 확인하기 !!
내일도 화이팅 !!!!!!
뜨내기 FE 개발자