▪️ position 속성
html코드에 상관없이 요소를 원하는 위치에 지정
relative / absolute / fixed
1. position: relative
▶️ 자체로는 의미가 없으며 top left bottom right 프로퍼티를 추가하여 위치를 이동.
topleftbottomright에 마이너스 값을 주면 반대로 움직인다.
2. position: absolute
▶️ 부모요소에 대해 절대적으로 움직일 수 있다.
- 부모요소에 position:relative, fixed, absolute 중 하나라도 있어야함.
- 일반적으로 부모요소에 position:relative 사용.
▶️ 역시 top left bottom right 프로퍼티를 추가하여 부모요소를 기준으로 위치이동.
3. position: fixed
▶️ 요소를 지정한 위치에 고정한다
- 화면이 스크롤되더라도 브라우저 화면 기준, 지정한 위치에 고정.
▶️ 브라우저 화면에 고정되기 때문에 부모 요소가 필요없다
▪️ Display
block / inline
1. block 요소
넓이가 100%로, 옆에 다른 요소가 올 수 없는 요소
▶️<header>, <footer>, <p>, <li>, <table>, <div>, <h1>등
▶️ width / margin / padding 을 조정할 수 있다.
▶️ 다른 요소를 감쌀 수 있다.
▶️ 브라우저에 따라 자동으로 기본 스타일이 적용된다.
- 예 ) margine이 자동으로 생김(inspect로 확인 가능)
2. inline 요소
옆에 다른 요소가 올 수 있는, 요소끼리 한줄에 위치할 수 있는 요소
▶️<span>, <a>, <img> 등
▶️ 요소의 영역만큼만 공간을 차지한다.
▶️ 같은 inline요소만 감쌀 수 있다.
▶️ box 요소가 아니기 때문에 width / margin / padding 을 조정할 수 없다.
display 속성변경
요소에
display:속성을 적용하여 display를 바꿔줄 수 있다.
1. display:block
- inline 요소를 block 요소로 바꾸어준다
2. display:inline-block
- block 요소를 inline 요소로 바꾸어주며, 크기도 설정할 수 있다.
display:inline으로만 지정하면 width / margin / padding 값을 지정할 수 없다.
3. display:none
- 요소를 화면에서 보이지 않게 한다.
- 화면에서 사라질 때,
visible:hidden과 달리 공간도 사라진다. - 검색창에 텍스트를 입력할 때 갑자기 아래 추천검색어 목록이 뜨는 기능을 구현할때 많이 사용.
▪️ display:flex
