phillip's log
로그인
phillip's log
로그인
[TIL] 2020-05-13
phillip oh
·
2020년 5월 14일
팔로우
0
CSS
TIL
0
TIL
목록 보기
5/6
CSS
웹 개발 사이드 프로젝트를 하는데 CSS에서 막히는 부분이 있어 생활코딩 강의를 들었다/
Inline vs. Block
모든 HTML 태그들은 display의 속성의 기본값으로 Inline 또는 Block을 갖고 있다.
Block : 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다(ex. h1)
Inline : 새로운 라인에서 시작하지 않고, 요소의 너비도 contents만큼만 차지한다(ex. a, span)
Box-sizing
border 등 박스 모델을 조작하다보면, 원래 원했던 최대 크기와 다르게 출력될 때가 있다. 이러한 문제를 사전에 예방하고자 아래 CSS 태그를 먼저 선언하는 사람들이 많다.
{ box-sizing : border-box; }
position : relative vs. static
postion 속성의 기본값은 static이다.
static으로 설정되면, top, right, bottom, left와 같은 offset 설정에 영향을 받지 않고, 웹 페이지의 흐름에 따라 요소들이 위치하게 된다.
relative로 설정되면, 해당 태그의
기본 위치
즉, static으로 지정됐을 때 원래 위치했어야 할 위치를 기준으로 위치하게 된다.
position : absolute
위치가 설정된 조상(ancestor) 요소를 기준으로 위치하게 됨.
만약, 위치가 설정된 조상 요소가 없다면, 를 기준으로 위치하게 된다.
- 참고 자료
생활코딩
TCP School
phillip oh
모빌리티 스타트업에서 데이터를 다루고 있습니다.
팔로우
이전 포스트
[TIL] 2020-04-02
다음 포스트
[TIL] 2020-05-14
0개의 댓글
댓글 작성