본문 바로가기

IT 개발85

Vue 시작하기 ① 학원에서 배웠지만 사용을 안 하다 보니 그새 머릿속에서 지워지고 있었다기억을 되살리자는 의미로 블로그에 정리를 해보겠다   본격적으로 Vue.js 시작하기Vue 공식문서를 참고해가면서 공부하면 좋다참고 예시가 아주 잘 나와있기 때문 :)  vue 공식 페이지의 '시작하기'를 클릭해서 천천히 읽어보기를 추천한다 일단 HTML 코드 복사하여 사용하고자 하는 파일에 붙여 넣는다  https://kr.vuejs.org/v2/guide/ 시작하기 — Vue.jsVue.js - 프로그레시브 자바스크립트 프레임워크kr.vuejs.org      안에 vue를 작성한다app이라는 새로운 vue 생성자를 만들고,여기에 연결 요소를 추가하려면 el: "#아이디 이름"을 작성하여 컨트롤이 가능하다밑의 data에 원하는 데이.. 2021. 8. 6.
CSS 단위 em, rem, vh vw, %, px 정리 폰트 및 컨테이너 크기를 지정할 때 사용하는 단위는 여러 가지가 있는데,정적인 부분은 px, 동적인 부분은 %, viewport(vh, vw), em, rem이 존재한다 px모니터 위에서 화면을 나타내는 가장 작은 단위이며 반응형으로 사용하기는 힘들어서 정적인 웹페이지에 사용한다.컨테이너 사이즈 변경되어도 콘텐츠의 크기는 변경 없이 그대로 고정되어 있기 때문이다또한 픽셀로 폰트 크기를 변경하는 경우, 브라우저에서 폰트 크기를 변경해도 아무런 반응을 하지 않음 (아예 고정되어있음)이는 웹 접근성이 떨어진다고 볼 수 있다.em같은 폰트사이즈라 하여도, 사용하는 폰트 패밀리에 따라 사용자에게 보이는 크기가 달라질 수 있는데em은 폰트패밀리에 상관없이 항상 고정된 폰트 사이즈를 갖고 있다em은 부모의 폰트 사이.. 2021. 8. 1.
InnerHTML & InnerText & TextContent 의 차이 innerHTML display:none으로 지정한 요소, 자식 요소의 element tags, 모든 스페이싱(띄어쓰기), 줄 바꿈이 그대로 출력된다. 세 가지 중에서 가장 추천하지 않는 속성이다 프로퍼티의 값은 text와 html로 파싱 한 결과이며 다른 속성에 비해 상대적으로 파싱이 느리다 하지만 파싱이 느리다는 점 보다 더 큰 문제는 보안 취약성 문제이며, XSS의 취약 사례로 언급이 되기도 했었다. innerText text, plain으로 파싱한 결과이며 element tags 없이 딱 텍스트만 나온다. 만약 여러 번 중복되는 스페이싱이 존재한다면 딱 한 번만 나오며, 줄 바꿈은 따로 적용되지 않는다 innerText는 IE8이하에서 지원되지 않았던 TextContent와 달리 IE엔진에 적합한.. 2021. 7. 31.
이벤트 위임이란? EventDelegation 저번 포스팅에선 버블링과 캡처링에 대해 알아보았다 버블링과 캡처링이 브라우저에서 이벤트가 발생하고 동작하는 방식, 그 자체에 대한 용어라면 이벤트 위임은 이러한 방식을 이용한 기술이라고 할 수 있다 자바스크립트에서 동적인 요소의 이벤트를 처리할 때, 만약 투두 리스트를 만든다는 가정하에 1 2 3 4 5 6 7 8 9 10 1부터 10까지의 자식 요소인 list가 있고 그 자식 요소들을 ul이라는 부모 요소가 감싸고 있다고 가정해보자 이 경우, 자식 요소인 를 클릭하면 할 일을 완료했다는 의미에서 밑줄을 치거나 없애는 이벤트를 등록할 때 자체에 이벤트 핸들러를 등록하여 documentqueryselectorall + forEach 구문을 이용할 것이다 위의 코드 블록처럼 1~10까지의 요소들만 존재한다면.. 2021. 7. 20.
캡처링과 버블링 + event.stopPropagation외에 이벤트를 막는 방법 강의를 듣다가 캡처링과 버블링에 대해서 간단히 알게 되었다 나중에 이벤트 위임에 대해 배우기 위해 꼭 알고 있어야 할 필수지식이라 이번 포스팅에 정리해보려 한다 버블링이란? 화면에서 어떠한 이벤트가 발생했을 시, 하위부터 시작해서 그 이벤트가 최상위까지 전달되는 것을 말한다 참고로 무조건 이벤트를 주었다고 전파되는 것이 아닌, 부모-자식관계이며 (형제관계 X) 하위에 click 이벤트를 주었을 때 마찬가지로 최상위도 click 이벤트가 존재한다면 버블링이 발생하고, 최상위가 click이 아닌 submit 등 다른 이벤트면 버블링이 되지 않는다. 브라우저에서 이벤트 처리 시, 기본은 버블링이지만 최상위 요소 (부모)에 { capture: true} 속성을 적용하여 캡처링으로 변경이 가능하다 (원래 디폴트 .. 2021. 7. 19.
align-items / align-content / align-self의 특징과 차이점 항상 align-items만 사용해오다가 최근 수업에서 정렬에 대해 공부하면서align-content와 align-self에 대해서도 알게 되었다.오늘은 align-content와 align-items에 대한 정확한 차이점과CSS에서 요소를 개별 정렬하기 위해 align-self는 어떻게 사용해야 하는지에 대해 정리해보겠다  우선 align-items는 축의 수직 방향을 기준으로 정렬이 된다.각 옵션은 위의 이미지를 참고하면 이해하기 편할 것이다. align-content도 이와 비슷한 것 같지만 조금 다른 점이 존재한다  align-items는 한 줄을 기준으로 정렬하는 반면, align-content는 두 줄부터 사용하는데 의미가 있다그래서 align-content의 경우, 두 줄의 flex-wrap.. 2021. 7. 14.
반응형

티스토리툴바