13. box model _ contents의 크기 계산 box model이란 간단히 말하면 box의 크기를 계산하는 방법입니다. 사람에 비유하자면 내 키와 뚠띠정도에 옷 두께, 깔창 등등 모든걸 다 합한 후 내 부피가 얼만한가에 관한 것입니다. 크기에 영향을 주는 요소로는 width, height, padding, margin, border가 있습니다. 이 모든 요소를 다 더하면 이 컨텐츠의 크기가 나옵니다. 위에 컨텐츠의 box model을 계산해 봅시다. 먼저 가로를 계산합니다. width 값이 300px, padding이 왼쪽 오른쪽 각각 30px씩이니 +60px 입니다. 거기에 border가 왼쪽 오른쪽 3px씩 해서 +6px, margin이 30px씩 +60px입니다. width = 300px + (30px+30px) + (3px+3px) + (30.. 더보기 12. margin, padding _ 여백 주는 요소 margin과 padding 둘다 여백을 주는 요소입니다. 구조도 똑같지만 출력 방법이 큰 차이가 있습니다. 가장 큰 차이는 여백이 border의 안쪽에 존재하느냐 바깥쪽에 존재하느냐 입니다. 일단 공통적인 표기 방법을 봅시다. 하나의 세가지 방법이 있습니다. 첫번째는 여백이 같은 치수 일때, 하나로 요약해서 사용합니다. 두번째는 아래위 여백이 같고 좌우 여백이 같을때 사용합니다. 세번째 네번째는 각각 여백이 제멋대로 일때 사용하는데요, 세번째는 한번에 써줄때 사용하며 순서는 위 / 오른쪽 / 아래 / 왼쪽 순으로 써줍니다. 네번째는 그냥 하나하나 margin-top, margin-right.... 이래 적어주심 됩니다. CSS margin margin은 다른 태그와 나랑 사이에 여백을 주는 것입니다. .. 더보기 11. border _ 선 요소 border는 선, 테두리에 관련된 요소를 지정해줍니다. 전체에 적용하거나 한 방향에, 혹은 박스에 둥글기도 줄 수 있습니다. 기본 표기법부터 보겠습니다. 표기 순서는 선 굵기 / 선 타입 / 선 색깔 순으로 적어줍니다. 전체 위 오른쪽 아래 왼쪽 CSS 전체 위 오른쪽 아래 왼쪽 line type 선 타입으로는 자주 쓰이는 것은 solid와 none, dotted 값이 있구요, 그 외에도 여러 타입들이 있는데 사실 저 세가지 이외엔 한번도 써본적이 없네요. 하지만 세상일은 모르는 것이니 하나씩 다 쳐보고 확인해 봅시다. dotted / dashed / solid / double / groove / ridge / inset / outset / none 참고로 각 타입을 mix해서 각 선마다 다르게 쓸 수.. 더보기 이전 1 2 3 4 5 ··· 11 다음
