Assignment: 페이지 레이아웃

Hyeon Soo·2021년 1월 12일
0
  1. position 속성 - relative, absolute, fixed
    이는 문서상에 요소를 배치하는 방법이다. 공통적으로, top, right, left, bottom으로 배치할 수 있다. 각각의 특징은 다음과 같다.

    relative: 문서의 일반흐름에 따라 요소를 배치하나, top, right, left, bottom에 맞추어 요소를 이동할 수 있도록 한다.

    absolute: 문서의 일반흐름을 따르지 않으며, 요소에게 배정된 공간 또한 제거한다. 대신, 가장 가까운 부모에 배정된 공간 안에서 top, right, left, bottom 지정 값에 맞추어 배치한다. 이때, 부모요소는 position으로 위치 지정이 되어 있어야한다.

    fixed: 문서의 일반흐름을 따르지 않고, 요소에게 배정된 공간 또한 제거하는 것은 absolute와 같으나, fixed된 요소는 화면의 특정 영역에 고정이 된다.

  2. inline, inline-block, block 에 대해서
    이는 HTML의 요소를 구분하는 방식을 말한다. 각각의 특징이 있고 겹치지 않지만, css를 통해 block 요소를 inline속성을 지니도록 바꿀 수 있고, 그 역도 가능하다. 각각의 특징은 다음과 같다.

    inline: 이 요소들은 새로운 줄을 만들지 않으며, 필요한 너비만을 차지한다. 그렇기 때문에, inline 요소 다음에 inline요소가 오는 것이 가능하다. 또한, 필요한 너비만을 차지하기 때문에 너비와 높이를 임의로 지정할 수 없다. a, span 등을 예로 들 수 있다.

    block: 이 요소들은 부모요소의 전체공간을 차지하여 하나의 구역을 만든다. 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어난다. block요소는 inline요소를 포함할 수 있고, 경우에 따라 block요소 또한 포함할 수 있다. 그리고 임의로 너비와 높이를 지정할 수 있다.

    inline-block: 이 요소는 inline요소와 같이 줄바꿈이 이루어지지 않고, 기본적으로는 필요한 만큼의 영역을 차지한다. 그러나 block요소와 같이 너비와 높이를 임의로 지정하는 것이 가능하다.

  3. float에 대해서
    float는 한 요소를 텍스트나 인라인 요소가 둘러싸도록하는 속성이다. left, right, none으로 나뉘어 지며, 각각 요소를 왼쪽, 오른쪽, 이동이 없는 상태로 배치한다.

참조
https://developer.mozilla.org/ko/docs/Web/HTML
https://developer.mozilla.org/ko/docs/Web/CSS
https://ofcourse.kr/css-course
https://aboooks.tistory.com/72

0개의 댓글