HTML6 2020.10.21 TIL 노마드코더 코코아톡 클로닝 후기 노마드코더 코코아톡 (카카오톡) HTML CSS 클로닝이 끝났다. CSS는 프론트엔드에서 사용자의 사용감과 인상에 밀접한 영향을 주지만, 개인적으로는 개념을 잘 알지못해 지루하고 어려운 부분으로 생각했었다. 그런데 CSS를 한 번 해보니, 백엔드와 다른게 적용되는게 눈으로 확확 보여서 재밌다. 해당 수업에 대해 배운 내용을 좀 더 정리하자면, 그간에 내멋대로 지었던 변수명에 대해서 일정 규칙과 아이디어를 얻었다. 그동안 나를 애먹였던 block 과 inline CSS 레이아웃에 대한 기본 사용법을 익혔다. CSS도 코드 재활용성을 충분히 높일 수 있다. 코드스테이츠에서 제대로 잘 배워서 github에 리드미까지 작성하는 것도 잊지 않았다. 끝! 2020. 10. 22. 2020.10.19 TIL will-change : 애니메이션에서 어떤 부분이 변화할지 미리 브라우저에게 언질을 주는 것 z-index : 포토샵의 레이어 같은 개념인데, 지난번 포스팅에서 숫자가 낮을 수록 맨 위에 노출 된다고 작성한 부분은 틀렸다. 숫자가 클수록 상위에 노출된다. github 에서 서버 없이 클라이언트 부분을 무료로 퍼블리싱 하는 기능을 제공하는데 굉장하다! @media screen / print 부분을 통제할 수 있다. @media screen and (max-width: 600px) and (orientation: portrait) { #no-mobile { display: none; } } @media print { body { color: black; } #no-mobile { display: none;.. 2020. 10. 20. 2020.10.18 TIL z-index는 포토샵의 layer 라고 생각하면 된다. 만약, 서로의 엘리먼트의 요소가 겹칠 경우, 어떤 엘리먼트를 맨 위로 표현할 것인지를 z-index를 통해 지정해주면 된다. 숫자가 낮을 수록 최 상단에 노출된다. 0이 제일 위로 올라오며, 숫자가 커질수록 밑에 깔려 표현된다. order는 flex된 children 요소들에게서 사용할 수 있다. 순서를 바꿀 수 있다. modifier 를 이용해서 가급적 코드를 재활용하도록 하자. 얇게 알던 CSS를 하나하나씩 따라해보면서 그간에 무식하게 하나씩 적용했던 지루한 CSS에 흥미가 생겼다. CSS는 기존에 코딩 중에서도 가장 재미없고, 반복적이라고 생각했는데 그건 CSS를 제대로 할 줄 몰라서 였다... 내일 정도면 kakao talk css 클로닝이.. 2020. 10. 19. 2020.10.14 TIL 카카오톡 클로닝 CSS 하는 중인데, 그동안 지루하고 재미 없다고 생각했던 CSS도 막상 하나씩 따라해보니 흥미가 생겼다. 그동안 노가다로 하나씩 했던 것들을 단축키를 사용한다거나, 변수명 지정을 통해서 코드의 재활용성을 높일 수 있게 되었다. 다른 사람들이 사용하는 변수명을 그대로 써보면서, 나중에 내가 변수명을 창조해야 할 때 도움이 될 것 같다. 내일 오늘 발생했던 margin-collapse 현상과 BEM 변수 정하는 방법에 대해서 포스팅할 계획이다 2020. 10. 14. 01Jan2020 TIL Today I learned : Find closest element event 위치가 랜덤으로 설정된 엘리먼트들 중 클릭한 타겟 엘리먼트에서 가장 가까운 위치에 있는 엘리먼트에게 새로운 이미지를 추가하는 이벤트를 구현하려고 한다. 과제 가이드라인에 따르면, Pythagorean theorem (피타고라스의 정리)를 이용하여 대각선의 길이가 가장 짧은 엘리먼트를 구하는 과정이 필요했다. 우선, 화면에 구현된 이벤트 타겟이 어떤 것을 의미하는지 console.log(event.target)를 통해 살펴보았다. Span 이나 Div가 아닌 이미지가 찍혀서 해당 이미지의 style 을 살펴 보았더니 style 로 지정된게 없었다. 따라서 해당 이미지의 부모 엘리먼트를 살펴볼 필요가 있었다. 해당 부모 노트를 .. 2020. 1. 2. 22Dec2019 TIL Today I learned : FAKE airbnb 구현 (html css DOM) document.createElement() : 새로운 엘리먼트를 생성하는 것. 생성하고자 하는 엘리먼트의 종류를 스트링 형식으로 괄호에 입력하면 된다. ex) document.createElement('DIV') .setAttribute(속성, 값) : 엘리먼트에 원하는 속성을 부여하는 매소드. id / class 지정이나 style 지정도 가능하다. ex) let div = document.createElement('DIV') div.setAttribute("class", "user"); 부모노드.appendChild(자식노드) : 원하는 노드를 다른 노드의 자식으로 만드는 매소드. 해당 자식 노드는 이 매소드를 통.. 2019. 12. 23. 이전 1 다음
