css

Navigation Bar Dropdown index.html ... Java 입문 수업 Java 제어문 3 4 ... index.css nav { /* border: 1px solid black; */ width: 100%; height: 50px; display: flex; justify-content: space-evenly; position: relative; top: 0; left: 0; z-index: 10; } nav .menu { /* border: 1px solid blue; */ width: 10%; height: 100%; } nav .menu .menu-title { /* border: 1px solid blue; */ width: 100%; height: 50px; /* text-..

< 1 / 4 > // index.js$(function () { //-- at1 btn img slide let cnt = 0; $(".at1-btn li").on("click", function () { let at1No = $(this).index(); if (at1No == 2 && cnt 0) { cnt--; $(".at1-img").animate({ left: "+=100%" }, 500); } $(".disp").text(cnt + 1 + " / 4"); });});/* index.css *//* article 1 */.at1-box { border: 1px solid black; width: 500px..

z-index? HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있다. z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정한다. 스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치한다. z-index 속성을 너무 많이 사용하면 유지보수가 매우 힘들어질 수 있기 때문에 가급적이면 z-index 속성을 아예 사용하지 않는 편이 좋다. z-index가 없을 때 요소(element)간의 깊이 A Box B Box 상위 일반 요소 일반 요소 B Box position 속성(not static) 일반 요소 A Box position 속성(not static) positi..

class class 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용된다. 이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름은 가지는 요소들을 모두 선택한다. 선택자 명명시 숫자로 시작하면 안되며, 언더코어(_)나 하이픈(-)을 제외한 특수문자는 사용 불가하다. id id 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용된다. 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만 선택한다. 여러 요소에 같은 아이디 이름을 사용해도 작동은 하지만 중복된 아이디를 가지고 javascript 작업을 하게 되면 오류가 발생하여 되도록 하나의 웹 페이지 안에서 중복되지 않게 사용해야한다. id 속성 명명시 최소 1글자 이상이며, 공백은 없어야한다. id는..

Padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 padding 영역의 크기를 설정한다. 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 받는다. padding 속성 padding : 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다. padding-top : 윗쪽의 padding 값을 설정한다. padding-right : 오른쪽의 padding 값을 설정한다. padding-bottom : 아래쪽의 padding 값을 설정한다. padding-left : 왼쪽의 padding 값을 설정한다. Margin margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. 마진 ..

HTML 문서에서 특정 영역이나 구획을 정의할 때 사용한다. 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로도 사용되며, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정할 때에도 종종 사용된다. 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다.HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용한다. 그 자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용할 수 있다. 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소이다. 요소와..

1. Material UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com 리액트 기반 UI 라이브러리 중 가장 인기 많음 구글 머테리얼 디자인을 기반으로 제작 타입스크립트, 플로우 타입 모두 지원 2. React Bootstrap React-Bootstrap The most popular front-end framew..