MIU MIU 리뉴얼

HONGJIN·2022년 11월 8일

CSS Flex Java Script html jquery project swiper

MIU MIU Renewal

파일 구조/명

index.html : 전체 마크업

assets/css/common.css : 공통으로 쓰이는 영역 (body wrapper blind inner)

assets/css/layout.css : 큰 틀을 구성(header body-container footer)

assets/css/main.css : main페이지 css소스

assets/css/reset.css : CSS 기본 적용 값 (m0 p0 lineh1 listsn displayb fonti colori textdn 등)

assets/css/font.css : font 적용

Renewal

miumiu는 이탈리아의 명품 패션 브랜드로, 이태리 명품 브랜드로 유명한 프라다 그룹 소속이라 프라다와 자매 기업이기도 하다. 브랜드의 이름 자체가 지금의 프라다를 만든 미우치아 프라다의 이름에서 따온 것이다. 프라다는 오트 꾸뛰르, 미우미우는 프레타포르테 위주인 것이 특징으로, 쉽게 말해서 프라다의 하위호환 브랜드인 격. 하지만 2010년대 후반부터는 오히려 프라다보다 과감한 시도와 세련됨이 돋보여 더 호평받았던 적도 있었다. 최근에는 2~30대에서의 선풍적인 인기에 힘입어 프라다의 하위호환이 아닌 아예 다른 이미지의 브랜드로 인식되기 시작하고 있습니다.

개념

semantic markup

태그자체에 의미가있는 시맨틱 태그로 마크업 구성

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

영역 클래스 작성

group-flex
header-top, header-bottom
footer-top, footer-bottom

위 그림과 같이 서로 연관성 없는 단순 디자인 묶음일때 위아래 여백을 서로 다르게 줘야 한다면,

group-flex1, group-flex2

등등으로 숫자 증가시켜 구성
단순 위아래 여백을 위해 만든 태그이기때문

영역 구성

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

swiper

유사한 요소를 Swiper Demos에서 찾아서 core로 script를 복사한 후 변수명을 수정해준다

기본 레이아웃

1. css

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

2. html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

각 태그에 swiper-container > swiper-wrapper > swiper-slide 구조의 class명 지정

슬라이드가 여러개일시 "swiper-container 특정클래스명추가"
swiper-slide가 슬라이드의 내용

3. js

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

const,var 둘 다 사용가능
복사한 swiper에서 작성한 변수명으로 변경
class가 겹치는 것을 예방하기 위해 부모와 함께 작성 (ex) .swiper main-slide

마크업/CSS 개념 정리

list class 작성

ul : all-list
li : all-item

a태그 link, btn

link-목적 : 링크로 이동

btn-더보기 : 링크로 이동하지 않고, 스크립트 작동

form method

get : 보안이 필요 없을때 ->주소창에 내가 검색한 것이 주소값으로 따라나옴
post : 결제, 회원가입 등 보안이 필요할 때

blind

/*
공통, 안되는것들
display: none; 
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
font:0
position: absolute; 성능정하
top: -9999px; 성능저하
left: -9999px; 성능저하
text-indent: -9999px; 성능저하
*/
.blind{
    position: absolute;   
    width: 1px;height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
}

span class="blind"
글자 숨김. 장애인/브라우저만 읽을 수 있음

nav 태그

nav : 현재 웹사이트에서 같은 페이지나 다른 페이지 안의 주요한 지점으로 이동 할 수 있는 네비게이션 역할을 담당 (네비게이션 링크로 구성된 섹션)
메뉴를 구성할 때 사용하는 것이 가장 좋다.
nav태그는 ul-li-a-li-ul 구성으로 사용하는 것이 일반적

마크업

wrapper

<div class="wrapper">
	<body></body>
</div>

min-width를 잡아놓기 위해
화면을 줄였을 때 최소의 크기로 보장을 하기 위해

inner

영역의 범위를 공통적으로 잡아놓기 위해

alt

시각장애인들을 위한 이미지 설명

header-top

메뉴 로고

오른쪽 메뉴

header-bottom

header 하단 메뉴 리스트 js

검색창

main

메인 이미지 3개 js swiper

뉴 아이템 9개 js swiper

배너

베스트 아이템 js swiper

게시판

비디오

footer

로고

주소

cs

커뮤니티

은행 정보

etc

hover js

slideUp, slideDown js

CSS

웹 폰트 (Web Font)

font-face

@font-face : 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줌

font-family : 다운받은 폰트명(사용할 폰트)

src : 저장 위치

format : 폰트 확장자

font-weigth : 폰트 크기 (light300 / regular400 / medium500 / semibold600 / bold700)

