#016-017. 시멘틱 마크업에 대해 고민하기

1. 😎 오늘의 잘한점

1.1. 액션

로그인 페이지를 만들 때 조금이라도 시멘틱 마크업에 대해서 고민하면서 짰다!

1.2. 칭찬

시멘틱 마크업이 많이 헷갈리기도 하고, 무조건 지켜지기 어렵기는 하지만

이전에는 <div>로만 작성했다면 이제는 그 습관을 버리고 구조를 생각하게 됐다

아직 많이 부족하기는 하지만 사용자를 위한 웹을 만들겠다는 꿈에 한 발자국 다가간 것 같아서 좋았다.

앞으로도 더 고민하고, 점검하자 화이팅✊

---

2. ✔️ 오늘의 개선점

2.1. 문제

로그인화면에서 회원가입, 아이디/비밀번호 찾기로 넘어가는 부분을 마크업 할 때 <a> 안에 <button>을 써서 구현한 것

2.2. 원인

링크로 이동하면서 클릭이 된다고 생각하여 <a> 안에 <button> 을 자식 요소로 하여 마크업 했었다.

<a> 와 <button> 둘 다 클릭이 되는 요소이기 때문에 Markup Vaildation Error(마크업 유효성 오류)가 발생한다.

2.3. 액션 플랜

<a> 태그와 <button> 태그 각자의 의미에 대해서 생각하자!

다른 페이지 혹은 페이지 내의 특정 영역으로 이동할 때에는 <a> 태그를, 사용자가 동작을 실행하기 위한 트리거로 사용될 때는 <button> 태그를 사용하기!!

---

3. 💡 오늘의 배운점

나만의 클래스 네이밍 규칙을 만드는 것도 좋다.
방법론은 방법론일 뿐, 추후에는 각 회사마다 컨벤션이 존재하기 때문에 나의 코드를 짤 땐 나의 컨벤션으로!

3.1. 배움

[ DAY16 ]

커스텀 input, select

• <input>요소를 숨기고 label 요소를 연결하여 커스텀하게 되면 키보드 <tab>키로 포커스가 되지 않기 때문에 웹 접근성에 문제가 될 수 있다.
• 이를 해결하기 위해 focus 가상요소를 사용하면 된다고 생각할 수 있다.
  하지만 focus 가상 요소는 마우스로 클릭 되었을 경우와 tab으로 선택되었을 경우, 이 두 가지 경우에 스타일이 적용된다.
  따라서 동작이 겹치면서 깜빡이는 현상과 함께 동작이 제대로 이뤄지지 않는다.
  이 때 사용하는 것이 focus-visible이다.

focus-visible
포커싱 이벤트가 일어나면 무조건 작동하는 :focus와는 다르게 키보드 입력이 일어났을 경우만 가상 클래스를 적용하게 한다.

 

IR(Image Replacement) 테크닉

IR 테크닉
스크린리더나 브라우저를 위해 디자인적으로는 보이지 않는 정보 전달 텍스트를 숨김 처리하는 방법

• 스크린 리더가 읽을 필요는 없지만, 마크업 구조상 필요한 경우

      

      

      

    
    

      <code />
    
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

스크린 리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우는 언제가 있을까?

ex) section, article을 사용할 때 쓰는 heading 태그들

이 때 text-indent를 대화형 요소(a button iframe select 등)에 적용할 경우 초점(focus)에 문제가 발생할 수 있으므로 주의해야 한다.

text-indent
CSS에서 들여쓰기를 위해 사용되는 속성으로 속성 값을 많이 주어 화면 밖으로 멀리 보내는 방식

 

• a11y-hidden

a11y
접근성(accessibility)을 의미한다.

      

      

      

    
    

      <code />
    
.a11y-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

기존에는 clip-path 말고 clip만 사용해서 a11y-hidden 클래스를 구성하였다.

clip의 경우 이미지 크기를 알아야 하는 단점이 있고, 단점을 보완하기 위해 원본 사이즈를 몰라도 되는 clip-path가 등장하였다.

하지만 clip-path를 지원하지 않는 브라우저 버전이 존재하기 때문에 아직까지도 clip만을 사용하는 곳이 존재한다.

 

로그인 페이지 마크업

• 요소 사이의 여백(공간)은 margin으로, 안쪽의 여백을 주기 위해서는 padding으로 하는 것이 마진 병합 현상을 그나마 피할 수 있다.
• text-align: center로 처리가 가능하다면 굳이flex로 요소를 정렬하지 말자. flex의 단점은 컨테이너가 존재해야 하고, 정렬 등의 css 코드가 늘어난다는 것이다.
• alt 속성 값은 최대한 자세하게 작성하는 것이 좋다.
  ex) 닫기 버튼 ➡️ 로그인 창 닫기 버튼
