프로젝트 B. 프로모션 웹페이지 만들기 - 코드 리뷰 및 회고(웹 UI 개발)

www.boostcourse.org/web344/joinLectures/78637

웹 UI 개발

 

 

 

배경이미지와 주요 아이콘이미지는 전부 제공을 해주네요. IR(Image Replace) 기법을 이용해야 진행할 수 있는 프로젝트입니다.

평소 웹 페이지를 별 생각없이 사용했던거 같은데, 웹 접근성이라는 관점으로 볼 수 있게 해준 프로젝트였네요. 

 

 

Advice

h1은 한 페이지에 하나만 사용하자

 

<h1 class="blind">Foodwidth에 여러분을 초대합니다!</h1>

 

 

또한 <h>태그는 페이지에 체계적, 순차적으로 작성해야한다고 합니다.

 

페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.

출처: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements

 

 

Advice

img태그에 width, heigth를 명시하자

 

<img class="thumbnail" src="./image/thumbnail_apple.jpg" alt="꿀사과">

 

앗.. 하나를 놓쳤네요. css에 width, hieght 속성추가를 시켰습니다. 리뷰어님께서 꼼꼼하게 코드리뷰를 해주셨네요

이미지의 height 속성과 width 속성은 언제나 명시하는 것이 좋습니다. 이 속성들이 명시되어 있으면 웹 페이지가 로드될 때 브라우저가 해당 이미지를 위한 적절한 공간을 남겨둘 수 있지만, 이 속성들이 명시되어 있지 않으면 브라우저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨둘 수 없게 됩니다. 따라서 이미지가 로딩되는 순간 페이지의 레이아웃이 변경되는 결과를 초래할 수 있습니다.

출처: tcpschool.com/html-tag-attrs/img-width

 

 

Advice

section 태그의 구조 변경

 

	<section id="content">
		<section class="invite background_layer">
        

기존 구조로 section in section형태로 작성을 하였습니다.

 

	<main id="content">
		<section class="invite background_layer">

main > section 형태나, section > acticle 형태로 작성하는 것을 추천해주셨네요.

article일 경우 h 태그가 들어가야한다고 합니다.

 

각각의 <article>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <article>의 자식으로 포함하는 방법을 사용합니다.

 

출처: developer.mozilla.org/ko/docs/Web/HTML/Element/article

 

 

Advice

button 태그에 type을 명시하자

 

<button type="button" class="btn btn_up">

 

type이 없을경우 브라우저 별로 기본 타입을 사용하기 때문에, 꼭 명시해야합니다.

 

 

양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.

출처: tcpschool.com/html-tag-attrs/button-type

 

브라우저별로 <button> 요소에 대한 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성을 명시해야 합니다.

출처: www.tcpschool.com/html-tag-attrs/button-type