CODEcademy에서 make a website를 해봄으로써 기본기는 있지만 좀 더 명확히 익혀서 블로그에 올리는 글을 알아보기 편하게 나타내기 위해 배웠보았다.

CODEcademy HTML&CSS

Chapter 1. Introduction to HTML

<strong> </strong>
-> text bold
<!DOCTYPE html>
-> 언제나 첫문장이며 language를 밝힘
<head>
<title>Title</title>
</head>
<body>
본문
</body>
-> 기본 형태
<a href=”경로”>button</a>
-> 하이퍼링크
<img src=”경로” />
-> 이미지 삽입

Chapter 2. HTML Structure: Using Lists

<ol></ol>
-> 순서있는 List
<li></li>
-> List에서 한줄
<ul></ul>
-> 순서없는 List
<!–comment–>
-> comment를 다는 명령어
<p style=”font-size: 12px”></p>
-> font-size를 12픽셀로 한다.
<p style=”color: green; font-size: 12px”></p>
-> 폰트크기는 12px이고 색은 초록
style=”;;”
font-family: Arial
-> 글씨체를 Arial로 한다.
background-color: red
-> 배경을 red로 한다.
text-align:center
-> 글씨의 정렬을 center로 한다.
<em></em>
-> 텍스트 기울이기

Chapter 3. HTML Structure: Table, Divs, and Spans

<table border=”1px”>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
-> 선굵기가 1px인 3rows and 2columns인 table
<table border=”1px”>
<thead>
<tr>
<th>Famous Monster</td>
<th>Birth Year</td>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
-> 내부에 헤드(thead)와 바디(tbody)를 나눠 작성한 table
<td colspan=”2″></td>
-> column의 크기가 2인 td로 작성
style=”;;”
padding:5px;border-left:1px bolid
-> 간격은 5px을 주고 왼쪽만 1px의 선을 두고 글씨체는 굵게
border-collapse:collapse
-> 선 제거

-> 구역 생성
<span></span>
-> 일부분만 수정하여 전체에 영향이 가지 않음

Chpater 4. Introduction to CSS

Chapter 5. CSS Classes and IDs

stylesheet.css
——————–
td{
height:50px;
border:1px dashed blue;
}
table{
border:1px solid black;
}
——————–
-> border의 두께, 모양, 색을 한번에 지정한다.
text-decoration:none;
-> text의 모든 꾸밈을 없앤다.
border-radius:5px;
-> 모서리를 둥글게한다.
stylesheet.css
——————–
div div div h3{
color:red;
}
——————–
-> div 3번 안에 있는 h3에 대해서만 적용
stylesheet.css
——————–
*{
color:red;
}
——————–
-> 모두에 적용
stylesheet.css
——————–
body > p{
font-weight:bold;
}
——————–
-> body 바로 안에 있는 p에만 적용, body안 div안에 p같은 경우는 적용안됨
.html
——————–
<p id=”intro”>
<p class=”list_item”></p>
</p>
——————–
stylesheet.css
——————–
#intro {
font-weight: bold;
color: #000000;
}
.list_item {
font-family: Vivaldi, cursive;
}
——————–
-> id를 지정한 경우 css에서 #으로 시작하며 표기한다.
-> class의 경우 css에서 .으로 시작하며 표기한다.
stylesheet.css
——————–
selector:pseudo-class_selector {
property: value;
}
p:first-child{
font-family:cursive;
}
p:nth-child(2){
font-family:tahoma;
}
p:nth-child(3){
color:#cc0000;
}
——————–
-> 어떤 selector의 특정 상황의 style을 지정가능하다.
-> p:first-child{} 처음 p에만 적용
-> nth-child(index)로 특정 위치의 selector에만 적용도 가능
* class와 id가 있으면 id를 우선순위로 둔다.

Chapter 6. CSS Element Positioning

<img src=”https://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png” />
-> box model img로 설명이 잘되어있음
display: block (or inline-block, inline, none)
*block: 한줄을 차지한다.
*inline-block: 한줄을 차지하지 않는다.
*inline: 문자로 취급한다.
*none: 아무것도 나타나지 않는다.
margin:auto
-> div에 사용하면 page에 중앙으로 옮겨진다.
margin-top:20px;
margin-right:50px;
margin-bottom:10px;
margin-left:5px;
-> 상하좌우로 margin을 설정한다.
float:
-> elements들의 flow를 설정한다.
claer:
*left: 왼쪽 정렬
*right: 오른쪽 정렬
*both: 양쪽으로 퍼짐
position:
*static: 초기값
*relative: 기본값 위치에서 움직인다.
*absolute: relative와 달리 기본값과 상관없이 움직인다.
*fixed: 스크롤에 상관없이 위치를 고정한다.
※ 정리잘 된 사이트 : http://aboooks.tistory.com/82