<div>도 박스고 <span>도 박스다.
<p>도 박스다.
이 각각의 박스들은 고유의 박스모델을 가지게 된다.
위 그림은 박스모델 구조도다.
박스모델을 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것이다.
콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 된다.
그렇다면 보더와 바깥 부분의 마진을 늘여서 여백을 주게 되면 이요소와 다른 요소 사이에 공간이 생기게 될 것이다.
웹 사이트의 레이아웃을 잡을 때 각 박스의 위치와 크기는 중요하다.
중요한 것은 너비를 300px로 지정해 준 박스의 너비는 실제로는 300px가 아니다.
박스의 실제 너비 = 10 + 1 + 300 + 1 + 10 = 322 px
이는 양쪽에 10px씩의 패딩이 있고, 1px의 테두리가 있기 때문에 실제 너비는 322px가 되는 것이다.
float
<style>
img{float:left; margin:17px}
p{float:left;width:300px}
</style>
<img src="${pageContext.request.contextPath}/resources/img/travel/hk/a21.png" width="100" height="100"/>
<P>Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~Now is ${serverTime}.~~ </P>
위의 소스를 나타내면 위 그림과 같이 나온다.
원래 <p>태그는 블록레벨 태그이기 때문에 이미지의 아래쪽으로 줄바꿈 되어서 노출된다.
그런데 위 소스처럼 float 속성을 적용하면 이미지와 그 뒤에 따라오는 <p> 태그 텍스트가 나란히 위치하게 된다.
float는 left와 right 속성을 가진다. left 값을 주면 콘텐츠는 왼쪽으로 흐르고 right는 오른쪽으로 흐르게 된다.
float는 또한 상속된다. 이때 상속은 요소의 안에 있는 자식 요소에 상속되는 것이 아니라 요소의 바로 뒤애 따라오는 요소에 상속된다.
clear
float 되어있는 페이지의 흐름을 끊어 주기 위해서 사용하는게 clear다.
clear 속성은 left, right, both 라는 3개의 값을 가진다.
왼쪽으로 흐르는 float를 중단할 것인지, 오른쪽으로 흐르는 것을 중단할 지, 양쪽으로 흐르는 float를 중단할 것인지를 결정하는 것
주로 clear:both;를 많이 사용한다.
position
요소의 위치를 자유자재로 -
position은 요소들을 원하는 곳에 강제로 위치하게 한다.
속성은 4가지 인데
static, absolute, relative, fixed 다.
static은 가장 기본적인 요소다.
relative는 바로 앞에 있는 요소를 기준으로 움직인다.
예를 들어,
position:relative;top:10px;left:30px;
이런식으로 스타일을 주었다면, 기준이 되는 것은 바로 앞에 적용된 요소가 된다.
absolute는 가장 강력한 속성이다. 요소의 절대적인 위치를 지정해준다.
position:absolute;top:30px;left:10px;
absolute는 기본적으로 <body> 태그를 기준으로 움직인다.
fixed또한 <body> 태그를 기준으로 적용이 되는데 absolute와 차이점은 스크롤을 했을 때 이다.
스크롤시 fixed는 움직이지 않는 반면, absolute는 스크롤에 따라 같이 움직인다.
댓글 없음:
댓글 쓰기