요번에는 회사정보나 사이트의 정보를 표기하는 공통 푸터부분을 만들어 보도록 하겠습니다. 만들 디자인은 아래와 같습니다. 간단한 연락처와 주소 그리고 copy부분을 작성하였습니다. html에 태그 작성하기 먼저 앞 포스팅에서 만들었던 소스 하단부위에 푸터영역을 추가해 주도록 하겠습니다. 아래와 같이 코드를 작성하였습니다. 회사소개 광고채널 파트너스 포트폴리오 고객센터 CUSTOMER CENTER TEL : 02-1234-5678 FAX : 02-1234-5678 EMAIL : keyup@keyup.co.kr (주)셀프 KEYUP | 대표이사 : 홍길동 | 사업자등록번호 : 123-45-4561 | 주소 : 서울 강남구 테헤란로1길 123, 1층 | 운영시간 : 09:00~18:00 | 휴무일 : 주말 및 ..

이번 포스팅에서는 공통 header 부분의 로고와, 클릭하면 펼쳐지는 nav 영역을 만들어 보려합니다. 먼저 아래의 이미지를 보시겠습니다. 위와 같이 네이베이션을 클릭하면 펼쳐지며 랜딩페이지의 메뉴가 보여지는 형태의 작업입니다. 어떻게 구현해야 할까요?? html에 태그 작성하기 먼저 앞서 준비된 소스에 추가로 header 영역의 태그를 입력해 주려합니다. 회사소개 광고채널 파트너스 포트폴리오 고객센터 에 class 명을 header라 주고 안쪽 태그들에게도 각각 logo, nav_btn 클래스를 주어 태그들의 이름을 정해 주었습니다. 이 class의 이름들을 이용하여 css와 js를 이용하여 네비게이션이 작동되도록 해볼 것 입니다. CSS 작성하기 위 작성된 html 의 클래스 명을 기반으로 css로 ..

2023.08.30 - [무작정 따라하기] - 무작정 따라하기 (랜딩페이지) Step.01 무작정 따라하기 (랜딩페이지) Step.01 HTML, CSS, javascript 에 관한 기초 지식이 없으시면 이전 글을 한번 보신 후 어느정도 이해하시고 진행하시는 것을 추천드립니다. 2023.08.25 - [Web/html] - 01.HTML의 개요 01.HTML의 개요 HTML은 웹 페이지를 selfda.life 이제부터 앞 글에서 보여준 디자인을 토대로 코딩을 진행해 보겠습니다. 피그마를 통해 디자인 파일을 올려두었습니다. https://www.figma.com/file/idk8NTy07wq9iUvKTboupH/design001?type=design&node-id=0%3A1&mode=design&t=js..

HTML, CSS, javascript 에 관한 기초 지식이 없으시면 이전 글을 한번 보신 후 어느정도 이해하시고 진행하시는 것을 추천드립니다. 2023.08.25 - [Web/html] - 01.HTML의 개요 01.HTML의 개요 HTML은 웹 페이지를 만드는 데 사용하는 마크업 언어이며 매우 쉽게 배울 수 있습니다. Html에 들어가는 이미 정의된 태그와 속성을 통해 쉽게 하실 수 있습니다. html을 시작해 보겠습니다. 준비된 selfda.life 하지만 걱정 마세요!! 아무런 지식이 없더라도 그대로 따라하시기만 하면 됩니다. 직접 디자인한 랜딩페이지를 처음부터 코딩하는 것을 보여드리기 위하여 급하게 디자인을 하였습니다.! 급하게 만든 디자인이라 다소 엉성할 수 있으니 이부분은 양해 부탁드려요. ..