우당탕탕 코딩생활

트랜지션 효과 웹 페이지에서 자주 쓰이는 효과입니다 ☺️ reset 부분은 기존에 했던 마우스 효과와 동일합니다. 자, 그럼 두개재~ CSS .slider:nth-child()는 해당 슬라이드를 선택하게 합니다. before는 해당 요소 앞에 가상 요소를 생성하고, 내용을 추가해줍니다. content 속성을 사용하여 각 슬라이드에 대한 캡션을 지정합니다. content CSS 속성 중 하나로 요소의 콘텐츠를 정의하는데 사용 됩니다. 일반적으로 before와 after의 가상 요소에서 사용합니다! z-index가 의미하는 것은 각 슬라이드에 대한 쌓임 순서입니다. 이 이펙트에서는 이미지를 겹쳐놓는 것이 포인트입니다! 이 값이 높을 수록 슬라이드는 상위에 표시되게 되며 슬라이드가 순서대로 보이도록 조정하는데..

웹 페이지 디자인 반응형 지금까지 했던 유형들을 합쳐서 반응형으로 작업해보도록 하겠습니다. 사이트 로고 위 코드는 웹 사이트 제작을 하기전 기본적인 구성입니다! 파비콘을 적용해주고 SEO도 작성해주었습니다. body 안에는 main이 자리해있는데 이번 포스팅의 핵심적인 부분입니다. 작업한 사이트의 구성은 아래와 같습니다. 기존의 레이아웃을 가져왔으며 추가된 부분은 미디어 쿼리 부분입니다. 헤더 영역 슬라이드 영역 이미지 타입 영역 이미지 텍스트 영역 카드 타입 영역 배너 타입 영역 텍스트 타입 영역 푸터 영역 오늘 포스팅에서는 헤더와 슬라이드 영역을 제외한 나머지를 분석해보도록 하겠습니다. 먼저 각 타입별로 css페이지를 만들어 주었습니다. 반응형에서는 미디어 쿼리를 사용합니다. 그러므로 각 css페이지..

슬라이드 타입 웹페이지의 슬라이드 타입에는 여러 종류가 있지만, 가장 일반적으로 사용되는 슬라이드 타입은 아래와 같습니다. 이미지 슬라이드: 여러 장의 이미지를 차례로 보여주는 슬라이드로, 이미지 간에 전환 효과를 줄 수도 있습니다. 텍스트 슬라이드: 여러 페이지로 구성된 텍스트를 차례로 보여주는 슬라이드로, 페이지 간 전환 효과를 줄 수도 있습니다. 동영상 슬라이드: 여러 개의 동영상을 차례로 재생하는 슬라이드로, 동영상 간 전환 효과를 줄 수도 있습니다. 혼합 슬라이드: 이미지, 텍스트, 동영상 등 여러 종류의 콘텐츠를 조합하여 보여주는 슬라이드로, 적절한 전환 효과를 줄 수도 있습니다. 위와 같은 슬라이드 타입을 사용하여 웹페이지를 구성하면, 사용자에게 보다 다양하고 흥미로운 콘텐츠를 제공할 수 있..

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