display:none > 영역 사라짐 이벤트(ex.클릭) 작동 안함 tab focus 안됨 visibility:hidden > 영역 있음 이벤트(ex.클릭) 작동 안함 tab focus 안됨 뒤에 있는 요소 클릭 가능 opacity:0 > 영역 있음 이벤트(ex.클릭) 작동 함 tab focus 됨 뒤에 있는 요소 클릭 불가능

CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. 스타일 컴포넌트를 쓰는게 아니라 background-images로 받아온 데이터 값을 쓰기 힘들때 등 object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object-fit 속성 값 속성값들의 변화를 살펴보

오늘 업무 중 받아온 API 데이터가 등으로 쭉 이어진 문장을 공백을 주어 나눠줘야하는 일이 있었다. 보자마자 split으로 나눠주려 했으나 이전에 사용했던 다른 분들의 코드를 보니 css중 white-space를 써서 사용한 것을 알게 되었고 참고하여 진행했다. 정말 간단하게 해결할 수 있는 걸 굳이 무겁게 풀지말고 white-space에 대해 정리해보자 white-space white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성이다. white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit ~ initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 1.* 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력*하는 것입니다. 줄바꿈의 처리방법입

CSS 속성은 보통 편한대로 적을 수 있다. 하지만 여러 사람이 같이 작업하는 경우 작성해 둔 CSS 를 보면 속성을 찾느라 시간이 소모되곤 한다. 이런 점을 보완하기 위해 모질라에서 제안한 CSS 작성 순서가 있어 메모하려 한다. 위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피 와 같이 밖에서부터 안쪽으로의 흐름이다.

다중 선택자 css는 여러 요소를 동시에 선택하거나 특정 클래스나 id안의 요소를 선택할 수도 있는데 이게 자주 햇깔리기에 정리하려한다. 쉼표(,)가 있는 경우 이런 경우 일치하는 모든 요소를 선택하여 스타일을 준다. 요소 사이 공백없이 붙어있는 경우 이런 경우 choonsik과 ryan 클래스를 모두 가진 요소를 선택한다. 요소 사이 공백을 가지고 붙어있는 경우 이런 경우 클래스 내부의 요소를 선택하기 위해 사용한다. 위와 같은 경우라면 choonsik클래스 내부의 ryan클래스를 선택한 경우이다. 이런식으로 자주 사용한다.