TIL: 컨벤션, HTML 시멘틱 태그, 웹접근성, 렌더링 과정

Snoop So·2023년 3월 6일
렌더링시멘틱 태그웹접근성코딩컨벤션
0

HTML 코딩컨벤션

chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf

  • 네이밍의 경우 다음과 같은 약속어를 따른다.
#wrap 페이지 전체 영역
#header 머리글 영역
.gnb: Global Navigation Bar
.u_hc: 검색영역
.atcp: 자동완성목록
#container 본문 영역
#content 주요 콘텐츠 영역
.lnb: Local Navigation Bar
.section: 그루핑
#footer: 바닥글 영역
#pop_wrap: 페이지 전체 영역
#pop_header: 머리글 영역
#pop_container: 본문 영역
#pop_content: 주요 콘텐츠 영역
#pop_footer: 바닥글 영역

이미지 네이밍
이미지 이름은 '형태의미상태' 순서로 조합한다. 

tab1_recomm_on 
btn_naver_mail.gif 
btn_srch.gif

폴더 및 파일 구조는 다음과 같다.

HTML  
- news.html: '서비스영문이름.html' 로 사용 
- pop_.html: 팝업 파일을 사용
- ifr_.html: iframe 파일을 사용 
- Inc_.html: Include 파일 
- tmp_.html: 임시파일을 사용(QP예외규칙) 

CSS 
- news.css: '서비스영문이름.css'로 사용한다. 
- news_e.css: 모바일 예외 대응시 ‘모바일CSS파일 분기 규칙’에 따라 사용한다. 

Folder 
- p_yymmdd_프로젝트이름: 신규 프로젝트 작업 시 사용 
- s_yymmdd_서스테이닝이름: 서스테이닝 작업 시 사용 
- img, css, js: image, css, javascript 폴더 사용
- p_yymmdd_프로젝트명\메뉴명: HTML 파일의 폴더 분류가 필요한 경우 사용 
- tmp_: 임시파일의 폴더 분류가 필요한 경우 사용(QP예외규칙) 

HTML/CSS 조합 예 
HTML 
- news_nboard_view.html: '메뉴이름_의미_상태' 순서로 조합한다. 

CSS 
- news_home.css: '서비스이름'을 맨 앞으로 하여 조합한다. 

네이밍규칙
- news_admin.css 
- news _pop.css, news_nanum.css

참고로 airbnb의 폴더 구조는 다음과 같다고 한다.

https://airbnb.io/native-navigation/docs/guides/project-structure.html

root/
├── components/
├── screens/
│   ├── FooScreen.js
│   └── BarScreen.js
├── routes.js
└── index.js

CSS 컨벤션

chrome-extension://efaidnbmnnnibpcajpcglclefindmkaj/https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf

네이버의 경우 종속 확장, 독립 확장으로 유형을 나누어 사용한다.

mykin_list: 기본형
mykin_list_v1, mykin_list_v2...: 종속 확장, 기본형 class에 종속되어 여백, 색깔, 행간 등 몇 가지 속성을 부여하고자 할 때 사용
mykin_list2, mykin_list3: 독립 확장, 기본형 class의 변형이 타입으로 분류할 만큼 클 경우 사용

https://github.com/airbnb/css#formatting

Airbnb의 경우에는 블록, 요소, 수정자로 class를 구분한다.

* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

.ListingCard: "블록"이며 상위 수준 구성 요소를 나타냅니다.
.ListingCard__title: "요소"로서 .ListingCard블록 전체를 구성하는 데 도움이 되는 하위 요소를 나타냅니다.
.ListingCard--featured: "수정자"이며 블록의 다른 상태 또는 변형을 나타냅니다 .ListingCard.

Javascript 코딩컨벤션

https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md

classdhk constructor에서는 PascalCase 사용
class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: "yup",
});