@font-face {
    font-family: 'pt';
    src: url(../font/Pretendard-Light.woff2) format('woff2');
        font-weight: 300;
}
@font-face {
    font-family: 'pt';
    src: url(../font/Pretendard-Regular.woff2) format('woff2');
        font-weight: 400;
}
@font-face {
    font-family: 'pt';
    src: url(../font/Pretendard-Medium.woff2) format('woff2');
        font-weight: 500;
}
@font-face {
    font-family: 'pt';
    src: url(../font/Pretendard-Bold.woff2) format('woff2');
        font-weight: 700;
}

css 속성

z index : z-index 속성은 요소의 쌓임 순서를 정의할 수 있다.정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의하는 방식으로 적용되며 위치 지정 요소에 대해 적용할 수 있는 속성이다.위치 지정 요소란?position 속성이 정의되어 있는 요소를 말한다.z-index 의 기본값

화면에서 숨기기 : opacity: 0; visibility: hidden;

보여지게 하기 : opacity: 1; visibility: visible;
displayblock-none / left-100 -left0처럼 active를 활용해 보여지고 숨기는 기능
이는 header가 사라졌다가 보여지는 것이기 때문에 opacity와 visibility로 조정하는 것이 맞다
같은 자리에 있지만, 화면에서 안보이게 하는 것일 뿐이니까 (위치 이동이 x)

transition : 속성을 서서히 변화시켜 부드러운 모션을 적용해주는 속성이다.

background-size : 자신이 설정한 요소의 크기에 다운 받아 온 배경이미지를 넣었을 때 이미지의 크기가 맞지 않아 깨지는 현상이 있다 이 때 background-size를 사용하여 배경이미지의 크기를 적합하게 설정할 수 있는 속성이다.

flex-direction: column : flex축의 방향을 세로 방향(열)으로 배치. block과 유사

overflow: hidden : 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라냄. 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리.

background: url(../images/경로) : css에서 이미지를 삽입시킬 수 있는 기능

white-space: nowrap : 2줄이 되는 현상을 막고, 한 줄로 처리해주는 문법

text-overflow: ellipsis : 글자가 넘칠 경우 '...' 을 붙여주어 디자인에 도움을 주는 기능

CSS로 이미지 특정 비율 유지

비율을 유지하면서 반응형 너비를 적용하는 방법은 CSS의 % 단위의 값과 padding-bottom만으로 구현 가능
퍼센트(%) 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이때 패딩이나 마진을 이용해서 퍼센트 값을 지정할 수 있다.
높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖에 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.

js

하단 메뉴 마우스 올렸을 시 서브메뉴 생성

      $('.group-nav').hover(function(){
        $('.all-nav').stop().slideDown();
      },function(){
        $('.all-nav').stop().slideUp();
      })

.hover 마우스 올렸을시 .all-nav(서브메뉴)가 .slideDown으로 .all-nav(서브메뉴)가 내려올 수 있다. .slideUp은 마우스가 벗어났을 시 .all-nav(서브메뉴)가 올라간다. 만약 .stop이 없다면 멈추는 기능이 없으므로 .stop을 .slideDown과 .slideUp 각 중간에 .stop을 넣음으로서 서브메뉴가 반복적으로 올라갔다 내려갔다 하는 것을 방지할 수 있다.

슬라이드

      var swiper = new Swiper(".best-slide", {
        loop:true,
        slidesPerView: 3,
        spaceBetween: 30,
        speed:2000,
        scrollbar: {
          el: ".sc-best .swiper-scrollbar",
          hide: false,
        },
        navigation: {
          nextEl: ".sc-best .next",
          prevEl: ".sc-best .prev",
        },
        
        
      });

slidesPerView:
spaceBetween: 슬라이드간 간격
loop: true 슬라이드를 무한루프
centeredSlides:true : 첫 번째 슬라이드 중앙배치
speed : pagination의 속도 1000당 1초
hide : flas, true : 숨기기 기능

HONGJIN

안녕하세요

이전 포스트

flex

다음 포스트

MIU MIU 리뉴얼

MIU MIU Renewal

Renewal

개념

semantic markup

태그자체에 의미가있는 시맨틱 태그로 마크업 구성

영역 클래스 작성

영역 구성

swiper

기본 레이아웃

1. css

2. html

3. js

마크업/CSS 개념 정리

list class 작성

a태그 link, btn

form method

blind

nav 태그

마크업

wrapper

inner

alt

header-top

header-bottom

main

footer

etc

CSS

웹 폰트 (Web Font)

font-face

css 속성

CSS로 이미지 특정 비율 유지

js

하단 메뉴 마우스 올렸을 시 서브메뉴 생성

슬라이드

flex

TOSS 리뉴얼

0개의 댓글