[💻] 실습 - NEVER

📖 Overview

사이트명: 네이버
작업 기간: 3일 소요
라이브러리: -
유형: PC 적응형, 클론 코딩
참여도: 100%

👀 Check-point

• 시멘틱마크업이란?
• 좋은 클래스명 작성법은?
• 탭버튼 클릭시 활성화되어 슬라이드의 체인지
• 경로잡는 방법이란?
• ir,is기법이란?
• img와 background는 언제 쓰는게 좋을까?

float을 이용하여 페이지 제작

---

🔑 개발자모드

ctrl + shift + i → 포커스가 없는채로 개발자모드열림
ctrl + shift + c → 포커스가 잡힌채로 바로 선택가능

✏ semantic markup

기억 안난다면 시멘틱태그 정리 다시보기

╰ (🔴'◡'🔴)💬

처음에 마크업시 div로만 마크업을 구성하였다.
header, main, footer뿐 제대로된 마크업을 하지 못하였다.
div로 작업하는게 더 빠른거 아닌까??
하지만

이제는 태그자체에 의미가있는 시멘틱태그로 마크업구성을 해야한다.

SEO 최적화에 유리.
웹 접근성에 효율적
유지보수의 용이성

웹 접근성에 효율적이려면 지켜야한다!!!

📌 클래스명 작성법

클래스명은 통일성 있게 작성해야한다.

◼ 의미없는 영역 구성

• group-flex
• column-left, column-right
• col-left ,col-right
• row-top , row-bottom
  .
  .
  .

◼ 의미있는 영역 구성

클래스명을 지을때는 가장 핵심이라고 보여지는 걸 영역 이름으로 짠다.
ex) logo-area , gnb-area

section-event [sc-event]
event-area — 영역잡아줄때 [섹션급이아니라면 area부터 시작]
event-wrap — 작은단위
event-box — 더작은단위

◼ 리스트 클레스 작성

ul → event-list (부모)
li → event-item (자식)

◼ 목적에 맞는 클래스 (a클래스)

link → 링크 이동이 목적
btn (더보기) → 링크이동(x) 스크립트 작동(o)

◼ 클래스 css 사용시 주의사항

4단계이상의 상속은 사실상 의미도없고 예제1처럼 쓰게되면 추후 자식 요소 겹침이 일어날수있으니 주의해서 사용하자!

[예제1]
.section-event ul{} [x]
.section-event ul li{} [x]
.section-event ul li a{} [x]
.section-event ul li a img{} [x]

[예제2]
.section-event .event-list{} [O]
.section-event .event-item{}[O]
.section-event .link-item{}[O]
.section-event .link-item img{}[O]

선택자를 보다 정확하고 간결하게 끝낼수있습니다!

💡🤔 연관성이 없는애들 클래스는요??

[그림1]

[그림2]

그림1,2번 처럼 서로 연관성없는 단순 디자인 묶음일때 이름이 같고 위아래 여백을 서로 다르게 줘야한다면 클래스 이름을 주기 너무 어렵다. 그렇다면!!

👌😆 해결방안

• group-flex1, group-flex2
• inner1, inner2
• group-row

등등으로 숫자를 증가시켜서 구성하면 된다.

단순 위아래 여백을위해서 만든 태그니까!!

✏ css 파일 구조/명

assets(유산) - 사이트에 필요한 준비물 / css, img, jq...

• reset.css - 초기화 흰 도화지를 만드는느낌 ( reset 기본 소스)
• common.css - 공통으로 쓰이는 영역! 어디서든 쓰이는곳들
  ex) blind
• layout.css - 큰 구조물 (큰틀) 헤더,푸터를 공통으로 꾸며놓는다. -> body에 대한스타일도
• main.css -> 메인메이지만을 위한 css
• style.css -> main페이지가 아닐경우 불러오는용도 모든서브페이지 스타일

✏ @import

layout.css에 reset, common css를 연결시켜주고 main에 링크 연결을 한다.

❗ 주의할점

반드시 순서 reset, common를 지켜줘야한다.

<link rel="stylesheet" href="./assets/css/layout.css">

✏ 경로잡는 방법(작업하고 있는 파일 기준)

• 같은 레벨(폴더)에 있을때 - ./파일명
• 상위레벨에 있을때 - ../
• 하위레벨에 있을때 - /폴더명
  ex)“../(상위)폴더명/(안에)이름.jpg” alt“대체말”
