우당탕탕 코딩생활

CSS 명언과 명언을 말한 사람이 나오는 박스, 배경에 대한 CSS 입니다. 사진이 더 잘 보일 수 있도록 명언을 오른쪽 아래에 배치했습니다. HTML 구조 코드의 특징은 unsplash라는 홈페이지의 api를 이용하는 부분입니다. 랜덤한 이미지를 unsplash에서 가져와 사용합니다! 그래서 지난 포스팅과는 다르게 이미지에 대한 구조 부분을 추가해주었습니다. 그래서 명언이 나오는 부분과 명언, 명언을 말한사람, 그리고 이미지 부분으로 구성되게 됩니다. Script 스크립트 부분입니다! 지난 번과 크게 달라진 부분은 없으나 이미지를 가져오기 위한 변수가 추가 되었습니다. function imgLoad(){ let bgImg = document.querySelector(".bgImg"); bgImg.src..

css HTML script let sliderInterval = 3000; function sliderEffect(){ currentIndex++; sliderInner.style.transition = "all 0.6s"; sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";

블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 쉽게 말하면 '가로 정렬'이 되지 않는다는 뜻으로, 항상 새 줄에서 시작하며 전체 너비를 박스 형식으로 사용하게 되는 구조입니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 요소와 달리 마크업을 할 때 가로로 정렬이 됩니다. 즉, 줄 바꿈의 특성이 없다는 뜻으로 행이 바뀌지 않고 한 줄로 출력이 됩니다. 자주 쓰이는 요소들을 정리해 보겠습니다. 요소 속성 변경 블록 요소를 인라인 요소로, 인라인 요소를 블록 요소로 속성을 변경 할 수 있습니다. {display:inline;} / {display:block;} 을 사용해봅시다. {display:inline;..

안녕하세요! 오늘도 한 번 달려보겠습니다. 지난 시간에 알아본 것은 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선택자입니다. 얼핏보면 비슷하고 하는 일도 비슷한 친구들인데 알아..