본문 바로가기

분류 전체보기364

Form 태그 / input 버튼 기본 형태 Name: 기본 input 1 결과물 My Contact Detail My Fictional Address 001-365-0000 myemail@gmail.com 2021. 6. 20.
table 태그 Skills 2021. 6. 20.
HTML 기초 유용한 사이트 프로그래밍 언어 태그 설명 https://devdocs.io/ WaybackMachine 예를들어 naver 치면 예전 화면 볼수 있음. 날짜 시간별로 https://archive.org/web/ 유니코드 이모티콘 복사해서 사용가능 https://home.unicode.org/emoji/emoji-frequency/ 이미지 동그랗게 잘라주기 https://crop-circle.imageonline.co/#circlecropresult 키보드에서 이모티곤 찾는 법: 맥에서는 control+command+space 윈도우에서 방법1 이모티콘 넣을 자리에 커서 놓고 WIN+.(마침표) 또는 WIN+;(세미콜론) 윈도우에서 방법2 테스크바 오른쪽 클릭-터치 키보드 버튼 켜기- 키보드에 보면 이모티.. 2021. 6. 18.
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.
Cloud computing이란? What is Cloud computing? the on-demand delivery of IT resources and applications through the internet with pay-as-you-go pricing. on-demand delivery indicates AWS resources you need when you need them. You don't have to tell us in advance that you're going to need them. Just start using the storage you need, when you need it. The flexibility is just not possible when you're managing your own dat.. 2021. 1. 21.
AWS 소개 the benefits of AWS 1 You only pay for what you use (Key Concept of AWS) 2 offers massive range of services for every business Basic elements: compute, storage, network security tools Complex solutions: Blockchain, Machine learning, AI, Robot development platforms Specialized tool sets: Video production management systems, Orbital satellites fundamental cloud compute model AWS can change the way.. 2021. 1. 21.
DNS란? Domain Name System 정리 생활코딩 선생님 강의 노트 정리 한 내용입니다. host 인터넷에 연결된 각각의 컴퓨터 인터넷에 연결된 모든 컴퓨터는 아이피 주소를 가지고 있어야함. IP address 호스트와 호스트가 서로 통신하기 위해 서로의 주소가 필요함 이를 위해 사용하는 주소(261.142.219.192)를 IP 주소라고 함 DNS 만들어지기 전 인터넷 상황 사람이 아이피 주소를 기억하는 것이 너무 어려움. 주소 알고 있을 시 내 컴퓨터에 있는 hosts파일로 웹서버에 접속은 가능한데, 다른 여러 사람들이 주소를 몰라 웹서버에 접속하기 불편함. 그래서 스텐포드 리서치 인스티튜드에서 전세계 호스트 파일 관리 예를 들어 93.184.216.34를 example.com에서 사용 중인 회사가 이 인스티튜드에 전화해서 아이피 주소와 도.. 2021. 1. 16.
AWS practitioner 자격증 포기 | 정리한 노트 내용 다 없어짐.. AWS practiotioner 강의 노트 정리한 게 모두 없어졌다. 강의는 40프로 정도 진행 중이었고, 아예 모르던 분야라 정리하는데 공을 들여 원노트에 정리를 하고 있었다. 며 칠동안 공부 안하고, 다시 하려고 봤더니 데이터가 오염이 되어 aws 노트 정리한 섹션이 복구가 되지 않는다. 그냥 다 날아갔다. 첨부터 다시 정리해야 한다. 막상 다시하려니, 그냥 다 때려치고 싶다. 벌써 하기 싫어서 일주일 이상 안하고 있긴 하다.. 2021. 1. 16.

티스토리툴바