• 폴더 안으로 들어갈때는 / 사용

✏ 텍스트 선택자

strong : 문장강조 게시글에서 제목급
em: 단어강조 게시글이라고하면 카테고리,분류급
p : 문장,단락,내용 유의미한 텍스트
span : 의미가 많이 떨어지는 쩌리텍스트

💡🤔단독 span태그는 언제 쓰는게 좋을까??

• 의미가 떨어질 때
• 텍스트를 꾸며줄 때
• 클릭도 안되고 의미 떨어질 때

• 단독 span → 쩌리텍스트
• a태그, 다른태그에 소속된 span → 디자인

p태그

문장,단락,제목,내용으로 이루어짐

📌 정보 전달

✏ form: 정보를 전달하는 태그

form태그 필수 요소

GET: 기본값, URL에 정보를 같이 보냄, 주로 검색, 보안(x)
POST: 숨겨서 보냄, 로그인, 회원가입등 중요한 정보 전송, 보안(0)

✏ method: 정보를 보내는 방식

form태그 쓰려면 이 두 개 필수

• GET : 기본값, URL에 정보를 같이 보냄, 주로 검색
• POST : 숨겨서 보냄, 로그인, 회원가입등 중요한 정보 전송

검색 검색

<form action="" method="get">
  <fieldset>
     <legend class="blind">검색</legend>
        <input type="text">
          <button type="button"><!-- 버튼은 항상 가운데 정렬하는 속성 -->
            <span class="blind">검색</span> <!-- 제공되는 영역엔 블라인드 필수 -->
          </button>
  </fieldset>
</form>

• <fieldset> </fieldset> - 테두리에 이름, 구역 표시 block레벨, 부모로만 가능, 폼에 대한 영역
• <legend> </legend> - 자식으로만 사용 가능 구역의 타이틀/제목 (시각장애인 + 검색엔진을 위해 실질적으로 필요없어도 써주기 blind로 가리기)

✏ inputk 체크라인 없애기

input은 클릭시 라인이 생긴다.
없애는 방법은 간단! outline: 0;주기

.header-area .search-area input{
    outline: 0;
}

📌 img, background 어떤걸 써야할까?

✏ img는 언제써야할까?

img콘텐츠(의미 있는) 한테 쓰는게 가장좋다!
이미지로 하여금 정보제공을 하고싶을 때

<img src="이미지주소" alt="대체말">

-> alt 태그 - 이미지가 없을때 출력할 대체 문자 표현 (웹접근성조건)

로고,아이콘,화살표 → 이미지로 쓰기보단 배경처리(IR)가 낫다.
img태그는 이미지콘텐츠한테 쓰는게 적당하다.
[ 아이콘,로고 x ]

✏ background는 언제써야할까?

의미없는 이미지, 부수적 이미지

• img(원본사이즈대로 나옴)태그와는 달리 영역 만큼만 보여준다.
• 원본 이미지가 더 크면 영역만큼만 이미지가 나온다.
• 원본 이미지가 더 작으면 반복되서 영역에 다 칠해준다.(벽지처럼 사진 반복)

배경 ex)도트가 배경처럼나온거 - > background 속성

🔑 width, height 필수로 주자!!

📌 IR/IS 기법

✏ 단일이미지(IR / Image Replacement) 텍스트이미지처리

• 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공
  스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요!
• 배경처리로 사용됨

✏ 스프라이트이미지(IS)

IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청

• HTML의 img태그가 background-image보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는 것은 시간이 오래 걸린다.
• 서버측에서 트레픽이 확 준다.
  ex) 이미지 100번통신 vs 이미지 1번통신
• 조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법
  -> 서버 부하 줄어듬
• DPI – 도트 퍼 인치 (모바일, 맥북모니터) 해상도를 맞추기 위해 이미지를 2배 키운다.

이미지 변환 사이트 1
이미지 변환 사이트 2

✏ 사용법

common.css에 공통으로 사용될 이미지를 넣고 클래스이름을 넣어준다.

.shop-body .news-top .next::before,
.shop-deal .shopdeal-title .deal-link::before,
.plusdeal-item .plusdeal-box .ico_one_plus,
.plusdeal-item .plus-R::before{
    background-image: url(../images/sp_shop_a620bd.png);
    background-repeat: no-repeat;
    background-size: 107px 101px;
}

