Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (19)
WebStandards-Basic 4.box
- 2. eulsoo.com
- 3. eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
- 4. 1. 박스로 생각하기 2. 박스타입 3. 넓이와 높이 4. 여백과 간격 5. 선긋기 6. 배경색과 배경이미지 7. 박스의 용도지정
- 5. 박스로 생각하기 • 박스타입 • 넓이와 높이 • 여백과 간격 • 선긋기 • 배경색과 배경이미지 • 박스의 용도 지정 •
- 6. 박스로 생각하기 See a webpage like a box
- 7. 처음 HTML/CSS를 익히기 시작하는 대부분의 사람들은 속성과 문법을 알면 웹페이지를 만들수 있다고 생각하기 쉽습니다. 음
- 8. 이제할
- 9. 수
- 12. 속성을 모두 알았는데 왜 막연하고 다른 상황에 적용이 안될까요?
- 13. 브라우저가 표현하는 랜더링 방식 대로 생각할 수 있어야 합니다! ! 코드가 익숙해진다는 말은 html/css를 해석하는 브라우저 처럼 생각할 수 있다는 뜻입니다.
- 14. 브라우저는 웹페이지를 모두 box로 생각합니다.
- 15. 이 box들에 글과 이미지를 넣고 늘리고 줄여서 배치할 뿐이죠.
- 16. 어떤 형태도 브라우저는 box로 생각합니다.
- 17. 그렇기 때문에 브라우저처럼 box로 생각할 수 있을때 막연함과 예상치 못한일이 없어집니다.
- 18. 혹시 이렇게 보이셨나요? ^^
- 19. 이런 박스가 어떤과정을 거쳐 하나의 디자인이 되는지 알아볼까요?
- 20. div 가장 바깥쪽 박스를 만들고 /div
- 23. div div div a /a a /a /div div 세부적인 요소까지 모두 마크업을 합니다 /div div /div /div div /div /div
- 31. a ! ! !
- 34. a
- 36. a
- 37. a
- 39. a 완성!
- 40. 이런 과정을 거쳐서 만들기 위해서는 박스에 대해 자세하고 명확하게 알아둘 필요가 있습니다. Go!
- 41. 만약 div라는 태그를 입력하면 브라우저는 박스를 하나 만듭니다. 붉은 점선은 보이지 않는 박스의 존재를 표시하기 위해 넣은 점선입니다. 컨텐츠도 들어있지 않고 CSS도 적용되지 않은 빈박스이기 때문에 브라우저는 보여줄 것이 없을 뿐입니다. div/div
- 42. 여기에 텍스트를 넣으면 박스가 세로로 늘어납니다. 박스를 자세히 들여다보면 붉은 점선은 보이지 않는 박스의 존재를 표시하기 위해 넣은 점선입니다. div 박스를 자세히 들여다보면 /div
- 43. 모든 태그들은 박스를 만들고 imgspan등 도 물론 모두 박스입니다. 인라인박스 img src=”images/foo.jpg”alt=”샘플이미지” /span인라인박스/span
- 44. 박스는 자식 박스들을 다시 감싸서 그룹핑하는 역할을 하기도 합니다. 박스를 자세히 들여다보면 div class=”group” p 박스를 자세히 들여다보면 /p pimg src=”images/foo.jpg”alt=”샘플이미지” //p /div
- 45. 선을 그을때도 박스를 이용하구요 박스를 자세히 들여다보면 p 박스를 자세히 들여다보면 /p img src=”images/foo.jpg”alt=”샘플이미지” /
- 46. 박스에 배경색을 칠해 면으로 만들 수도 있습니다. div img src=”images/foo.jpg”alt=”샘플이미지” / /div
- 47. 좀 더 자세히 박스를 들여다 볼까요?
- 48. 박스 하나는 4가지의 영역으로 이루어져 있습니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이 루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니 다. content padding border margin
- 49. 각 각 영역마다 사이즈를 다르게 지정할 수 있습니다. content padding border 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. margin
- 50. 아래의 경우에서 각 영역을 살펴보면
- 51. .login .left div class=login div class=left.../div div class=right.../div /div .right
- 52. .login 박스에는 사방에 border로 선을긋고 상하좌우에는 각각 padding을 주고 content영역의 사이즈를 지정합니다. content padding div class=login div class=left.../div div class=right.../div /div border
- 53. .left박스또한 content영역을 지정하고 오른쪽 padding을 주어 간격을 조절합니다. content padding div class=login div class=left.../div div class=right.../div /div
- 54. .right박스는 border를 박스 왼쪽에 긋고 padding으로 상단과 왼쪽으로 여백을 주고 content영역을 지정합니다. border padding content div class=login div class=left.../div div class=right.../div /div
- 55. 박스타입 box type
- 56. 박스의 종류에는 세가지가 있습니다. 1. block box 2. line box 3. inline box
- 57. div나 p처럼 text나 img, 그리고 다른 박스들을 감싸고 있는 박스들을 흔히 block box라 부릅니다. block box divpullidl... 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. p박스를 자세히 들여다보면 가장자리를 둘러싸고 있 는 strongcontainer box/strong와 글줄을 이루고 있 는 strongline box/strong 그리고 글줄을 따라 흐르 고있는 stronginline box/strong로 이루어져 있습니 다./p
- 58. block box안에 글줄을 이루고 있는 박스가 있는데 line box라고 부릅니다. line box 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. p박스를 자세히 들여다보면 가장자리를 둘러싸고 있 는 strongcontainer box/strong와 글줄을 이루고 있 는 strongline box/strong 그리고 글줄을 따라 흐르 고있는 stronginline box/strong로 이루어져 있습니 다./p
- 59. line box안에는 이름없는박스와 stronga와 같이 이름있는 박스 들이 있는데 line안에 있는 박스라고 해서 inline box라 부릅니다. 이름없는 inline box 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. strong inline box spanemiba... p박스를 자세히 들여다보면 가장자리를 둘러싸고 있 는 strongcontainer box/strong와 글줄을 이루고 있 는 strongline box/strong 그리고 글줄을 따라 흐르 고있는 stronginline box/strong로 이루어져 있습니 다./p
- 60. inline box는 한 줄을 이루면서 왼쪽에서 오른쪽으로 흘러갑니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 61. line box는 block box안쪽에 한줄로 흐르는 inline box를 감싸고 떨어지면서 한줄씩 만들어 지게됩니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 62. block box는 무조건 한칸을 차지하며 마크업 순서에 따라 아래로 만들어져 내려갑니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. •학교 •병원 •공항 •집 왼쪽 위에서 시작. 아래로 쌓임.
- 63. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. •학교 •병원 •공항 •집 박스안에서 박스들도 마찬가지입니다.
- 64. 넓이와 높이 width height
- 65. block box는 넓이값을 임의로 지정하지 않으면 뷰포트에 꽉찹니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. p박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 strongcontainer box/ strong와 글줄을 이루고 있는 strongline box/strong 그리고 글줄을 따라 흐르고 있는 stronginline box/strong로 이루어져 있습니다./p
- 66. width속성으로 넓이를 지정해 볼까요? 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. 224px
- 67. width속성은 우리가 생각하는 넓이가 아닙니다! 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. 224px p { width:224px; }
- 68. width속성은 content영역의 넓이입니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. content padding border margin 200px p {width:200px;}
- 69. 박스를 구성하는 영역의 넓이를 각 각 지정해야 우리가 생각하는 전체 넓이가 나옵니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. content padding border margin 2+10+200+10+2 224px p{ width:200px; padding:10px; border:2px solid gray; }
- 70. 넓이는 꽉차지는 것이 기본입니다. 그럼 높이의 기본은 어떻게 될까요? ? 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 71. 한줄로 줄지어 있는 inline box들이 블록박스에 부딪혀 아래로 떨어지면서 새로운 line box를 만들고 그걸 감싸는 block box의 기본 높이는 그렇게 만들어집니다. block box line box inline box
- 72. width속성 지정될 경우 지정된 넓이를 따라 기본 높이도 자연스럽게 변하게 되겠죠! 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. width:200px
- 73. 넓이와 마찬가지로 높이도 임의로 지정할 수 있습니다. 224px
- 74. width속성과 같이 height속성도 content영역의 높이를 지정하는 것이며 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. p {height:224px;} p {height:200px;} 200px content padding border margin
- 75. 박스의 높이를 구성하는 영역을 각각 따로 지정해야 전체높이를 가질 수 있습니다. 224 2 + 10 + 200 + 10 + 2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. p{ height:200px; padding:10px; border:2px solid gray; } content padding border margin
- 76. 만약! 블록박스에 들어있는 인라인요소로 인해 생긴 기본높이 보다 작은 높이를 임의로 지정하면 기본높이를 무시(글씨들이 튀어나옮) 하고 지정됩니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. p{ height:50px; padding:10px; border:2px solid gray; }
- 77. 10+2+10+200+10+2+10 0 2 10 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. 0 2 10 200 x 200 10 2 0 10+2+10+200+10+2+10 박스구조를 정리해 보면 10 2 0 .box { width:200px; height:200px; padding:10px; border:2px solid gray; margin:0px; }
- 78. 하지만!!! inline box들에는 width, height를 지정할 수 없습니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 변화없음 p strong {width:200px; height:200px;}
- 79. width와 height값을 주려면 기본으로 가지고 있는 display속성을 block나 inline-block으로 바꿔 주어야합니다. /* 여기에 대해서는 다음시간에 자세하게 다루겠습니다.*/ {display:block;} {display:inline-block;} span strong em i q a inline {float:left;} {position:absolute;} {overflow:hidden;} block inline-block
- 80. 여백과 간격 padding margin
- 81. 자. 그럼 박스안쪽여백(padding영역)을 지정하는 방법을 자세히 알아볼까요?
- 82. 1 4 2 시계방향순서 3 {padding: 10px; } 1 2 3 4면의 값이 모두 같을때 4 {padding: 10px 20px;} 1 3 2 상하가 같고 좌우가 같을때 4 {padding: 10px 15px 20px; } 1 2 4 상하가 다르고 좌우가 같을때 3 {padding: 10px 15px 12px 20px;} 1 2 3 4 4면의 값이 모두 다를때
- 83. 1 4 2 3 { padding-top: 10px; 1 padding-right: 20px; 2 padding-bottom: 15px; padding-left: 20px; 4 } 각 각 지정해 줄수도 있습니다. 3
- 84. 다음과 같이 패딩을 바꾼다면? p { padding:10px; } 10 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 10 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 10 10 p { padding: 30 ? } 13 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 0 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 0 inline box로 이루어져 있습니다. 13 13
- 85. 1 13 4 30 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 0 inline box로 이루어져 있습니다. 13 3 p {padding:13px 0 13px 30px;} 1 2 3 p{ padding-top:13px; 1 padding-right:0; 2 padding-bottom:13px; padding-left:30px; 4 } 4 3 2
- 86. 23 20 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 20 5 글씨크기 12px 23 80 20 4 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 5 334 20
- 87. 박스바깥쪽 간격(margin영역)을 지정하는 방법을 알아보겠습니다.
- 88. 1 기본적으로는 padding과 방법이 동일합니다! 4 2 시계방향순서 3 {margin: 10px; } 1 2 3 4면의 값이 모두 같을때 4 {margin: 10px 20px;} 1 3 2 상하가 같고 좌우가 같을때 4 {margin: 10px 15px 20px; } 1 2 4 상하가 다르고 좌우가 같을때 3 {margin: 10px 15px 12px 20px;} 1 2 3 4 4면의 값이 모두 다를때
- 89. 1 4 2 3 { 1 margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; 4 } 2 3 padding과 같이 하나씩 지정해 줄수도 있습니다.
- 90. .box1와 .box2의 간격을 20px 두려면? .box1 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 91. .box1 {margin-bottom: 20px;} VS .box2 {margin: 20px 0 0;} .box1 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 20px .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. .box1에서 아래방향으로 지정? .box2에서 위방향으로 지정? 둘 다 괜찮습니다. 현재 디자인 상황에서 가급적 좋은 방법으로 선택하면 됩니다.
- 92. .box1 {margin-bottom: 20px;} VS .box1 {margin: 0 0 20px;} .box1 {margin: 0 0 20px 0;} .box1 .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. .box1에서 아래방향으로 지정할 경우 총 3가지 방법으로 간격을 20px 지정할 수 있겠죠! 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 93. 사이의 간격은 40px이겠죠? .box1 {margin: 20px 0;} .box2 {margin: 20px 0;} 20px .box1 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 40px ? .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 20px
- 94. 상하의 마진이 만날 경우 ! 합쳐저 버리네요.. .box1 {margin: 20px 0;} .box2 {margin: 20px 0;} 20px .box1 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 20px .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 20px
- 95. 간격이 다를 경우 큰쪽으로 합쳐짐니다. .box1 {margin: 20px 0;} .box2 {margin: 30px 0;} 20px .box1 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 30px .box2 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 30px
- 97. margin은 박스 바깥쪽 간격을 지정하기 때문에 음수값( - )을 줄 수 있습니다. 좌측메뉴영역 컨텐츠영역 180px margin:0; 컨텐츠영역에 있는 이미지를 좌측메뉴영역까지 밀어 넣어야 할 경우 음수값을 이용할 수 있습니다.
- 98. 좌측메뉴영역 margin:0 0 0 -180px; 컨텐츠영역 레이아웃에 영향을 주지 않고 좌측으로 밀립니다.
- 99. margin은 또한 left, right에 auto라는 값을 숫자 대신 지정할 수 있습니다. auto 20 900 20 940 margin:0 auto; 뷰포트넓이-940/2 를 자동으로 계산해서 양쪽에 각각 마진값으로 부여합니다. left와right의 값이 자동(auto) 으로 주어지면서 가운데 정렬이 됩니다. auto
- 100. auto 20 900 940 margin-left:auto; 뷰포트넓이-940의 나머지 넓이를 자동으로 계산해서 왼쪽의 마진값으로 부여합니다. left의 값이 자동(auto)으로 채워 지면서 우측 정렬이 됩니다. 20
- 101. 주의!!! inline box들에는 위, 아래로 padding margin을 지정하 더라도 간격을 벌릴수 는 없습니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box 로 이루어져 있습니다 p strong { 좌,우로는 패딩과 마진 영역만큼 벌어졌지만, 상,하 로는 지정만 되었을뿐 영향을 미치지 못합니다. padding : 20px; margin : 20px; border : 1px solid red; }
- 102. inline box의 상,하 여백은 line-height (행간) 에 의해서 조절되기 때문입니다. /* line-height(행간) 부분에서 자세히 소개합니다 .*/ 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루 고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box 로 이루어져 있습니다 p strong { 여다보면 가장자 line box 는 그 니다 line box padding : 20px; margin : 20px; line-height border : 1px solid red; } 반행간
- 103. 단 img만큼은 inline box이지만 상하 마진,패딩이 적용됩니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글 ! 줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box ! 로 이루어져 있습니다 p img { padding : 10px; margin :10px; }
- 104. 선긋기 border
- 105. 4면을 함께 지정 {border: 2px solid orange; } 두께 종류 색상
- 106. 4면을 각 각 지정 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. ! { border-top: 2px solid white; border-right: 2px double #ffffff; border-bottom: 2px dashed #fff; border-left: 2px dotted white; } dashed dotted solid double
- 108. 박스에 들어있는 글이나 그림을 제외한 박스자체에 색을 칠하거나 박스에 이미지를 배경으로 사용하는 방법을 배워봅니다.
- 109. .mother .son 20 .son을 감싸고 있는 .mother박스에 배경색을 줄경우... 20 13 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 30 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box 20 로 이루어져 있습니다. 13 20 border:2px solid black; div class=”mother” p class=”son” 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 strongcontainer box /strong와 글줄을 이루고 있는strong line box /strong그리고 글줄을 따라 흐르고있는 stronginline box/strong로 이루어져 있습니다. /p /div
- 110. .mother { padding : 20px; border : 2px solid black; background-color : blue; /* #0000ff */ } .mother .son 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. .mother는 content와 padding 영역까지 포함해서 색을 칠합니다. .son에는 background-color속성을 지정하지 않으면 기본값인 transparent (투명)로 처리 되어 부모박스 의 배경색인 blue가 그대로 비춰 보이게 됩니다.
- 111. .mother { padding : 20px; border : 2px solid black; background-color : transparent; background-image : url(‘foo.jpg’); } foo.jpg .mother .son (0,0) 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. .mother 자신의 content와 padding 영역까지 포함해서 이미지를 반복합니다. .son에는 background 속성을 지정하지 않으면 기본값인 transparent (투명)로 처리 되어 부모박스 의 배경이미지가 그대로 비춰 보입니다.
- 112. .mother { padding : 20px; border : 2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : repeat-x; /* repeat, no-repeat, repeat-y */ } x축 반복 기본값 반복하지않음 y축 반복 .mother (0,0) 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 0,0을 시작으로 x축으로 반복합니다.
- 113. .mother { padding : 20px; border : 2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : repeat-y; } .mother (0,0) 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 0,0을 시작으로 y축으로 반복합니다.
- 114. .mother { padding:20px; border:2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : no-repeat; } .mother (0,0) 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 0,0을 시작으로 반복 하지 않습니다.
- 115. .mother { padding:20px; border:2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : no-repeat; background-position: 20px -20px; } x축 위치 (0,0) (20px, -20px) y축 위치 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 음수값을 사용할 수 있으며 지정한 박스의 보더 안쪽만 보여지게 됩니다.
- 116. .mother { padding:20px; border:2px solid black; background-image : url(foo.jpg); background-color : transparent; background-repeat : no-repeat; background-position: 20px 50%; } x축 위치 (0,0) (20px, 50%) y축 위치 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. %값을 사용할 경우 박스가 커지더라 도 유연할 수 있도록 박스의 y축 50%(가운데)지점에 위치 시킵니다.
- 117. .mother { padding:20px; border:2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : no-repeat; background-position: left bottom; } x축 (0,0) 워드값의 종류는 x축 : left / right /center y축 : top / bottom / center y축 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. 워드값을 사용할 경우 박스크기에 유연할 수 있도록 항상 박스의 제일아래로 이미지 위치를 지정합니다. (left, bottom)
- 118. .mother { padding:20px; border:2px solid black; background-image : url(foo.jpg); background-color : transparent; background-repeat : repeat-x; background-position: 0 bottom; } x축 (0,0) (0, bottom) 값의 타입을 다양하게 섞어서 사용할 수 있습니다. y축 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 119. .mother { padding:20px; border:2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : no-repeat; background-position: 50px 50%; } x축 (0,0) (50px, 50%) x축으로50px y축으로 가운데. 50%는 center와 같음 y축 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 120. .mother { padding:20px; border:2px solid black; background-color : transparent; background-image : url(foo.jpg); background-repeat : no-repeat; background-position: center center; } x축 (0,0) (center, center) 박스의 항상 정가운데 y축 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
- 121. 쉽게 축약형으로 지정할 수 있습니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box 와 글줄을 이루고 있는 line box 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. {background: blue url(images/foo.jpg) repeat-x 0 bottom;} 색상 이미지경로 반복여부 위치
- 122. 박스의 용도 지정 overflow / display
- 123. 박스를 다루다 보면 block box의 사이즈 보다 컨텐츠가 많아 넘치는 상황(overflow)에서 사용할 수 있는 뭔가가 필요합니다. 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. 그리고 글줄을 따라 흐르 고있는 inline box로 이루어져 있습니 다. p{ width:100px; height:50px; padding:10px; border:2px solid gray; }
- 124. 여기서의 넘치는 상황이란 무엇일까요? 1. 세로로 넘치는 상황 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄 을 이루고 있는 line box 그리고 글줄 을 따라 흐르고있는 inline box로 이루 어져 있습니다. 그리고 글줄을 따라 흐르고있는 inline box로 이루어져 있습니다. p { width:100px; height:50px; padding:10px; border:2px solid gray; } 높이가 정해져 있어서 block box높이보다 들어 있는 글이 많이 들어 있거 나 그림, 자식박스의 세로 사이즈가 클경우 튀어 나와 버립니다.
- 125. 가로로 넘치는 상황이란 무엇일까요? 2. 가로로 넘치는 상황 pimg src=”html5.png”//p p { width:100px; height:50px; padding:10px; border:2px solid gray; } 글들은 아무리 많아도 세로로 글줄을 만들면서 늘어날 뿐 가로로 넘칠수가 없겠죠? 그렇기 때문에 이미지나 사이 즈가 더 큰 자식 박스가 있을 경우 가로로 넘치게 됩니다.
- 126. 이렇게 넘치는 상황에서 상황에 따라 3가지 속성을 이용하게 됩니다. overflow 가로와 세로 혹은 둘다 넘치는 상황 overflow-y 세로로만 넘치는 상황 overflow-x 가로로만 넘치는 상황
- 127. overflow, overflow-y, overflow-x 속성은 두가지를 할 수 있습니다. 1. 컨텐츠를 잘라버리거나 2. 스크롤바를 만들어 주는일 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 박스를 자세히 들여다보 면 가장자리를 둘러싸고 있는 박스를 자 세히 들여다보면 가 패딩영역을 덮으면서 스크롤 바가 생깁니다.
- 129. 3가지 속성은 모두 4가지 값을 사용합니다. overflow 가로와 세로 혹은 둘다 넘치는 상황 overflow-y 세로로만 넘치는 상황 overflow-x 가로로만 넘치는 상황 : hidden : scroll : auto : visible 넘치는 컨텐츠를 잘라 버림 컨텐츠가 넘치던 않든 항상 스크롤바 넣음 컨텐츠가 넘칠때만 자동으로 스크롤바 넣음 overflow를 주지 않았을때의 기본값
- 130. 1. 컨텐츠를 잘라버릴때 가로세로 모두 잘라버립니다. p { width:200 height:100px; overflow:hidden; padding:10px; border:2px solid gray; } 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 박스를 자세히 들여다보 면 가장자리를 둘러싸고 있는 박스를 자 세히 들여다보면 가 있는 박스를 자세히 들여다보면 가 p { width:200 height:100px; overflow-y:hidden; padding:10px; border:2px solid gray; } p { width:200 height:100px; overflow-x:hidden; padding:10px; border:2px solid gray; } 세로방향만 자르고 가로방향은 넘칠때만 스크롤바가 생깁니다. 가로방향만 자르고 세로방향은 넘칠때만 스크롤바 가 생깁니다.
- 131. 2. 넘치거나 말거나 무조건 스크롤바를 만들어 줄때 p { width:200 height:100px; overflow:scroll; padding:10px; border:2px solid gray; } 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 박스를 자세히 들여다보 면 가장자리를 둘러싸고 있는 박스를 자 세히 들여다보면 가 p { width:200 height:100px; overflow-y:scroll; padding:10px; border:2px solid gray; } p { width:200 height:100px; overflow-x:scroll; padding:10px; border:2px solid gray; } 무조건 가로세로 모두 스크롤바를 만들어줍니다. 세로방향은 무조건 스크롤바가 생기고 가로방향은 넘칠때 만 생깁니다. 가로방향은 무조건 스크롤바가 생기고 세방향은 넘칠때만 생깁니다.
- 132. 3. 넘칠때만 스크롤바를 만들어줄때 넘칠때만 스크롤바를 만들어줍니다. p { width:200 height:100px; overflow:auto; padding:10px; border:2px solid gray; } 박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 박스를 자세히 들여다보 면 가장자리를 둘러싸고 있는 박스를 자 세히 들여다보면 가 p { width:200 height:100px; overflow-y:auto; padding:10px; border:2px solid gray; } p { width:200 height:100px; overflow-x:auto; padding:10px; border:2px solid gray; } 세로방향과 가로방향 모두 넘칠때만 스크롤바가 생깁니다. 세로방향과 가로방향 모두 넘칠때만 스크롤바가 생깁니다.
- 133. 모든 태그는 미리 명시되있는 display성질에 따라 박스로 만들어 지게됩니다. block box inline box div, p, ul, ol, li, dl, dt, dd... span, em, q, a, i, strong...
- 134. 하지만 박스를 다루다 보면 이런 display된 상황을 바꿀 필요가 있습니다. display block box display inline box div, p, ul, ol, li, dl, dt, dd... span, em, q, a, i, strong...
- 135. 이렇게 원래의 display성질을 임의로 바꾸거나 혹은 display된 요소를 없애 버리는등 화면에 보여지는데 관련된 일을 하기위해 display라는 속성이 존재합니다.
- 136. 주로 사용되는 값들입니다. : block : inline display : inline-block : none block box로 만듦 inline box로 만듦 inline box처럼 흐르지만 높이넓이와 상하 마진,패딩을 줄 수 있는 inline-block로 만듦 브라우저상에서 완전히 보이지 않게함
- 137. display:block 안녕하세요 안녕하세요 inline box인 a가 width,height,상하 패딩 마진을 모두 적용할 수 있는 block 박스가 되었습니다. a안녕하세요/a a안녕하세요/a a {display:block; padding:10px; height:50px; border:1px solid black; }
- 138. display:inline 안녕하세요 안녕하세요 한칸을 모두 차지하지 이런 성질을 이용해서 가로 배치에 사용하기도 합니다. p안녕하세요/p p안녕하세요/p 못하고 옆으로 흐르는 inline box가 되었습니다 물론 width, height도 줄 수 없죠 p {display:inline; height:50px; width:100px; border:1px solid black; }
- 139. display:inline-block 안녕하세요 안녕하세요 inline box처럼 옆으로 흐르지만 넓이와 상하 패딩 마진을 줄수 있는 block box의 성질도 가지고 있습니다 p안녕하세요/p p안녕하세요/p p {display:inline-block; padding:10px 20px; width:100px; border:1px solid black; }
- 140. display:inline-block은 ie7에서 다음과 같이 됩니다. ie7에서는 인라인요소에 적용하면 잘 되지 만, 블록요소인 p, div등에는 적용되지 않습니다. pP tag/p pP tag/p spanP tag/span spanP tag/span p {display:inline-block; padding:10px; margin:10px; width:150px; border:1px solid red; } span {display:inline-block; padding:10px; margin:10px; width:150px; border:1px solid black; }
- 141. ie7에서 블록요소에 적용시는 *display:inline; zoom:1; 을 이용합니다. 이제 ie7에서도 잘 적용됩니다. pP tag/p pP tag/p spanP tag/span spanP tag/span p {display:inline-block; *display:inline; zoom:1; padding:10px; margin:10px; width:150px; border:1px solid red; } span {display:inline-block; padding:10px; margin:10px; width:150px; border:1px solid black; }
- 142. display:none 안녕하세요2 뷰포트에서 완전히 사라져 버리고 두번째 p가 그자리로 와버렸습니다. p class=p1안녕하세요1/p p class=p2안녕하세요2/p .p1 {display:none}
- 143. 자주 사용되지는 않지만 아래와 같이 보이는 성질을 바꿀수 있습니다. : list-item : table : table-caption : table-cell display : table-column : table-column-group : table-footer-group : table-header-group : table-row : table-row-group
- 144. eulsoo.com
- 145. eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.