Create a hoverable dropdown with CSS. css 로 hoveable 한 dropdown을 만들어라. Demo: Dropdown Examples Move the mouse over the examples below: 아래 예제에 마우스를 옮겨라 Basic Dropdown Create a dropdown box that appears when the user moves the mouse over an element. 기본적인 드롭다운 사용자가 요소 위에 마우스를 올릴때, 생겨지는 드롭다운을 만들어라. Example Explained HTML) Use any element to open the dropdown content, e.g. a , or a element. Use a con..
jcosole 을 사용하기 위해선 java 를 실행시킬때, 몇가지 옵션을 추가하여야 한다. 사진에서 처럼 4가지 옵션을 추가했다. jconsole을 사용하기 위해서 추가한 4가지 옵션 -Dcom.sun.management.jmxremote.port=9999 -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.management.jmxremote.authenticate=false -Djava.rmi.server.hostname=10.20.2.60 jconsole 이 접근하기 위해 9999 포트를 할당했고, 해당 ip는 알아서 설정하면 된다. jconsole 의 위치는 자신이 jdk를 설치한 곳에 bin에 있다. 실행방법은 아주 단순하다. ip와 포트를 입력하고 해당 ..
Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. 사용하기 쉬운 네비게이션을 가지는 것은 어느 웹사이트 에서나 가장 중요하다. css로 지루한 html 메뉴를 좋아 보이는 네비게이션 바로 바꾸는 것이 가능하다. Navigation Bar = List of Links A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML li..
The opacity property specifies the opacity/transparency of an element. opacity 속성은 요소의 투명도와 불투명도를 명시한다. Transparent Image The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent: 투명한 이미지 opacity 속성은 0.0 부터 1.0 까지의 값을 가질수 있고, 값이 납아질수록 좀더 투명해진다. Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the elemen..
What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element 수도-요소는 무엇일까? css pseudo-element 요소는 요소의 구체적인 부분을 스타일하기 위해서 사용되어진다. 예를든다면, 이것은 요런식으로 사용되어질 수 있다. 요소의 첫문자 혹은 첫줄 스타일 하기 요소 내용의 뒤나 앞에 내용 삽입 Notice the double colon notat..
What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus pseudo-classes 란 무엇일까? 수도 클래스는 요소의 특별한 상태를 정의하기 위해 사용되어진다. 예를들면, 이것은 아래와 같이 사용되어질 수 있다. 1. 유저가 요소의에 마우스를 올렷을때, 스타일 변경 2. 방문했거나, 방문하지 않은 링크를 다르게 스타일할때, ..
A combinator is something that explains the relationship between the selectors. combinator 은 셀렉터 사이의 관계를 설명한 어떤 것이다. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) CSS 셀렉터는 하나의 ..
Center Align Elements To horizontally center a block element (like ), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: 가운데 정렬 요소 block 요소를 가운데 정렬하기 위해선, margin: auto; 를 사용한다. 요소의 넓이를 설정하는 것은 이것이 컨테이너의 모서리에 뻗..
The display: inline-block Value Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block, the major difference is that display: inline-block does not add a line-break after th..
The CSS overflow property controls what happens to content that is too big to fit into an area. overflow 속성은 한 영역의 맞추기 너무나 커진 내용물이 무엇을 할지 제어하는 것이다? CSS Overflow The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values: visible - Default. The overflow is n..
