CSS 강의 PPT
HTML 강의 PPT
ROR 강의 PPT
Ruby 1강
HTML 1강
CSS 1강
index.html
<![CDATA[
<!doctype html>
<head>
<script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":2001081,"name":"itncode","title":"IT & CODE 이야기","isDormancy":false,"nickName":"Karoid","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://itncode.tistory.com/52","DEFAULT_URL":"https://itncode.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"};
window.T.entryInfo = {"entryId":52,"isAuthor":false,"categoryId":703840,"categoryLabel":"Lecture/Ruby coin(강의)"};
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};
window.TistoryBlog = {
basePath: "",
url: "https://itncode.tistory.com",
tistoryUrl: "https://itncode.tistory.com",
manageUrl: "https://itncode.tistory.com/manage",
token: "NaRFxJ3ar1SEoAUfcmPdkeW5BS4GBKd+M/4CeW197iKFgAEVeTrF5Z0jnkcnq3pa"
};
var servicePath = "";
var blogURL = "";</script>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/>
<link rel="canonical" href="https://itncode.tistory.com/52"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://itncode.tistory.com/52","name":null},"url":"https://itncode.tistory.com/52","headline":"제 1 강 나를 소개하는 페이지 만들기","description":"CSS 강의 PPT HTML 강의 PPT ROR 강의 PPT Ruby 1강 HTML 1강 CSS 1강 index.html 제목1 제목2 제목3 as;fjaslkfjas;kfa;lksfas ;fjaslkfjas;kfa;lksfas;fja as;fjaslkfjas;kfa;lk sfas;fjaslkfjas ;kfa;lksfas;fja 구글로 접속 하기 a;fdkja;slfkjaf a;fdkja;slfkjaf style.css .blue{ color:blue; font-size: 20px; } .center{ text-align: center; } #bgred{ background-color:red; } .paper{ display:block; background-color:gray; } .width{ widt..","author":{"@type":"Person","name":"Karoid","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F217C813A586F52331B","width":"800px","height":"800px"},"datePublished":"20160921T16:33:18","dateModified":"20170106T17:16:04","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script>
</head>
<h1 class="blue" id="bgred">제목1</h1>
<h2 class="blue center">제목2</h2>
<h3>제목3</h3>
<p class="paper width">
as;fjaslkfjas;kfa;lksfas<br />
;fjaslkfjas;kfa;lksfas;fja
</p>
<p class="paper width">
as;fjaslkfjas;kfa;lk<br />sfas;fjaslkfjas<br />;kfa;lksfas;fja<br />
<a target="_blank" href="https://www.google.com">
구글로 접속 하기
</a>
</p>
<div>
a;fdkja;<span style="font-size:20px;">slfkjaf</span>
</div>
<div>
a;fdkja;slfkjaf
</div>
<img src="title.png" class="width"/>
]]>
style.css
<![CDATA[
.blue{
color:blue;
font-size: 20px;
}
.center{
text-align: center;
}
#bgred{
background-color:red;
}
.paper{
display:block;
background-color:gray;
}
.width{
width:100px;
height:100px;
}
]]>
강의의 목차
-
온라인 수업
- 기본 개념 소개(백엔드와 프런트엔드 수업의 방향), Cloud9 사용법과 RoR 소개
- 기본적인 태그(div,span,a,img,목록,p,br,제목)들 + 태그의 구조와 중첩
- css를 적용하는 법, 선택자의 종류와 사용 방법(class,id), 기본 css
오프라인 수업
- 트위터 부트스트랩
- 그럼 직접 나를 소개하는 페이지를 만들자!
강의 요약
1번 문제. 문단 태그는 무엇일까요?
2번 문제. CSS를 인라인 스타일로 적용하려면 어떻게 해야 할까요?(답 2개)
red coin CSS강의 1강.pptxred coin HTML강의 1강.pptxred coin ROR 1강.pptx
