따라쟁이5 HTML과 CSS로 넷플릭스(Netflix) 클론 코딩해보기 1 https://www.netflix.com/kr/ 넷플릭스 대한민국 - 인터넷으로 시리즈와 영화를 시청하세요 스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 다양한 디바이스에서 영화와 시리즈를 마음껏 즐기세요. www.netflix.com [선정 이유] 사진은 넷플릭스 홈페이지의 헤더부분(?)인데 백그라운드에 이미지가 사용되었고 가운데는 상대적으로 밝은 반면, 위 아래는 상대적으로 어두운 그라데이션 효과가 들어가 있다. 마침, 백그라운드에 이미지 넣는 법, 그라데이션 입히는 법을 오늘 배워서 이것을 활용할 수 있는 좋은 예가 될 것 같아 클론 코딩으로 선정하게 되었다. [첫번째로 할일] 헤더 부분의 영역을 지정해서 그 영역 안에 background에 이미지를 불러 와야한다. 넷플릭스는 width는.. 2022. 7. 29. 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. 이전 1 2 다음
