html22 CSS drop down menu 평소에는 Products, Sales만 있는 상태이다가 Products에 마우스를 올리면 아래로 하위 메뉴가 나오게 하는 예제이다. 위와 같은 드롭다운 메뉴를 만들기 위해서 display, position을 활용한다. products의 자식 태그인 ul의 css 속성으로 display: none;으로 설정한다. 이후 products:hover ul{display: block} 을 하여 드롭다운 메뉴가 나타나게 한다. 드롭다운 메뉴의 position 속성은 absolute을 사용하여 나타났을 때 레이아웃에 영향을 안 미치도록 해야 한다. 위의 예제 코드는 다음과 같다. 2020. 5. 12. [Application Layer]HTTP HTTP는 TCP를 사용한다(TCP의 역할: loss free를 보장). 포트는 80번을 사용한다. HTTP가 한 페이지에 데이터의 전부 다 얻는다는 것은 base html page과 추가 object로 받아야 하는 것들을 모두 받는 것이다. 따라서 한 번 TCP 커넥션을 연결하고 난 후 이후 처리 방식이 다를 수 있다. 대표적인 방식은 3가지가 있다. 1. non-persistent HTTP 2. persistent HTTP 3. non-persistent HTTP with parallel TCP 순서대로 각 방식의 과정과 response time을 설명하도록 한다. 1. non-persistent HTTP non-persistent HTTP 과정 1a. Client HTTP-> Server HTTP:.. 2020. 5. 10. CSS position position은 요소의 위치를 조정하기 위해서 사용된다. 원래 배치되기로 한 곳에서 조금 조정하거나 특정한 방식으로 찾은 부모 요소를 기준으로 배치를 하거나 하는 것이다. position 사용시 z-index이라는 z축에 우선순위를 주는 속성이 있다. 한글 프로그램에서 그림이 여러 개 겹쳐있을 때 '맨 앞으로' 같은 것을 생각하면 쉽다. position을 사용하면 같은 영역안에서 다른 박스와 겹치는 부분이 생길 수 있으므로 주의해야한다. 즉, 여러 겹의 레이어가 쌓이는 상황이 발생한다. 각 속성값을 보면서 활용방법을 생각해보면 유용할 것이다. static default 값이다. 즉, 모든 요소는 static이 기본 값으로서 inline, block 박스들이 나열되는 방법들을 잘 알고 있으면 된다. in.. 2020. 5. 9. CSS text-overflow(텍스트 잘리는 부분 처리) 아래 사진처럼 공간이 부족한 경우 ... 으로 처리하는 예시이다. 단독으로 text-overflow을 사용하면 "..." 처리가 되지 않는다. 아래 두 가지 속성을 함께 사용해야 한다. overflow: hidden white-space: nowrap 또한 당연한 얘기지만 글자가 width의 좌우 넓이를 넘쳐야 한다. 2020. 5. 8. 이전 1 2 3 4 5 6 다음
