[HTML] Text-level semantics

🚀 Text-level semantics

 

🪢 <br> : 줄바꿈

 

🪢 <wbr> : 텍스트박스가 한 줄로 모두 표시가 안될 경우 줄바꿈

 

🪢 <a href = "경로">  : 링크를 만들때 사용

*button과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않음

 

🪢 <dfn> :  현재 문맥에서 정의하고 있는 용어를 나타냄

 

ex)

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

 

WWW

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

 

🪢 <abbr> :  준말,약자를 나타낼때 사용

 

-보통은 홀로 쓰이고 dfn 태그로 감싸주기도 한다.

 <dfn><abbr title="World Wide Web">WWW</abbr></dfn>

 

WWW

 

🪢 <sup><sub> : 윗첨자,아랫첨자

 

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

 

H₂0

x²=4

 

🪢 <span> : 묶는 용도 (의미 x)

   

*div와 마찬가지고 최후수단으로 사용

 

 

🚀 Embedded content

 

🪢 <img>  : 이미지를 삽입할때 사용

 

src(source) : 필수속성

 

alt (alternative text) : 이미지가 보이지 않을때 대신 보여주는 텍스트 

(장애인 분들 같은경우 사진을 이를 통해 알 수 있다!  )  ➔ 웹 접근성 고려

<img src="img/a.jpg" alt="스크린 리더가 읽어야 하는 문구">

 

 

✔️srcset  : 반응형 이미지를 위한 속성

여러해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 준다.

(브라우저에게 이미지의 선택권을 위임하는 속성 / but 아직 많이 사용하진 않음.)

 

✔️x ,w sizes : 화면의 밀도 / 원본이미지 넓이 / ui안에서 차지하게 될 사이즈 (px단위)

     * sizes 속성과 css스타일이 충돌할 경우 css가 우선한다.

     *  x서술자와 w서술자는 같이 사용할 수 없다.

 

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.png"
alt="test">

 

 

---

 

🪢 <picture>: 각기 다른 디스플레이,디바이스에따라 조건에 맞는 이미지를 보여줌

 

<img> 와 <source>를 통해 사용

 

✔️media속성 : picture요소가 media값을 통해 조건에 알맞는 값을 찾게 된다.

 

* picture와 source 요소 자체로는 이미지를 표현하지 않는다.

 

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

 

---

Q. scrset과 picture의 차이점?

* srcset이 화면에 따른 이미지크기 조절이라면 picture은 이미지 포맷자체를 변경 할 수 있다.

 

 

🌈그밖에

• 태그는 서비스 사용 대상에 따라 고려하며 사용해야한다. (무조건 최신기술이 좋은것은 아니다.)
• 웹페이지는 다양한 브라우저 환경에서 테스트를 해보아야한다.
• 크로싱 브라우저 체크하기 - 점진적 향상기법을 사용하자!
• html vaildator : 코드 유효성 검사하는 사이트

 

웹구조 짤때 참고 하면 좋은 이미지 / 출처: 프론트엔드스쿨

🔥 회고

 

프론트엔드 개발자의 역량 (디자이너와 백엔드개발자 그 사이에서 의사소통해야하는 . . .)에 대해 

생각해보게 되었다.

 

코딩하면서 간과하고 있었던  HTML표준을 지키며 코딩하기 , 그리고 웹접근성과 시맨틱 태그의 중요성을 알게되었다 .

(사실 이전까지 퍼블리싱할땐 생각없이 div남발 등.. 구조를 체계적으로 짜지 못했다.)

정말 간단한 실습하나에서도 사람들마다 다양한 태그들을 사용하는것을 보고 놀랐다.

어떤 코드 하나를 짜더라도 '왜 그것을 사용해야할까' 라는 생각을 하며 코딩을 해야겠다.