float

/ 요약: float: 이미지, div 태그를 정렬하는 방법, 중앙 정렬 없음
사용법 : 선택자 { float:left[right]; /

.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
/ TODO : 우측 배치 (대상 : 이미지, div 태그 등 /
float: right;
}

.box2 {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
/ TODO: 좌측 배치 /
float: left;
}

/ 08_float.exam.css /
/ 여백 초기화 /
/ TODO: float 사용시 주의점 :
float 를 사용한 태그 vs 사용안한 태그 사이에 겹침 현상이 발생할수 있음 /

Position

position : absolute (절대좌표), 웹브라우저 왼쪽/위 꼭지점이 0,0 이됨
*/

/ -left/top 속성을 이용해서 이동함 /
/ (참고) 기본적으로 html은 좌표가 없음 : position: static(좌표없음) /
.box {
width: 100px;
height: 100px;
background-color: red;
/ TODO: position 속성 /
position: absolute;
/ TODO: 왼쪽좌표(X좌표) /
left: 0;
/ TODO: 위쪽좌표(Y좌표) /
top: 0;
/ 참고) 겹침시 위/아래 순서 바꿈 속성 : 숫자가 클수록 위로 올라감 /
z-index: 30;
}
/ 간단 연습: box2 (40, 40) 이동, box3(80, 80) 이동 /

/ position_realative.css /
/ 요약 : realative : 태그를 고려해서 좌표가 설정됨
예) 태그 바로 밑에 (0,0)이 설정됨
vs absolute (태그 무시하고 웹브라우저 왼쪽/위 꼭지점이 (0,0) 임)
/

/ 13_position_fixed.css /
/ 상단 메뉴 고정 /
/ 요약 : position_fixed : 태그 고정, left/top/right 속성 이용
단점 : 태그 겹침이 있어 바깥여백(마진)이 필요할수 있음
/
.top-bar {
height: 50px;
background-color: aqua;
/ TODO : 고정 /
position: fixed;
left: 0;
top: 0;
right: 0;
}

/ 14_position_sticky.css /
/ 요약 : position: sticky (태그 고정, 좌표생김(top 등 사용)) /

• 18_media.css(참고) /
  / TODO: 모니터 최대 크기가 699PX 이하이면 빨간색을 적용하라 /
  / 반응형 웹 : 디바이스에 관계없이 적절하게 디자인되어 나타나는 것 */
  @media (max-width: 699px) {
  body {
  background-color: red;
  }
  }

/ TODO 최소 크기가 900이상이면 파랑색을 적용하라 /
@media (min-width: 900px) {
body {
background-color: blue;
}
}

/ TODO 700이상 그리고 899이하이면 초록색을 적용하라 /
@media (min-width: 700px) and (max-width: 899px) {
body {
background-color: green;
}
}