이승훈
HTML, CSS는 정의와 기초 문법을 알아두고 필요한 내용은 구글링을 활용하도록 하자!
HTML
CSS
실습
김치훈
1.
HTML
•
HTML이란
HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.
⇒ 다시 쓰기
•
HTML 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<h1>
</h1>
<p class="p-test">
</p>
<section class="section-test">
<div class="div-test">
<article class="article-test">
</article>
</div>
</section>
<footer>
</footer>
</body>
</html>
HTML
복사
2.
CSS
•
CSS란
html을 꾸며주는 언어이다.
•
CSS 예시
footer {
text-align: center;
background-color: black;
color: white;
}
.article-test{
border: 1px solid #ebebeb; -> border: (두께 방식 색깔)
width: 610px;
text-align: center;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); -> box-shadow: (가로축 그림자) (세로축 그림자) (확장) (색))
}
.div-test {
font-size: 11px;
font-weight: bold;
}
CSS
복사
•
margin border padding content
border와 content를 기준으로 border 바깥쪽을 margin, border와 content 사이를 padding라고 한다.
•
float에 관하여
.title-test {
float: left;
}
.year-test {
float: right;
}
.float-wrap {
overflow: hidden;
}
CSS
복사
title-test 클래스와 year-test 클래스를 float설정을 해주면 각 클래스의 내용이 떠 다니듯이 html에 표시된다.
이 클래스를 float-wrap로 감싸서 overflow: hidden 설정을 하면 밑에 내용을 안 겹치게 쓸 수 있다.
서보민
손정아
코드라이언_일단 만드는 HTML/CSS (”나만의 이력서” 만들기)
※ “
토글” 을 클릭해주세요
토글” 을 클릭해주세요 최태승
1.
HTML/CSS
- web 개발 기초
