markup/css

css display: flex, flex: 1

display flex는 자식 요소들의 정렬을 위하여 사용합니다. 부모 요소에 display: flex를 추가해주면 자식 요소들의 정렬을 제어할 수 있습니다. 자식 요소들이 display: inline 이건 block이건 레이아웃을 설정할 수 있습니다. display: flex를 주게 되면 자식 요소들은 자신이 가진 컨텐츠의 크기만큼만 넓이를 가지게 됩니다. 이때 자식요소들에는 width와 height 속성을 부여할 수 있습니다. 원래 inline 속성에는 width, height을 줄 수가 없지만 display: flex를 부모요소에 적용함으로써 위의 이미지와 같이 width, height 을 줄 수 있습니다. flex-direction 자식 요소들의 정렬방향을 제어할 때 사용합니다. flex-dire..

display: block, inline, inline-block, none

display가 inline인지 block인지 확인할 수 있는 간단한 방법이 있습니다. 확인해보고 싶은 영역에 background-color를 설정해주면 확인할 수 있습니다. inline은 자신의 영역만 차지합니다. 또한 옆으로 쌓이게 됩니다. block은 가로 영역 전부를 차지합니다. 또한 위아래로 쌓이게 됩니다. 위의 이미지에서 확인할 수 있는 block은 , , , 이 있고 , 은 display속성이 Inline 입니다. display: block display: block은 가로영역 전부를 차지하게 됩니다. 또한 위아래로 스택처럼 쌓이게 되어 줄바꿈이 된것처럼 나타나게 됩니다. width, height을 설정할 수 있습니다. display: inline display: inline은 자신의 영역만..

box-sizing 속성

css의 속성중에 box-sizing은 요소의 넓이와 높이가 계산되는 방식에 변화를 줄 수 있습니다. box-sizing을 border-box로 주게 되면 css 속성중 설정한 width, height으로 태그가 고정되게 됩니다. padding과 border-width를 키워도 해당 태그는 width와 height으로 고정됩니다. box-sizing을 content-box로 주게 되면 padding과 border-width를 제외한 컨텐츠 들만 설정된 width와 height의 값을 가지게 됩니다. 아래의 코드를 보겠습니다. 코드의 실행 결과는 아래의 이미지 입니다. border-box content-box border-box의 총 width는 100px 입니다. content-box의 총 width는 ..

css reset

여러 브라우저들은 각자의 default css를 가지고 있습니다. 우리가 작성한 웹페이지가 모든 브라우저에서 같게 보이려면 각 브라우저의 default css를 reset 시켜주어야 합니다. ex) 브라우저 별로 css가 다르게 적용되는 예시 reset을 하는 방법은 두가지 입니다. 1. reset.css를 작성하는 방법 2. styled-components, styled-reset 패키지를 이용하는 방법 1. reset.css를 작성하는 방법 reset을 적용하기 전입니다. 1-1 reset.css를 작성 1-2 head 태그내에서 해당 css를 import // reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License..

css로 삼각형 만들기

아래의 이미지와 같이 tooltip을 구현할시에 삼각형을 만들어 표시해주고 싶었습니다. css로 삼각형을 만드는 법을 포스팅 하고자 합니다. 방법은 쉽습니다. 1. width와 height을 0으로 준다. 2. border-width는 원하는대로 설정, border-style은 solid 3. border-color를 통해 삼각형을 원하는 방향으로 표시해줍니다. 하나씩 살펴보겠습니다. 1. width와 height이 50이고 border가 설정되어있는 div하나를 나타내보겠습니다. width: 50px; height: 50px; border-style: solid; border-color: black; border-width: 8px; text-align: center; justify-content: c..