코드노트

이벤트 event - 시스템에서 사건이 일어나는 것 이벤트 핸들러 = 이벤트 리스너 - 이벤트를 발생했을 때 실행되는 코드 - 이벤트를 js에서 인식하여 사용하게 하는 것 이벤트핸들로 표기법 - on + 이벤트명 표기 - 모두 소문자로 표기 마우스 이벤트 (Mouse Event) 핸들러 click, doubleclick onclick, ondbclick 클릭 / 더블클릭 mousedown onmousedown 마우스 누를 때 mouseup onmouseup 눌렀던 마우스를 땠을 떄 mouseover onmouseover 요소 위로 마우스를 올렸을 때 mouseout onmouseout 요소 밖으로 마우스를 움지였을 때 포커스 이벤트 (Focus Event) 핸들러 focus onfocus 포커스 얻음 b..

클로저(Closure) - 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합 - 외부 함수보다 충첩함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조 - 중첩 함수 == 클로저 -> 내부함수가 외부함수 변수에 접근 가능 function init() { // name은 init에 의해 생성된 지역 변수 var name = "Mozilla"; // displayName() 은 내부 함수이며, 클로저 function displayName() { // 부모 함수에서 선언된 변수를 사용 alert(name); } displayName(); } init(); 쉽게 이야기하자면 함수안에 함수를 만들었을때 그 외부에 있는 변수를 사용할 수 있다. - 부모 함수에서 선언된 변..

링크를 연결할 때 사용하는 태그인 a태그에서 대부분 target="_blank"를 사용한다. 기존 페이지를 남겨두고 새창에서 띄우기 때문에 어떻게 보면 사용자 편의성에서도 좋은 속성이다. 다만 여기서 문제점이 생긴다. 보안에 있어서 취약점이 생긴다는 것! 그 보안취약점을 보완하기 위해서 rel="noopener nereferrer nofollow" 이 세가지 속성을 사용할 수 있다. 세가지 속성들의 사용법은? - noopener 하이퍼링크를 클릭하게 되면 새로 열린 페이지가 보조 브라우징 컨텍스트이기 때문에 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있다고 한다. 응..? 쉽게 설명하면 새 페이지에서 많은 js를 실행하게 되는 경우 원본 페이지의 성능이 저..

css로 text를 숨기는 방법은 여러가지가 있다. 웹접근성 및 스크린리더를 생각해야하기 때문에 사용하는 경우가 많은거 같았다. (특히 로고같은 경우 a태그를 사용기 때문에!) 우선 텍스트를 숨기기는 방법중에서는 display : none, hidden opacity: 0 요소의 위치를 안드로메다로 보내는방법... 요소의 크기를 줄이는 방법. 등등 여러가지 방법이 있지만 그중에서 이방법이 가장 간편한거 같다. 여기서 요소의 크기를 줄이는 방법으로 하게되면 인라인요소이다보니 영영이 아예 사라져버린다. 만약 배경이미지를 넣거나 영역을 살리고 싶다면? display: block; font-size: 0; width: 100px; height: 100px; 이렇게 css를 작성하게 되면 지정한 영역은 살아있고 ..

input, button type에 따라서 form제출이 정해진다. input, button 제출 여부 // 제출 // 제출 안됨 // 제출 // 제출 // 제출 안됨 - input, button태그에 상관없이 type이 button이면 제출이 되지 않는다.

form 태그에서는 method ="속성"을 입력하게 된다. 폼 데이터가 서버로 제출되면서 사용되는 메소드이다. method에 입력할 수 있는 속성값은 get, post가 있는데 두개는 차이가 있다. GET get은 url(기존 주소)에 ?를 기점으로 id, pw를 추가하여 전달한다. input값이 id, pw등 두개 이상의 정보를 전달해야하면 &를 통해서 분리되어 전달된다. - get방식은 브라우저에 캐시되어 저장된다. - 보안에 있어서 취약하며, 중요한 데이터는 Post를 통해서 전달하는게 좋다. - 보통 쿼리 문자열에 포함되어 전송되기 때문에 길이의 제한이 있다. POST - post 방식은 url이 아니라 폼 데이터를 별도로 첨부하여 서버로 전달된다. - 브라우저에 캐시되어있지 않기 때문에 브라우..

WAI-ARIA Roles role은 쉽게 말하면 alt속성과 유사하다고 볼 수 있다. img태그를 사용할 때 이미지가 뜨지 않거나 스크린리더를 위해서 alt에 이미지 이름을 넣는다. 대체문자를 넣는것과 비슷하다. role은 태그별로 넣을 수 있는 역할들이 분류되어 있다. 꼭 넣어야하는 것은 아니지만 alt를 신경쓰는만큼이라도 role은 신경써야하는 부분인거 같다. WAI-ARIA Roles - Accessibility | MDN ARIA roles provide semantic meaning to content, allowing screen readers and other tools to present and support interaction with object in a way that is con..

이미지 스프라이트 image sprite 여러 이미지들이 합쳐져있는 모습들을 본적이 있을 것이다. 이미지를 넣을 때 하나의 이미지를 여러장 넣는것보다 하나의 이미지를 넣고 그 이미지의 position값을 통해서 나타낼 수 있다. .icon { background-image: url("이미지 주소"); background-size: 이미지 사이즈; display: inline-block; width: 가로 크기; height: 세로 크기; background-position: 이미지 위치; } - 하나의 이미지 파일만 관리하기 때문에 관리대상 및 유지보수에도 유리하다. - 여러 아이콘들을 사용할 때 사용하기 좋다.

전체 디자인을 살펴본다. - 대량적인 큰 레이아웃을 구상 - 메인 컴포넌트를 분석 - 반복되는 컴포넌트를 구분 가변적인 요소가 들어가는 항목을 확인 - 이미지가 가변일 때, no image처리는 어떻게 되는가? - 이미지 비율이 다를때 어떤 기준으로 크롭하는가? - 텍스트가 가변일 때 몇 줄까지 노출하는가? / 번역 및 말줄임 - 값이 없을 때 0으로 노출하는지, 항목 자체가 사라지는지? 기획/디자인 측에서 요청한 인터랙션이 있는지? 마크업에는 정답이 없음. - 같은 화면이더라도 마크업 하는 방식은 개발자마다 모두 다름 - 모작을 하는 과정 혹은 다뤄보지 않은 레이아웃에 대한 고민이 있을 땐, 벤치마킹할 사이트의 코드를 훑어본다. - 주로 국내 서비스라면 네이버, 글로벌 서비스라면 구글이 좋은 예제

Normalize CSS Normalize.css: Make browsers render all elements more consistently. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. necolas.github.io reset CSS CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like d..