• background-size는 원본 이미지가 2배 커져있음으로 반으로 나눠준다.
• background-position으로 위치 찾아주면된다.

---

📝 특징 정리

<div class="logo-area">
  <div class="inner"> <!-- w잡고 중앙정렬 공통 -->
    <h1 class="logo"><a href=""><span class="blind">네이버</span></a></h1>
    <div class="search-area">
      <form action="" method="get"><!-- 보안이 노필요get, 필요 post -->
        <fieldset>
          <legend class="blind">검색</legend>
          <input type="text">
          <button type="button"><!-- 버튼은 항상 가운데 정렬하는 속성 -->
            <span class="blind">검색</span> <!-- 제공되는 영역엔 블라인드 필수 -->
            <!-- after에 검색 이미지 -->
          </button>
        </fieldset>
      </form>
    </div>
    <div class="service-area">
      <a href="" class="link-start">네이버를 시작페이지로</a><i class="bar"></i>
      <a href="" class="link-junior">쥬니어 네이버</a>
      <a href="" class="link-bin">해피빈</a>
    </div>
  </div>
</div>

• 자식들에게 각각 가로사이즈, 가운데 정렬을 주는것보다 공통클래스를 이용하여 부모에게inner라는 클래스를 줌으로써 컨트롤이 편해진다.width: 1130px;,margin: 0 auto;
• h1은 항상 페이지에서 하나만 나와야함. 로고에만!!
• <button type="button">태그는 항상 가운데 정렬을 시켜준다.

<div class="service-area">
  <a href="" class="link-start">네이버를 시작페이지로</a><i class="bar"></i>
  <a href="" class="link-junior">쥬니어 네이버</a>
  <a href="" class="link-bin">쥬니어 네이버</a>
</div>

• 화살표 이미지는 vertical-align: top;를 이용하여 텍스트와 정렬을 맞춰준다.
• i태그는 의미가 없는 요소에 사용.

💡 vertical-align은 inline레벨을 수직정렬 시켜주는 것

<section class="sc-news">
  <h2 class="blind">뉴스영역</h2>
  ...
</section>

• 새로운 영역이 시작되는 section태그에선 h2로 보이지 않는 제목 넣어줘야함

✏ 리스트 border 디자인

<i class="vt-line vt01"></i><!-- 세로 -->
<i class="vt-line vt02"></i>
<i class="vt-line vt03"></i>
<i class="vt-line vt04"></i>
<i class="vt-line vt05"></i>
<i class="hr-line hr01"></i><!-- 가로 -->
<i class="hr-line hr02"></i>
<i class="hr-line hr03"></i>

position: absolute;
top: 0;
left: 124px;
width: 1px;
height: 100%;
background: #dae1e6;

i태그에 border가 아닌 width로 css를 준다.

✏ i태그

꾸밀 때, 선만들 때... 아무 의미없는 리더기가 읽지 않는 영역

💡🤔 border를 쓰지 않는 이유는?

개수에 의존하지 않고 선을 만들어주기 위해서 틀을 만들어줌으로써 디자인 레이아웃을 망치지 않는다.

• 수직 수평선을 고정하여 레이아웃이 무너지지 않게 하는게 포인트!

✏ Hover 이미지 커지기

이미지에 호버시 이미지가 커지고 특정 텍스트에 밑줄

.sc-recipe .content-box:hover .title-txt {
    text-decoration: underline;
}
.sc-recipe .content-box:hover img {
    transform: scale(1.1);
}
.sc-recipe .preview-area img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

🔑 반드시 커지려는 이미지에 속도를 줘야한다.

transition: 속성 0.3s;

transition은 애니메이션 속도를 조절하는 방법을 제공한다.
속성 부분에 적용하려는 속성을 적어줘야한다.
ex) transform, rotate, scale, all...

✏ overflow:hidden 으로 모든 영역의 float 해제를 할수없는이유

컨텐츠 영역밖으로 넘쳐야하는 경우 overflow:hidden을 쓰게되면 내용이 짤린다.

main::after{
    content: '';  //-> 빈칸생성
    display: block;  //-> 그 빈칸인 인라인이여서 block으로 바꿔줘야 한칸을 차지함
    clear: both; //-> float 양쪽해제
}

큰틀을 구성하는 영역이라면 overflow보단 :after 처리하는게 이득이다.

