[CODEcademy]HTML&CSS 내용정리

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

<link href=”stylesheet.css” type=”text/css” rel=”stylesheet” />
-> head안에 title아래 쓰는 것으로 css파일을 연결해 준다.
* CSS는 html의 style을 결정한다.
stylesheet.css
——————–
p{
color:green;
}
——————–
-> p는 기본으로 color가 green이다.
* font-family나 font-size같은 것들도 넣어서 수정가능하다.
/*
comment
*/
-> css에서 사용하는 코멘트 명령어
*color는 #ffffff;이런식으로 색을 지정할 수도 있다.

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&#8221; />
-> 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

Advertisements

정적 웹사이트 만들기

http://advocate-inference-71602.bitballoon.com/

위 주소는 이번에 만든 자기소개 정적 웹사이트 주소이다.

이번에 정적 웹사이트를 만들기 위해 아래 주소들을 이용했다.

https://www.codecademy.com/learn/make-a-website

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

http://1004lucifer.blogspot.kr/2014/04/css-div-width-height.html

http://aboooks.tistory.com/180

codecademy 에서는 일단 기본적인 스킬들과 함수를 익혔다.

bootstrap에서는 대부분 따오는 식의 방식을 사용했다.

스크롤을 따라서 내려오는 My career가 대표적인 예이다.

그 밖의 주소에서는 위 2개의 주소에서 알 수 없었거나 궁금했던 부분을 해소하는데 사용했다.

본래는 My career는 리모콘이 되어 오른쪽이 클릭에 따라 바뀌는 것을 원했지만 div안에 div를 넣었을 때 크기 조절 및 스크롤로 표현하는데 있어서 실패해서 이와 같이 마무리 되었다.

파일은 구글 드라이브에 올려두었다.

맨 마지막에 twitter, facebook, instagram 등 의 버튼은 codecademy에서 보고 따온 가짜이다. ㅎㅎ

아쉬운 점은 java script를 이용해서 나이는 매년 바뀌고 Language도 내가 이 블로그에 카테고리를 추가할 때마다 바뀌도록 하고 싶었는데 이 과제를 토요일 저녁에 알게되어서 급하게 하느라 많이 하지 못한 것이 아쉽다.