SITE15 완성 사이트 사이트 완성본 이번에는 기존 사이트 작업을 통한 사이트 완성본를 보여드리도록 할게요. 어느정도 CSS 작업과 반응형 작업을 해봤습니다. headerType 기본적인 구성으로 코드를 짜주고, 반응형 작업도 해줍니다. 코드 보기 Pottery Header 22AW Lookbook NEW ARRIVALS HQ Service Pottery Login .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-bottom: 1px solid #ccc; position: fixed; left.. 2022. 9. 14. 푸터 타입 01 푸터 타입 구조 01 사이트에 기초적인 구조를 가진 푸터 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 Pottery. All rights reserved. Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. ... 2022. 9. 5. 배너 타입 01 배너 타입 구조 01 사이트에 기초적인 구조를 가진 배너 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 배너 영역 Pottery 저희는 비즈니스 캐주얼을 지향하고 있으며, 언제 어디서든 편안한 룩을 지향합니다. 배너 유형 01 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #f.. 2022. 9. 5. 슬라이드 타입 01 슬라이드 타입 구조 01 사이트에 기초적인 구조를 가진 슬라이드 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 또한, 이미지 스프라이트 효과를 사용하였습니다. .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg0.. 2022. 9. 5. 이미지 텍스트 타입 01 이미지 텍스트 구조 01 사이트에 기초적인 구조를 가진 이미지 텍스트 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 유용한 사이트 살펴보기 이미지 텍스트 유형 01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다. /* fonts */ @import url('https://webfontw.. 2022. 9. 1. 헤더 타입 01 헤더 타입 구조 01 사이트에 기초적인 구조를 가진 헤더 타입 구조를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. website 헤더 영역 슬라이드 영역 배너 영역 컨테이너 영역 푸터 영역 로그인 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /.. 2022. 9. 1. 텍스트 타입 03 텍스트 타입 03 이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. Review 이용하신 분들에 후기입니다. 이 디자인 나쁘지 않은 것 같아요! 첨에는 살까 말까 망설여 졌는데 나쁘지도 않고 계속 입다보니깐 맘에 듭니다. 역시 믿고 사길 잘했네여! 안현규 지나가는 시민 자세히 보기 아 이번에 춤을 춰야하는데, 뭘 춰야 할 지... 이거 떨어질거라 생각을 못해봤는데, 시간을 다시 돌릴 수 있을까라고 생각을 해봅니다. 첫 데뷔를 이렇게 하다니 너무 좋네여! 이강현 마피아 자세히 보기 오오! 너무 맘에 들어요. 이거 .. 2022. 8. 31. 텍스트 타입 02 텍스트 타입 02 이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해줍니다. About us Steady Every Wear 지속적인 가치를 지닌 라이프 스타일 제품 을 만들기 위해 노력합니다. Brand 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다. 브랜드의 플랫폼을 통해 영감을 줍니다. Tpo 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다. 브랜드의 플랫폼을 통해 영감을 줍니다. 원단 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다. 브랜드의 플랫폼을 통해 영감을 줍니다. ADVOCA.. 2022. 8. 31. 텍스트 타입 01 텍스트 타입 01 이번 시간에는 텍스트 타입 사이트를 만들어 봤습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. 텍스트 유형 POTTERY 포터리 우리는 옷을 만들기 위해 최선의 노력을 다합니다. 특정한 상황에 필요한 제품을 구상하고, 정말 그 상황에 필요한 것일지 생각합니다. 더보기 TPO 우리는 옷을 만들기 위해 최선의 노력을 다합니다. 특정한 상황에 필요한 제품을 구상하고, 정말 그 상황에 필요한 것일지 생각합니다. 더보기 원단 우리는 옷을 만들기 위해 최선의 노력을 다합니다. 특정한 상황에 필요한 제품을 구상하고, 정말 그 상황에 필요한 것일지 생각.. 2022. 8. 30. 이미지 타입 03 이미지 타입 03 사이트에 기초적인 구조를 가진 이미지 타입 사이트를 만들어 봅시다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. 추가적인 작업으로 image__sns a 영역에 ir를 사용해줍니다. wynd 사전적 의미로 골목길이라는 뜻을 가지고 있습니다. About us 슬로우한 캐주얼 웨어 icon icon icon icon icon Bearded Kid 다양성의 존중이라는 슬로건 icon icon Fall Break 가벼운 휴식 뒤 리프레시되는 느낌의 의류 icon icon Pottery 현대사회에 알맞는 유니폼을 제안 icon icon Shirter .. 2022. 8. 21. 이미지 타입 02 이미지 타입 02 사이트에 기초적인 구조를 가진 이미지 타입 사이트를 만들어 봅시다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. Moon 밤하늘의 하나의 빛줄기 달빛 자세히 보기 달빛 자세히 보기 달빛 자세히 보기 Site CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. h2와 p는 전체 구역에 사용돼 코드 불안정한 가능성이 있기에, 해당 요소 css만 부여되는 >를 사용해줍니다. 또한 이번에는 image:hover 효과에 transform, transition를 부여했습니다. /* fonts */ @import url('https://we.. 2022. 8. 17. 이미지 타입 01 이미지 타입 01 사이트에 기초적인 구조를 가진 이미지 타입 사이트를 만들어 봅시다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. POTTERY ‘POTTERY’, 포터리라는 이름은 도자기를 의미합니다. POTTERY 시간에도 도자기는 그 본질이 변하지 않습니다. 우리는 도자기처럼 본질을 지키면서 시간에 따라 변하는 개개인의 삶에 집중하여 옷을 만듭니다. 자세히 보기 POTTERY 시간에도 도자기는 그 본질이 변하지 않습니다. 우리는 도자기처럼 본질을 지키면서 시간에 따라 변하는 개개인의 삶에 집중하여 옷을 만듭니다. 자세히 보기 Site CSS 사이트를 코딩.. 2022. 8. 17. 카드 타입 03 카드 타입 사이트 03 사이트에 기초적인 구조를 가진 카드 타입 사이트를 만들어 봅시다. 해당 코딩은 위 카드 3개만 만들었습니다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. Art Art Art is a diverse range of human activity, interpretation has varied greatly throughout history There is no generally agreed definition of what constitutes art, and its interpretation has varied greatly through.. 2022. 8. 10. 카드 타입 02 카드 타입 사이트 02 사이트에 기초적인 구조를 가진 카드 타입 사이트를 만들어 봅시다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. Steady Every Wear 지속적인 가치를 지닌 라이프 스타일 제품을 만들기 위해 노력합니다. 편안하고 자연스러운 디자인으로 일상 생활에 손이 자주 가는 제품을 지향합니다. Brand 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다. Brand 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 컬렉션을 제작합니다. Brand 디자인뿐만 아니라 미래 세대를 위한 지속 가능성을 고려하며 .. 2022. 8. 9. 카드 타입 01 카드 타입 사이트 01 사이트에 기초적인 구조를 가진 카드 타입 사이트를 만들어 봅시다. Site HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. section내에 각 태그에 이름을 부여해주며, articel 영역과 figure태그 내에 img를 사용줍니다. POTTERY ‘POTTERY’, 포터리라는 이름은 도자기를 의미합니다. 포터리 포터리는 현대사회에 알맞는 유니폼을 제안하고자 합니다. 과거의 유니폼은 한 집단에 소속된 특징을 보여주는 옷이라면, 현대의 유니폼은 개인의 라이프스타일입니다. 더 자세히 보기 TPO 우리는 옷을 만들기 위해 최선의 노력을 다합니다. 특정한 상황에 필요한 제품을 구상하고, 정말 그 상황에 필요한 것일지 생각합니다. 옷이 그 외의 상황입니다. 더 자세히.. 2022. 8. 8. 이전 1 다음
