근혁 study 공부정리

indexOf { const searchBox = document.querySelector("#search-box");//search-box 변수에 저장 const cssList = document.querySelectorAll(".list ul li");//다수의 li를 변수에 저장 searchBox.addEventListener("keyup", () => {//input를 클릭했을 때 이벤트 설정 const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소 // console.log(searchWord); cssList.forEach(el => { //다수의 li한테 적용 console.log(el.dataset.name) const cssName = el.dat..

벤더 프리픽스란? 벤더 프리픽스란 브라우저별로 따로 놀던 CSS3의 속성을 잡아주기 위해서 사용되기 시작된 프리픽스는 마크업시 CSS의 class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두사를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것을 지칭하고 있다. 표준 속성을 우선해야 하므로,벤더 프리픽스가 있는 속성은 속성 앞쪽에 표시하는 것이 원칙이다 웹 브라우저 제조사별 벤더 프리픽스는 다음과 같다. 모질라 파이어폭스를 제외한 나머지 신형 데스크탑,모바일 브라우저는 모두 -webkit-을 사용한다고 보면 되며 웹킷 기반의 엔진을 공통으로 사용하기 때문에 벤더 프리픽스를 따로 붙일 필요가 없다. 벤더 프리픽스 웹 브라우저 예 -webkit- 구글크롬 -we..

Float란? float 속성은 사전적 의미론"뜨다"라는 의미를 가지고 있으며,웹 페이지에서는 컨텐츠를 가로로 나열하는데 자주 사용한다. 또한 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용한다. float:left로 인한 영역깨짐 해결방법 CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐(즉, Height 값이 사라져0이 되는 현상)이 발생한다. 이 에러를 잡기 위한 방법에는 4가지가 있다. 깨지는 영역에 똑같이 Float:left를 사용 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워지므로 추천 X 깨지는 영역에 Clear:both를 사용 위치를 잡을 수 있으나 구조가 복잡할 ..

break문, continue문 자바스크립트에서 중간에 반복문의 소스를 중단하고 빠져나오는 break문과 마지막까지 실행하지 않고 건너뛰어서 반복을 실행하는 continue문이있다 break문 반복문인 while문 또는 for문에서 break문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다. 즉 break문은 반복문을 강제로 종료할 때 사용한다. 다음은 break문의 기본형이다 { for(초깃값;조건식;증감식){ break; //반복문을 강제로 종료합니다. 자바스크립트 코드; } } { for(초깃값;조건식;증감식){ break; //반복문을 강제로 종료합니다. 자바스크립트 코드; } } { var 변수 = 초깃값; while(조건식){ break; //반복문을 강제로 종료합니다. 자바스크립트 코..

HTML 태그를 통해서 표현하는 방법 Img 태그 이미지의 의미가 있을 때 img태그를 사용한다. Alt태그를 이용해서 대체 문자를 적어야 한다. { } CSS 속성을 통해서 표현하는 방법 Background 속성 이미지가 의미가 없을 때 background 속성을 사용한다. 의미가 없기 때문에 대체 문자를 적을 필요가 없다. { -background: url(이미지 주소) center top repeat-x; -background: url(이미지 주소) no-repeat 9px(가로) 8px(세로) } 이미지 스프라이트 기법 여러 개의 이미지를 하나의 이미지로 합쳐서 관리 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있다. 위 기법으로 이미지를 넣을 때는 웹표준 ..

시멘틱 태그란? 시멘틱(semantic) 태그란 그 이름 자체만으로 의미를 전달할 수 있는 태그다 시맨틱 태그가 아닌 , 등은 그 이름만 들어서는 그 내용이 무엇인지 알 수 없다 . 그러나, 시맨틱 태그는 =두목 =네비게이션, =그림, 이렇게 이름만 척, 들어도 어림짐작할 수 있다는 게 대단한 장점이라 할 수 있다. 종류 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다. 태그는 말 그대로 머리말 영역으로 문서 또는 헤더를 나타낸다. 태그는 내비게이션 즉, 말 그대로 (길을 안내하는)나침반이며 다른 영역,사이트,다른 문서 사이를 탐색할 수 있는 링크의 집합이다 태그는 페이지의 주요 콘텐츠를 나타낸다 태그는 독립적인 콘텐츠를 지정한다 태그는 사이드바라고 불르기도 하며, 본문 이외의 내용을 담고 있는..

ir 효과란? 몸이 불편한 사람이라도 정보를 이용하는데 불편함이 없도록 하는것이 목적이 있기 때문에 만약 시각장애인이 이 사이트를 이용할 경우 텍스트는 리더기로 읽어줄 수 있지만 이미지는 읽을 수가 없다. 그래서 이미지에 텍스트를 붙여준다. 또한 css가 동작하지 않는 환경에서도 어떤 내용인지 파악이 가능해야 하기 때문에 백그라운드로 넣어주는 이미지라고 할지라도 텍스트를 써주는 것이 좋다 이런걸 ir효과라고 한다.> .ir_pm (Phark Method) 의미있는 이미지의 텍스트를 제공하는 경우에 사용 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어쓰기)빼내어 보이지 않게 하는 방법 ir_ pm { display: block;..