seop's study seop's study

const cssProperty = [ // a {view: "10", name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {view: "15", name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {view: "20", name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {view: "23", name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view: "28", name: "animation", desc: "anima..

const cssPorperty = [ {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "align-content", desc: "align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다."}, {name: "align-items", desc: "align-items 속성은 요소의 수직 방향 정렬 방식을 설정합니다."}, {name: "align-self", desc: "align-self 속성은 콘텐츠의 정렬 상태를 정의합니다."}, {name: "background", desc: "background 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다."}, {name:..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //속성 리스트 const property = document.querySelectorAll(".list ul li"); //데이터 타입 const cssCount = document.querySelector(".count em"); //속성 갯수 //모든 데이터 보이기 cssList.forEach((li, index) => { li.classList.add("show"); cssCount.innerText = index + 1 }) //알파벳을 클릭하면 클릭한 데이터 값을 가..

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); //전체 li갯수를 표시 cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정 const ..

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장 const cssCount = document.querySelector(".count em"); cssList.forEach((element, index) => { element.classList.add("show"); cssCount.innerHTML = index + 1; }); searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = s..

grid란 ? Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다. 속성 설명 grid grid 속성은 그리드 레이아웃 속성을 설정합니다. grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성입니다. grid-auto-columns 암시적인 열(Track)의 크기를 자동으로 설정합니다. grid-auto-flow 자동 배치 알고리즘 방식을 정의합니다. grid-auto-rows 암시적인 행(Track)의 크기를 자동으로 설정합니다. grid-column grid-column-xxx의 단축 속성(열 시..

flex란? Flexbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다. flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다. flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order..

IR 기법(Image Replacement) IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. 여러가지 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할 수 있습니다. Phark Method 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent..

기본 선택자 속성 예시 설명 전체 선택자 * { color: #fff} 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 태그 선택자 div { color: #fff} div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 .class { color: #fff} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id { color: #fff} id 아이디를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 div, p { color: #fff} div 태그와 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 계층 선택자 속성 예시 설명 하위 선택자 (Descendant Selector) div p {color: #fff} div 태그의 하위 p ..

float float란? float 속성은 블록요소의 정렬 상태를 설정합니다. 문법 float: none | left | right 속성 속성값 설명 inherit 부모 요소에서 상속 none float의 성질을 적용하지 않습니다. left 블록요소를 왼쪽으로 정렬합니다. right 블록요소를 오른쪽으로 정렬합니다. 예제 float 속성 사용시 영역이 깨지는 버그 float 시 해당 객체는 높이, 넓이 값을 잃어버립니다. 그렇기때문에 .clearfix라는 클래스를 만들어 쓰는 것이 일반적입니다. clearfix 설정방법 /*float_clear*/ .clearfix {*zoom: 1} .clearfix:before, .clearfix:after {display:table; content:""; line-..