화면 레이아웃 잡을 때 위치 잡는방법
위치조정 기법 중 하나 : float
float을 하면 자기만의 너비 높이를 가질 수 있고 공중부양 하게된다. 땅바닥에 깔려있는 공백 또한 무시된다!
상품 사진을 업로드 할때는 유저가 제못대로 올린 너비의 사진을 규격에 맞게 정확히 잘라줘야 한다.
반응형 웹에서 css다루는 예제 : 웹브라우저가 줄면 이미지가 같이 주는데 어느순간 한계점에 도달하면 밑으로 뚝 떨어지며 조절되는 것 찾아보기
=> 가장 가까운 조상 중에 absolute나 relative, fixed 타입 조상이 있으면 그 조상을 기준으로 자신의 위치를 조정한다. 테두리 안쪽을 기준으로 위치를 계산한다. => 만약 조상 중에 absolute나 relative, fixed가 없다면, 문서 가장자리를 기준으로 자신의 위치를 조정한다. => absolute 태그는 width, height를 지정하지 않으면 콘텐츠의 크기에 맞춘다. => 기준이 되는 태그가 움직이면 자신도 같이 움직인다.
#d111 {
position: absolute;
right: 200px;
top: 15px;
}
모든 태그의 위치는 왼->오, 위->아래로 위치를 자동계산한다. 태그 스스로가 나 어디있을래! 할 수 없지만 포지션을 absolute라고 지정하는 순간 위 태그가 먹힌다!
absolute의 기준점은 ㅈ웹브라우저 가장 바깥쪽의 테두리가 기준이다. body를 기준으로 잡는게 제일 깔끔하다!
float은 왼/오만 갈 수 있고
앱솔루트는 내 맘대로 위치조정 할 수 있음, 그리고 텍스트를 무조건 덮어씀
html의 출발점은 논문 : 절대로 텍스트를 가리지 않음
앱솔루트가 되는 순간 바디의 너비높이를 지정하지 않으면 자기가 품고있는 자식의 너비높ㅇㅣ로 계산된다.
바디를 앱솔루트로 두면 ui를 조절 할 수 없음. body는 도화지로 따지면 기본임. 대신 자식태그의 기준점이 될 수 있도록 relative로 설정!
바디가 하는일은 웹브라우저의 너비를 꽉채우는일을 한다. 자식태그의 기준점이 되도록 도와준다.
float은 마진으로 위치조정해야함. 단 현재 출력하는 위치로 계산한다 ->
#footer {
font-size: 80%; /* = 0.8em */
/* 왼쪽에 이 태그의 내용을 가리는 것이 있다면
그 아래로 위치하도록 이동시킨다.
단 왼쪽에 있는 것이 float 객체일 때!*/
clear: left;
text-align: center;
border: 1px solid red;
}
clear : 왼쪽 덮지 못하게해!!! 이 뜻은 왼쪽이 안 덮여야 하니까 지가 내려갈 수 밖에 없는거임
height : 자식콘텐츠 높이의 상관없이 자신의 높이를 고정시킴 그래서 자식이 400px넘어가도 자기는 고정되버림
min-height : 최소높이를 주고 자식 콘텐츠의 높이에 맞게 유동적으로 변한다.
팝업창 다 absolute로 처리한거임
test10_7.html
position: fixed => 웹브라우저의 클라이언트 영역을 기준으로 위치를 지정한다. => 클라이언트 영역? 웹브라우저의 툴바 아래에 위치한 내용이 출력되는 화면이다. => 내용을 위,아래로 스크롤하더라도 fixed 타입의 태그를 움직이지 않는다. => 화면 스크롤과 상관없이 웹브라우저의 특정 영역에 내용을 띄우고 싶을 때 사용한다.
=> 보통 광고팝업창, 그리고 헤더에 메뉴바 따라오는거에 이용
렐러티브 쓰는순간 자손들의 기준이 되고 자신의 위치를 고수하면서 위치조정을 할 수 있다.
test11_2.html 부트스트랩 시작
CDN : content delivery network
실무에서는 CDN보다는 다운로드 받아서 쓴다. 왜냐? 부트스트랩 서버가 다운되면 부트스트랩 쓴게 모두 안보이기 때문이다. 하지만 우리 프로젝트에서는 부트스트랩 쓰는 방법을 배울 것이기 때문에 CDN을 이용한다.
npm을 썼다는 것 자체가 최근 프로젝트라는 뜻이다.
다운로드해서 bootstrap, sweetalert2 css라이브러리 추가(npm사용)
정적데이터는 웬만해선 캐시된다. 수정날짜를 기준으로 브라우저가 서버에게 다시 주고, 서버는 그 정적데이터를 다시 수정되기 전까지 캐시하여 제공한다.