markup22 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는 .. 2022. 3. 1. label 태그 Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다. 크게 2가지의 이유로 필요하다고 생각합니다. 1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 이러한 동작은 웹의 ux에 도움을 줄것 같네요 2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다. 이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다. click me click me input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 밖에 위치할 경우 label의 for와 input의 id 값이 .. 2022. 3. 1. 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.. 2022. 2. 8. 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.. 2022. 2. 7. 이전 1 2 3 4 다음
