HTML/CSS 01

position 속성 - relative, absolute, fixed

1) relative

relative는 별도의 property를 지정하지 않는 이상 static과 동일하게 동작한다.
top, right, bottom, 혹은 left 값을 지정하면 이에 맞게 위치가 조정되며, 마이너스 값을 주면 아래로 떨어지지 않고 위로 올라가게 된다.

2) absolute

absolute는 상대적으로 위치가 지정되는 element가 아닌, 가장 가까운 곳에 위치한 부모에 상대적으로 위치가 지정된다. 위치가 지정된(position이 static이 아닌) 부모 element가 없으면 body를 기준으로 삼고, 페이지 스크롤에 따라 움직인다.

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

3) fixed

fixed element는 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다
relative와 마찬가지로 top이나 right, bottom, left 값을 사용한다.

inline, inline-block, block에 대해서

1) inline

inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다.
span, a, img tag 등이 대표적인 inline 요소이다.

원래는 inline 성질을 가진 태그를 아래와 같이 CSS를 사용하여 block으로 바꿀 수 있다.

.block-span {
  display: block;
}

2) inline-block

block 요소의 성질을 가진 p tag도 CSS을 사용하여 inline 스타일로 바꾸면 span과 똑같은 디자인을 만들 수 있다.
inline 성질을 갖도록 하는 CSS property는 display와 float가 있다.
inline-block element는 inline과 비슷하지만 너비와 높이를 지정할 수 있는 특징이 있다.

.inline-p {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

3) block

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
block 요소들은 항상 새 줄에서 시작하며 좌우로 최대한 늘어난다.
header, footer, p, li, table, div, h1 등이 대표적인 block 요소이다.

float에 대해서

float의 사용

float는 레이아웃을 잡는 데 사용하는 CSS property이다.
float 속성은 이미지 주위를 텍스트로 감싸는 것이며, left, right, none 가운데 하나를 값으로 줄 수 있다.

퍼센트는 이미지에 적용하기 좋다.
다음은 지정 이미지가 항상 컨테이너 너비의 50%만 차지하는 이미지를 만드는 예제이다.

article img {
  float: right;
  width: 50%;
}

clear는 float의 동작 방식을 제어하는 데 중요하다.

float의 문제 해결

해결방법1.
바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을 적용한다.
이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다.

해결방법2.
주로 많이 사용하는 방법인데 바깥 div(.wecode-box)에 overflow: hidden; 을 주는 것이다.

해결방법3.
바깥 div(.wecode-box)를 float 시키면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다.
하지만 float 되어 block 요소의 성질이 없어지는 문제가 발생하기 때문에, width를 100% 추가해야 한다.