padding
-
카카오톡 클론 코딩 #16 box-sizing: border-box이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 22. 01:51
이번 포스트에서는 너비가 300px, 높이가 100px인 box를 가지고, box에 padding 값을 줄 때 생길 수 있는 문제를 해결해 주는 box-sizing: border-box;를 살펴 보겠습니다. 기본적으로 box에 padding-left: 20px;를 줄 때, 즉, box-sizing: border-box;를 입력하지 않았다면, box 내부에 padding 값만큼, 빈공간을 만들어 주기 위해, box의 크기를 20px만큼 더 키우고 내부에 padding, 빈공간을 만듭니다. (padding은 초록색으로 표시) 만약 box의 너비를 100%로 맞춰 놓고(브라우저 창에 맞추기), box에 padding값을 추가하면, box의 크기는 커지기 때문에, 우측 content는 padding값만큼 잘려서..
-
CSS정리이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 31. 03:55
지금까지 배웠던 CSS를 한 눈에 정리해 보도록 하겠습니다.제일 먼저, 1. CSS-syntax, 문법에 대해 배워보았고, 2. CSS-HTML연결을 시켜 보았습니다. 그 다음, 3. 박스모델(마진, 패딩)에 대해 알아보았습니다. 그리고 4. 포지션(static, fixed, relative, absolue)를 배웠고, 5. 디스플레인(block, inline-block, inline)에 대해서 살펴보았습니다. 6. 박스를 나열하는 방법인 flex와 7. class로 따로 명명하지 않았지만 지칭하는 방법, 가상설렉터(type, nth child 등)와 마지막으로 8. element states(hover, active, focus, visited)를 배웠습니다.
-
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..