본문 바로가기

웹사이트 만들기4

웹사이트 만들기 : 배너 유형 레이아웃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 소스 먼저, 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.

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

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바