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..
Using width, max-width and margin: auto; As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can). Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its conta..
The display property is the most important CSS property for controlling layout. display 속성은 layout을 제어하는데 가장 중요한 css 속성이다. The display Property The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. display 속성은 요소가 어떻게 보여지는데 명시한다. 모든 html..
