FE/CSS 2

[CSS] element가 배치되는 방법(레이아웃)

1. display(block, inline, inline-block) block 또는 inline-block의 경우 이 엘리먼트들은 블록 형식으로 위쪽에서 아래쪽으로 쌓인다 inline인 경우는 왼쪽에서 오른쪽, 다 찼다면 아래쪽으로 빈 자리를 차지하며 흐르며 높이와 넓이를 지정해도 반영되지 않는다 2.position(static, absolute, relative, fixed) static: 기본 속성값 absolute: top, left, right, bottom으로 설정하며, 기준점은 static이 아닌 상위 엘리먼트가 기준점이다 relative: top, left, right, bottom으로 설정하며 원래 자신이 위치해야 할 곳을 기준으로 이동한다 fixed: top, left, right, ..

FE/CSS 2020.08.14

[CSS]CSS의 상속과 우선순위 결정

상속을 하게 되면 상위에서 설정한 스타일이 하위에서도 반영된다 width, height, margin, padding, border와 같은 box-model과 같이 크기, 배치와 관련된 속성들은 하위 엘리먼트로 상속이 되지 않는다. 우선순위는 inline > internal = external이지만, 일반적으로 CSS 위치는 css파일(external)에 두고 그 아래에 style 태그를 사용해서(internal) 표현하기 때문에 이런 경우엔 internal > external로 볼 수 있다. (뒤에 선언된 css의 내용이 최종적으로 반영) cascading -> element보다 class, class보다 id가 우선적으로 css가 적용된다 같은 선택자(selector)라면 나중에 선언한 것이 반영된다..

FE/CSS 2020.08.14