본문 바로가기

전체 글227

[JS] 객체(Object) 알아보기 세상의 대부분의 정보는 하나의 데이터로 이루어지지 않고 많은 데이터들이 모여 만들어진다. 예를 들어 사람에 대한 정보를 얻을 때에도 이름이라는 하나의 데이터만 알아도 좋지만 이름, 성별, 나이, 출신 등 많은 데이터를 알면 더 자세한 정보를 얻을 수 있다. 이런 관련있는 데이터들을 모두 묶어서 하나의 정보로 나타내는 것이 객체(Object)이다. 그렇다면 객체는 어떻게 사용하는 것일까? let information = {} 우선 변수를 하나 만들어 주고 변수 안에 들어 갈 내용을 { }안에 넣어준다. (배열[ ] 와 헷갈리지 않기) 예를 들어 이름, 나이, 성별이라는 데이터를 가진 객체를 만들고 싶다면 let information = { name: "James", age: 18, gender: "man".. 2022. 8. 3.
[JS] 배열과 배열과 함께 쓰이는 함수들 변수에 들어가는 데이터에는 Numer, String, boolean 타입 등 많은 데이터 타입이 들어갈 수 있는데 그 중 하나가 배열(Array)이다. 배열을 사용하는 이유 만약 본인이 많은 색상을 가지고 있다고 했을 때 본인이 가지고 있는 색상의 리스트를 보기위해서는 각각의 색상 데이터를 저장했어야 했다. 물론 아래 코드와 같이 데이터를 저장할 수 있겠지만 굉장히 효율적이지 못하다. let color1 = "black" let color2 = "red" let color3 = "yellow" let color4 = "orange" 이런 비효율적인 문제를 해결하기 위해 배열이 나오게 되었다. 배열은 하나의 변수에 많은 데이터를 묶어서 저장하는 것이다. 배열의 사용법 let color = ["black",.. 2022. 8. 2.
[JS] 변수 선언(var, let, const, var와 let의 차이) 프로그래밍에서 변수란? 프로그래밍에서 변수는 어떤 데이터를 보관하는 공간이다. 간단하게 생각하면 어떤 물건을 담기위한 상자, 바구니, 그릇같은 느낌이다. 자바스크립트에서 변수를 선언할 때에는 var, let const 총 3가지로 선언을 한다. (다른 언어에 비해 적은 편이다.) 예를 들어 var color = "red" let color = "blue" const color = "yellow" 여기서 color는 변수의 이름 즉, 변수명이다. 변수명은 자신이 원하는 이름을 만들어 사용하면 되지만 나름의 규칙이 있다. 1. 변수명의 첫 글자는 영문자, 달러($), 언더 바(_)만 올 수 있다. 2. 두번째 이후 글자는 영문자, 달러($), 언더 바(_)와 숫자만 올 수 있다. 3. 변수명의 영문자는 대문.. 2022. 8. 1.
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.
HTML과 CSS로 Spotify 메인 홈페이지를 만들어보자! 스포티파이 홈페이지를 먼저 보여주자면 이렇게 생겼다. 생각보다 단순하게 생겨서 한번 시도를 해 봤다. 일단 위 사진처럼 크게 3개의 레이아웃을 만들어서 그 안에 차곡차곡 작은 레이아웃을 짜야겠다고 느끼게 되었고 많은 생각을 한 후 만들기 시작했다. (하나하나 만들 때마다 과정을 써야되는데 완성할 생각만 하다보니 중간 과정 쓰는걸 까먹었다...) [HTML 코드] Spotify 프리미엄 지원 다운로드하기 | 가입하기 로그인하기 다⁠양⁠한 해⁠외 히⁠트⁠곡⁠과 국⁠내 인⁠기 음⁠악⁠을 들⁠어⁠보⁠세⁠요 1개의 모바일 기기에서 7일 동안 무료로 Spotify Premium 멤버십을 이용해보세요. 결제세부 정보는 필요하 지 않습니다. 다운로드 하기Google Play App Store에서 다운로드 하기 약관이 .. 2022. 7. 23.
[HTML/CSS] HTML과 CSS로 tap 메뉴 만들어 보기(JS x) 탭 메뉴는 많은 곳에서 사용하고 있다. 예로는 아래와 같은 네이버 로그인 창이 있다. 위 같은 다양한 탭 메뉴를 만들기 위해서는 자바스크립트도 필요하긴 하겠지만 간단한 탭 정도는 CSS로도 만들수 있다. 일단 HTML로 간단한 뼈대를 만들어준다. 라디오 버튼을 사용하여 요런 탭 메뉴를 만들 것이다. 색상이나 디자인은 일단 대충대충~ [HTML로 뼈대 잡아주기] 첫번째 두번째 세번째 첫번째 첫번째 탭 입니다. 두번째 두번째 탭 입니다. 세번째 세번째 탭 입니다. 1. wrapper라는 클래스명을 가진 div 태그로 전체를 묶어주고, 2. 라디오 버튼 3개를 만들어 준 후 각각 라벨을 지정해 준다. *(나중에 라벨을 눌러도 라디오 버튼이 바뀌게 하기 위해서 라디오 버튼의 첫번째는 checked를 설정해서 미.. 2022. 7. 22.

티스토리툴바