본문 바로가기

Clone Coding16

숀할핀 사이트 클론 2 html DOCTYPE html> Hanoona I'm Hanoona a programmer. Hello I'm a web developer. I'm the founder of the HaNooNa. I like to watch Korean movies and verieties. My Skills Lorem & Ipsum Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros. Lorem Ipsum Dolor Lorem ipsum dolor sit amet, mauris sed c.. 2021. 7. 6.
숀할핀 사이트 클론 1 1. "My site" 이름의 폴더 만들기 2. index.html 파일 만들기 3. html backbone과 타이틀 만들기 4. css 폴더 만들기 5. html에서 css에 링크 걸기 6. favicon 만들기 - favicon 만들 수 있는 사이트에서 다운로드 하고 링크 걸기 7. 각각의 html element는 각 하나의 박스이다. 문구 위에 박스 만들기 8 아래 두 문구를 같은 박스에 넣기 - div 사용하는 이유 위 경우는 각각 박스가 만들어져서 2개의 박스가 따로 움직이게 된다. 이런 경우 div로 감싸주면 하나의 박스 안에 들어가게 된다. div는 css에서 사용하기 전까지 아무 기능이 없다. 9 바디 태그에 있는 마진 없애기 이미지와 텍스트 모두 가운데 정렬하기 h1 편집 h1에 wid.. 2021. 6. 26.
1 html 기본 골격 만들기 1 느낌표 ! 와 탭 눌러서 html 기본형 만들기 2 안에는 Spotify로 고쳐주기 3 Bootstrap 링크 걸어주기 bootstrap 링크는 getbootstrap.com에서 get started를 들어가면 나오는 css와 bundle 주소 복사해서 붙여넣기 한다. 3-1 css link는 head 안에 복사해서 붙여넣기 한다. 3-2 Bundle은 body에 script 안에 붙여넣기 한다. 4 자바스크립트파일 연결해주기 jquery 다운 안받고 구글CDN으로 연결해서 사용하기 최종결과물 2021. 6. 13.
13 끝. Footer 입력하기 결과 미리보기 footer에 내용 입력하기 Questions? Call 900 866 617 FAQ Help Center Account Media Center Investor Relations Jobs Redeem Gift Cards Buy Gift Cards Ways to Watch Terms of Use Privacy Cookie Preferences Coporate Information Contack Us Speed test Legal Test Netflix Originals (중간 결과물) 글자가 보라색이라 잘 안보임 css에서 효과 주기 footer { padding-top: 20px; color: #999; max-width: 1000px; } footer>p { margin: 0 0 30px.. 2021. 6. 12.
12 세 번째 섹션 탭 클릭시 글자,버튼,표 나오게 하기 결과 미리보기 section을 만들고 위는 div, 아래는 table을 만든다. div에 내용을 넣는다. table에 내용을 넣는다. 아이콘은 https://fontawesome.com/에서 무료 가입하고 무료 아이콘을 내 프로젝트와 연결해 사용한다. 가입하면 kit 주소를 주는데 head에 붙여넣기를 한다. 그리고서 원하는 아이콘을 검색하고 주소를 복사하여 테이블에 붙여넣기 한다. 테이블 헤드 내용 넣기 테이블 바디 내용 넣기 (중간 결과물) CSS로 디자인 편집하기 head 편집 #features #pickprice h2 { font-size: 22px; display: inline; 2021. 6. 11.
11 탭 클릭시 해당 문구, 버튼, 사진 보이게 하기 결과 미리보기 1 예시로 적어둔 기본 문구를 삭제하고 2 section에 클래스 추가 하기 3 위 column에 내용 넣기 (중간 결과물) 4 아래 columns 에 내용 넣기 Watch on your TV Smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blue-ray Watch instantly or download for later Available on phone and tablet, wherever you go. Use any computer Watch right on Netflix.com. (중간 결과물) 5 위 culumn에 있는 글자, 패딩, 마진 사이즈 조절하기 watchanywhere 섹션 h2글자 효과 주기 6 위 column과 아래 col.. 2021. 6. 8.
10 첫번째 섹션탭 클릭시 문구,버튼,사진 보이게 하기 결과물 미리보기 1 html에서 기존에 있던 문구를 지우고 그 자리에 내용을 입력한다. 두 개의 columns으로 구성되고 하나에는 문구와 버튼이 다른 하나에는 사진이 들어간다. 2021. 6. 8.
9 섹션 탭 클릭시 빨간줄 보이고, 해당 탭 아래 내용 나오게하기 목표 메인 페이지 아래 3가지 섹션탭을 가로 정렬로 만들고 각 탭을 클릭하면 해당 내용이 뜨게 하기. 결과 미리보기 1 자바 스크립트 폴더와 파일 만들기 아이콘 클릭시 뭔가 뜰려면 자바 스크립트에서 해야한다. Netflix Clone 오른쪽 버튼 눌러서 새폴더 만들고 나서 다시 오른쪽 버튼 눌러서 새 파일 만든다. 이름을 app.js로 한다. 2 html에서 js 스크립트 입력 jquery 많이 쓰는 라이브러리 연결 app.js 스크립트 입력, app.js 폴더와 연결 3 js에 내용 입력 $(function() { var tabs = $('#features > nav a'); var tabsContent = $('#features > nav > article > section'); tabs.click(.. 2021. 6. 6.
8 3개의 Features와 flex box 만들기-No commitments Cancel online at anytime, watch anywhere, Pick your price 결과물 미리보기 1 아이콘과 텍스트 넣기 html에 features 만들기 아이콘은 처음엔 이미지로 했는데, 마우스 올려도 색이 변하지 않아 아이콘 받아와서 사용하게 되었다. https://fontawesome.com 의 폰트를 사용하였다. 일단 가입을 해야하고, 가입하면 kit 주소를 주는데 kit주소를 복사해서 head 부분에 넣는다. 아이콘을 검색한 후 아이콘 주소를 원하는 위치에 복사해서 붙여준다. 아이콘의 크기를 바꿀려고 복사한 주소안 class에 icons를 추가하였다. No commitments Cancel online at anytime Watch anywhere Pick your price 2 텍스트 가운데로 보내기 css에서 효과 넣기 #features > nav { padding-to.. 2021. 6. 6.
7 가입 버튼 넣기 JOIN FREE FOR A MONTH 결과물 미리 보기 1 html 에 버튼 태그 만들기 2 css에서 버튼 모양 만들기 .btn { font-size: 14px; letter-spacing: 1.9px; font-weight: 400; margin: .5em .5em .5em 0; padding: 12px 2em; color: #fff; background-color: #e50914; cursor: pointer; text-decoration: none; vertical-align: middle; font-family: Arial,sans-serif; border-radius: 2px; user-select: none; text-align: center; border: 0; } 3 커서 올렸을 때 버튼 색 연하게 만들기 결과물 header.. 2021. 6. 5.
6 문구 넣기 See what's next. WHACH ANYWHERE CANCEL ANYTIME 1 heading, tag line 추가 header 안에 section 태그 넣기 (중간 결과물) 2 pitch 클레스에 효과 넣기 (중간 결과물) 3 글자 사이즈와 위치 조절하기 2021. 6. 5.
5 Sign In 버튼 넣기 결과 미리보기 1 html에 Sign In 링크 걸기 nav 태그 안에 a 태그로 링크 걸기 Sign In 버튼 누르면 진짜 넷플릭스 Sign In 페이지로 링크 걸어놓음 2 Sign In 효과 넣기 이미지를 가져 오는 것이 아니라 글자에 효과를 넣어 버튼 모양 만든다. nav a.signin{ color: #fff; float: right; background-color: #e50914; line-height: normal; margin-top: 20px; margin-right: 3%; padding: 7px 17px; font-weight: 400; border-radius: 3px; font-size: 16px; text-decoration: none; } 3 폰트 바꾸기 css body에 htm.. 2021. 6. 5.
4 넷플릭스 로고 넣기 nav 태그: 네비게이션 태그, 링크들을 모아놓는 태그 a 태그: anchor 태그, 하이퍼링크를 걸어주는 태그 하이퍼링크: 글자, 기호, 그림등을 클릭하면 지정된 위치로 이동하는 것 href: 클릭시 이동할 링크 결과물 미리보기 1-1 netflix 글자로 링크걸기 (연습) 글자 누르면 링크 걸어놓은 화면으로 이동함 1-2 글자 아닌 로고이미지 눌러서 링크 연결하기 Netflix로고 누르면 링크 걸어놓은 메인 화면으로 이동함 구글에서 Netflix src로 이미지 검색해서 다운 받아 Netflix Clone 폴더 안에 있는 img 폴더에 저장하였다. (중간 결과물) NETFLEX 로고 이미지가 너무 크게 나왔다 3 로고 이미지 크기 조정하기 css에서 img { width: 167px; height: .. 2021. 6. 5.
3 배경 사진 넣기 결과물 미리보기 1. img 폴더 만든다. 2. 사진을 img 폴더 안에 저장한다 구글에서 netflix main page 로 검색해서 이미지 하나 저장한다. 3. 배경 사진을 넣는다. 화면을 가득 채우는 배경 사진 넣을려면 css에서 넣어야 한다. linear-gradient(to right) 그라디언트를 왼쪽에서 오른쪽으로 준다 background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.05)), rgba (빨강,녹색,파랑,투명도) 가 되고 0,0,0은 검은색이 된다. 첫번째 rgba 시작해서 두번째 rgba 끝난다. url('../img/netflix1.jpeg'); 이미지 url은 이미지 위치이고 img 파일은 css 파일 .. 2021. 6. 4.
2 CSS 기본 셋팅 1 css 폴더를 만든다 Netflix Clone 오른쪽 클릭해서 새 폴더를 누르고 css 적는다. 2 style.css 파일을 만든다 css 폴더 오른쪽 클릭해서 style.css 파일을 만든다. 3 html 파일과 css 파일을 연결한다 href에는 파일 위치를 적어준다 4 css로 간단한 효과를 넣어본다 body에 있는 글자 See what's next.를 왼쪽으로 바짝 붙여보자. (결과 보기) ⬇️ S 옆의 빈 공간이 없어졌다. 5 See what's next를 header 안으로 넣는다. 2021. 6. 4.
1. HTML 기본세팅 https://www.udemy.com/course/learn-html-css-clone-amazon-netflix-spotify/ 무료 HTML 튜토리얼 - Cloning Amazon, Netflix & Spotify Learn HTML + CSS by recreating the home pages of some amazing companies. - 무료 강좌 www.udemy.com 1 Netflix 폴더 오픈하기 윈도우바-파일-open file 2 index.html로 파일 만들기 HTML 기본 형태 쓰기 3 utf-8로 설정해서 문자 깨짐 방지하기 4 타이틀 넣어주기 탭에 타이틀이 보임 5 body tag에 내용 적기 See what's next. 다음은 CSS로 넘어갑니다. 2021. 6. 4.

티스토리툴바