본문 바로가기

WebSite20

웹사이트 만들기 : 전체 사이트 유형01 레이아웃 : 전체 사이트 유형01 지금까지 카드 유형, 텍스트 유형, 이미지/텍스트 유형 등 다양한 유형의 레이아웃을 작업해 보았습니다. 이번에는 작업했던 유형들을 모두 한 곳에 모아 전체적인 사이트 한 페이지를 만들고, 미디어 쿼리까지 작업해 보도록 하겠습니다. HTML 소스 HTML 소스는 지금까지 작업한 모든 것들을 한 곳에 모은 것과 같습니다. 헤더 메뉴는 웹에서는 일반적인 메뉴 형태로, 모바일에서는 햄버거 메뉴로 작업해 주었습니다. 각 메뉴를 클릭했을 때, 각각의 위치로 이동할 수 있도록 각 영역은 section 태그로 작업해 주었습니다. 슬라이드 영역을 다시 작업해준 이유는 swiper를 사용하기 위함입니다. 드래그를 통한 이미지 슬라이드 효과를 사용하기 위해 swiper를 이용했고, swip.. 2022. 9. 14.

웹사이트 만들기 : 푸터 유형 레이아웃01 레이아웃 : 푸터 유형01 다음과 같은 푸터 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 푸터 영역은 먼저 footer__menu 클래스를 가진 div 박스 안에 메뉴의 개수만큼 6개의 div 박스를 만들어 주고, 그 안에 각각의 메뉴 제목, 목록을 작성해 주었습니다. 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 콘텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 mo0647. Portf.. 2022. 9. 5.

