[새싹 프론트엔드] CSS3 레이아웃

 

🌱 CSS 위치 속성

🖥 위치 설정 방법

절대 위치 좌표 :  요소의 x좌표와 y좌표를 설정해 절대 위치를 지정

상대 위치 좌표 : 요소를 입력한 순서에 따른 상대 위치를 지정

 

 

🖥 position 속성

키워드	설명
static	상대 위치 좌표 설정, 디폴트
relative	초기 위치에서 상하좌우로 이동
absolute	부모를 기준으로 절대 위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표 설정

✔️ position:static 

브라우저의 디폴트 배치방식, HTML 태그의 작성된 순서대로 출력 위치를 정함

top, bottom, left, right 속성 값은 적용 안됨

 

 

✔️ position:relative

기본 위치에서 left,top,bottom, right 속성의 값만큼 이동한 상대 위치에 배치 

 

 

✔️ 속성

left - 왼쪽 모서리의 이동 거리 지정

top - 위쪽 모서리의 이동 거리 지정

top/bottom가 동시 지정 시, bottom무시

left/right가 동시 지정 시, right 무시

 

 

✔️ position:absolute 

HTML 태그를 절대 위치에 배치 

절대 위치는 left, top, bottom, right 속성 값으로 정함

 

∙div태그같은 블록도 (인라인)컨텐츠 길이 영역으로 줄어들음

∙현재 좌표와 상관없이 브라우저(작업구역) 기준으로 위치를 잡음

∙브라우저기준이아닌 ‘부모’ 기준으로 좌표를 잡고싶을때는 부모한테도 position값을 줘야함 position: relative;

   *부모에 값이 없으면 그 위에 부모, 없으면 또 위에 위에 가다보면 0,0으로 좌표를 잡고 하게됨

 

‼️ 자식이 absolute 이면 부모태그에 realtive값을 줘야 내가 원하는대로 움직일 수 있음 ‼️

 

 

💡 클래스에 두개의 이름이 있을때!

ex) <div class=”box model1”> </div>

그냥 보면 box model1 이 하나처럼보이지만 띄어쓰기가 있음! box 따로, model1따로임!!!!

 

 

✔️ position:fixed 

스크롤하거나 브라우저의 크기를 변경해도 브라우저 화면에 항상 보임

left, top, right bottom 속성값으로 특정 위치에 고정함

 

 

✔️ z-index

HTML 태그들을 z축을 따라 수직으로 쌓는 순서를 지정함

속성 값이 클수록 위에 쌓임!!

 

 

✔️ overflow 속성

내부 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법

키워드	설명
visible	내용이 잘리지 않고 영역을 넘어 출력(디폴트)
hidden	영역을 벗어나는 부분을 숨김
scroll	스크롤 생성 (무조건!)
auto	내용이 부모 영역을 넘어가면 자동으로 스크롤 생성

블록 태그에만 적용됨

 

 

✔️ float 속성

태그를 오른쪽이나 왼쪽에 항상 배치 가능

항상 같은 위치에 출력할 광고나 공지 등에 적합 

 

left : 태그를 왼쪽에 붙이기

right : 태그를 오른쪽에 붙이기

 

 

제일 간단해보이지만

제일 ㅎ 속성값주기 어려운 부분인듯

실습가지고 여러가지 실험해보자! 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