1. position은 위치를 결정하는 CSS로 위치에 구애받지 않고 아무 위치나 구현한 수 있는 프로퍼티이다
    종류로는 ,relative, absolute, fixed가 있다.
  • relative
    그 중 'relative'는 다른 위치 설정을 추가하지 않는 한 'static'과 동일한 결과를 보여준다. 여기서 주의 할 점은 말 그대로 상대적이라는 것 입니다. 자기 자신의 이전 엘리먼트 요소에 상대적으로 top, left, right, bottom 값이 잡히게 되는 것입니다. 즉, 원래 static 이었을 때를 기준으로 해서 위치가 조정 되게 됩니다.
.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}
  • absolute
    절대값을 가지며 어떠한 영향을 받지 않고 위치를 고정하여 효과를 줄 수 있다. 스크롤을 내려도 변화를 주지 않는 절대적요소이다
    부모 엘리먼트를 기준으로 절대적인 위치에 둘 수 있다. 하지만 상위요소가 없으면 body를 기준으로 고정값을 갖는다.

    absolute {
    position: absolute;
    top: 120px;
    right: 0;
    width: 300px;
    height: 200px;
    }
    `
    • fixed

    고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다.
    relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용된다.

    .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    background-color: white;
    }
  1. inline, inline-block, block
  • block
    block요소와 inline요소의 특징을 함께 가지며 inline 요소처럼 한 줄에 배치가 가능하고 width, height 값을 지정 할 수 있다.
    또한 가로 열을 모두 차지하며 block요소 다음에 등장하는 태그는 줄바꿈이 된다.
  • inline
    <a>, <span>, <img> 등이 inline 요소로 가로로 나열 가능하다. 한줄에 계속 나열 가능한 기능이다.
  • inline-block
    inline요소와 block를 결합한 요소로 한 칸안에 크기조절이 가능하다 가로로 block를 나열 할 때 쓸 수 있다.

    줄바꿈이 이루어지지 않는다.
    block처럼 width와 height를 지정 할 수 있다.
    만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠 만큼 영역이 잡힌다.

    .box2 {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 1em;
    }
  • block vs liline
    다운로드.png
  1. float에 대해서
    이미지 주변 text를 지정 할 때 쓸 수 있는 기능이다.
    float- left: 왼쪽에 블록 박스를 생성. 텍스트는 오른쪽에 배치되며 위에서 아래로 흐름.

    float- right: 오른쪽에 블록 박스를 생성. 텍스트는 왼쪽에 배치되며 위에서 아래로 흐름.