_가 앞에 붙는 경우는 private을 의미: 외부에서 접근할 수 있는 경우, 사용하면 안되는 메서드명 또는 속성명은 `_`을 사용한다.
class User({
   constructor() {
      _privateState: true
   }
   _privateMethod() {
   }
   publicMethod() {
   }
}

HTML 시멘틱 태그

HTML5에서 추가된 것으로, header/footer/nav/article/section 등의 태그를 의미한다. 웹 페이지의 구조와 의미를 명확하게 표현할 수 있어 웹 접근성을 개선하는데 도움을 준다. 장점은 다음과 같다.
1. 스크린 리더기(Voice Over) 와 같은 보조 기술이 HTML 문서의 의미를 파악하기 쉬워진다.
2. 검색 엔진 최적화(SEO)가 되어 검색 결과 노출 순위가 높아진다.

HTML5

2014년 W3C에서 공식적으로 표준화된 HTML의 최신 버전. 이전 버전에서 개선된 점은 다음과 같다.
1. 시멘틱 태그
2. 멀티미디어 기능: 비디어 및 오디오 태그
3. 캔버스(Canvas)
4. 웹 저장소: 로컬 스토리지, 세션 스토리지
5. 웹소켓: 서버와 양방향 통신 가능

웹접근성 (Web Accessibility)

모든 사용자들이 웹 사이트에 접근하여 그 콘텐츠를 이용할 수 있도록 보장하는 것을 말한다. 즉, 신체적, 인지적, 기술적 장애를 가진 사용자들도 웹사이트에 접근할 수 있도록 하는 것. 다음과 같은 이점이 있다.
1. 불법의 차별 금지: 장애에 대한 차별을 예방
2. 대상 사용자의 확대: 해당 웹사이트를 사용할 수 있는 사용자를 확대할 수 있음
3. 검색 엔진 최적화(SEO): 검색 엔진이 웹사이트의 콘텐츠를 더 잘 인식하고 분류할 수 있어서 최적화 가능
4. 법적 요구사항: 국가별 웹접근성에 대한 법적 요구사항이 존재, 법적 문제를 예방 가능
그렇다면 어떻게 하면 웹접근성을 지킬 수 있을까?
1. 시멘틱 태그의 사용
2. 이미지에 대한 대체 텍스트 제공
3. 색각 장애인들을 위한 대안 색상과 같은 보조 기능 제공
4. 키보드로 웹사이트를 탐색할 수 있도록 만들기
5. 웹페이지 구성시 명확하고 간결한 HTML 작성

웹사이트에 접속했을때 브라우저가 어떻게 렌더링되는가?

  1. HTML 다운로드: 해당 웹 페이지의 HTML 코드 다운로드
  2. HTML 파싱: 브라우저가 다운로드된 HTML을 파싱하여 웹페이지 구조 분석, 시멘틱 태그와 같은 요소들이 웹 페이지의 구조와 의미를 결정함
  3. CSS 다운로드: HTML 파싱이 완료되면 CSS 파일을 다운로드함
  4. CSS 파싱: 웹 페이지의 스타일 정보 분석, 각 요소의 스타일 정보가 결정됨
  5. DOM 생성: 브라우저가 HTML 코드를 바탕으로 DOM(Document Object Model)을 생성. DOM은 웹 페이지의 모든 요소를 트리 구조로 표현한 것.
  6. 자바스크립트 다운로드 및 실행: HTML 파싱 중에 script 태그를 만나면, 해당 자바스크립트 파일을 다운로드한다. 다운로드가 완료되면 해당 자바스크립트 파일을 실행한다.
  7. DOM 조작: 자바스크립트 코드를 실행하면 DOM을 조작하여 웹 페이지의 동적 변화를 구현 가능.
  8. 렌더 트리 생성: HTML/CSS의 파싱 결과를 바탕으로 렌더 트리(Render Tree) 생성. 렌더 트리는 웹 페이지의 요소들이 최종적으로 화면에 어떻게 표시될 것인지 결정하는 정보를 담고 있음.
  9. 레이아웃 계산: 브라우저가 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산
  10. 렌더링: 브라우저가 레이아웃 계산을 마치면, 실제로 화면에 웹 페이지를 렌더링한다.

DOM과 렌더 트리의 차이점:

  • DOM: 웹 페이지의 모든 요소를 표현하는 구조, 자바스크립트에서 요소를 조작할 떄 사용됨.
  • 렌더 트리: 웹 페이지의 레이아웃을 계산하고, 화면에 표시하기 위한 정보를 담고 있는 트리 구조. DOM과 CSS를 기반으로 생성된다. 화면에 표시될 필요가 없는 요소는 포함하지 않는다.(e.g. display:none)
// dom
html
├── head
│   └── title
└── body
    ├── h1
    ├── p
    └── ul
        ├── li
        ├── li
        └── li
        
// render tree
├── h1 (color: red)
│   └── text node
├── p (font-size: 16px)
│   └── text node
└── ul
    ├── li
    ├── li
    └── li

child vs childNodes

child은 첫번째 자식 노드를 가져오고, childNodes는 자식 노드 전부를 가져온다.

const parent = document.getElementById('parent');

// 첫 번째 자식 노드에 접근
const firstChild = parent.child;

// 모든 자식 노드에 접근
const childNodes = parent.childNodes;
profile
Snoop So
이전 포스트

코드스쿼드 CS 과정 회고

다음 포스트

TIL: ::before

0개의 댓글