TIL

0l0l·2021년 4월 23일

TIL

목록 보기

18/86

【HTML practice note_01】

☪ button 태그가 아닌 a 태그를 사용한 이유?
🅰 마크업에서 제일 중요한 건 "어떻게 생겼느냐"가 아니라 "어떤 역할을 하느냐" 이다. 버튼처럼 생겼더라도 '다른 페이지로 이동시키는 일'을 한다면 button이기 이전에 anchor로 마크업 해야 더 "의미상 맞다(=semantic하다)"라고 할 수 있기 때문이다.

Browser는 button은 단순히 '버튼'으로만 알겠지만, anchor는 '다른 페이지로 이동할 때 사용되는 요소군'이란 걸 캐치한다.

Google Search Result Item

제목을 나타내는 h1 태그가 페이지를 이동하는 링크 역할을 가진 경우 h1 태그 안에 anchor 태그를 포함하여 작성할 수 있다!

꺽쇠 기호가 태그의 용도가 아닌 텍스트로 쓰일 때 브라우저가 헷갈리지 않도록 꺽쇠 기호 대신에 escape code(entities)로 작성한다.

Escape 코드를 사용하는 것은 semantic하기 위함이라기보다, 브라우저를 위한 배려라고 생각하자.
사실 그냥 $, <, > 등을 사용해도 일반적인 경우에는 문제가 되지 않는다. 하지만 구형 브라우저인 경우에 가끔은 html을 렌더하다 위의 기호들 때문에 잘못 렌더하는 사고를 미연에 방지 하고자 하는 이유이다.

● <의 escape code인 '(엔드기호)lt;'는 less than(부등호 왼쪽 기준으로 작다)을 의미
● >의 escape code인 '(엔드기호)gt;'는 greater than(부등호 왼쪽 기준으로 크다)을 의미

html entities list 참고 사이트
다양한 html entities 참고 사이트

1) 기능적으로 어떤 역할을 하는가
2) 정보 컨텐츠로 어떤 의미를 갖고있는가

Feature Box

img 태그의 attribute 중 alt 속성값으로 들어갈 내용이 딱히 없는 경우, 이미지 정보가 큰 의미를 갖지 않는 경우라도 값을 비워두고 속성을 반드시 명시해야 한다.😲
즉, img 태그에 src, alt attribute는 반드시 작성해야 한다!✨

<img src="https://~~" alt="" />

만약 제공하려는 정보에 해당 이미지가 정보로써 큰 가치가 없고 중요하지 않다면, img 태그를 사용하지 않고 div 태그에 class를 추가하고 css를 이용❗해 'background-image'로 꾸며준다.
(img 태그를 사용하지 않음으로써 브라우저가 렌더링하는 것을 줄이기 위함)

// html
<div class="feature-box no-image">
  <!-- <img src="" alt"" /> -->
</div>

// css
/* For feature box without image */
.feature-box.no-image {
  background-image: url("https://~~.com");
}

HTML에 img 태그를 사용: 해당 이미지는 정보 콘텐츠로서 가치가 있다!
CSS로 background-image를 사용: 그냥 꾸미기 용이다!

➕추가로 CSS Selector(선택자)
HTML에서 한 태그에 2개의 class를 지정했을 때, CSS에 선택자 작성 방법 차이
class명 사이에 띄어쓰기 부분은 유효한 코드적 의미를 지닌다.

<div class="feature-box no-image">
<!-- class로 feature-box와 no-image를 주기 위해선 둘 사이에 공백이 필요함 -->
</div>

.feature-box.no-image  {
  /*feature-box클래스와 no-image클래스 모두 가지고 있는 요소*/
}
.feature-box .no-image  {
  /*feature-box클래스의 자식중에 no-image 클래스를 가진 모든 요소*/
}

Logo in Header

