IT_susu

%단위는 부모요소의 크기를 기준으로 해당 %만큼의 크기를 계산해서 적용하겠다는 뜻이다.width의 %단위는 우리가 생각한대로 자연스럽게 적용이 되지만,height의 적용은 사뭇 다르다.왜냐하면 height은 애초에 자식의 height값을 기준으로 부모의 height값이 정해지기 때문이다. 그런데 웹디자인을 하다보면 브라우저 창을 기준으로 height값을 정하고 싶을 때가 종종 있다.예전에는 html에 height을 100%로 주고 해당 요소뿐만 아니라 그 요소에 도달할 때까지 거치는 부모요소들도 전부 height:100%를 줘서 상속을 받게한다.이는.... 굉장히 보기 불편하고 소모적이다. 요즘에는 간편하게 vh라는 단위가 나왔다. viewport height인데, 뷰포트 값을 기준으로 퍼센트단위로 he..

영역 안에 배경으로 색이나 이미지를 깔 경우에 사용하는 속성은 background이다. 정말 다양한 서브 속성들이 있다. 1. background-color 배경색 적용 background-color: #369; 투명한 색은 background-color: transparent; 2. background-image 배경이미지 적용 background-image: url(주소); 3. background-position 배경이미지의 어느 부분을 배경으로 보여줄 것인가. 즉 위치를 지정하는 속성이다. background-position: x축 y축; x, y축 중에 하나만 쓰면 나머지는 가운데로 자동 지정된다. x축 : left, right, center y축 : top, middle, bottom 단위 사..

position은 기준을 정해놓고 해당 좌표값을 주어 이동을 하게 하는 css 속성이다.position 속성을 주면 그 컨텐츠가 block요소였더라도 차지하는 영역이 딱 컨텐츠 크기만큼으로 줄어든다. position: static기본값이며, 포지션 속성을 주지 않은 것과 같은 상태이다. position: relative1) 자기자신을 기준으로 좌표값이 적용된다.2) 좌표값은 top과 left만 사용한다. 우리 문화권에서는 top과 left가 문서가 진행되는 기준이므로 right와 bottom을 주면 기준이 모호해지는 결과를 낳는다. 3) 처음의 자기 영역의 자리를 차지하면서 시각적으로만 이동하게 된다. 그래서 다른 요소를 가리기도 하며, 원래있던 자기 자리에 다른 컨텐츠가 들어와 밀어내면 위치가 또 변하..