본문 바로가기

Site 제작15

사이트 제작 - 완성본 / 반응형 사이트 만들기 합본(진행중) 이때까지 배운 유형들을 활용하여 사이트를 만들었습니다. 원본 사이트 보기 원본 소스 보기 과정 1. 피그마로 레이아웃을 만듭니다. 2. 이때까지 만들어둔 유형들을 조합하여 사이트 코딩을 합니다. 각각의 유형별 코딩 방법은 링크를 참조해주세요. 1. 헤더 유형 2. 슬라이드 유형 3. 이미지 유형 4. 이미지/텍스트 유형 5. 카드 유형 6. 배너 유형 7. 텍스트 유형 8. 푸터 유형 또한 html과 css 소스 역시 소스보기를 통해 확인해주세요! 3. 반응형 작업을 합니다. 다른 종류의 디바이스에서도 사이트가 잘 작동할 수 있는지 확인하고 반응형 작업을 해줍니다. 3-2. 헤더가 깨지는 문제 발생 화면 크기를 줄였을 때 헤더의 글씨가 깨지는 문제가 발생합니다 문제 해결을 위.. 2022. 9. 19.

08. 푸터 유형 1 푸터 유형 푸터 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 푸터 영역 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 웹표준 사이트 2022 Webstoryboy. Portfolio is Power All rights reserved. CSS css 소스입니다. /* gray */ .gray { background-color: #f5f5f5; } /* .. 2022. 9. 6.

07. 배너 유형 1 배너 유형 웹사이트 배너 유형입니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. class="blind">배너 영역 class="title">제목 영역 내용내용내용이랍니다.내용어케길게써 href="#" title="새 페이지 열림">그거어케하는건데 class="small">배너 유형01 CSS css 소스입니다. /* banner */ .banner__inner { background-image: url(../bannerType/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; c.. 2022. 9. 6.

06. 슬라이드 유형 1 슬라이드 유형 웹사이트 슬라이드 유형입니다. 이번에는 아이콘에 이미지 스플라이트 기법과 ir효과를 적용하였습니다. 원본 사이트 보기 원본 소스 보기 HTML html 소스입니다. 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히보기 사이트보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS css 소스입니다. /* slider */ .slider__inner { margin-top: 40px; } .slider {} .slider__img { background: url(../site1/assets/img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .. 2022. 9. 6.

05. 이미지/텍스트 유형 1 이미지/텍스트 유형 01 이미지/텍스트 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothi.. 2022. 9. 1.

04. 헤더 유형 1 헤더 유형 01 헤더 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. Web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 CSS css 소스입니다. figma로 설정해놓은 레이아웃이나 zaplin을 보며 적절하게 css를 설정해줍니다. /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding.. 2022. 9. 1.

03. 텍스트 유형 3 텍스트 유형 03 텍스트 유형 레이아웃 사이트입니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 🍞Youcodein 베이커리 후기🥐 우리 베이커리 손님들의 진짜 100% 리얼 후기들입니다. 최고의 베이커리. 한국, 아니 우주에서 가장 맛있는 빵들입니다. 사장님이 정말 정성을 담아 빵을 만드는 게 보입니다. 제가 가장 좋아하는 빵은 슈크림인데요 바삭한 빵과 달콤하면서도 깊은 맛의 크림이 환상의 조합입니다. 요 슈크림이 아주 미X..녀석입니다 박선혜 22. 08. 31 자세히 보기 친구가 추천해서 소금빵 먹어봤는데 너무너무 맛있었어요! 어쩜 이렇게 맛있는지 제가 먹어본 소금빵중 제일 맛있었어요~ 다음에 또 가서 사먹으려구.. 2022. 9. 1.

03. 텍스트 유형 - 2 텍스트 유형 02 텍스트 유형 레이아웃 사이트입니다. 이번 사이트는 이전 사이트와는 달리 아이콘과 텍스트로만 이루어져 있습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. GOOD BREAD 빵을 더 맛있게 먹자! 평소에 빵을 즐겨 드시나요? 빵을 더 맛있게 즐기는 방법들을 지금 이 자리에서 소개해드립니다! 그냥 먹는다 정말 맛있는 빵은 어떠한 기교를 부리지 않고 먹어도 맛있습니다. 순수한 빵을 맛보시면 이 말의 의미를 알게 될 것이라 자신합니다. 구워서 불의 발견은 인간에게 아주 혁명적인 일이었습니다. 그리고 그 불로 우리는 빵을 구워먹는 기적을 행할 수 있었습니다. 크림/잼과 그냥 빵만 먹기 심심하다면? 크림이나 .. 2022. 8. 31.

03. 텍스트 유형 01 텍스트 유형 01 텍스트 유형 레이아웃 사이트입니다. 이번 사이트는 이전 사이트와는 달리 아이콘과 텍스트로만 이루어져 있습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 텍스트 유형01 🍞빵을 맛있게 먹는 방법🥐 그냥 먹는다 인간의 가장 기본적인 행위인 먹는다는 행위를 통해 빵이라는 음식물을 섭취해봅시다. 공복일 시 더욱 맛있습니다. 더보기 구워서 먹는다 불의 발견은 인간에게 아주 혁명적인 일이었습니다. 그리고 그 불로 우리는 빵을 구워먹는 기적을 행할 수 있었습니다. 더보기 얹어서 먹는다 그냥 빵만 먹기 심심하다면? 크림이나 잼을 얹어서 드세요! 달콤하고 고소한 맛을 추가할 수 있어요! 맛있게 드세요~ 더보기 커피.. 2022. 8. 30.

02. 이미지 유형 - 3 이미지 유형 03 이미지 유형 레이아웃 사이트입니다. 이번 사이트는 flex로 작업했던 사이트와는 다르게 grid를 사용하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 귀엽고 멋진 동물들 동물을 사랑합시다. 저는 동물을 정말 사랑합니다. 귀엽고 멋진 동물들을 만나보세요. 자연의 경이로움에 감탄하게 될 것입니다. 귀여운 앵무새 썬코뉴어는 정말 귀엽습니다. 호기심이 많고 사람을 좋아하는 종이기에 많은 사람들의 반려 앵무로 길러지고 있습니다. 너무 귀여워요 짱 페이스북 페이지이동 페이지이동 페이지이동 페이지이동 귀여운 여우 여우는 정말 귀엽습니다. 너무 귀여워서 눈물이 나요. 여우 유튜버가 있다는 걸 아시나요? 그거.. 2022. 8. 21.

02. 이미지 유형 - 2 이미지 유형 2 이미지 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. BEST 소품샵 다양한 소품샵을 가 본 사람이 뽑은 최고의 소품샵 BEST3 class="image__box"> 내가만든 기린키링 href="" class="more" title="자세히보기">자세히보기 class="image__box"> 자그마한 인테리어방 href="" class="more" title="자세히보기">자세히보기 class="image__box"> 오늘의 감성 href="" class="more" title="자세히보기">자세히보기 CSS css 소스입니다. figma로 .. 2022. 8. 18.

02. 이미지 유형 - 1 이미지 유형 1 이미지 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리 꾸미기 당신만의 멋진 기록장, 개성있는 다이어리를 만들어보세요! 당신의 기억들 기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요. 훗날 당신의 추억을 읽고 기뻐할 당신의 얼굴을 상상하세요! 자세히 보기 당신의 추억을 당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티커를 붙이세요. 그림을 그리세요. 당신의 추억을 장식하세요. 적절한 장식은 감정을 실감나게 표현해줍니다. 마음에 드는 스티커나 그림으.. 2022. 8. 18.

03. 카드 유형 - 3 카드유형 3 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리의 세계 Write 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 이미지가 없어도 멋지게 다이어리를 꾸밀 수 있답니다. 그림을 그리지 못한다고 해도, 보여줄 이미지가 없다고 해도 겁먹지 말고 다이어리 꾸미기를 시도하세요 예쁘고 멋진 다이어리로 다른사람들의 마음을 사로잡아요 Writelove 9 Resources Write 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보세요! 손글씨를 이용하여 당신의 다이어리를 예쁘게 꾸며보.. 2022. 8. 11.

02. 카드 유형-2 카드유형2 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 멋진 앵무새를 보세요🦜 화려한 앵무새의 광기, 폭력성, 그리고 귀여움을 알리려고 합니다. 사람들이 뭐라고 할 때도 있지만 그런 부분까지 정말 귀여운걸요 예쁜 우리 앵무새들의 매력에 빠져보세요. 청금강청금강청금강청금강청금강 멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다. 화려한 그 모습을 보면 모두 앵무와 사랑에 빠지게 될 것입니다. 더보기 목도리앵무 멋진 앵무새들 생활을 보세요. 청금강은 사람들이 알고 있는 대표적인 앵무새입니다. 화려한 그 모습을 보면 모두 앵무.. 2022. 8. 10.

01. 카드 유형-1 카드유형 카드 유형 레이아웃 사이트입니다. html과 css로 작업하였습니다. 원본 사이트 보기 원본 소스 보기 레이아웃 설정 figma로 그리드와 사이트의 레이아웃을 잡습니다. HTML html 소스입니다. 다이어리 꾸미기 당신만의 멋진 기록장, 개성있는 다이어리를 만들어보세요! 멋진 글을 적어보세요. 어떠한 글이 멋진 글이라고 정확히 정할 수는 없습니다만 당신이 쓰는 글이라면 어떤 글이든 멋질 거예요! 연필을 들고 종이에 적어볼까요? 더 자세히 보기 당신의 추억을 기록하세요 기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요. 더 자세히 보기 당신의 추억을 장식하세요 당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티.. 2022. 8. 9.

이전 1 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바