일반 웹사이트에서 쉽게 볼 수 있는 이미지 슬라이드 효과를 만들어 보았다. 아무래도 스크롤보다는 대부분 웹사이트는 이미지 슬라이드 효과를 많이 사용한다는 것을 알 수 있다. 저는 슬라이드쇼를 만드는 데에 html, css, js 이렇게 3가지를 사용했고 자동과 수동 슬라이드 구현을 모두 적용해보았다. 이미지 슬라이드 효과 [HTML] HTML5 Support Tutorials References Exercises Videos SIGN IN HTML5 is? Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, accusantium ad quis provident obcaecati ex necessitatibus nobis similiq..

일상생활속에서 웹사이트를 사용하다보면 웹사이트의 사이즈에 따라 사이트 구도들의 변화들을 본 적이 있을 것이다. 웹페이지를 어느 정도 제작할 수 있게 되었다면 반응형 웹도 한 번 만들어보자. 아래 동영상은 이번 글의 주제인 반응형 웹의 영상이다. 우선 기본적으로 HTML과 CSS로 웹페이지 구도와 스타일을 만들어 놓았다. 웹페이지는 이전에 완성했거나 연습했던 페이지로 이어서 구현해 내면 된다. 우선 사이트의 전반적인 HTML과 CSS에 대한 코드는 맨 마지막에 첨부해 놓았으니 참고하면 좋을 것 같다. 그럼 반응형 웹을 만들어 보자. [CSS] 먼저 반응형 웹을 구현하기 위해 CSS에 미디어 쿼리를 사용했다. if조건문과 유사한 개념이라고 생각하면 이해하기 쉬울 것이다. @media (조건) { } 이런 구..

이전에 1편, 2편에서는 홈페이지 상단에 네비게이션링크 역할을 하는 와 홈페이지의 내용 및 정보들을 담당하는 을 만들어보았다. ' 만들기'

이전에 네비게이션링크를 담당하는 웹페이지 상단인 태그를 만드는 데에 이어서 페이지에 주요 내용을 담당하는 태그를 만들어 보자. 웹페이지의 상단을 만드는 부분에 대해 궁금하다면 간단한 웹페이지 만들기 -1 를 보고오자. [HTML] 위 코드는 태그의 전체코드이고 보기 쉽도록 아래에서 부분적으로 나누어 설명하겠다. 우선, 앞서 말했듯이 태그를 가장 부모로 사용하여 페이지에 주요 내용을 담았다. 그리고 소제목과 그에 대한 간단한 내용을 각각 태그로 사용하였다. 위 HTML코드의 CSS 코드이다. 디자인 부분을 제외하고, 내용을 페이지의 중앙에 맞추기 위해 두 div 클래스에 text-align을 적용하였다. [HTML] 웹페이지 안에 가격표 박스가 나와있는 부분에 대한 코드이다. 태그와 태그를 t사용하였다 그..

웹페이지를 어떻게 작업을 했는지 크게 , , 로 나누어서 해보겠다. 이번 1편은 모든 웹사이트의 페이지 상단에 위치하며 다른 페이지로 이동을 하고 메뉴들을 나열해놓는 '네비게이션 링크'인 를 먼저 만들어 보겠다. [HTML] 태그에 들어가기 앞서 태그에 CSS와 디자인을 위해 Font와 Icon을 사용할 수 있도록 각각 외부 소스를 연결해놓았다. (Icon은 'fontawesome'을 사용하였고, font는 'googlefont'를 사용하였다) 그리고 이제 사이트의 로고 및 이름과 메뉴들을 만들어보기 위해 로 들어가보자. 우선 상단은 맨 처음에 말했던 바와 같이 일반적인 웹사이트처럼 다른 페이지로 연결이 되는 네비게이션 역할과 메뉴들을 설정해 놓는 태그를 사용하였다 태그 안에는 태그를 2개 사용하여 사이..