티스토리 뷰
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
다음과 같은 내용을 배움
Make ordered and unordered lists
Change the color, size and type of font
Add comments to our HTML file
Change the page's background color
Align text
Bold and italicize text