상자
-
Box model, 상자이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 25. 05:15
이번시간에는 BOX모델에 대해 알아보도록 하겠습니다. CSS를 배울 때 이해해야 되는 것 중 하나가 많은 element들이 box, 상자형태라는 점과, 그 요소가 4개 라는 것입니다. 1> 첫 번째는 contents, 컨텐츠, 내용, 2> 두 번째는 박스의 경계, border, 보더, 3> 세 번째는 padding, 패딩, 박스의 보더, border에서 안쪽으로 있는 간격, 4> 그리고 마지막 네번 째는 margin, 마진, 박스의 border, 보더에서 바깥쪽으로 있는 간격 정리하면, contents, 컨텐츠와 border, 경계 안쪽에 있는 간격이 padding이고, 바깥에 있는 간격은 margin입니다. 그럼 이제 HTML문서로 가서, title에는 Box Model이라고 쓰고, incline방법으..
-
CSS 박스모델이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 23. 15:45
수많은 HTML요소들은 박스(box, 상자형태)로 이루어져 있습니다. 박스는 아래의 4가지 영역으로 구성 됩니다. 1. 바깥쪽 여백(margin, 마진), 2. 테두리 선(border, 보더), 3. 안쪽 여백(padding, 패딩), 4. 내용(contents, 콘텐츠) 바깥쪽 여백(margin, 마진) 방향은 위부터 시계방향으로 회전하여, 위, 오른쪽, 아래, 왼쪽 순서로 설정 테두리 선(border, 보더) 속성 border: 선의 너비(width), 모양(style), 색상(color) 순으로 값 입력. 속성 border-top/right/bottom/left: 선의 너비(width), 모양(style), 색상(color) 순으로 값 입력. 속성 border-width 속성 border-style..