CSS
CSS Module
코드의 가독성과 유지보수를 위해 css 코드를 분리하는 것을 선호하는 편이다. 문제는 리액트 프로젝트에서는 .css 파일을 컴포넌트에서 바로 import했을 경우 css 클래스가 중첩될 수 있다는 것이다. 어떤 컴포넌트에서 import되었더라도 전체 HTML 코드에서는 head태그 안에 style로 저장되기 때문에, 모든 컴포넌트에 적용된다. 따라서 실수로 클래스 이름을 같게 했다면 다른 엘리먼트에 같은 스타일이 적용되고, 코드가 길어질수록 이런 문제는 자주 발생하게 된다. 이를 해결하기 위해 CSS Module을 사용한다. CSS Module을 사용하면 해당 CSS 파일에 선언한 클래스 이름들이 모두 고유해지기 때문에 클래스 중첩을 완벽히 방지할 수 있다. CRA(create-react-app)으로 만..
CSS transform: translate vs. absolute positioning
CSS로 엘리먼트의 위치를 잡을 때 translate 또는 top: 0px; left: 0px; 과 같은 absolute positioning을 사용한다. 쿠키런을 개발하면서 쿠키의 위치를 매 프레임 translate 값을 변경하며 이동시켰기 때문에, 아무 생각 없이 장애물의 위치를 쿠키와 마찬가지로 translate를 이용해 잡았었다(JS 코드에서). 이후 장애물 파괴 애니메이션을 추가하며 인라인 스타일 우선순위로 인해 transform: rotate 속성을 적용시키지 못해 고생하다가, 장애물을 생성할 때 왜 굳이 translate를 사용했는지.. 근본적인 의문이 생긴 것이다. 목적 우선 translate와 absolute positioning은 목적부터 다르다. translate는 위치 이동이 필요한..
CSS line-height
div 태그 안의 텍스트를 가운데 정렬 하고 싶을 때는 text-align을 center로 설정한다. 그러나 text-align 속성으로는 가로축 가운데 정렬만 가능하기 때문에 div 영역의 제일 위 가운데에 텍스트가 배치된다. 세로축 가운데 정렬을 위해서는 여러 방법이 있지만 제일 간단한 방법은 line-height를 이용하는 방법인 것 같다. line-height는 줄 높이를 설정하는 속성이다. line-height: normal | length | number | percentage | initial | inherit ; normal : 웹브라우저에서 정한 기본값 (보통 1.2) length : 길이 number : 글자 크기의 n배 percentage : 글자 크기의 n% initial : 기본값..
CSS transition
CSS transition은 CSS 속성을 변경할 때 애니메이션의 속도를 조절하고 변화를 부드럽게 해준다. transition: ; 위와 같이 사용한다. property transition을 적용할 CSS 속성의 이름을 지정한다. 여러 개의 속성을 지정할 경우 쉼표로 구분한다. 속성 이름 대신 none(모든 속성에 적용하지 않음), all(모든 속성에 적용함), initial(기본값으로 설정), inherit(부모 엘리먼트의 속성값 상속)을 사용할 수 있다. duration transition이 끝날 때까지 걸리는 시간을 지정한다. 기본값은 0s다. 시간 대신 initial(기본값으로 설정), inherit(부모 엘리먼트의 속성값 상속)을 사용할 수 있다. timing-function 속성의 중간값을 계..
CSS will-change
will-change 속성은 엘리먼트의 속성값이 변화될 때 어떻게 변화하는지를 브라우저에 미리 알려줌으로써 브라우저가 미리 인지하고 준비해 더 부드럽게 처리하도록 도와준다. 변화의 종류를 브라우저에게 알려주기 때문에 미리 적절하게 최적화할 수 있는 것이다. will-change: auto; // 기본값 will-change: scroll-position; // 엘리먼트의 스크롤 위치가 바뀔 것 will-change: contents; // 엘리먼트의 컨텐츠 중 일부가 바뀔 것 /* or 특정 CSS 속성을 명시: transform, opacity, top, left, right, bottom 등 */ will-change: transform; will-change: left, top; // 여러 속성 동..
JS DOM style(CSS) 변경 / 접근
JS를 이용해 DOM 엘리먼트의 CSS style을 변경할 수 있다. 단, JS에서 스타일을 바꾸는 것은 속도에 영향을 줄 수 있기 때문에 CSS로 가능한 경우에는 CSS를 이용하는게 좋다. 나는 함수로 전달된 값을 이용해 스타일을 지정해야 했기 때문에 JS를 이용해 스타일을 편집했다. style 속성값 변경 1. style let exampleValue = 10; const element = document.getElementById('test'); element.style.left = exampleValue + "px"; 엘리먼트의 left 속성값을 exampleValue로 설정하는 코드다. 2. style.cssText const element = document.getElementById('tes..
CSS, JS transform / JS requestAnimationFrame - 애니메이션 만들기
웹에서 애니메이션을 만드는 방법은 크게 세 가지가 있다. 각각의 특징에 맞게 선택해서 사용하면 된다. 세 방법 간에 미묘한 차이가 있는데, 찾은 자료가 다 영어고 번역했더니 이상해서 그대로 가져왔다. CSS transform Use CSS when you have smaller, self-contained states for UI elements. 작은 엘리먼트거나 엘리먼트 자체가 변경되는 경우 css 코드에서 transform을 이용한다. 나는 게임 캐릭터가 반대편을 봐야하는 상황에서 캐릭터에 flip 클래스를 추가하고 flip 클래스의 css 코드에 transform 속성을 작성했다. transform에는 다음과 같은 값들을 넣을 수 있다. /* 키워드 값 */ transform: none; /* 함..
CSS overflow
overflow 프로퍼티는 엘리먼트 안의 컨텐츠가 너무 커서 한 화면에 보여줄 수 없을 때 어떻게 보여줄지를 결정한다. 사용할 수 있는 값은 네 가지가 있다. visible (기본값) 컨텐츠가 경계선을 넘어 밖으로 보여짐 hidden 넘치는 부분은 잘려서 보이지 않음 scroll 가로, 세로 스크롤바가 추가되어 스크롤할 수 있음 auto 컨텐츠의 양에 따라 자동으로 스크롤바를 추가할지 결정 https://developer.mozilla.org/ko/docs/Web/CSS/overflow overflow - CSS: Cascading Style Sheets | MDN overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overfl..