markup

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..