Nyong's Blog
0%

201019_TIL(Semantic markup, CSS reset 과 normalize)

Posted on Edited on In

오늘 한 것

구조적/ 의미론적으로 탄탄하게 설계할 것

  • HTML 문서를 막연히 디자인에만 치중하는 것이 아닌 구조적으로 탄탄하게 설계해야한다.

  • <header></header> , <nav></nav> <section></section>, <aside></aside>, <footer></footer> 등을 다양한 것을 활용하여 의미론적인(semantic)한 문서를 구성할 것!

  • Layout을 조직할 때는 GRID가 좋지만 IE11버전에서도 제대로 작동 안 되는 경우가 있다고 한다.

  • Layout 배치 시 논리적 순서도 중요하다. 고전적인 <table></table> 등을 사용하여 Layout을 배치하지 말자.

  • Layout을 배치할 시 논리적, 의미론적으로 문서를 작성하여야 한다.

    naverLogin

  • 배치를 아이디, 비밀번호, 로그인, 로그인 유지 순으로 배치하였다. 로그인 유지는 로그인 전에 하는 것이지만 논리적 구성은 로그인 뒤로 배치돼있으며 Tab 키를 활용하여 이동시에도 순차적이지 못하다. (개인적으로 디자인 적으로는 깔끔하지만 논리적으로는 좋지 못 하다 생각한다.)

  • Semantic Markup Content를 기계적 입장에서 조직적으로 짜는 것이 좋다. 보통 홈페이지 메인의 Logo는 암묵적으로 사용자에게 홈페이지 메인 링크로 받아드려진다. 이때, Logo를 <h1><a><img class="main-Logo"></a></h1>로 작성하면 기계적으로 페이지의 대제목으로 설정된다. 이런 것이 기계적 입장에서 조직적으로 짜여진 문서이다.

  • 개발 문서 내에 이름은 직관적이로 명확한 용어를 선택한다. 예로 요즘 Login은 Signin 등으로 전환 중이다.

  • 네이밍 관련해서는 CSS의 class, id(고유한 Id보다는 재사용 가능한 Class로 네이밍하는 것이 좋다고 생각) 등도 중요하게 이름 지어야한다.

    • BEM(CSS 설계 방법론)을 참고하자.
      • .header__logo -> logo가 header의 하위
      • .header__menu-item -> header 내부의 menu-item
      • .header__menu-item-active -> header 내부의menu-item active 등등
        참고: BEM
    • 표기방법
      • KC(Kebab) : <div class: menu-item></div>
      • CC(Camel) : <div class: menuItem></div>
      • SC(Snake) : <div class: menu_item></div>

  • CSS를 활용할 시 CSS의 종속(Cascading), 상속, 우선순위 등을 알고 사용해야한다.(유지보수, 확장, 직관성 중요)

  • <div></div>, <a> 등 의미론적이지 않은 태그에 role 속성을 부여하여 의미론적으로 사용하기도 한다.
    (개인적으로는 최대한 의미론적으로 알맞고 정해진 태그를 사용하는게 좋을 것 같다.)

웹접근성

  • 접근성의 변화는 CLI -> GUI -> NUL 순으로 발전하고 있다.

  • lang 속성을 이용하면 언어적 접근성을 높일 수 있다.

  • SEO(검색최적화)를 염두에 두고 <head><title>{검색에 참조할 해당 페이지의 대표 키워드를 포함}</title></head> Title을 작성하는 것이 좋다.

Font 관련

  • Web font를 사용해야 유지보수가 비교적 쉽다.

  • 한글 폰트는 용량이 크기 때문에 비용 문제를 생각해야한다.

  • 대표적으로는 아시아 지역 문자를 위한 Noto Sans(=Spoqa Han Sans)인 고딕계열 폰트가 많이 쓰인다.

CSS reset 과 normalize

  • CSS reset은 각 태그마다 브라우저에서 기본적으로 지원하는 모든 기본값을 초기화한다.

  • CSS reset은 모든 스타일에 대해 재정의해야하는 불편함도 뒤따른다.

  • CSS normalize는 초소한의 기본값을 제외한 스타일 값을 초기화함으로서 브라우저간 차이점을 최소화한다.

  • CSS normalize를 사용하여 브라우저 간 차이점을 줄일 수 있다.

  • 웹 브라우저 마다 CSS 기본값이 다를 수 있기에 항상 Cross Browsing이 중요하다.

기타

  • 오픈소스 가져다 쓸 거면 무슨 내용인지 이해하고 쓰자. 그렇지 않으면 에러가 발생했을 때 답이 없다!

  • CSS는 Cascading 문제로 중첩을 줄이는 것이 경제적이다.(브러우저 성능이 아무리 좋아도 티끌 모아 태산~!)

오늘 느낀 것

  • 오늘은 HTML/CSS에 입문하였다. 한 4년 전 쯤에 대학 강의로 들었지만 역시나 새롭다.

  • FrontEnd 개발자라고 JavaScript만 죽어라 하는 것이 아니라 HTML/CSS에도 조예가 깊어야한다. 모든 것이 그렇듯이 탄탄한 기초만한 것도 없을테니.

  • HTML은 문법이 프로그래밍 언어보다 느슨하다. 하지만 방심하지 않고 그만큼 스스로의 규칙에 엄격해야 전체적인 통일성과 규격으로 정해진 문법을 지키는 것이 좋겠다.

  • 과거에 배운적이 분명 있는 부분이지만 이번에 새로 알게된 사실과 좀 더 깊은 내용을 알게 됐다. 알는 것이라 자만하지 않고 좀 더 깊게 배우는 기회가 되길.

Nyong’s GitHub