우당탕탕 코딩생활

Card Type 모바일 사용자가 폭증하면서 다양한 디바이스들이 나오고 있는 시대에 걸맞는 디자인 형식이라고 한다면 바로 ' 카드 타입 ' 입니다. 카드형 디자인은 웹과 모바일, 그리고 여러디바이스 화면크기에 최적화되는 모듈식 UI패턴이기 때문입니다. 특히나 이 카드 형식을으로 날아오른 사이트가 있습니다. 바로 '핀터레스트'인데요. 저도 이 사이트를 자주 이용하는데 그 중 하나가 수많은 컨텐츠를 많이, 보다 편리하게 볼 수 있다는 장점 때문이었습니다. 카드형 디자인은 매력적인 이미지나 컬러를 사용하여 지루하게 보일 수 있는 모듈UI 디자인의 단점을 보완하고 사용자에게 시각적인 즐거움과 직관적인 정보를 전달할 수 있게 하기도 합니다. 그래서 오늘은 이 카드형식의 페이지를 만들어 보려고 합니다. 레이아웃 및..

자바스크립트 왕 초보 문제 풀어보기 문제 1 주어진 배열에서 10보다 큰 값을 찾아서 화면에 표시하시오. 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19 ] 힌트! 배열 요소의 개수만큼 for문을 반복합니다. if 문을 사용해서 요소의 값과 10을 비교합니다. document.write문을 사용해서 화면에 표시합니다. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // 주어진 숫자를 먼저 배열 해준다. for(let i = 0; i 10) { document.write(arr[i]);//넣은 배열이 거짓일 때는 출력이 되지 않..

안녕하세요! 오늘도 한 번 달려보겠습니다. 지난 시간에 알아본 것은 flex였는데요. 🤔 Grid 공부를 시작하면서 한 가지 알아두어야 할 점이 있습니다. 바로 둘의 차이점인데요. flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로세로) 레이아웃 시스템이라는 것입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능하다는 거 짚고 넘어가겠습니다! 😊😊 grid layout flex와 마찬가지로 컨테이너와 아이템만 있으면 구조를 짤 수 있습니다. 역시, 부모 요소인 것을 grid container라고 부르고 자식 요소를 grid item이라 칭합니다. .container { display: grid; } 용어 정리 그리드 컨테이너 (Grid Container) display: grid를..

안녕하세요! 🥰🥰🥰 지난 시간에는 float을 알아봤는데 오늘은 또다른 방법, flex에 대해서 알아보려고 합니다. flex는 flexible box, flexboc라고 부르기도 하며, 레이아웃 배치 전용 기능으로 고안된 친구이기 때문에 float 등을 이용한 기존 방식보다 훨씬 편리하기 때문에 알아두시는 것이 좋습니다! 바로 시작하겠습니다! flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방법입니다. 레이아웃을 작업할 때 아주 유용하므로 꼭 알아두시는 게 좋습니다. //부모 요소인 main을 flex container라고 부르고 //자식 요소인 contents들을 flex item이라..

float 요소에 대해서 말하기 전에 block 요소에 대해서 다시 한 번 짚어볼건데요. block요소의 가장 중요한 포인트! 바로 세로 나열이었는데요. 이런 세로 나열을 가로로 바꿀 수 있는 친구가 바로 float이라는 친구입니다. float은 레이아웃을 완성하기 위한 필수적인 속성이므로 꼭 알아두어야하구요. float지정하는 법과 함께 해제하는 방법도 오늘 알아보도록 하겠습니다. float 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변에 존재하게 하는 속성 이런 속성을 가진 친구여서 세로로만 나열되던 block들을 가로로 서로 어울리게 배치하려고 할 때 유용합니다. 그렇게 때문에 레이아웃에서 필수적입니다. 글로만 보니 어려우시죠. 그림으로 한 번 보겠습니다. 이런 모양의 레이아웃을 만들고 싶다고..