• 논리적 순서 마크업을 위해 모달 창 닫기 버튼 같은 경우는 하단에 마크업 하는 것이 좋다.
  만약 닫기 버튼이 컨텐츠 상단에 있다면 존재하는 컨텐츠를 모두 읽기도 전에 닫기 버튼이 먼저 포커싱 되어 스크린 리더에 읽히게 된다.
  따라서 제일 하단에 마크업 하여 모든 컨텐츠를 읽고 ▶️ 모달창 닫기 의 논리적 순서를 유지한다.
• <p>의 경우 문단의 내용을 담을 때 사용된다. 따라서 굳이 내용이 없는 텍스트라면 <span>으로 표현하여도 괜찮다.
• 버튼 안에 이미지가 있는 경우 버튼의 사이즈를 이미지 크기보다 조금 크게 주면 사용자에게 편의성을 제공할 수 있다.

야간 CSS 특강

• 컨텐츠 길이가 길어졌을 때를 고려할 것!
• <main>은 전체 페이지에서 한 번만 사용되기 때문에 마크업 진행시 현재 작업하고 있는 페이지가 전체적인 부분인지, 아니면 내부에 속해있는 부분인지 판단하고 사용해야 한다.
• <header>에는 클래스를 달아주어 main section article 에서 사용되는 각 header 들과 구분해주는 것이 좋다.

[ DAY 17 ]

Bootstrap

• 빠른 빌드, 반응형 사이트를 쉽게 구현할 수 있다.
• Grid 시스템
  • 전체를 12개의 공간으로 나누어서 사용한다.
  • 주제가 달라지면 컨테이너를 다르게 가져가는 것이 좋다.
    ex) menu container - carosel container - product container
• 모달(Modal)
  • 모달의 경우 사용자에 의해 쉽게 제거될 수 있기 때문에 경고 문구 같은 경우는 모달로 구현하지 말고 아예 접근을 막는 것이 좋다.
  • 모달은 주로 특수한 경우를 제외하고 프로젝트의 맨 하단에 모여있다.
    => 카드 UI 에서 모달이 사용된다고 해서 카드 마크업 밑에 모달이 위치하지 않는다는 의미!
• !important
  • 부트스트랩 스타일을 적용하면 !important로 들어가있는 클래스가 존재한다.
  • css 선택자 우선순위에 의해 부트스트랩 클래스로 적용한 스타일이 변경될 수도 있는 속성들에 !important가 붙어있는 것이다.

Why does bootstrap use '!important' for responsive classes?

3.2. 의미

이번 수업들은 특히나 더 배워가는 점이 많았던 것 같다. CSS를 사용하여 스타일을 적용하는 방법은 여러가지이지만, 내가 선택한 스타일에 이유를 가지고 있어야 한다는 것, 레이아웃을 고려할 때 한 가지만 보는 것이 아닌 여러 상황에 대비해야 한다는 것 등을 배울 수 있었다.

항상 배운것을 그대로 적용하여 누군가가 나에게 '이건 왜 이렇게 한거야?'라고 묻는다면 선뜻 설명할 수가 없었을 것이다.

내가 다른 사람에게 설명할 수 없는 것은 그 개념을 제대로 알고 있는 것이 아니다. 나의 코드를 파악하고, 이유를 알고 있는 것은 추후에 문제가 발생했을 때 원인을 쉽게 찾을 수도 있기 때문에 생각이 담긴 코드를 작성하도록 하자!

---

4. 🙋‍♀️ 오늘의 질문

전체 선택자나 body보다 :root 에서 폰트를 설정하는 것이 좋을까요?

👉 정답이 있는 것은 아니다.

*(전체 선택자)는 모든 태그에 font-family 코드를 한 줄 추가하므로 불필요한 곳에도 코드가 추가될 수 있다.

font-family 속성은 상속이 되기 때문에 root에 작성하면 html 내부에 있는 자식들에 폰트가 상속되어 불필요한 코드 낭비를 줄일 수 있다.

다만 :root 에 폰트를 적용한다면, 사용자 에이전트 스타일(브라우저가 제공하는 기본 스타일)에서 font-family가 제공되는 button 등의 경우에만 초기화를 따로 진행해야한다.

 

section 안의 header에 margin-top을 주지 않고 section에 padding 값을 주시는 이유가 있나요?

👉 section은 header를 담을 수도 있지만, 나중에 다른 요소를 담을 수도 있습니다.

따라서 section - header 사이의 의존성을 제거하여 부모 레벨에서 기본 공간을 제공하였습니다.

추가적으로 미디어 쿼리에서 제어하는 스타일이 많아질 수 있기 때문에 부모에서 한번에 컨트롤 하는 편입니다.

 

카드 이미지를 배경이 아닌 img 태그로 둔 이유가 있나요?

👉 background-image를 사용하는 경우는 고정적인 컨텐츠에 적합하다.

유지보수를 할 때 변화가 많은 요소는 마크업으로 두어야 수정이 편하고, 마크업으로 두어야만 이미지 지연 로딩(lazy-loading)을 적용시킬 수 있다.