HTML / CSS 정리
HTML
<h1>...<h6> : 제목태그
<p> </p> : 문단태그
<a href=" "> </a> : a태그 하이퍼링크
<img src=""> : 이미지태그
<table>
<tr> <td> </td> </tr> : 테이블태그
<ul>
<li> </li> : ul태그 (unordered 순서가 없는 리스트태그)
</ul>
<ol>
<li> </li> : 순서가 있는 리스트태그
</ol>
<div> </div> : 그룹지정태그
<br> : 개행문자
<span> </span> : 텍스트를 따로 묶는 태그 (인라인 안에 특정 부분을 고치고 싶을때?)
<form action=""> : 입력태그
<input type="text">
<input type="password">
<input type="checkbox">
</form>
CSS : 꾸며주는 역할
<예제>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
body{
background-color: gray;
}
h1, #t2_1{
color:red;
}
h2{
color:blue;
}
#t1{
color:purple;
}
.s1{
color:yellow;
}
</style>
</head>
<body>
<h1 id="t1">Test1</h1>
<h2 class="s1">sub_test1</h2>
<h1 class="s1">Test2</h1>
<h2 id="t2_1">sub_test2</h2>
<h1>Test3</h1>
</body>
</html>
결과
>
Test1
sub_test1
Test2
sub_test2
Test3
CSS
형식
선택자 { 내용 }
1.모든 선택
*{
color : red;
}
2.태그선택
h1 { color : red; }
3.ID 선택
#t1 { color : red; }
4.클래스 선택
.s2 { color : red; }
5.여러 가지 선택
태그명, #아이디명, ... 클래스명 { color : red }
속성
1. background : 배경
background-color: gray;
background-image: url("");
background-repeat: repeat, repeat-x, repeat-y, no-repeat;
2. border : 테두리
border-color : 선의 색
border-style : 선의 종류
border-width : 선의 두께 ( 선의 너비)
3. margin
margin : 10px; -> 상하좌우 10px;
margin : 10px 20px; -> 상하 10px, 좌우 20px;
margin : 10px 20px 30px; ->
margin : 10px 20px 30px 40px; -> 상 10px 우 20px 하 30px 좌 40px
4. padding
padding : 10px; -> 상하좌우 10px;
padding : 10px 20px; -> 상하 10px, 좌우 20px;
padding : 10px 20px 30px; ->
padding : 10px 20px 30px 40px; -> 상 10px 우 20px 하 30px 좌 40px
마진과 페딩의 차이 : 페딩은 박스 안쪽을 띄울때, 마진은 박스 바깥을 띄울때??
4-1. box-sizing : border-box : 부모의 사이즈는 그대로
*margin*2+padding*2+border*2+content : 계산을 해야 모바일 페이지를 제작가능(화면을 %에 맞게 계산)
5. 중앙정렬
margin : 0 auto; 단, width 가 계산할 수 있는 값으로 정해져야 한다.
[중앙정렬]
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.di {
width: 200px;
height: 300px;
border: 1px solid black;
background-color: gray;
}
#d1 {
margin: 50px auto;
padding: 10px;
}
#d2 {
box-sizing: border-box;
margin: 20px auto;
padding: 10px;
}
</style>
</head>
<body>
<div id="d1" class="di"><h1>d1</h1></div>
<div id="d2" class="di">
<h1>d2</h1>
<div id="d2_1"></div></div>
</body>
</html>
*********************************************************************
박스안에 사진 넣기
사진파일 예쁘당
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
div {
border: 1px solid black;
width: 1200px;
text-align: center;
}
</style>
</head>
<body>
<div>
IU<br>
<img src="./iuiu.jpg">
</div>
</body>
</html>
********************************************************************************
디자이너들은 자를 가지고 다닌다
cm를 px로 바꾸기
or
f12 누르면 소스를 볼 수 있다.
먼저 레이아웃을 크게 나눈다.
나눈 것 안에서 다시 가로와 세로로 나눠주면 된다.
#c2_a_1{
margin-right: 50px;
}
#c2_a_2{
margin-right: 50px;
}
CSS의 주석
/* 주석 내용 */
RGB 색상 16진수값 보는 페이지
http://www.w3schools.com/tags/ref_colorpicker.asp
or 네이버 검색 "html 색상표"
http://search.naver.com/search.naver?where=nexearch&query=html+%EC%83%89%EC%83%81%ED%91%9C&sm=top_sug.pre&fbm=1&acr=1&acq=html+%EC%83%89&qdt=0&ie=utf8
*******
띄어쓰기 태그 (스페이스바)
***********************fnc연습
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/* ****************** top 시작 ******************** */
#top{
margin-bottom:50px;
height : 67px;
background-color: black;
}
#top_logo{
}
/* ****************** top 끝 ******************** */
/* ****************** 컨텐츠 시작 ******************** */
#content_1{
overflow:hidden;
width: 1000px;
height: 475px;
margin : 0 auto;
background-color: gray;
}
#c_1{
width: 1000px;
}
#content_2{
width: 1000px;
height: 300px;
margin : 10px auto 50px;
}
.c2_a{
width: 300px;
height: 300px;
}
#c2_a_1{
border: 1px solid black;
width: 300px;
height: 300px;
float: left;
margin: 0 auto;
}
#c2_1{
width: 300px;
height: 300px;
}
#c2_a_2{
border: 1px solid black;
width: 300px;
height: 300px;
float: left;
margin: 0 47px;
}
#c2_2{
width: 300px;
height: 300px;
}
#c2_a_3{
width: 302px;
height: 300px;
float: left;
margin: 0 auto;
}
#c2_a_3_1{
border: 1px solid black;
height: 165px;
margin: 0 auto;
}
#c2_3{
width: 300px;
height: 165px;
}
#c2_a_3_2{
border: 1px solid black;
height: 104px;
margin-top: 30px;
}
#c2_4{
width: 300px;
height: 104px;
}
/* ****************** 컨텐츠 끝 ******************** */
/* ****************** 풋 시작 ******************** */
#footer{
height: 80px;
background-color: black;
}
#ft_div{
border: 1px solid red;
width: 1000px;
height: 80px;
margin: 0 auto;
}
#ft_logo{
width: 60px;
height: 25px;
margin : 27px auto;
float: left;
}
#ft_info{
width: 800px;
height: 50px;
border: 1px solid blue;
margin: 0 auto;
float: left;
margin-left: 30px;
margin-top: 27px;
font-size: 11px;
color: white;
}
#ft_select{
width: 80px;
height: 25px;
border: 1px solid purple;
float: right;
margin : 30px auto;
}
/* ****************** 풋 끝 ******************** */
</style>
</head>
<body>
<div id="top">
<div id="top_logo"><img src="./img/logo.png"></div>
</div>
<div id="content_1"><img id="c_1" src="./img/aoa.png" ></div>
<div id="content_2">
<div id="c2_a_1" class="c2_a"><img id="c2_1" src="./img/c2_1.PNG"></div>
<div id="c2_a_2" class="c2_a"><img id="c2_2" src="./img/c2_2.PNG"></div>
<div id="c2_a_3" class="c2_a">
<div id="c2_a_3_1"><img id="c2_3" src="./img/c2_3.PNG"></div>
<div id="c2_a_3_2"><img id="c2_4" src="./img/c2_4.PNG"></div>
</div>
</div>
<div id="footer">
<div id="ft_div">
<div id="ft_logo"><img src="./img/fnc_logo.png"></div>
<div id="ft_info">
<p>
개인정보취급방침 | 이용약관 | 고객센터/문의하기 (Customer Service)
</p>
서울시 강남구 청담동 111 (주) FNC ENTERTAINMENT | TEL. 02) 517-5426 | FAX. 02) 518-5428<br>
COPYRIGHT © 2014 FNCENT.COM ALL RIGHT RESERVED
</div>
<div id="ft_select">
<select>
<option>CNBLUE</option>
<option>AOA</option>
</select>
</div>
</div>
</div>
</body>
</html>
************************************************************************
*******************************************
overflow 옵션 공부 ( 사진 자르기 : hidden, scroll, auto )
'프로그래밍, 통계학 > CSS' 카테고리의 다른 글
| [31일차]2015.08.20.목, 페이지만들기 (0) | 2015.08.20 |
|---|---|
| [30일차]2015.08.19.수, 자손선택자, 후손선택자 (0) | 2015.08.19 |
| [29일차]2015.08.18.화, HTML/CSS 연습연습 ,페이지 만들기 (0) | 2015.08.18 |
| [27일차]2015.08.14.금,CSS (0) | 2015.08.14 |
테시리