letsgojieun

폰트 및 컨테이너 크기를 지정할 때 사용하는 단위는 여러 가지가 있는데,정적인 부분은 px, 동적인 부분은 %, viewport(vh, vw), em, rem이 존재한다 px모니터 위에서 화면을 나타내는 가장 작은 단위이며 반응형으로 사용하기는 힘들어서 정적인 웹페이지에 사용한다.컨테이너 사이즈 변경되어도 콘텐츠의 크기는 변경 없이 그대로 고정되어 있기 때문이다또한 픽셀로 폰트 크기를 변경하는 경우, 브라우저에서 폰트 크기를 변경해도 아무런 반응을 하지 않음 (아예 고정되어있음)이는 웹 접근성이 떨어진다고 볼 수 있다.em같은 폰트사이즈라 하여도, 사용하는 폰트 패밀리에 따라 사용자에게 보이는 크기가 달라질 수 있는데em은 폰트패밀리에 상관없이 항상 고정된 폰트 사이즈를 갖고 있다em은 부모의 폰트 사이..

innerHTML display:none으로 지정한 요소, 자식 요소의 element tags, 모든 스페이싱(띄어쓰기), 줄 바꿈이 그대로 출력된다. 세 가지 중에서 가장 추천하지 않는 속성이다 프로퍼티의 값은 text와 html로 파싱 한 결과이며 다른 속성에 비해 상대적으로 파싱이 느리다 하지만 파싱이 느리다는 점 보다 더 큰 문제는 보안 취약성 문제이며, XSS의 취약 사례로 언급이 되기도 했었다. innerText text, plain으로 파싱한 결과이며 element tags 없이 딱 텍스트만 나온다. 만약 여러 번 중복되는 스페이싱이 존재한다면 딱 한 번만 나오며, 줄 바꿈은 따로 적용되지 않는다 innerText는 IE8이하에서 지원되지 않았던 TextContent와 달리 IE엔진에 적합한..

저번 포스팅에선 버블링과 캡처링에 대해 알아보았다 버블링과 캡처링이 브라우저에서 이벤트가 발생하고 동작하는 방식, 그 자체에 대한 용어라면 이벤트 위임은 이러한 방식을 이용한 기술이라고 할 수 있다 자바스크립트에서 동적인 요소의 이벤트를 처리할 때, 만약 투두 리스트를 만든다는 가정하에 1 2 3 4 5 6 7 8 9 10 1부터 10까지의 자식 요소인 list가 있고 그 자식 요소들을 ul이라는 부모 요소가 감싸고 있다고 가정해보자 이 경우, 자식 요소인 를 클릭하면 할 일을 완료했다는 의미에서 밑줄을 치거나 없애는 이벤트를 등록할 때 자체에 이벤트 핸들러를 등록하여 documentqueryselectorall + forEach 구문을 이용할 것이다 위의 코드 블록처럼 1~10까지의 요소들만 존재한다면..

