오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 0. 코드 준비 [HTML+CSS] 무작정 따라 만들어보기(쿠팡 footer만들기 1편) HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 time-map-installer.tistory.com 언제나 시작할 때 코드를 입력할 공간을 준비를 해 두는 것이 좋다 1. 헤더 나누기 총 세 가지 요소가 들어갈 것이기에 3등분을 해 둔다 #header { border: 1px solid red; height: 20%..

주로 HTML과 CSS를 웹페이지를 만드는 데에 많이 쓰곤 한다 그리고 이 두 파일을 연동하는 방법은 생각보다 간단하다 1. main.html 생성 2. style.css 생성 3. 안녕하세요 5. style.css에 속성 아무거나 지정 후 작동되는 지 확인 body{ color: aqua; }

지난 글에서는 기본적인 layout을 비슷하게 만들어 보는 것까지 진행하였다 이번 글에서는 내용을 모두 채워넣는 것을 목표로 하겠다 1. 내용 집어넣기(input text footer_top) 우선, 가장 윗줄부터 텍스트로 되어있는 글을 전부 집어넣을 예정이다 지금까지 진행된 코드 보기 main.html input about header input about content 회사소개 | Investor Relations | 인재채용 | 입점/제휴문의 | 공지사항 | 고객의 소리 | 이용약관 | 개인정보 처리방침 | 쿠팡페이 이용약관 | 쿠팡페이 개인정보처리방침 | 신뢰관리센터 | 제휴마케팅 | 광고안내 Global Site Coupang Taiwan style.css #header{ height: 20%;..

HTML, CSS를 그 누구보다 더 빠르고 정확하고 생동감 있고 실감 나게 체험을 해 보고 싶었던 나는 일단 유명한 브랜드의 웹 페이지를 직접 따라 만들면서 이게 이런 거구나 라는 감정을 느껴보고 싶었다 그래서 갑자기 선택해본 실습 예정 작품은 아래와 같다 이 실습을 진행하면서 하게 될 작업들은 다음과 같다 모양 최대한 근접하게 만들기 링크들은 미 구현할 예정 반응형으로 만들어버릴 예정 1. 구역 나누기(devide whole page) 우선, 웹페이지를 구현하기 위해 형식상이지만 구역을 나누려고 한다 tag를 통해 header, content, footer로 나누어 구현하겠다 눈으로 대략 재었을 때 약 30% 정도면 되겠다 싶어서 다음과 같이 나눴다 header 20% content 50% footer..

인터넷을 돌아다니며 웹 개발에 대한 정보를 얻던 중, 어떤 사이트에 들어가 잠깐 맛을 보았던 사이트이다 분명 경험 한 시간은 얼마 되지 않았지만 각잡고 여기서 학습하면 상당히 도움이 될 것 같다고 느낀 사이트이다 바로 Mdn MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 1. Theme 가장 처음 눈에 띄었던 것은 테마이다 개발자의 덕목 중 하나는 블랙테마라고 했던가 장시간 개발 / 학습 시에 발생하는 눈의 피로를 줄여주는 그런 테..