• 

  [css 기초] width: auto 와 width: 100% 차이 얼핏보면 서로 같은 기능을 하는것처럼 보이는 width: auto 와 width: 100% 의 차이를 알아 보도록 하겠습니다. 아래 코드를 통해 위와 같은 두개의 사각형을 만들어 보았습니다. 검은색 테두리(width: 400px)는 각 사각형(빨간사각형, 초록사각형)의 부모태그인데요. 각사각형의 배경색이 꽉찬걸 보아 auto, 100%는 부모태그 크기에 맞추는 기능을 하는 것처럼 보입니다. 하지만 여기서 차이가 발생하는 순간이 있는데요. 먼저 padding을 추가해보겠습니다. 각각 왼쪽에 30px씩 패딩을 추가 했습니다. 결과는 어떻게 나올까요? 보시는것처럼 글자가 오른쪽으로 이동한걸 보아 padding이 둘다 잘 적용된것처럼 보이는데요. 100%는 padding이 적용된 크기만큼 부모를 뚫고 나오게됩니.. css | html 2022. 1. 4.

• 

  [css 기초] margin , padding 매번 헷갈리시는 분들 위한 포스팅 이 글을 클릭 하신분들은 magin, padding이 어떤 기능인지는 알지만, 아래와 같이 2개 이상일 때, 어디가 top 인지 letf인지 헷갈리시는 분들일텐데요. 이번 포스팅을 통해 확실하게 정리를 해보도록 하겠습니다. (margin과 padding은 사실상 같은 원리이기 때문에 이번 포스팅에서는 margin을 기준으로 설명하겠습니다.) margin이 1개 일때 아래와 같이 top, right, bottom left 전체에 적용이 됩니다. 위와 같이 일괄적으로 지정하는게 아니라 각각 다른 크기를 지정하고 싶다면 어떻게 해야 할까요? margin이 4개 일때 아래와 같이 top을 기준으로하여 시계방향 으로 크기가 지정됩니다. 사실 여기까지는 크게 헷갈리는 부분은 없을텐데요, 문제는 2개, 3개 일때입니.. css | html 2021. 12. 15.