웹사이트 만들기 : 배너 유형 레이아웃01 레이아웃 : 배너 유형01 다음과 같은 배너 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 배너 유형은 아주 간단합니다. banner__inner 클래스를 가진 부모 div 박스에 백그라운드로 이미지를 삽입하고, 제목과 하위 메시지를 작성하면 완성입니다. 배너 영역 귀여운 댕댕 더 다양한 댕댕이는 유튜브로 보세요. yotube.com 배너 유형01 CSS 소스 /* bannerType */ .banner__inner { background-image: url(img/banner01_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; paddi.. 2022. 9. 5.

웹사이트 만들기 : 슬라이드 유형 레이아웃01 레이아웃 : 슬라이드 유형01 다음과 같은 슬라이드 유형의 레이아웃을 작업해 보도록 하겠습니다. 슬라이드 유형은 버튼을 클릭하면 다음 이미지로 넘어가는 레이아웃 유형입니다. 오늘은 스크립트 구현은 하지 않고, 레이아웃 과정만 작업하도록 하겠습니다. HTML 소스 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 CSS 소스 화살표에 대한 설명인 '이전 이미지', '다음 이미지' 텍스트는 ir 효과를 주어 숨김 처리해 주었습니다. blind 효과와 ir 효과는 웹 표준성 준수를 위해 사용한다는 점에서 공통점이 있지만, blind 효과는 이미지 없이 단순히 글자를 숨기.. 2022. 9. 5.

웹사이트 만들기 : 이미지 텍스트 유형 레이아웃01 레이아웃 : 이미지 텍스트 유형01 다음과 같은 이미지와 텍스트가 혼합된 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스 안에 텍스트와 첫번째 이미지, 두번째 이미지를 삽입할 div 박스를 3개 만들어 주었습니다. 텍스트 박스에는 제목, 설명, 내용 목록을 작성해 주었고, 이미지 박스에는 이미지와 링크를 작업해 주었습니다. 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 CSS 소스 세 개의 div 박스는 flex와 space-between.. 2022. 9. 1.

웹사이트 만들기 : 헤더 유형 레이아웃01 레이아웃 : 헤더 유형01 다음과 같은 헤더 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 헤더 유형은 header__wrap 안에 header__inner 박스를 만들어 주고, logo, menu, member의 세 부분으로 나누어 주었습니다. logo에는 웹사이트의 제목(로고), menu에는 다섯 가지의 메뉴, member에는 로그인 버튼을 만들어 주었습니다. web site 헤더 영역 슬라이드 영역 배너 영역 콘텐츠 영역 푸터 영역 로그인 CSS 소스 각각의 위치는 flex, space-between 속성을 이용해 설정해 주었습니다. 각각의 메뉴 버튼, 로그인 버튼에는 마우스를 대면 background 색상이 점차적으로 변화하는 hover 효과를 추가해 주었습니다. /* headerTy.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃03 레이아웃 : 텍스트 유형03 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 제목을 적어 주고, 카드 부분은 contents 박스를 만들어, contents 박스 안에 세 개의 card를 만들어 주었습니다. 각각의 카드는 내용 부분과 info 부분, 링크 부분으로 나누어 주었습니다. info 박스는 icon과 정보 부분으로 나누어 주었습니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달 전만 해도 여러 원인들로 인해 자존감이 밑바닥이었던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음 속으로 울고 싶다를 외쳤던 저였는데 이제는 조금이나마 이겨낼 수 있을 것 같네요. 다음에 선생님을 만났을 때는 많.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃02 레이아웃 : 텍스트 유형02 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 title과 contents 박스를 만들어준 뒤, section 클래스에 display: flex, space-between 속성을 추가해 레이아웃을 배치했습니다. title 안에는 sub title 상자, title, desc를 만들어 주었습니다. contents는 top과 bottom으로 나누어, 각각 두 개의 card가 배치되도록 작업해 주었습니다. TEXT TYPE02 귀여운 동물들 전문과정 세상의 귀여운 댕댕이... 귀여운 고양이... 귀여운 다람쥐... 귀여운 고라니... 귀여운 알파카... 귀여운 고릴라... 세상의 귀여운 댕댕이 귀, 귀, 귀 자로 끝나는 말.. 2022. 8. 31.

웹사이트 만들기 : 텍스트 유형 레이아웃01 레이아웃 : 텍스트 유형01 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스를 만들어 주고, 그 안에 text__card 클래스명을 가진 div 박스를 만들어 주었습니다. 총 6개의 카드를 만든 뒤, 각각의 카드 안에는 아이콘과 제목, 설명, 더보기 버튼을 추가해 주었습니다. 텍스트 유형01 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더 더보기 세상의 귀여운 야옹이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효.. 2022. 8. 30.

웹사이트 만들기 : 이미지 유형 레이아웃03 레이아웃 : 이미지 유형03 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 다섯 개이며, 이미지 위에 마우스를 hover하면 desc 박스와 소셜 아이콘들이 나타나는 애니메이션 효과도 추가해 주었습니다. HTML 소스 먼저, container-fluid라는 커다란 컨테이너를 작업해 주었습니다. 컨테이너 안에는 다섯 개의 article 태그를 넣어주었습니다. 각각의 article 안에는 이미지와 설명, sns에 해당하는 div 박스를 만들어 주었습니다. 첫 번째 article에는 이미지를 백그라운드 방식으로 삽입해 주었습니다. 그리드로 레이아웃을 작업했기 때문에, 이미지 깨짐을 방지하기 위해서입니다. 세계 7대 불가사리 경이로운 지구상의 7대 불가사리를 소개합니다. .. 2022. 8. 19.

웹사이트 만들기 : 이미지 유형 레이아웃02 레이아웃 : 이미지 유형02 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 세 개이며, 이미지 위에 마우스를 hover하면 '자세히 보기' 버튼이 나타나는 CSS 요소도 추가하였습니다. HTML 소스 먼저, 세 개의 article 태그를 만들어 각각 이미지를 첨부해 주었습니다. article 태그 안에서도 image 부분과 desc 부분을 나누어 작업해 주었습니다. 바다에 사는 생물들 바다에는 어떤 생물들이 살고 있을까요? TTUNG-E 자세히 보기 JingJing-E 자세히 보기 Jibgeo-Sajang 자세히 보기 CSS 소스 폰트는 지마켓 산스를 사용하였고, display: flex를 이용하여 세 개의 이미지를 가로로 배치하였습니다. overflow-hidde.. 2022. 8. 17.

웹사이트 만들기 : 이미지 유형 레이아웃01 레이아웃 : 이미지 유형01 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 카드 유형과 유사하게, 두 개의 카드를 만들어 이미지를 백그라운드 방식으로 삽입했습니다. 웹 표준 준수를 위해, a 태그에는 title을 추가해 주었습니다. 세상의 귀여운 댕댕이 강아지 종류는 매우 다양합니다. 하지만 하나같이 정말 귀엽습니다. 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 CSS 소스 폰트는 넥슨 Lv1 고딕을 사용하였고, display: flex를 이용하여 두 개의 이미지를 가로로 배치하였습니다. /* fonts */ @import url.. 2022. 8. 17.

웹사이트 만들기 : 카드 유형 레이아웃03 레이아웃 : 카드 유형03 이번에는 다음과 같은 3개의 카드가 있는 레이아웃 유형을 작업해 보도록 하겠습니다. CSS 소스 폰트는 에스코어 드림을 사용했고, 컨테이너 안에 3개의 카드를 만들어 display:flex로 가로 정렬을 해 주었습니다. blind 효과는 ir 효과와 마찬가지로, 글자가 눈에 보이지 않게 작업하지만, 스크린 리더기에서는 읽히게끔 만들어 웹 접근성을 준수하게끔 합니다. /* fonts */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } .. 2022. 8. 10.

웹사이트 만들기 : 카드 유형 레이아웃02 레이아웃 : 카드 유형02 이번에는 카드가 총 8개인 유형입니다. 다음과 같은 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 ir 효과는 글자를 시각적으로 보이지 않게 작업해주고 있지만, 스크린 리더기에서 글자가 읽히게 해 줌으로써 웹 표준을 준수할 수 있습니다. /* 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; } img { width: 100%; } h1, .. 2022. 8. 9.

웹사이트 만들기 : 카드 유형 레이아웃01 레이아웃 : 카드 유형01 다음과 같은 카드 유형의 레이아웃을 작업해 보도록 하겠습니다. 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; } /* common */ .container { width: 116.. 2022. 8. 8.

레이아웃(Layout) 유형05 레이아웃05 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow:hidden을 설정합니다. 3. clearfix를 설정합니다. 가장 안정적인 방법입니다.. 2022. 7. 29.

레이아웃(Layout) 유형04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 작업해 보도록 하겠습니다. 컨테이너(Container)를 이용한 레이아웃 배치할 요소들을 감싸는 부모 요소를 컨테이너(container)라고 합니다. 컨테이너를 이용해 레이아웃을 만드는 예시입니다. inherit 속성을 사용하면 자식 요소에게 스타일 속성을 상속할 수 있습니다. *{ margin: 0; padding: 0; } #header{ height: 100px; background-color: #E0F2F1; } #nav{ height: 300px; background: #80CBC4; } #section{ height: 580.. 2022. 7. 29.

레이아웃(Layout) 유형03 레이아웃03 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

레이아웃(Layout) 유형02 레이아웃02 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 29.

레이아웃(Layout) 유형 01 레이아웃01 레이아웃(layout)이란 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업을 의미합니다. 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 매우 중요한 요소입니다. CSS로 레이아웃 작업을 하는 방법에는 3가지가 있습니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다. float 속성을 이용한 레이아웃 'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다. 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 .. 2022. 7. 25.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바