Assignment
그 동안 배운 것을 정리할겸 아래의 사이트에서 학습을 완료해주세요.
http://learnlayout.com/
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model

1. position 속성 - relative, absolute, fixed

position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다.
position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다.

static is the default value. An element with position: static; is not positioned in any special way. A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.

relative behaves the same as static unless you add some extra properties.

div class="relative2"
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element

fixed

A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. As with relative, the top, right, bottom, and left properties are used.

2. inline, inline-block, block 에 대해서

div is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.

span is the standard inline element. An inline element can wrap some text inside a paragraph like this without disrupting the flow of that paragraph. The a element is the most common inline element, since you use them for links.

inline-block
inline-block은 block과같이 높이 지정이 가능하고, inline과같이 옆으로 지정하는것이 가능하다. width height의 지정이 가능하다. 상하좌우의 margin padding의 지정이 가능하다. text-align vertical-align 사용이 가능하다.

3. float에 대해서

float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티입니다.

left
는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.
right
는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.
none
는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
inline-start
는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.
inline-end
는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.

profile
개발하는 스트롱맘

0개의 댓글