☪ 현 웹사이트를 대표하는 로고가 제목 역할을 하지만 이미지 파일의 형식으로 이루어져있는데 img 태그를 굳이 h1 태그로 묶어주는 이유는?
🅰 일단 페이지 자체의 전체 제목의 역할이자 navigation에서 제목 역할을 하기 때문에 h1 태그를 사용한다.
∴ 내 생각에는 h1을 사용할만한 semantic한 이유 가 있기 때문이다. h1 없이 img만 있다면 제목의 역할을 한다고 생각하지 못할 것이다.

그런데 제목이 텍스트가 아니라 이미지로 되어 있는 경우 '정보 컨텐츠로써 의미 여부를 따졌을 때 가치가 있다'고 판단하기 때문에 img 태그를 사용하는 것이다.(즉, css로 처리하지 않는다는 이야기)

<h1>
  <!-- Text --> // Text를 생략하고
  // h1 태그를 보고 (이미지로 된)제목은 alt의 속성값(Home)을 의미함을 파악할 수 있다
  <img src="./images/home.png" alt="Home" />
</h1>

👨‍🏫Ah ha~ 새로 알게된 점!😆
별도의 텍스트와 (텍스트 내용과 동일한 이미지가 담긴) img 태그에 alt를 적어야 하는 경우, 텍스트를 생략하고 img 태그의 alt 속성만을❗ 작성하면 된다!
(텍스트가 있다면 이미지에 가려지도록 추가로 css 처리가 필요해 번거롭다.)
굳이 텍스트를 사용하지 않고 alt를 작성해줌으로써 이미지가 보이지 않거나 스크린 리더를 사용하는 경우 정보를 제공할 수 있다.

Breadcrumb : 병렬적으로 키워드를 나열하여 표시하는 링크형식(사이트 이동 경로)

icon은 링크의 역할도 하지 않고 정보 값으로 아무 의미가 없기 때문에 markup하지 않아도 된다.
icon과 구분자로 쓰이는 '/'는 스타일적인 요소이기 때문에 html에 작성하지 않고 css로 처리가 가능하다.
✨의미, 구조에 맞게 어떻게 markup 할 수 있는지를 생각하라!✨

Pagination : 페이지를 이동하기 위해 숫자를 나열하여 표시하는 링크형식

링크 형식이라도 병렬적으로 나열된 순서가 중요한 리스트는 ol, li 태그를 사용해 만든다.
실수 Nope❗ a 태그로 리스트를 묶으면 순서 번호가 링크가 되기 때문에 리스트 안으로 들어가야 한다!

링크 역할을 하지 않는다면 a 태그보다 button 태그를 사용해 만들자.
button 태그에서 disabled attribute를 사용해 비활성 상태를 나타낼 수 있다. (a 태그에서는 사용 불가/input, button, textarea 등과 같은 form 요소들에만 사용 가능)

➕추가로 CSS Selector(선택자)

/* .pagination 안의 자식요소들 중에 disabled 속성을 가진 모든 자식요소들 */
.pagination *[disabled] {}
/* .pagination 안의 자식요소들 중 .disabled를 가진 모든 자식요소들 */
.pagination .disabled {}

👨‍🏫Ah ha~ 새로 알게된 점!😆
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications) : 웹 페이지, 특히 동적 콘텐츠, Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대한 기술 사양.
인터넷을 사용하는 사람들이 쉽게 접근할 수 있도록 웹 접근성을 높혀주는 API.

aria-label 속성은 스크린 리더 사용자에게 속성값을 읽어줌으로써 명확하게 정보를 전달할 수 있다! 매우 유용x3😍
우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 속성이다.
class, id처럼 어느 태그에서나 쓸 수 있는 'Global attributes'이다.

// Screen reader는 'Previous'라고만 읽게 되어 정확히 무엇을 의미하는지 알기 어렵다.
<a href="#">
  Previous
</a>

// Screen reader는 "Go to the previous page."를 읽게 되어 정확한 의미 파악이 가능하다.
<a href="#" aria-label="Go to the previous page.">
  Previous
</a>