box
-
Inline vs. Block vs. Inline Block이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 26. 05:20
저번시간에는 margin, padding에 대해 배웠고, 이번시간에는 display, 디스플레이에 대해 배우도록 하겠습니다 (다음시간에는 position, 포지션에 대해 배우겠습니다.) 디스플레이하는 방법 3가지, 1> block, 블록, 2> inline-block, 인라인-블록, 3> inline, 인라인에 대해 알아보겠습니다. 1> 먼저, block, 블록이 어떻게 생겼는지 살펴 보겠습니다. 박스 3개를 만든 후, 상자들의 배경색은 빨간색, 폭은 200px, 높이도 200px로 값을 주도록 하겠습니다. 여기에 border는 두께는 2px, 실선, 검은색으로 값을 주겠습니다. 그럼 이제 block, 블록 형태를 확인할 수 있습니다. 즉, block, 블록이란 바로 옆에 아무 것도 없는 디스플레이 형태..
-
공부계획 #3 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 22. 05:35
지금부터는 CSS에 대해 배워보도록 하겠습니다. 1> 제일 먼저 CSS를 HTML에 어떻게 결합하는 방법에 대해 배우겠습니다. 2> 그 다음, box, 박스 모델을 배워서 element, 내용들을 screen, 화면상에 위치시키는 방법에 대해 공부 하겠습니다. 3> 그런 다음, flex box에 대해 공부해 보겠습니다. 이 레이아웃은 데스크탑과 모바일 화면 사이즈에 맞춰 반응 합니다.4> 그 후, 차례로, animation, transition, media query같은 심화된 내용에 대해 배워보도록 하겠습니다.
-
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..