본문 바로가기

레이아웃17

웹사이트 만들기 : 푸터 유형 레이아웃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 소스 헤더 유형은 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.

웹사이트 만들기 : 이미지 유형 레이아웃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.

CSS : 미디어쿼리(media query) 미디어쿼리 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 IPhone X 375 812 IPhone 6, 7, 8 375 667 IPhone 6, 7, 8 plus .. 2022. 8. 15.

HTML : 구조 관련 요소 구조 관련 요소 기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시멘틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 main, nav, section, article, aside, header, footer 등 다양한 구조 관련 요소가 새롭게 추가되었습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요 기사 광고 경기도 안산시 단원구 고잔동 어딘가 031)234-5678 mo0647@naver.com 저작권이 뭐지? 결과보기 구조 관련 요소를 사용하여도 HTML만을 이용해 작업하면, 레이아웃이 나타나지 않습니다. CSS로 스타일 속성을 추가해 .. 2022. 8. 15.

웹사이트 만들기 : 카드 유형 레이아웃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

광고 준비중

티스토리툴바