Frontend 뉴비들이 많이 하는 실수 모음집 (HTML, CSS 편)

개요

SSAFY에서 프론트 수업을 한 지도 3일이 되었습니다. 같은 반 사람들의 코드리뷰를 해주면서 알게 된 공통적인 실수들을 모아보았습니다.

사실 저도 이번에 알려주면서 새로 알게 된 부분들도 많답니다! 😂

함께 체크해보아요! 

 

1. HTML과 CSS의 역할 분리를 명확히 해주세요.

HTML  : HyperText Markup Language의 약자로, 웹 페이지의 구조와 콘텐츠를 정의하는데 사용
CSS    : Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 데 사용

HTML은 구조와 콘텐츠 정의를 하는 데 사용되어야 합니다.

이 말 뜻은, 태그 사용시 스타일을 고려하지 말고 콘텐츠에 집중하여야 한다는 말입니다.

 

가장 많이 하는 실수가, 중요하지는 않아도 디자인에서 글씨가 크다면 H1을 사용하고, 가장 중요한 핵심타이틀이더라도 스타일이 글씨가 크지 않다면 h3을 사용하곤 합니다. 🥲

 

h1~h6 태그는 스타일을 고려해서 선택하는 것이 아니라 중요도를 고려하여서 선택해야 합니다.

 

예를 들어 h1 태그는 전체 페이지의 주요 제목/주제를 나타내야 합니다. 

h6태그는 가장 덜 중요한 제목을 정의합니다.

2. <h1> ~<h6> 태그의 사용법을 지키지 않음.

<h1> ~ <h6> 태그는 HTML의 제목을 정의하는 데 사용됩니다. 

위에서 이야기했듯, <h1>이 가장 중요한 제목을 정의하고 <h6>이 가장 덜 중요한 제목을 정의합니다. 

2-1. <h1> 태그는 페이지당 하나만 사용되어야 합니다. 

<h1>은 전체 페이지의 주요  제목/주제를 나타내어야 합니다. 

그리고 페이지당 하나만 사용되어야 합니다. 

한 페이지에 h1태그를 여러 개 사용하지 맙시다. 

 

2-2. 제목 수준을 건너뛰면 안 됩니다.

<h1> 태그 다음에 <h3>이 오면 안 됩니다. <h1>부터 <h6>까지 제목 순서를 지켜주세요.

 

h태그는 SEO에 매우 중요한 부분이므로, 꼭 지켜주세요! 

W3S HTML <h1> to <h6> Tags

3. <header> 태그 안에 있어야 할 것들이 없습니다.

3-1. <header> 태그란?

요소 <header>는 소개 콘텐츠 또는 탐색 링크 집합에 대한 컨테이너를 나타냅니다.

요소 <header>에는 일반적으로 다음이 포함됩니다.

• 하나 이상의 제목 요소(<h1> - <h6>)
• 로고 또는 아이콘
• 저자 정보

3-2. Header 태그 안에 <h1> ~<h6> 태그가 없습니다.

그중에서도 <header> 안에는 한 가지 이상의 <h1> - <h6> 태그가 있어야 합니다. 

물론, 디자인에 따라 없는 경우도 있지만, 대부분의 경우는 있습니다. 
공부하거나 실습하면서  <header> 안에 <h1> - <h6>이 없다면 혹시 잘못하고 있는 것은 아닌지 의심해 보는 것이 좋습니다.

 

3-3. header 태그는 여러 개 있어도 괜찮습니다.

헤더는 제목 목적으로 사용되므로 <footer>에서는 사용할 수 없지만 <main>의 모든 <article> 태그와 같은 다양한 섹션을 설명하기 위해 <main> 태그 내부에서 사용할 수 있습니다.

 

예를 들어, 아래 구조처럼 사용해도 괜찮습니다! 

한 페이지에 header가 2개인 구조 사진

3-4. header 태그 안에 nav 넣어도 괜찮습니다. 

우리가 처음 Sementic tag를 배울 때, 잘 이해가 안 가서 사진들을 보고 학습하곤 합니다. 

아마 아래 사진들을 많이 접하셨을 겁니다.

 

header와 nav가 분리된 예시 - 1

 

header와 nav가 분리된 예시 - 2

보통 수많은 예시 자료들이 <header>와 <nav>를 구분하다 보니, 둘을 꼭 구분해야 한다고 생각하는 경우가 많습니다. 

하지만 아래 구조처럼 <header>에 <nav>를 넣는 것은 문제가 되지 않으며 오히려 일반적인 경우입니다. 

header안에 nav가 있는 구조의 예시 사진

W3S -What is usually included in the header of an HTML document?

4. <img>의 alt 속성을 읽을 수 있도록 작성해 주세요.

사례 1 : alt 속성을 아예 지정하지 않음.

이미지는 인터넷 속도가 느린 환경이거나, 시각장애인인 경우 대체텍스트가 필요하므로 매우 중요합니다.

물론, 과제니까~ 연습이니까~ 마인드로 넣지 않을 수도 있지만, alt를 꼼꼼하게 작성하는 것은 매우 중요한 습관이므로 아무리 바쁘더라도 간단하게나마 작성해 주세요.

 

사례 2 : alt 속성의 텍스트에 변수 네이밍 컨벤션을 적용함.

<!-- 나쁜 사례 1 -->
<img src="img_girl.jpg" alt="girl-image" width="500" height="600">
<!-- 나쁜 사례 2 -->
<img src="img_girl.jpg" alt="girl_image" width="500" height="600">
<!-- 나쁜 사례 3 -->
<img src="img_girl.jpg" alt="girlImage" width="500" height="600">


<!-- 좋은 사례 3 -->
<img src="img_girl.jpg" alt="girl image" width="500" height="600">

