HTML, CSS (3) 썸네일형 리스트형 CSS | revert, unset react와 styled-component를 사용하여 프로젝트를 진행할 때 코드를 줄이기 위해 기본적인 text속성을 정의해두고 H1, H2 등 다른 속성에 상속시켜 사용했다. 그러다보니 몇 가지 속성은 기본적인 text속성과 font-weight 등 한 두가지가 달랐는데, 이를 효과적으로 처리할 수 있는 revert를 알게되어 정리해본다. revert란? revert 는 현재 엘리먼트에 선언 된 css 속성을 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것이다. revert 속성은 각각의 경우의 수에 따라 아래와 같이 적용된다. 1. 사이트의 기본적인 css 속성이 지정되어있는 경우 : 유저가 지정한 커스텀 스타일로 돌아간다. 2. 사이트의 css속성이 하나만 .. CSS로 요소 가운데 위치시키기 ? : CSS 코드를 작성할 때, 요소를 가운데 정렬하는데 어려움을 겪은 적이 있나요? 나 : 🙋♀️... 그래서 정리해본다. CSS로 요소를 가운데 정렬하는 방법! 아래 방법 중 한 가지만 적용해도 가로, 세로 가운데 정렬이 가능하다. 기존 세팅 HTML HTML 코드는 아래에서 변함이 없다. CSS html,body 태그에 height: 100%를 준다 html, body { height:100% } .outerDiv { background-color:darkseagreen; width:250px; height:250px; } .innerDiv { background-color:teal; width:100px; height:100px; } 1. 부모요소에 flex 속성 부여 부모 요소에 한 방향 레.. CSS | Flex 노마드코더 코코아톡 클론 강의를 들으며 CSS Flex에 대한 이해가 부족함을 알았다. 어떻게 하면 더 정확히 이해할 수 있을까 공부하던 중 1분 코딩 포스팅을 접했고, 친절한 설명과 직관적인 그림이 곁들여진 예시 덕분에 이해할 수 있었다. 그 외 자료들도 학습 후 이해한 내용을 바탕으로 내 식대로 정리해보기 1. Flex (=Flexible Box, Flexbox) 레이아웃을 위한 기능으로, 하나의 flex item이 자신의 container가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 먼저, Flex 레이아웃을 위한 기본적인 HTML 구조는 아래로 설정해두려 한다. box1 box2 box3 이 때 div.container는 flex 속성의 영향을 받는 전체적인 공간, .. 이전 1 다음
