Inline element 시멘틱 태그
Text-level semantics
inline element
<br>, <wbr>
- 줄바꿈을 위한 태그
<br>
을 사용하면 바로 줄바꿈이 일어난다<wbr>
은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것
<a href="경로">
- html의 핵심적인 요소이며 링크를 만들 때 사용한다
- href를 사용하여 경로를 지정해준다 자바스크립트로도 할 수 있지만 이는웹접근성에 위배된다
<a>
태그안에 또다른<a>
,<button>
같은 인터렉션이 가능한 요소를 자식으로 두지 않는다- 해쉬링크 :
페이지의 안에서의 이동을 할 때 사용한다
아이디로 연결해놓으면 click1링크를 클릭시 해당 부분으로 이동된다.
<a href="#one">click1</a>
<section id="one"></section>
- 다운로드 : 해당하는 링크를 다운할수 있게 해준다
인터넷익스플로러는 지원불가
<a href="./index.html" download>click</a>
- 파일이름 지정
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
- 파일형식 지정, 확장자는 되도록 맞춰주어야 한다.
<a href="./hello.pdf" download="a.pdf">pdf download click</a>
<b>, <strong>
<b>
태그는 굵은 글꼴을 표현하고 싶을 때 사용한다
별 다른 의미는 없으며 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용하지 않는 요소<strong>
태그는 굵은 글꼴과 더불어 강조의 의미를 갖고있다
<i>, <em>
<i>
태그는 기울임 글꼴을 나타낸다. 문단에서 주 언어와 다른 언어로 표현된 부분에 사용<em>
태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있다. 다만<strong>
보다는 강조의 효과는 약하다. 내용상 강조할 부분이 있다면 사용 가능.
<img>
<img>
태그는 html페이지에 이미지를 삽입할때 사용하는 태그
src(source)
<img>
태그는src
라는 필수 속성이 들어간다src
는 브라우저에게 이미지 파일의 위치와 파일명을 알려준다 큰따옴표 안에 들어가는 경로는절대경로
이거나상대경로
이어야 한다.- 절대경로는
/(루트)
로 시작 - 상대경로는
./
로 시작한다. ..
점을 두개 붙이면 상위 폴더를 탐색한다
alt(alternative text)
alt
속성은 이미지가 보여지지 않을 때alt
속성에 적힌 텍스트를 이미지 대신 보여준다- 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도.
- SEO(Search Engine Optimization)에 도움을 준다
alt
값을 적지않는다면 스크린 리더는 이미지파일명을 읽게된다.(불필요한 상황 발생)
""
이런식으로 텍스트를 비워두면 읽지않는다.
srcset
- 반응형을 위해 사용한다
- 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 준다
- 다양한 크기를 가지는 동일 이미지를 최소 2개 이상일 때 사용하며, 브라우저에게 이미지의 선택권을 위힘하는 것
x서술자, w서술자, sizes속성
- x서술자와w서술자는 같이 사용하지 않는다
둘다사용하고 싶다면 자바스크립트로 쿼리를 날려서 사용할 수 있다 x서술자
는 화소의 밀도(pixel density)를 나타낸다 디바이스의 화소 밀도에따라 다른 이미지를 로딩하도록 브라우저에게 알려준다
<img
width="200px"
srcset="img/logo_1.png 2x, img/logo_2.png 3x"
src="a.png"
alt="test"
/>
Pixel density : 동일한 면적에 들어가는 화소의 수를 의미합니다. 화소의 갯수가 많을수록 더 높은 해상도의 기기임을 알 수 있습니다.
여러분이 보고있는 화면의 화소 밀도를 알고 싶으시다면 브라우저 api를 이용해서 보실 수 있습니다. 개발자 화면의 콘솔창에서 window.devicePixelRatio 명령어를 입력해보세요.
w서술자
는 원본 이미지의 넓이가 차례로 300px, 600px 700px 임을 브라우저에게 알려준다- px이 아닌 w로 표기
- 대체로 크기가 큰 것부터 작성한다
<img
width="200px"
srcset="img/logo_3.png 700w, img/logo_2.png 600w, img/logo_1.png 300w"
src="a.png"
alt="test"
/>
w서술자와 x서술자는 동시에 사용할 수 없다. 또한
src
속성을 유지하는 것은 필수다.srcset
을 사용할 수 없는 브라우저를 대비해 사용하는 이미지 !
sizes
속성은 뷰포트의 조건에 따라 이미기가 UI안에서 차지하게 될 사이즈를 브라우저에게 알려준다
<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"
/>
브라우저는 우리가 제공한 이미지의 원본 사이즈와 뷰포트에 따른 이미지의 사이즈 정보를 통합해 가장 적절한 이미지를 로딩하게됩니다.
웹표준을 준수하기 위해 srcset
속성을 사용하면 그에맞는 sizes
속성도 반드시 명시해주어야 한다
💡
sizes
속성을 사용할 때 주의할 점은 CSS를 통해 이미지를 컨트롤 할 때 충돌의 가능성이 있다. (CSS 스타일이sizes
속성에 우선) 협업할 때 반드시 사전에 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유하도록 하자 !
<picture>
<picture>
요소는<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>
media 속성
위의 코드에서<source>
요소 안의 media
속성이 있다 <picture>
요소는 media
속성의 값을 통해 조건에 알맞는 이미지를 찾는다. 조건에 맞는 <source>
요소안의 srcset
속성 값을 찾아 <img>
태그의 src
에 넣어 화면에 보여주게 된다. 이러한 구조로 작동하기 때문에 <img>
요소가 없다면 이미지가 화면에 나타자니 않는다는 점! 주의!!
type 속성
이미지의 포맷 타입을 브라우저에게 알려준다
<picture>
<source srcset="babies.webp" type="image/webp" />
<source srcset="babies.avif" type="image/avif" />
<img src="babies.jpeg" alt="귀여운 아기 팽귄들" />
</picture>
html은 위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포매시라면 다음 <source>
요소로 넘어간다
만약 모든 <source>
요소의 이미지 사용이 불가능하다고 판단되면 최후에 적은 <img>
요소의 이미지를 렌더링한다
최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture>
요소와 함께 사용하는 것이 좋다
점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법입니다.
이미지 포맷의 종류
GIF(Graphics Interchange Format) :
256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. >투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현>도 불가능합니다. 애니메이션 처리가 가능합니다.JPG/JPEG (Joint Photographic Expert Group image):
매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다.PNG (Portable Network Graphics) :
왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다.SVG (Scalable Vector Graphics) :
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능합니다. (벡터이미지. 이미지가 코드로 작성. xml언어로 구현되어있다
단점: 이미지의 모양의 복잡도(컬러풀하고 고해상도의이미지)가 올라가면 용량이 기하급수적으로 올라간다. 단순한 이미지만 사용하는것을 권장. 복잡한 이미지도 가능하지만 용량이 커지기때문. 이모지나 로고 등에 자주 사용된다.WebP (Web Picture Format) :
압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷입니다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷입니다.AVIF (AV1 Image File Format) : WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷입니다. 아직 지원하지 않는 브라우저가 많음에 주의해야합니다.
Author And Source
이 문제에 관하여(Inline element 시멘틱 태그), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeeed711/Inline-element-시멘틱태그저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)