강의를 듣다가 캡처링과 버블링에 대해서 간단히 알게 되었다 나중에 이벤트 위임에 대해 배우기 위해 꼭 알고 있어야 할 필수지식이라 이번 포스팅에 정리해보려 한다 버블링이란? 화면에서 어떠한 이벤트가 발생했을 시, 하위부터 시작해서 그 이벤트가 최상위까지 전달되는 것을 말한다 참고로 무조건 이벤트를 주었다고 전파되는 것이 아닌, 부모-자식관계이며 (형제관계 X) 하위에 click 이벤트를 주었을 때 마찬가지로 최상위도 click 이벤트가 존재한다면 버블링이 발생하고, 최상위가 click이 아닌 submit 등 다른 이벤트면 버블링이 되지 않는다. 브라우저에서 이벤트 처리 시, 기본은 버블링이지만 최상위 요소 (부모)에 { capture: true} 속성을 적용하여 캡처링으로 변경이 가능하다 (원래 디폴트 ..

항상 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..

프로젝트 중 아래의 기본 프로필 이미지 위로 업로드할 이미지를 드래그하면프로필 사진이 대체되는 드래그 앤 드롭 기능을 추가하였다사실 아래의 기본 이미지도 많이 뒤틀렸는데 position 속성을 이용하여 딱 맞게 수정했다 (div 위에 이미지를 올릴 수 있는 코드는 밑에서 참고)  원래 아이콘만 배치해놔서 큰 문제가 없었다그러다 새로운 프로필 사진으로 등록할 이미지를 프로필 위에 드래그하니까이미지가 프로필 경계선 위로 올라가지 않아서 옆에 배치되거나,올라가더라도 프로필 경계선과 맞지 않는 문제점이 생겼다  그렇다면 div 위에 svg 아이콘 및 img 이미지 요소를 어떻게 원하는 위치에 올릴 수 있나?  기본 프로필 아이콘 이미지  1. 가장 밑으로 내려 줄 배경으로 (여기선 profile_wrapper ..

기본 중에 기본 미니 프로젝트인 바닐라 자바스크립트로 만든 todo list 같은 shopping list! 상단에 프로젝트명을 작성하고 사용한 기술 스택과 어떻게 작동하는지 스크린샷을 첨부하였다 근데 README에 이미지 첨부는 딱히 문제가 없는데 짤막한 영상 촬영한 걸 다른 사이트에서 gif형식으로 바꾸고 등록하니까 속도 저하가 너무 심하다.. 보고 있는데 답답할 지경이라 다른 방법을 찾아보고 재업로드할 예정이다 디자인은 이곳저곳 사이트를 보면서 todo list design by Goutham 을 참고하였다 엄청 심플하면서 포인트 컬러가 살짝 들어가 있어서 더 맘에 든다 여기에 작성했던 건 내가 리드미에 수정 및 보완해야 할 리스트로 올렸었다 하루에 하나씩 해결했었는데 작동이 될 때마다 그 뿌듯함은..

Git에 올렸다면 클론 하여 가져올 수 있지만 클론을 안 했다는 가정하에 다른 방법으로 프로젝트를 가져오는 방법을 알아보자 우선 스위치 워크스페이스로 다른 프로젝트로 이동한다 바탕화면에는 MyUSB라는 새로운 폴더를 생성한다 (usb라고 생각하기로..!)  마우스 우클릭하여 Export 클릭  General -> file system  빼내고 싶은 파일을 클릭한다(Servers는 빼면 안됌. 이건 설정하는 것) 그리고 디렉토리에서 MyUSB로 경로설정 후 Finish 클릭  이렇게 하면 프로젝트가 폴더로 빠져나와있다 이제 스위치 워크스페이스로 다시 AnotherComputer로 이동하여 USB 폴더의 프로젝트 폴더를 모두 가져 올 차례이다  이번엔 file->import  이미 존재하고 있는 파일을 워크..

저번에 커밋 메시지 작성과 커밋까지 단계를 끝냈다여기서 나의 프로젝트를 깃헙에 올리고 싶다면?깃헙 로그인하고 깃헙 리포지토리 생성 후 푸시하면 된다 참고로 깃헙에서 리포지토리 생성할 때 밑에 Add a README file X리드미 파일 생성을 이유는 저장소 생성할 때 이미 존재하는 내용을 올려야 해서완전히 빈 저장소로 생성해야 한다(만약 리드미 만들면 리드미 추가된 커밋이 생김)  프로젝트 마우스 우클릭 -> Team -> push branch master  저장소 주소를 복사했었다면 자동으로 저장소 주소가 입력되어있다리모트 이름은 오리진 이라는 저장소가 디폴트 이름이며 변경이 가능하다 그리고 Preview 누르고 마지막에 Push 누르면 완료! 다시 깃 환경으로 변경하고. gitignore 파일에서 ..

저번 포스팅에 이어 이번에는 이클립스에서 git으로 관리하는 작업에 대해서 어떻게 처리가 가능한지 알아보자  우선 Sampleproject 마우스 우클릭 -> Team -> Share project 클릭을 한다  저번에 만들었던 MyGit에서 git 저장소로 사용될 새로운 폴더를 생성한다새로운 폴더명의 이름은 sample로 만들었다 (위의 acorn2020_java는 이미 다른 프로젝트에서 사용하고 있는 git 저장소라 여기서 만들면 안 된다.)  상단의 체크박스 '~in parent folder of project'는 워크스페이스에 생성하는 거라 클릭하면 안 된다Repository는 옆에 Create 버튼 클릭하여 저장소로 생성할 폴더를 직접 클릭해준다 (sample 폴더 경로로 설정하기)그리고 Fin..