티스토리 뷰

2. HTML Basics II

kkd927 kkd927 2014.07.06 02:40

Making lists


1. Introduction


이번 코스에서는 다음과 같은 내용들을 배운다.


a. Making ordered and unordered lists

b. Changing font size, color and type

c. Changing the background color

d. Aligning the text



2. Indentation is your friend


태그의 들여쓰기를 잘해야 코드를 읽기가 쉽다.



3. Ordered lists


<ol> : ordered list 태그

<li>  : 각 리스트 요소




5. Unordered lists


<ul> : unordered list 태그

<li>  : 각 리스트 요소





6. Lists inside a list


리스트 안에 리스트 넣기







Styling the font!


7. Making comments


inline CSS 를 통해 CSS file 을 따로 만들 필요 없이 HTML file 안에 작성할 수 있다.


<!-- 내용 -> : 주석처리





8. Font size


<a> tag에 href를 넣은 것 처럼 opening tag 에 attributes을 넣을 수 있다.

attribute는 content의 서술이나 특징을 기술한다.


<p style=”font-size: 12px> : style 옵션을 통해 텍스트의 사이즈를 변경할 수 있다.





9. Font color


<h2 style=”color:red”> : style 옵션을 통해 텍스트의 색깔 변경

<h2 style=”color: green; font-size:12px”> : 색과 크기 같이 변경





10. Font family


<p style=”font-family:Arial”> : style 속성의 font-family 를 통해 폰트 변경


사용가능한 폰트목록

http://www.w3.org/TR/CSS21/fonts.html#generic-font-families





11. Recap


To recap, we use the style attribute in the opening tag, like so:


a. font-size: 14px

b. color: orange

c. font-family: Bodoni


<p style = "font-size:14px; color: orange; font-family: Bodoni">






More nice styling!


12. Background color


<p style=”background-color:red”> : style 속성의 background-color 로 배경색상 변경





13. Aligning the text


<h1 style=”text-align:center”> : style 속성의 text-align 을 통해 글의 위치 변경






14. Strong words!

<strong> </strong> : 텍스트를 굵게 표시





15. Emphasize words!

<em> </em> : 텍스트를 강조를 위해 이텔릭체로 변경




16. Summary

다음과 같은 내용을 배움

  1. Make ordered and unordered lists

  2. Change the color, size and type of font

  3. Add comments to our HTML file

  4. Change the page's background color

  5. Align text

  6. Bold and italicize text


'' 카테고리의 다른 글

6. CSS Selectors  (1) 2014.07.06
5. Design a Button for Your Website  (0) 2014.07.06
4. CSS: An Overview  (0) 2014.07.06
3. HTML Basics III  (0) 2014.07.06
2. HTML Basics II  (0) 2014.07.06
1. HTML Basics  (2) 2014.07.06
댓글