일단 저장해두면 굉장히 좋은 곳에 쓸 것 같은 기능이라 가져와 보았습니다 코드를 뜯어보면 동적인 애니메이션 관련 코드들에 대해 알 수 있기에 굉장히 의미있는 코드들이라고 생각합니다 seroSlide.html Welcome to Coda Let's play programming with HTML/CSS seroSlide.css body{ margin: 0; padding: 0; font-family: montserrat, sans-serif; background: black; } .animated-text{ color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #2980b9; pad..

오늘은 좌측에는 검색창, 중앙에는 로고, 우측에는 부가메뉴가 있는 헤더를 만들어보려 한다 우선 다음 글에서 기본적인 틀을 나눠둔 코드를 가져오도록 하겠다 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; }

회원가입 폼에대한 코드를 가공해 보았다 웹페이지에는 회원가입이 거의 필수적이다보니 가져와서 저장해두면 언젠가는 반드시 쓸모가 있을 것이라 생각한다 아이디확인 비밀번호 비밀번호 재확인 이름 생년월일 성별 -- 선택 -- 남자 여자 이메일 휴대전화 다중 선택 선택1 선택2 선택3 선택4 파일 제출 폼

지난 글에서는 기본적인 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..