코딩 공부 코딩 공부

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 {name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, ]; const searchBox = document.querySelector("#search-box"); //searchBox에 id="search-box" 태그 저장 const cssCount = document.querySelector(".count"); //cssCount에 class="count" 태그 저장 const cssDesc =..

const searchBox = document.querySelectorAll(".search span"); //알파벳 버튼들 const cssList = document.querySelectorAll(".list ul li"); //CSS속성 리스트 const cssCount = document.querySelector(".count em") //속성 갯수 //알파벳을 클릭하면 클릭한 데이터 값을 가져와야 한다. //searchBox.addEventListener is not a function // searchBox.addEventListener("click", function(){ // alert("ddd"); // }); cssList.forEach((li, index) => { li.classL..

const searchBox = document.querySelector("#search-box"); //변수 searchBox에 #search-box(input태그)담는다. const cssList = document.querySelectorAll(".list ul li"); //변수 cssList에 li태그(css속성저장된 li태그들) 담는다. const cssCount = document.querySelector(".count em") //변수 csscount에 em태그(전체속성갯수나타내는태그) 담는다. cssList.forEach((e, index) => { //문서 내 li태그들을 하나씩 순회한다. e.classList.add("show"); //모든 li태그에 class = "show"를 추가..

웹 화면의 레이아웃을 CSS의 flex와 grid 속성으로 구성할 수 있습니다. 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..

IR 효과 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 합니다. 대체 텍스트는 단순히 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집(SEO)을 위해서도 필수적입니다. IR 효과(Image Replacement)는 이미지의 대체 텍스트를 제공하기 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공하는 것을 말합니다. 여러 가지 기법 중에서 Phark Method(ir_pm)와WA IR(ir_wa), Screen out(ir_so) 기법을 주로 사용하여 대체텍스트를 제공 합니다. Phark Method(ir_pm) 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다. 이미지로 대체할 요소에 배경 이미지로 설정하고 글자는 text-indent..

웹 사이트에서 이미지를 표현하는 방법 웹 사이트에서 이미지를 표현하는 방법에는 세 가지가 있습니다. HTML 태그이용 CSS 속성이용 이미지 스프라이트 HTML 태그 HTML의 태그로 이미지를 출력하는 방법입니다. 태그로 이미지를 출력 할 때는 의미가 있는 이미지(ex:로고, 메뉴)여야 합니다. 그리고 이미지 로드에 실패 할 경우 대체문자(alt) 값도 넣어주어야 합니다. 기본 형태 예제 출력결과 대체문자출력 CSS 속성 CSS의 background 속성으로 이미지를 출력하는 방법입니다. background 속성으로 이미지를 출력 할 때는 의미가 없는 이미지(ex:배경, 색표현)여야 합니다. 의미가 없기 때문에 대체 문자를 입력하지 않아도 됩니다. 대체 문자가 필요할 경우 IR(Image Replacem..

searchBox.addEventListener("keyup", () => { //input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 console.log(searchWord); //사용자가 입력한 데이터 저장소 변수에 저장 cssList.forEach(el => { //다수의 li을 const cssName = el.dataset.name; //CSS 속성 값을 변수에 저장 if(cssName.indexOf(searchWord)){ //사용자가 입력한 값에 데이터가 있는지 확인 el.classList.add("hide"); //데이터가 있으면 클래스 hide를 추가 } else { el.classList.remove("..

개요 float의 단어는 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. float 속성의 값 inher : 부모 요소에서 상속 left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none : 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 ..