사이트 - 반응형 지금까지 다양한 유형의 사이트를 만들었습니다. 여러 유형을 합친 사이트를 만들고, 반응형으로 만드는 작업을 해보았습니다. 스와이퍼 프리코드를 이용해서 슬라이더를 작업했습니다. Swiper는 다양한 방식의 슬라이더 코드가 공개되어있습니다. Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. HTML 소스 header, footer 외의 유형들은 메인으로 묶어서 진행하였으며, 지금까지 진행한 유형들은 모은 코드입니다. 슬라이드 유형의 경우 swiper를 사용함에 따라 코드를 수정하였습니다. HTML 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가지 카드 영역 바로가기 배터 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바..
COOKIT 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML COOKIT 소개 sub-menu1 sub-menu1 sub-menu1 sub-menu1 COOKIT 메뉴 sub-menu2 sub-menu2 sub-menu2 sub-menu2 리뷰 sub-menu3 sub-menu3 sub-menu3 sub-menu3 이벤트 sub-menu4 sub-menu4 sub-menu4 sub-menu4 MY쿡킷 sub-menu5 sub-menu5 sub-menu5 sub-menu5 우리집도 COOKIT 배송이 되나요? 배송이 가능한지 알려드려요 배송지 검색 7월 30일(화)에 받을 수 있어요 오전 7시까지 주문하시면 다음날 배송됩니다. 63:28:32 남은 시간 실시간 베스트..
롯데월드 사이트 웹디자인 기능사 실기 연습 원본 소스 보기 원본 사이트 1-1 코드보기 HTML 즐길거리 요금/무대혜택 참여프로그램 이용가이드 소통서비스 fff css /* reset */ * { margin: 0; padding: 0; } li { list-style: none; } /* 지정된 지정색이 333 */ a { color: #333; text-decoration: none; } /* clearfix 외워두기 (height 0되는 것 막기 위해 header, ul .clearfix) */ .clearfix::before, .clearfix::after { display: block; content: ""; clear: both; } /* layout */ #wrap { width: 1000p..
사이트 만들기 : 슬라이드 유형01 슬라이드 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../site1/assets/img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-col..
사이트 만들기 : 푸터 유형01 푸터 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .footer__menu { display: flex; margin-bottom: 70px; } .footer__menu>div { width: 16%; } .footer__menu>div h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; display: block; } .footer__right { border-top: 1px solid #d9d9d9; text-align: ..
사이트 만들기 : 배너 유형01 배너 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .banner__inner { background-image: url(../site1/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #fff; } .banner__inner .title { font-size: 50px; line-height: 1; font-weight: 300; margin-bottom..
사이트 만들기 : 이미지/텍스트 유형01 이미지/텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weig..
사이트 만들기 : 헤더 유형01 헤더 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal..
사이트 만들기 : 텍스트유형03 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-decoration: none; color: #fff; } /* common */ .container { width..
사이트 만들기 : 텍스트유형02 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #textType { width: 1160px; marg..
사이트 만들기 : 텍스트유형01 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: norma..
사이트 만들기 : 이미지유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. grid를 사용하였으며, grid-gap 셀 사이의 간격, grid-template-rows 행 배치, grid-template-columns 열 배치 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gowun { font-family: GowunBatang; font-weight: 400; } /* reset */ * ..
사이트 만들기 : 이미지유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-d..
사이트 만들기 : 이미지유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 이미지 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } i..
사이트 만들기 : 카드유형03 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 컴포넌트를 만들어서 원본을 이용하여 작업하면 중복되는 작업을 간단히 할 수 있습니다. 컴포넌트 단축어 ⌥⌘ K 컴포넌트 만들기 ⌥⌘ B 컴포넌트에서 분리하기 (복제한 컴포넌트는 일반 프레임 혹은 레이어로 돌아감, 메인 컴포넌트는 해제) ⌥ 컴포넌트 교체하기 (컴포넌트끼리만 가능) CSS nth-child()를 사용해서 필요한 곳에만 부여합니다. 활용하여 중간에 생기는 선을 만들었습니다. .card__inner .card:nth-ch..
사이트 만들기 : 카드유형02 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 컴포넌트를 만들어서 원본을 이용하여 작업하면 중복되는 작업을 간단히 할 수 있습니다. CSS '>' 를 사용하여 바로 아래 자식요소만 적용시킵니다. display: flex;를 사용하여 정렬을 합니다. justify-content: space-between; 으로 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. ir 효과 ir효과는 이미지 대체 효과입니다. alt와 같이 웹표준 준수를 위해 사용됩니다. 사진이 있..
사이트 만들기 : 카드유형01 사이트의 유형은 다양합니다. 메뉴, 배너, 이미지, 슬라이드, 동영상 외에도 많은 유형이 있지만, 그 중에서 카드 유형에 대해 알아봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. 디자인의 틀을 잡아줍니다. CSS '>' 를 사용하여 바로 아래 자식요소만 적용시킵니다. display: flex;를 사용하여 정렬을 합니다. justify-content: space-between; 으로 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'..