📌 말줄임 표시 기법

✏ 한 줄 단위 텍스트 말줄임

display:block; -> 말줄임 처리를 위해 글자 출력할 공간이 필요함
overflow:hidden; -> 넘치는 텍스트 숨김처리
white-space:nowrap; -> 텍스트가 부모를 넘어가도 다음줄로 넘어가지 않고 한줄로 표시됨.
text-overflow:ellipsis; -> 말줄임 ... 표시

✏ 두줄 이상 텍스트 말줄임

text-overflow: ellipsis; -> 말줄임 ... 표시
overflow: hidden;
display: -webkit-box; -> 웹킷 소스가 필요해서
-webkit-box-orient: vertical; -> 웹킷 소스가 필요해서
-webkit-line-clamp: 3; -> 몇줄 할껀지
line-height: 20px; -> 필수로 알아야함
max-height: 60px; -> clamp(줄) x line-height하면됨

🤔 height값을 왜 지정하나요?

문자열의 줄 수가 제한 줄 수 보다 작을 경우 높이도 줄어들기 때문에 동일한 높이를 유지하고 싶을 경우에는 height속성 값을 설정해야 합니다.

참조

🤔 webkit은 뭔가여?

몇 css들은 옛 브라우저들이 적용/지원이 안된다.
크로스브라우징을 위해 낮은버전들한테 webkit을 써줘야지 적용이 된다.

-webkit- : 크롬, 사파리
-mox- : 파리어폭스
-ms- : 익스플로러
-o- :오페라 하우스

---

오답✍(◔◡◔)✧

1. 

<li class="recipe-item">
  <a href="">
    <img src="./assets/images/infood01.jpg" alt="">

    <div class="rec-box">
      <em class="citem-title">레시피</em>
      <strong class="title-txt">남편 도시락반찬도 새벽배송으로~</strong>
      <p class="desc">헤로우- 김돌희예요! 집밥여신이고 싶었던 (구)집밥머신 그러나 직음은 물러설수없는 (현)아가리다이어터!! 날씨가 더워지고 옷차림이 얇아지니 주변분들이 하나둘 징벌과 형벌(aka 다이어트)에 돌입하시더라구요..?</p>
      <div class="source">
        <span class="name">
          김돌희
        </span>
        <span class="date">
          1주일 전
        </span>
      </div>
    </div>
  </a>
</li>

레시피 영역에서 이미지 영역과 내용영역이 겹쳐져있다.
해결방법은?

╰ (🔴'◡'🔴)💬 내가 생각한 해결방안

.rec-box에 float: right;을 주고 그 부모인 a태그에 overflow: hidden;
-> .rec-box이 영역 밑으로 떨어지면서 레이아웃에 맞지 않게 됨

👌😆 해결방안

img태그에 줬던 float: left;을 해제 시켜주면 된다.
-> .rec-box에 overflow: hidden;을 준다.

💡 img태그는 혼자 쓰는것 보다 한번 감싸주는게 이미지를 다루는데 더 편하다.

---

2. 

이미지 영역들이 왼쪽으로 쏠려있는 현상 발생

.footer-banner .banner-item {
    float: left;
    width: 350px;
    height: 86px;
}

👌😆 해결방안

width: 350px;값을 지정하는게 실수!
-> calc태그를 이용하여 나눠준다.width: calc(100% / 3);

---

3. 

한줄로 표현되어야하는데 한단어씩 밀리는 현상 발생

👌😆 해결방안

mall-area에 whith 100%
점(클래스 dot)에 float: left;

---

4. 

똑같은 형식의 이미지가 나오지 않거나 가운데 정렬이 되지않음

👌😆 해결방안

.shop-body .recommend-area .btn {
    float: left;
    background-color: #fff;
    border: 1px solid #dae1e6;
}

공통 클래스로 처리하려 btn를 주는건 좋았지만 마크업, css를 작성할때 공통으로 주려는 요소에 다른요소엔 들어가지 않는 float: left;를 줘서 꼬였다.

╰ (🔴'◡'🔴)💬
공통 클래스를 줄때 큰틀을 생각하고 짜야한다.
공통 뼈대로 이루어진애들로만 짤 수 있게 노력하기
클래스 이름 짓는게 생각보다 어렵다ㅠ 최적화된 클래스명을 지을 수 있도록 많이 해보는게 중요하다!