올리비아 코딩스쿨

z-index z-index 속성은 차원과 연관있다. position에서 x, y 차원의 이동을 원할 때는 left, right, top, bottom 좌표를 이용해서 숫자만큼 이동을 시켰다. z-index는 z 차원의 이동을 뜻한다. 다른 요소와 중첩이 될 때 쌓이는 순서라고 생각하면 되겠다. 양수+, 음수- 값을 모두 취할 수 있다. z-index:-1 나의 사랑 앤!!!!! 이미지가 z-index: -1값을 가지고 있기 때문에, 글자 뒤로 배치된다. z-index:1; z-index:2; z-index:3; Z-index Example z-index의 순서대로 쌓인다.1 위에 2가, 2위에 3이.. 검정 box (z-index: 1) 회색 box (z-index: 3) 초록 box (z-index:..

오늘은 모든 요소를 중앙에 놓는 방법을 배워보겠다. 원본 그대로의 코드와 화면은 아래와 같다. html code 나의 사랑 앤! css code div { width:700px; height:700px; background-color: blue; } 모든 요소를 가로로 넣기 위한 방법이다. text-align: center 텍스트를 중앙으로 정렬한다. body { text-align: center; } margin: 0 auto 0 auto h1 { width: 35%; margin:0 auto 0 auto; } parents 요소는 position:relative; children 요소는 position:absolute; 그리고 배치! h1 { padding:100px; } body { text-ali..

Absolute Positioning Absolute Positioning은 상위 개체(부모계층)에 의해 상대적(relative)으로 배치하게 된다. 만약 가까이에 만들어진 상위 개체가 없다면, body가 그 역할을 한다. 예를 들어보자, parents: div children: img 빨강색 div 위에 img가 있다. div는 parents 상위개체 img는 children 하위 개체가 된다. 여기에서 img position의 position 값을 absolute로 바꾸고 오른쪽 90px, 위 300px의 값의 여백을 주면 상위개체를 기준으로 이미지가 이동한 것을 알 수 있다. div { width:700px; height:700px; background-color: red; position: rel..

CSS Positioning에 본격적으로 들어가기 앞서 기억해야 할 점은, CSS를 적용하지 않는다고 하더라도 HTML의 기본값이 이미 존재한다는 사실이다. 이 사실을 잊어서는 안된다. HTML Positioning Rules 따라서 먼저 HTML에서 화면을 보여주는 규칙을 간략하게 살펴보자. 규칙 1 Content is everything!! 들어가는 내용, content가 중요하다. 앞서 살펴봤던 display 속성 중 inline 같은 경우에는, 들어가는 content의 width, height 만큼 상자가 만들어진다. display 속성 중 block 역시, 비록 width는 화면 전체를 차지한다고 하더라도, height 만큼은 font에 의해서 결정된다. 규칙2 Order comes from C..

CSS display 속성 아래의 그림에서 상단 구름은 파랑 상자의 범위가 이미지 영역에만 국한하지만 찰나의 순간이 영원이 되기를 이라는 h2 요소는, 파랑상자의 범위가 화면 끝까지 이어진다. 이렇듯 HTML에서 display되는 상자의 크기는 HTML 요소마다 다른 규칙(속성)으로 적용되는데, CSS display 속성은 4가지가 있다. Block, Inline, Inline-Block, None 1) Block 블록은 상자크기의 기본값을 block display(화면 폭 전체)로 둔다. 이렇게 화면 전체를 블록(block=상자)으로 지정하는 이유는, 다른 요소가 이 요소의 옆에 나란히 오지 못하도록 막은 것이다. 반면, 유연하게 상자의 폭(width)를 줄이고 늘릴 수 있다는 장점이 있다. CSS에서..