[TIL]20210809

웹

FE - float 기반 샘플 화면 레이아웃 구성

clear: (float된 것들 모두) both | left | right

어떠한 엘리먼트를 float를 이용하면 밑에 있던 엘리먼트들이 자신들과 z값이 다르다고 인식해서 서로 겹치는 경우가 생기는데 이를 방지하기 위해 clear를 쓰면 z값이 다른 오브젝트도 인식하도록 하여 충돌을 방지한다.

float를 사용함에 따라 background-color가 먹통이 되는 문제

float를 사용하면 상위 엘리먼트에 준 값들이 적용되지 않는다. 자신의 자식으로 취급하지 않기때문이다. 그렇기에 div>ul>li{ background-color:#eee } 이런식으로 값을 줄 엘리먼트를 직접적으로 선택을 하던지(테스트할때는 ul에 컬러 값을 줬었고, float를 사용함에 따라 컬러값이 하위 엘리먼트들에게 적용되지 않았다.), overflow를 이용해야한다.

overflow: auto | hidden | scroll | visible (기본값)

https://developer.mozilla.org/ko/docs/Web/CSS/overflow
overflow를 이용하면 내용물을 강제적으로 다시 감싸게 되어서 위의 문제를 해결하는 것 같다. 자세한 건 위 링크 참고.

배운 내용으로 만든 것 1.
https://codepen.io/kid-chang/pen/eYWQxyY

java와 servlet을 이용해서 웹서버를 만드는 것을 해봤는데, 아직 맛보기 수준이라 정확한 정리가 안된다.
Tomcat으로 정적인 웹서버가 작동되고 servlet으로 동적인 웹서버가 작동된다.