CSS Scritp 🍀Lotto🍀 Click! 이 JavaScript 코드는 "Click!" 버튼을 클릭하면, "lottoNumber" 함수가 호출되어 무작위 6개의 숫자를 생성하고, 생성된 숫자를 "result" 요소의 innerText로 할당하여 화면에 출력합니다. 첫째 줄에서는, HTML에서 button 요소를 선택하여 "button" 변수에 할당합니다. 이를 통해 이벤트 리스너를 추가하고, 클릭 이벤트가 발생했을 때 함수를 호출할 수 있습니다. 둘째 줄에서는, HTML에서 결과를 출력할 div 요소를 선택하여 "result" 변수에 할당합니다. 이를 통해 결과를 표시할 수 있습니다. 셋째 줄에서는, "lottoNumber" 함수를 정의합니다. 이 함수는 새로운 Set 객체를 만들고, 1부터 45 ..

'모던자바스크립트'의 502페이지 예제입니다! 목표 dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다. 가져온 데이터가 어떤 구조로 이루어져 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져올 수 있는 방법을 생각해봅니다. 1. JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. .then(이름) 까지가 json을 활용하는 기본적인 문법입니다. 2. JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. let currentIndex = 0; function quotes(){ fetch("json/quotes.json") .then(res => res.json()) .then(items => { const resu..

main 부분 ☰ 안녕하세요 자바스크립트 어려워요 살려주세요 메인 박스 안에 이미지가 들어갈 박스를 만들어 주고 이미지를 삽입한 뒤 선택자 선택을 위해 클래스 속성을 부여했습니다. 마찬가지로 버튼에도 해주었습니다. Script 부분 이 예제의 주요 목적은 선택자 사용인 것 같아 선택자를 총 3가지 만들어 주었습니다. imageAll은 이미지를, btn1은 버튼을 nav는 카테고리 입니다. document.qrerySelector(".image__wrap .A").addEventListener('mouseenter', () => { imageAll.src = "img2.png"; }); 선택자를 이용해 이미지 변수를 묶어 준 뒤 마우스 관련 이벤트를 발생시키기 위해 addEventListener을 넣었습니..

🥴🥴 오늘은 좀 힘든 날이었어요. 자바스크림트 함수가 좀처럼 이해가 안되서..하지만 화이팅 해봅니다! 문자 관련 스타일에 대해서 알아보려고 합니다. 종류가 많은 만큼 간략하지만 정확하게 정리해보도록 하겠습니다.🤫 문자 관련 스타일 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, Arial, Helvetica, san-serif; 02. font - size와 단위 문자의 크기를 지정하는 속성입니다. 크기를 명시하지 않을 경우 16px기본입니다. CSS에서 사용하는 단위는 다음과 같습니다. 👉..

안녕하세요.🥰🥰🥰 지난시간에 id선택자와 class선택자를 알아보았는데요. 오늘은 나머지 선택자를 알아보도록 하겠습니다. 선택자의 개념! 지난 시간에 했던 것이지만 다시 한 번 복습해보겠습니다. 선택자란, CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 개념을 정리 했으니 바로 살펴보도록 하겠습니다.😘 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 2. id 선택자 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있는데 HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 3. class 선택자 여러 개의 요소에 같은 class명을 부여할 수 있습..

안녕하세요.🥰 지난 게시물에서는 CSS의 스타일에 대해서 알아봤는데요. 오늘은 '선택자(selector)에 대해 알아보겠습니다. 선택자란 CSS로 UI의 어느 부분을 디자인 할 지, 즉 표현할 대상이 되는 부분을 말합니다. 아래 이미지를 살펴보겠습니다. CSS를 배우지 않았더라도 어림짐작은 할 수 있죠. 예를 들어 H는 헤더라던가, color는 색이라던가. 맞습니다만, 이런 명칭을 CSS에서는 이렇게 정의해주고 있습니다. 어렵지 않죠? { }안에 여러 속성을 지정할 수 있고, 각 속성 설정간에는 ;로 구분해줍니다. 이제 자연스럽게 선택자에 대해 알아보려고 합니다. 우리가 정확하게 알아야할 선택자는 2가지인데요. 바로 id 선택자와 class선택자입니다. 얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아..