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..
With CSS, links can be styled in different ways. css로 링크는 다른 방식으로 표현될수 있다. Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). 링크 표현하기 링크는 어떤 css 속성으로도 표현될 수 있다. (예를들면, color, font-family, backgoround 등) In addition, links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:..
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like or ). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.) 너의 html page에 icon을 추가하는 가장 쉬운방법은 font Awesome 과 같은 library 이다. 나 과 같은 html 요소안에 명시된 icon class의..
The CSS font properties define the font family, boldness, size, and the style of a text. font 속성은 텍스트의 모양과 사이즈 딱딱함의 정도 폰트의 족보를 정의한다. CSS Font Families In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial") 폰트 족보 (족보라는 표현이 맞는지 모르겠네..) 2가지 ..
Text Color The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector. 글자색 color의 속성은 글자의 색을 설정하기 위해 사용되어진다. 색은 다음과 같이 명시되어진다. 가능 한 색의 값을 확인하기 위해선..
CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". 바깥선은 요소의 주변의 그려진 선이다 ( 요소를 두두러지게 만들기 위해 테두리 바깥에 있는 선 ) Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and h..
The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: css 박스 모델 html의 모든 요소는 box 로서 고려되어질 수 있다. box 모델의 용어는 디자인과 레이아웃에 대해서 이야기..
