(project1) NAVER 홈페이지(pc)

NAVER https://www.naver.com/

1. 피드백

1. 본문과 관련없는 광고(banner)의 경우, aside 태그 사용

2. min-width로 최소너비 보장

• 모든 컨텐츠가 표시될 수 있도록, header, main, footer를 감싸는 wrapper에 min-width로 최소너비 보장

3. img vs background 처리

• img : 데이터 또는 계속 바뀔 영역에 태그로 사용
  

• background : 로고 또는 아이콘 등 고정된 이미지에 background 속성 처리
  

2. 개선방안

1. float가 아닌 flex로 재구성

• float : 원래는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성. 레이아웃용으로 많이 사용됨

  -inherit: 부모 요소에서 상속.
  -left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
  -right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시.
  -none - 요소를 부유시키지 않음.

  • left와 right를 통해 부유속성을 지정시 display는 무시(none은 제외)
    또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐.

• flex : 레이아웃 배치 전용 기능으로 고안. 단일 열 또는 행에 공간이 분산되는 방식을 정의하도록 설계되어 float를 사용하는 것보다 레이아웃을 정의하는 데 더 적합. 상위 부모요소인 flex container와, 자식 요소인 flex item으로 구성
• flex container(부모요소)
  
• flex item(자식요소)
  

3. 추가 Point

1. span class="blind" 태그 이용

• 시각장애인들을 위해 리더기가 읽을 수 있는 아이콘이나 그림을 설명하는 텍스트 기입
• 실제로 '네이버'라는 텍스트가 보이지 않고 이미지로 대체되어있지만, 시각장애인들을 위하여 리더기는 '네이버'라는 설명 텍스트를 읽게 됨
  
  

2. 스프라이트 이미지 사용 (IS기법)

• IS기법 : HTML의 img태그가 background-image보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는데에는 시간이 오래 걸림. 이때 유용하게 사용될 수 있는 방법이 IS(Image Sprite)기법. IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청하고, CSS의 background-image와 background-position 속성을 이용해 원하는 이미지가 있는 부분을 잘라서 사용. background-position은 배경 이미지의 위치를 지정하고 배치하는 속성. 여러 이미지를 하나로 통합하여 한 번만 통신해도 되기 때문에 웹 전송 속도가 빨라짐.
• IR기법 : 이미지를 볼 수 없는 사용자에게 적절한 텍스트를 제공하는 것을 말함. img 태그의 alt속성을 사용하여 대체 텍스트를 사용할 수 있지만 길이가 너무 길 때 IR기법을 사용하기도 함. 또한 background-image를 사용할 때 IR기법으로 대체 텍스트를 제공함.
• IS기법과 IR기법을 함께 사용하면 서버로의 요청 횟수를 최소화하여 웹 페이지의 로딩 속도를 줄일 수 있고, 이미지들을 관리하기 쉬워짐.

*(sprite image)

3. 2배 크기의 이미지 사용

• pc 해상도에서는 깨지지 않고 잘 보여도, mobile 해상도에서는 훨씬 확대되기 때문에 깨져보임. 그래서 2배 크기의 이미지를 압축하여 깨져 보이지 않도록 한 것
• 그럼 왜 mobile 만 2배 크기를 쓰면 되지 pc에서도 쓸까?
• 태블릿의 발전 때문. 태블릿에서도 pc버전의 웹을 볼 수 있기 때문에 그에 대응하기 위함

4. 영역 이름 구성체계

<div class="___">

[section] - "sc-___", "section-"___")
  (하위태그로 <h>필수)

	[group] - "group-___"
  	 (영역 묶기 위함)

  		[area] - "___-area"

  			[wrap] - "___-wrap"

  				[box] - "___-box"

리스트 이름(참고)

  [ul] - "___-list", "list-___"

  		[li] - "___-item"

텍스트 구성체계

[strong] - 문장강조
[em] - 단어강조
[p] - 문장, 단락
[span] - 디자인, 의미떨어지는 영역