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..
The look of an HTML table can be greatly improved with CSS: html 테이블의 외관은 css로 멋지게 향상될수 있다. Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for , , and elements: table 의 경계 테이블의 경계를 명시 하기 위해선 border 속성을 사용하라. , , 요소의 검정색 경계선을 명시하는 예제가 아래에 있다. Notice that the table in the example above has double borders. This is because both the ..
HTML Lists and CSS List Properties In HTML, there are two main types of lists: unordered lists () - the list items are marked with bullets ordered lists () - the list items are marked with numbers or letters The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker Add backgroun..
