HTML CSS 작성하는 나의 규칙

현재 완성되지 않은 게시물입니다.

HTML CSS를 작성할때 규칙들에 대해 상기하고자 블로그에 남기려고 합니다.

혹여나 잘못된 내용이 있으면 언제든지 조언 및 댓글 남겨주시면 감사하겠습니다.

계속 수정중..

1. HTML 시멘틱을 사용하자

• 시멘틱 태그는 웹 구조를 쉽게 이해할 수 있도록 정의된 태그다.

• HTML5 이전에는 <div> 만을 사용했지만 검색 엔진 등에서 소스를 읽을 때 시멘틱 태그를 사용하면 판독을 하는데 도움이 된다.

• header, nav, section, footer 등 의미에 맞게 사용하자.

2. CSS는 class 선택자를 애용하자.

• CSS 선택자에는 형제 선택자, 자손 선택자, 자식 선택자 등 다양한 선택자들이 있지만 이는 브라우저의 속도에 영향을 미친다.

• 브라우저 CSS 엔진은 모든 태그를 찾아서 필터링하기 때문에 가급적 명확한 클래스명이나 아이디를 이용하자.

3. img에 alt 속성을 무시하지 말자.

• img에는 alt 속성이 있는데 이미지를 설명해 주는 속성이다.

• 이 속성값은 이미지를 보지 못하는 스크린리더 사용자나 이미지 오류가 있어서 불러오지 못할때 사용되기에 보이지 않는다고 무시하면 안된다.

• 또한 잘 작성한다면 검색 노출에도 도움이 된다. img 작성 규칙들에 대해서는 네이버 부스트코스 UI과정에 잘 설명되어 있으니 참고하면 좋다.

• 최대한 명확하게 작성할 것. 이모티콘 (x) , 웃고있는 곰돌이 이모티콘(O)

4. 사용자 입력을 받는 input data는 innerHTML안에 사용하지 말자.

• 보안상 문제로 innerHTML에서 XSS(Cross Site Scripting) acctck 문제가 생길수도 있기 때문에 사용자 입력을 받는 데이터는 textContent를 사용하자. (귀찮더라도..)