클론코딩4 HTML과 CSS로 구글 메인 페이지를 만들어보자! 3 https://conquer-it.tistory.com/115 ↑↑ 메인화면까지 다 만들었으니까 마지막으로 footer부분을 만들 차례이다. 1. 레이아웃 생각해보기 큰틀 안에서 우선 위아래 초록색 박스처럼 나누고 아래는 파란색 박스로 나누면 될 듯 하다. 2. 큰 틀부터 꾸미기 메인화면 바로 다음 footer영역을 추가했는데 아래처럼 footer가 중간에 들어가서 일부러 footer와 메인화면 사이에 화면 채우기용 div를 추가해 주었다. footer영역 footer부분을 윗줄, 아래줄 두 부분으로 나눴고 아래줄을 다시 두 부분으로 나눠 ul를 사용했다. 대한민국 광고 비즈니스 검색의 원리 개인정보처리방침 약관 설정 3. CSS로 꾸며주기 4. 완성 [비교샷] 5. footer부분 반응형으로 만들기 구.. 2022. 7. 26. HTML과 CSS로 구글 메인 페이지를 만들어보자! 2 https://conquer-it.tistory.com/114 ↑↑ 헤더부분은 다 만들었으니까 메인 화면을 만들 차례이다. 1. 메인 화면의 모든 레이아웃 생각해보기 뭐...flex 사용한다고 한다면 대충 이렇게 짜면 되지 않을까? 2. 구글 로고 만들기 이미지를 가져다 써도 되지만 그냥 내가 만들기로 했다. 그리고 클릭했을 때 링크 걸린게 없기 때문에 a태그는 넣지 않았다. h1태그 안에 한글자씩 span 태그에 넣어 만들었다 (G대신에 K 넣고 싶어서 넣었다.) Koogle (폰트도 바꿔야되는데) 3. 검색창 만들기 일단 HTML을 작성해보면 form태그 안에 모든 요소를 넣었다. CSS를 적용하지 않으면 이렇게 나오는데 CSS를 적용해서 정렬하고 form태그의 border 주고 텍스트 박스의 bor.. 2022. 7. 25. HTML과 CSS로 구글 메인 페이지를 만들어보자! 1 오늘 만들어 볼 것은 구글 메인 홈페이지이다. 뭔가 큰 기업치고 디자인이 단순해 보여서 한번 도전해보고 싶다는 생각이 들었다. 그리고 아래 footer부분만 반응형으로 처리하면 될거 같아 시작했다. 1. 일단 레이아웃을 나눠보자! 이게 아닌거 같긴 하지만 일단 나눠봤다... 2. 타이틀부터 만들기 Google 정보 스토어 Gmail 이미지 k [CSS 코드] /* ----------------------전체 해당--------------------------- */ body{ margin: 0; } li{ list-style: none; display: inline; } a{ text-decoration: none; font-size: 15px; } a:hover{ text-decoration: unde.. 2022. 7. 24. HTML과 CSS로 Spotify 메인 홈페이지를 만들어보자! 스포티파이 홈페이지를 먼저 보여주자면 이렇게 생겼다. 생각보다 단순하게 생겨서 한번 시도를 해 봤다. 일단 위 사진처럼 크게 3개의 레이아웃을 만들어서 그 안에 차곡차곡 작은 레이아웃을 짜야겠다고 느끼게 되었고 많은 생각을 한 후 만들기 시작했다. (하나하나 만들 때마다 과정을 써야되는데 완성할 생각만 하다보니 중간 과정 쓰는걸 까먹었다...) [HTML 코드] Spotify 프리미엄 지원 다운로드하기 | 가입하기 로그인하기 다양한 해외 히트곡과 국내 인기 음악을 들어보세요 1개의 모바일 기기에서 7일 동안 무료로 Spotify Premium 멤버십을 이용해보세요. 결제세부 정보는 필요하 지 않습니다. 다운로드 하기Google Play App Store에서 다운로드 하기 약관이 .. 2022. 7. 23. 이전 1 다음
