[👩🏻‍💻 연습] display: flex/ position: absolute/ transform: translate

 

간단한 홈페이지 만들어 보다가.. 대혼란을 느끼고.. 다시 개념 재정립.. 👷🏻‍♀️🕹️💡🚀 할 수 있다!!!!!!!

💡 Flex Container

 

• display: flex - 정렬 컨테이너 flexbox으로
• justify-content - 주축 방향 정렬
• align-items - 교차축 방향 정렬

 

💡Position, Transform

 

• position -  요소가 브라우저 화면(뷰포트)에 어떻게 배치되는가를 결정
• absolute - 부모 요소 내부에 속박되지 않고 독립적으로 배치. 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치
• transform - 요소 변형 시 사용 (위치 이동 , 회전 , 크기 조절)
• translate  - 요소를 이동시킬 때 사용,  transform에 속해 있음

 

---

 

 👩🏻‍💻 연습하기

 

• 요소를 CSS로 높이, 너비, 배경 색상, 보더만 꾸며 놓은 상태

 

• div.container에 display: flex 설정하고, 주축과 교차축 center로 정렬

div.container 박스 안의 아이템 박스들이 중앙으로 정렬

 

• div.container를 position: absolute와 transform: translate을 사용해서 뷰포트 중앙 정렬

div.container 박스가 뷰포트 중앙으로 정렬

 

• div.item을 display: flex 설정하고, 주축과 교차축 center로 정렬

div.item 박스 안의 텍스트들이 중앙으로 정렬

 

• 코드

 

html 코드

 

공통 CSS 스타일 설정해줌. margin&padding: 0으로 해주고, box-sizing: border-box로 설정해서 초기화 시켜준다.

 

✅ 기본값인  box-sizing: content에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지게 된다. 

✅ box-sizing: border-box에 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고, 사용자가 지정한 너비나 높이만큼 설정된다. border값이나 padding 값이 지정한  width값이나 height값에 포함된다.

 

css 코드

 
 

• 개발자 도구로 박스 내부 구조 뜯어 보기

div.container

 

div.item4

 
 

+

 

💡 아이템에 마진 값을 넣으면?

 

• div.item에 margin: auto; 를 준 상태 (상하좌우 마진: auto)

div.item4 마진

 
 

• div.item에 margin: 0 auto; 를 준 상태 (상하 마진: 0, 좌우 마진: auto)

div.item4 마진

margin: auto; 와 margin: 0 auto; 둘 다 div.container 영역 상태 같다.

 

마진 auto를 주면 중앙 정렬된다. 아이템과 아이템 사이의 간격은 서로의 마진이 합해진 값만큼 공간을 차지하게 된다.