alt 속성도 "속성"이라고 생각하시고, 변수 이름 짓듯 띄어쓰기 없이 작성하시는 분들이 많습니다.

이렇게 작성하게 되면, 스크린 리더가 다른 단어로 오해하고 완전히 다르게 읽어버리는 상황이 생기기도 합니다.

 

alt는 설명이라고 생각하고 평범한 글을 적듯 작성해 주세요.

 

5. CSS도 Prettier 적용됩니다. 

분명 수업에서 하라는 대로 했는데...

HTML은 자동 정렬이 잘 되지만, CSS는 자동정렬이 되지 않아서 아 원래 CSS는 안되나 보다~라고 생각하시는 분들이 많더군요...

 

CSS도 Prettier가 자동 정렬 잘해줍니다!!

보통 많이 설치하는 HTML CSS Support와 Prettier가 충돌이 나기 때문에 자동 정렬이 되지 않은 것입니다. 

VSCODE Extention - HTML CSS Support

VSCode Extention - Prettier

우측 하단바를 한번 봅시다.

VSCode 우측 하단바

지금은 JavaScript 화면이지만, 여러분은 CSS파일을 한번 클릭하고 보면 { } CSS라고 보일 것입니다.

이때 { } 모양이 아니라 { }에 x 아이콘 등 문제가 있다면 그 부분을 클릭해 주세요.

그러면 아래처럼 뜰 텐데, Prettier를 선택하면 됩니다. 

 

default formatter 설정 페이지

6. id와 class 지정할 때 유의사항을 지켜주세요.

6-1. id는 js로 element를 조작할 때 지정하는 것이 일반적입니다.

그냥 CSS를 입히고 싶어서 이름을 붙이고 싶은 것이라면 class를 사용해 주세요.

id는 전체 웹에서 유일해야 하므로, 여러 개발자가 작업하는 웹에서는 유일성을 지키기가 어렵습니다. 

6-2. class는 하이픈(-)을 사용해야 합니다.

파이썬을 공부하다가 오신 분들은 class 이름을 "top_nav"로 짓고 JAVA를 공부하다 오신 분들은 class 이름을 "topNav"로 짓는 경향이 있습니다. 

class는 하이픈(-)을 사용해야 합니다. 

잘못된 예	올바른 예
error_message	error-message
topModal	top-modal
Submit-Btn	submit-btn

id는 개발팀에서 정하는 컨벤션에 따라 다릅니다.

일반적으로 id는 두 번째 단어의 첫 번째 글자를 대문자로 바꾸는 camelcase를 사용합니다. 

daum과 같은 경우 id는 camelcase로 쓰도록 하고 있지만 google 같은 경우 id도 하이픈을 사용하고 있습니다.

제 경험으로, id는 camelcase를 사용하는 경우가 일반적이었지만, 하이픈인지 camel인지보다는 일관성 있는 네이밍 규칙이 훨씬 중요하므로 팀에서 잘 정해서 선택하면 됩니다. 

7. 이미 대체되어 사용하지 않는 구식 기술들을 멈춰주세요...! 🥕🥕🥕

7-1. float 

float 부작용

1. 레이아웃 겹침 (Layout Collapsing): float를 사용하면 부모 요소의 높이가 자식 요소들의 높이에 따라 조절되지 않는 경우가 발생할 수 있습니다. 이로 인해 레이아웃 겹침이 발생할 수 있습니다.
2. 클리어링 (Clearing): float를 사용하면 부모 요소의 높이를 제대로 계산하기 위해 추가적인 요소를 추가하여 "클리어링"해야 하는 경우가 있습니다.

float 대체 기술

1. Flexbox : 유연한 박스 모델을 제공하며, 요소들을 정렬하고 공간 배분하는 데 유용한 기술입니다.
2. CSS Grid: 격자 레이아웃을 구성할 수 있는 기술로, 행과 열을 정의하여 복잡한 레이아웃을 구성할 수 있습니다.

block 요소들을 가로로 배치하고 싶을 때 float를 사용하고 싶은 욕구가 생깁니다. 하지만 float의 사용은 여러 문제를 야기하기 쉬우므로, float 사용은 지양해 주세요!! 꼭이예요!!!! 🤦‍♀️🤦‍♀️🤦‍♀️

7-2. position: absolute 남발

절대 위치 지정은 요소를 상위 요소에 대해 절대 위치로 배치하는 것이지만, 유지보수성이 떨어질 수 있습니다. 

대신 Flexbox, Grid 또는 다른 레이아웃 방법을 사용하여 더 나은 방식으로 배치하는 것이 좋습니다.

7-3. Inline 스타일링 사용

아오 인라인 시치!! 

inline 스타일링이란?

HTML에서 요소의 'style'속성을 사용하여 직접 스타일을 지정하는 것을 의미합니다. 

inline을 기피해야 하는 이유

1. 유지보수의 어려움 : 스타일을 inline으로 지정하면 해당 스타일을 변경하려면 모든 해당 요소의 style 속성을 일일이 찾아 수정해야 합니다. 이는 유지보수를 어렵게 만듭니다.
2. 스타일 재사용 불가능: 스타일을 inline으로 지정하면 해당 요소만 해당 스타일을 사용할 수 있으며, 다른 요소에 동일한 스타일을 적용할 수 없습니다.
3. 가독성 문제: inline 스타일링은 HTML 코드 내에서 스타일과 콘텐츠가 혼재하여 가독성을 저하시킬 수 있습니다.

inline 대체 방법

class와 id 등을 활용하여. css 파일에 스타일을 정의한 후 head에 link 합니다. 

이렇게 하면 스타일을 중앙집중화하여 유지보수가 용이하고 스타일의 재사용성도 높아집니다.