외부 스타일 시트 적용
<link>를 사용하여 외부 스타일 시트를 적용 (head안에 작성 + rel, type, href 3가지 속성을 주로 사용)
- rel : HTML페이지와 링크된 파일간의 관계를 의미
- href : CSS file 경로를 의미
내부 스타일 시트 적용
<style>을 사용하여 내부 스타일 시트를 적용 (head안에 작성)
<style>태그 내부에 CSS 규칙을 작성
외부 스타일 시트보다 우선 적용
인라인 스타일 적용
유지 보수에 용이하지 않음
- 스타일 적용 우선 순위 : 인라인 > 내부 > 외부
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css">
@import url("style.css"); /* 위의 <link>와 같은 의미*/
h3 {
font-family: 돋움, serif;
font-size: 20px;
background: silver;
}
</style>
</head>
<body>
<h1>CSS Exam</h1>
<h2 style="font-family:돋움,serif; font-size:50px; color:blue;">인라인 스타일 적용</h2>
<h3>내부 스타일 시트 적용</h3>
<h4>외부 스타일 시트 적용</h4>
</body>
</html>
<css_basic.html>
h4{
font-family:돋움, serif;
font-size:25px;
background:#660066;
font-weight:bold;
}
<style.css>
CSS 이해
선택자의 이해
일반 선택자 요소
전체 선택자 (Universal Selector) : *{ }
HTML 문서 내 모든 엘리먼트 선택
- 선택자 우선 순위
전체 < 타입 < 클래스 < ID
<head>
<meta charset="UTF-8">
<style>
*{
background:red;
color:yellow;
font-weight:bold;
}
</style>
</head>
타입 선택자 (Type Selector) : element { }
태그명을 이용해서 스타일을 적용할 태그를 선택
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<style type="text/css">
div, p{
padding:10px;
margin:10px;
font-weight:bold;
}
div{
background:#0076ff;
color:#ffb100;
}
p{
background:#ffb100;
color:#0076ff;
}
</style>
</head>
<body>
<div>Type Selector(타입 선택자)</div>
<p>Type Selector(타입 선택자)</p>
</body>
</html>
클래스 선택자(Class Selector) : .클래스명 { }
class 속성 값에 하나 이상의 클래스를 적용 가능
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<style type="text/css">
.target1{
background:greenyellow;
color:purple;
}
.target2{
background:red;
color:white;
}
p.target1{
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<div class="target1">Class Selector(Class Selector)</div>
<p class="target2">Class Selector(Class Selector)</p>
<p class="target1">Class Selector(Class Selector)</p>
</body>
</html>
ID 선택자 (ID Selector) : #ID명{ }
HTML 문서에서 동일한 ID를 중복 사용 불가 (Class와 달리 ID는 유일해야함)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#target1{
background : aqua;
}
#target2{
color:purple;
font-weight:bold;
}
</style>
</head>
<body>
<p id="target1">ID Selector (ID 선택자)</p>
<p id="target2">ID Selector (ID 선택자)</p>
</body>
</html>
복합 선택자 요소
하위 선택자 (Descendant Selector) : parent child { }
1단계 하위 요소 (child)와 2단계 이상 하위요소 (descendant)에 모두 적용
자식 선택자 (Child Selector) : parent > child { }
자식 선택자는 1단계 하위 요소(child)에만 적용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div p {background : red; color:yellow;}
div>div>ul>li>p {background:blue;font-weight:bold;font-family:italic;font-size:20px;}
</style>
</head>
<body>
<div>
<p>Descendant Selector (하위 선택자)</p>
<div>
<ul>
<li><p>Child Selector (자식 선택자)</p></li>
</ul>
<div>
여긴 적용이 안된다!
</div>
</div>
</div>
</body>
</html>
인접 형제 선택자 (Adjacent Sibling Selector) E + F{ }
같은 부모에 E 바로 뒤에 오는 F (1개)
일반 형제 선택자 (General Sibling Selector) E ~ F{ }
같은 부모에 E 뒤에 오는 모든 F
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div + p {background:aqua; color:grey;}
div.target1 ~ p {background:orange; color:whitesmoke;}
</style>
</head>
<body>
<div>Adjacent Sibling Selector (인접 형제 선택자)</div>
<p>Adjacent Sibling Selector (인접 형제 선택자)</p>
<p>Adjacent Sibling Selector (인접 형제 선택자)</p>
<div class="target1">
General Sibling Selector (일반 형제 선택자)
</div>
<p>General Sibling Selector (일반 형제 선택자)</p>
<p>General Sibling Selector (일반 형제 선택자)</p>
<div>General Sibling Selector (일반 형제 선택자)</div>
<p>General Sibling Selector (일반 형제 선택자)</p>
</body>
</html>
가상 클래스 선택자 (Pseudo-classes Selector) : 가상클래스 { }
User Agent가 제공하는 가상의 클래스를 지정
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a:link {color:blue;}
a:visited{color:red;}
a:hover{color:purple; font-weight:bold;}
a:active{color:green;}
</style>
</head>
<body>
<a href="http://www.w3schools.com/">W3schools</a>
<a href="http://www.nextree.co.kr">Nextree</a>
<a href="http://www.google.com">Google</a>
</body>
</html>
가상 엘리먼트 선택자 (Psuedo-element Selector) : ::가상엘리먼트 { }
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p.intro:first-Letter{
font-size:200%;
}
p.intro:first-line{
font-weight:bold;
}
p:last-child::after{
content: "(source:www.w3school.com)";
color:blue;
}
::selection{ /*마우스로 텍스트를 드래그 했을 때 나타나는 색상*/
color:red;
}
</style>
</head>
<body>
<h1>CSS Introduction</h1>
<h3>What is CSS?</h3>
<p class="intro">CSS stands for Cascading Style Sheets</p>
<p>Css defines how HTML elements are to be displayed<br></p>
</body>
</html>
속성 선택자
특정한 속성을 가지거나 속성 값을 갖는 엘리먼트
- Existence([]), Equality([=]), Space([~=]), Prefix([&=]), Substring([*=) 등
- 속성 선택자를 사용하기 위해서는 HTML 문서를 작성할 때, name, title등의 속성값을 규칙정으로 정의해야함
- 화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때에 유용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
[title] {color:blue; font-weight:bold;}
[title="two"] {border: 2px solid black;}
p[title="two"] {color:red;}
p[title~="second"] {background:silver;}
p[class^="second"] {background:aqua;}
p[class$="wrap"] {color:deeppink; font-weight:bold;}
[class*="three"] {background:yellow;}
[class|="second"] {border: 2px dotted black;}
</style>
</head>
<body>
<div title="one">selector[attribute name]</div>
<div title="two">selector[attribute name = value]</div>
<p title="two">selector[attribute name = value]</p>
<p title="first second third">
selector[attribute name ~= value]
</p>
<p class="second-container">selector[attribute name ^= value]</p>
<p class="second-wrap">selector[attribute name &= value]</p>
<div class="one-two-three">
selector[attribute name|=value]</div>
</body>
</html>
CSS 규칙 적용 우선 순위
같은 엘리먼트에 두개 이상의 CSS 규칙이 적용된 경우
!important(속성값 뒤에 명시)
> 구체적인 규칙(더 깊은 자식으로 들어가는 규칙)
> 마지막 규칙 (CSS 제일 하단에 작성된 규칙)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
i {color:red;}
i{color:blue;}
p b{color:green; !important}
p b{color:gray;}
p#intro{font-size:100%;}
p{font-size:80%}
</style>
</head>
<body>
<h1>CSS Introduction</h1>
<h3>What is CSS</h3>
<p id="intro">
<b>CSS</b> stands for <i>Cascading Style Sheets</i>
</p>
<p>
Css defines how HTML elements are to be displayed
</p>
</body>
</html>
Font 속성
CSS Property로 대체 가능하므로 추천하지 않음
font-family : E {font-family:글꼴이름;}
- 폰트명에 white-space가 포함된 경우 quotation으로 감싸줘야함
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#serif {font-family:serif;}
#sans-serif {font-family:sans-serif;}
/*white-space가 들어간 폰트명은 quotation으로 감싸야됨!*/
#monospace {font-family:monospace, "Times New Roman"}
</style>
</head>
<body>
<h1>font-family</h1>
<p id="serif">serif는 글자의 획 끝을 serif로 장식한 서체</p>
<p id="sans-serif">sans-serif는 serif가 없는 글자 끝이 곧은 서체</p>
<p id="monospace">monospace는 글자의 너비가 모두 동일한 서체</p>
</body>
</html>
font-style : E {font-style : normal | italic | oblique}
글자 스타일을 지정하기 위해 사용
- italic : 이테릭체, oblique : 기울임꼴 (둘다 차이 없어보이긴함;)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#normal {font-style:normal;}
#italic {font-style:italic;}
#oblique {font-style:oblique;}
</style>
</head>
<body>
<p id="normal">보통 글자</p>
<p id="italic">이태릭 글자</p>
<p id="oblique">기울임꼴 글자</p>
</body>
</html>
font-variant : E {font-variant : normal | small-caps}
글자가 작고 귀엽게 바뀐다...ㅋㅋ(한글 적용 X)
font-weight : E {font-weight : normal | bold | border |lighter}
100~900까지 숫자 값으로도 사용 가능 (normal : 400, bold : 700)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#variant {font-variant:small-caps;}
#weight1 {font-weight:bold;}
#weight2 {font-weight:bolder;}
#weight3 {font-weight:lighter;}
</style>
</head>
<body>
<h2>font-variant, font-weight</h2>
<p id="variant">font-variant 속성 적용</p>
<p id="weight1">font-weight 속성 적용(bold)</p>
<p id="weight2">font-weight 속성 적용(bolder)</p>
<p id="weight3">font-weight 속성 적용(lighter)</p>
</body>
</html>
font-size : E {font-size : 속성 값}
- 절대 사이즈 속성 값 : xx-small, x-small, small, medium, large, x-large, xx-large
- 상대 사이즈 속성 값 : larger, smaller
- 그 외 : px, cm, %(부모 엘리먼트와의 비율)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {font-size:150%;}
h2 {font-size:xx-small;}
h3 {font-size:15px;}
</style>
</head>
<body>
<h1>This is h1 element</h1>
<h2>This is h2 element</h2>
<p>This is p element</p>
</body>
</html>
font : E {font : font-style font-variant font-weight font-size/line-height font-family}
font-style, font-variant, font-weight, font-size 등을 한번에 지정 가능한 단축형 속성
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*글씨 크기가 12px이고 행간격이 1.3em인 bold체 verdana 글꼴*/
#target1 {font : bold 12px/1.3em verdana;}
/*글씨 크기가 12px인 italic체 Tahoma 글꼴*/
#target2 {font : italic 12px Tahoma;}
/*full option*/
#target3 {font : italic small-caps bold 12px/1.3em Arial;}
/*bold가 순서에 맞지 않아서 이후의 sans-serif 글꼴 무시*/
#target4 {font : 12px/1.5em bold sans-serif;}
</style>
</head>
<body>
<p id="target1">target1</p>
<p id="target2">target2</p>
<p id="target3">target3</p>
<p id="target4">target4</p>
</body>
</html>
TEXT 속성
CSS Text 속성은 글자, 공간, 단어, 문단들이 보여지는 속성을 정의
- text-align, text-decoration, text-indent, text-transform, white-space로 구성
- HTML 작성 시 태그를 의미에 맞게 사용하면 텍스트 속성을 적용하는데 유용
* 들여쓰기 시에 가 아니라 text-indent 속성을 사용하여 가능
text-align : E {text-align : left | right | center | justify }
- justify : 각 라인의 너비가 모두 동일하도록 간격을 늘림
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {width : 300px;}
div{text-align:justify;}
</style>
</head>
<body>
<div>
CSS Text 속성 중 text-align은 text 정렬을 지정한다. <br>
속성 값의 종류는 left, right, center ,justify가 있다. <br>
속성 값에 따라 text를 왼쪽, 오른쪽, 중앙에 정렬 가능
</div>
</body>
</html>
text-decoration : E { text-decoration : none | underline | overline | line-through | blink }
- blink : text가 깜빡이는 효과
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#none {text-decoration:none;}
#underline {text-decoration:underline;}
#overline {text-decoration:overline;}
#line-through {text-decoration:line-through;}
#blink {text-decoration:blink;}
</style>
</head>
<body>
<div id="none">default text</div>
<div id="underline">underline text</div>
<div id="overline">overline text</div>
<div id="line-through">line-through text</div>
<div id="blink">blink text</div>
</body>
</html>
text-indent : E {text-indent : 절대값(px, pt, cm, em etc) | 배율(%) }
- 절대 값의 기본 값은 0, 배율 값은 부모 엘리먼트 너비의 비율, 속성 값에 음수 허용 (음수 사용시 왼쪽 들여쓰기)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {padding:10px;}
p.positive {text-indent:10px;}
p.negative{text-indent:-5px;}
</style>
</head>
<body>
<p class="positive">
text-indent 속성은 text-block속<br>
첫 라인의 들여쓰기를 조정합니다.<br>
여기는 양수
</p>
<p class="negative">
여기는 음수<br>
한줄 더 봐야겠군
</p>
</body>
</html>
text-transform : E {text-transform : capitalize | uppercase | lowercase | none }
- capitalize : 첫 글자를 대문자
- uppercase, lowercase : 글자 전체를 대문자 또는 소문자로 변경
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div.cap {text-transform:capitalize;}
div.upper {text-transform:uppercase;}
div.lower {text-transform:lowercase;}
</style>
</head>
<body>
<div class="cap">capitalize</div>
<div class="upper">uppercase</div>
<div class="lower">LOWERCASE</div>
</body>
</html>
white-space : E { white-space : normal | pre | nowrap | pre-line | pre-wrap }
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Property(white-space)</title>
<style type="text/css">
body {border: 1px solid black;}
.white3 {white-space: normal;}
.white2 {white-space: pre;}
.white1 {white-space: nowrap;}
</style>
</head>
<body>
<p class="white1"
onmouseover="this.className='white2';"
onmousedown="this.className='white3';"
onmouseout="this.className='white1';">
white-space 속성 : normal, pre, nowrap,
pre-line, pre-wrap
</p>
</body>
</html>
* 이것 저것 해봤는데 뭔차인지 기준을 모르겠다.
pre만 <pre> 랑 똑같은 식으로 내부 엔터 스페이스 여러개 인식하는 것만 알겠다.
근데 pre에서 <br> 안먹히는 것도 알아냄
letter-spacing : E { letter-spacing : normal | 길이 값(px) }
글자간의 간격을 조절 (자간을 늘릴 때 양수, 줄일 때 음수)
word-spacing : E { word-spacing : normal | 길이 값(px) }
단어간의 간격을 조절
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Property(white-space)</title>
<style type="text/css">
div.Letter {letter-spacing:5px;}
.word {word-spacing:-4px;}
</style>
</head>
<body>
<div class="Letter">글자간의 간격을 조절</div>
<div class="word">단어간의 간격을 조절</div>
<p class="word">에라이 모르겠다</p>
</body>
</html>
line-height : E { line-height : 상대 값(normal) | 절대 값(px, cm...) | 비율(%) }
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Text Property(white-space)</title>
<style type="text/css">
p {line-height:normal; color:green;}
.small {line-height: 0.7; color:red;}
.big {line-height:2; color:blue;}
</style>
</head>
<body>
<p>
paragraph element<br>
행 간격은 표준
</p>
<p class="small">
paragraph element<br>
행 간격을 좁게 설정
</p>
<p class="big">
paragraph element<br>
행 간격을 넓게 설정
</p>
</body>
</html>
사용자 인터페이스 속성
화면에 출력될 엘리먼트들에 디자인 요소를 추가하는 속성
display : E { display : none | block | inline | ... }
inline, Block
- inline-level 엘리먼트는 줄 바꿈 없이 연속으로 이어지며 <span>이 대표적
- blcok-level 엘리먼트는 줄 바꿈이 생기며 <div>가 대표적
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
span {background-color:gold;}
div {background-color:tomato;}
div.target1 {display:inline;}
span.target2 {display:block;}
div.Last {display:none;}
</style>
</head>
<body>
<!--div는 기본적으로 block 속성 (박스 형태 width, height 입력 가능)
span 은 기본적으로 inline 속성-->
<span>Inline-level</span>
<div class="target1">Blcok-Level</div>
<span>Inline-level</span>
<span class="target2">Inline-Level</span>
<div class="Last">Last Element</div>
</body>
</html>
background-color : E { background-color : color | transparent }
엘리먼트의 padding, border 와 같은 여백 없이 전체 크기만큼 배경색을 지정 (margin 여백 제외)
- transparent color : 투명색으로 상위 엘리먼트의 배경색을 비춰줌
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
body {background-color:gold}
.transparent{
border:2px solid black;
background-color:transparent;
width:100px;
height:100px;
}
.notTransparent{
border:2px dotted black;
background-color:tomato;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="transparent">배경이 투명</div>
<div class="notTransparent">배경이 불투명</div>
</body>
</html>
background-image : E { background-image : none | url("그림파일경로") }
엘리먼트의 padding, border와 같은 여백 없이 전체크기만큼 배경색을 지정 (margin 여백은 제외)
배경 이미지가 격자모양으로 반복 + 스크롤 할 경우 배경 이미지도 반복적으로 나타나며 스크롤
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
body {background-image:url("../../picachu.jpg");}
</style>
</head>
<body>
</body>
</html>
background-repeat : E { background-repeat : repeat-x | repeat -y | no-repeat }
repeat-x, repeat-y : 배경을 수평, 수직으로 반복
background-position : E { background-position : 백분율(%) | 길이 값 | 수평값 수직 값 }
수평 값 : left, center, right 수직 값 : top, center, bottom
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
body {
background-image:url("../image/picachu.jpg");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
</body>
</html>
테이블 & 테두리 속성
<table> 엘리먼트 관련 속성은 테이블의 너비나 높이를 지정, Cell 내부 내용을 정렬
table-layout : E { table-layout : auto(default) | fix }
테이블 셀의 width, height 고정 여부
- <table> 태그의 첫 번째 <td>, <colgroup>, <col>요소를 통해 지정
* layout을 고정하여 글자가 cell에서 넘치지 않도록 하기 위해 사용한다는데 어떻게 해도 잘 안넘치는데.... 잘 모르겠다.
그냥 했던 코드 올리는데 딱히 의미는 없는 듯
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-style:solid;
}
</style>
</head>
<body>
<table border ="1"; width=80;>
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<table border ="1">
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</table>
</body>
</html>
border-collapse : E { border-collapse : seperate(default) | collapse }
셀은 개별 테두리를 갖으며, border-spacing을 통해 인접 셀 사이의 거리를 지정
collpase : 셀끼리 인접한 셀과 테두리를 병합
border-spacing : E { border-spacing : 수평길이 수직길이 }
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-collapse:collapse;
}
</style>
</head>
<body>
<table border ="1"; width=80;>
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<table border ="1">
<tr><td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</table>
</body>
</html>
border-style : E { border-style : none | solid | hidden | dotted | }
값이 1개 : 모든 테두리에 적용, 값이 2개 : {{top, bottom}, {left, right}에 적용
값이 3개일 때 : {top, {right, left}, {bottom}
값이 4개일 때 : {top, right, bottom, left}
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-collapse:collapse;
}
table.target1{
border-style:solid;
}
table.target2{
border-style:dotted;
}
</style>
</head>
<body>
<table border ="1"; width=80; class="target1">
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<table border ="1" class="target2">
<tr><td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</table>
</body>
</html>
border-width : E { border-width : thin | medium | thick | 길이 값 }
테두리 너비 설정에 사용
border-style과 같은 방식으로 4개의 면에 각자 적용 가능 (border-style이 사전 정의되어 있어야함)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-collapse:collapse;
}
table.target1{
border-style:solid;
border-width:1px 5px 10px 15px;
}
table.target2{
border-style:dotted;
border-width:1px 5px 10px 15px;
}
</style>
</head>
<body>
<table border ="1"; width=80; class="target1">
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<table border ="1" class="target2">
<tr><td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</table>
</body>
</html>
border-color : E { border-color : color | transparent }
테두리에 color값 적용
마찬가지로 1~4개의 값을 가질 수 있다. (border-style, border-width가 사전 정의되어 있어야함)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-collapse:collapse;
}
table.target1{
border-style:solid;
border-width:1px 5px 10px 15px;
border-color:red green blue;
}
div.target2{
width:50px;
height:50px;
border-style:dotted;
border-width:1px 5px 10px 15px;
border-color:pink;
}
</style>
</head>
<body>
<table border ="1"; width=80; class="target1">
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<div class="target2";></div>
</body>
</html>
border E { border : border-width, border-style, border-color }
모든 테두리에 값을 적용하며, 4개의 테두리에 별개로 값을 지정할 수 없다.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
table {
table-layout:auto;
border-collapse:collapse;
}
table.target1{
border-style:solid;
border-width:1px 5px 10px 15px;
border-color:red green blue;
}
div.target2{
width:50px;
height:50px;
border : 5px dotted blue;
}
</style>
</head>
<body>
<table border ="1"; width=80; class="target1">
<tbody>
<tr>
<td>R1 C1</td> <td>R1 C2</td> <td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td> <td>R2 C2</td> <td>R2 C3</td>
</tr>
</tbody>
</table>
<br><br>
<div class="target2";></div>
</body>
</html>
박스모델
CSS는 모든 엘리먼트가 여러 겹의 상자로 둘러 쌓여있다 가정
margin : E { margin : *em }
box의 margin 영역의 width를 지정
- 값 1개 : 모든 면
- 값 2개 : {{top, bottom}, {right, left}}
- 값 3개 : {top, {right, left}, bottom}
- 값 4개 : {top, right, left, bottom}
- 인접된 박스 끼리의 인접 마진은 통합되어 단일 마진을 생성 (수직에만 적용!)
ex. A.bottm:150px과 B.top:100px 이 인접한 경우 margin은 서로 150px 적용
* float 박스와 position이 absolute와 relative인 박스는 수직 마진이 통합되지 않음
padding E : { padding : *px }
box의 padding 영역의 width를 지정
가운데 정렬 E : { margin : 0 auto }
브라우저 화면의 가운데에 정렬되도록 설정
margin : {top bottom} {left right} => 위의 0은 top bottom, auto는 left right에 적용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display Property</title>
<style type="text/css">
body{
background-color:silver;
}
li{
width:300px;
color:black;
background:yellow;
margin:150px;
padding:50px;
list-style:none;
}
li.withborder{
margin-top:100px;
marign-right:12px;
margin-bottom:12px;
margin-left:120px;
border-style:dashed;
border-width:medium;
border-color:white;
}
#content{
background-color:lightskyblue;
width:300px;
padding:1em;
border:1px solid #999;
margin: 0 auto;
line-height:1.5em;
}
</style>
</head>
<body>
<ul>
<li>First element of list</li>
<li class="withborder">Second element of list longer</li>
</ul>
<div id="content">
<p>margin의 auto값을 이용해서 보다 다양한 레이아웃을 제작 가능</p>
</div>
</body>
</html>
min-height
엘리멘트의 최소 높이를 보장하기 위해 사용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body{
height:100%; margin:0; padding:0;
}
#head{
height:100px; background:#ddd; position:relative;
}
#body{
min-height:100%; margin:-100px 0 -50px;
}
#content-area{
padding: 100px 0 50px; height:300px;
}
#foot{
height:50px; background:#ddd;
}
</style>
</head>
<body>
<div id="head">head(height 100pixel)</div>
<div id="body"><div id="content-area">content area</div></div>
<div id="foot">foot(height 50pixel)</div>
</body>
</html>
1. margin에 -값으로 head와 foot 범위만큼 할당하기 때문에
body box는 head와 foot 테이블과 범위를 공유
그렇기 때문에 content-area의 위아래에로 100px 50px의 패딩을 할당해야
content-area의 내용을 모두 확인가능
2. body의 height 100%와 min-height:100%가 연계되어
창의 크기가 body, 즉 content-area보다 작아지지 않는한 content-area의 모든 내용 출력
포지셔닝
시각적인 측면에서 HTML의 가장 중요한 요소
- HTML 내 문서의 위치 지정, 객체의 보임 여부, 브라우저의 크기에 따라 이동
* 정적인 HTML을 JavaScript를 이용하여 동적으로 만들기 위한 가장 기본적인 속성
width, height
- length : px, pt, cm, mm ,in...
- % : 상위 Block에 대한 백분율 단위
=> 상위 Block의 크기가 바뀌면 자신의 크기도 자동으로 변경
- auto : width => 100%(default), 상위 Blcok이 허용하는 최대 width만큼 % 조절
auto : height => 0% (default), block box 속의 content양에 맞게 % 조절
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width:300px; height:300px;
font:bold 40px Verdana; background-color:greenyellow;
}
span{
width:300px;height:300px;
font:bolder 15px italic; background-color:silver;
}
</style>
</head>
<body>
<div>
CONTENTS<br><br>
CONTENTS<br><br>
CONTENTS<br><br>
</div>
<span> Inline Element는 width, height 속성이 적용되지 않음.</span>
</body>
</html>
position
- static : default, top left 거리 지정 불가
- relative : HTML에서의 일반적인 내용물의 흐름, top left 거리 지정 가능
- absolute : 상위 box에 내한 top right left bottom 의 절대적인 위치를 지정
- fixed : scroll시에도 항상 화면상의 지정된 위치에 존재
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
position:relative; font:bold 40px Verdana;
}
.span_1{
position:absolute; top:55px; left:55px; color:mediumpurple;
}
.span_2{
position:absolute; top:50px; left:50px; color:blue;
}
</style>
</head>
<body>
<div>
<span class="span_1">^______^<br><br><br>WELCOME</span>
<span class="span_2">^______^<br><br><br>WELCOME</span>
</div>
</body>
</html>
top, left, bottom, right { e : 길이값(length:px, cm) | % | auto }
엘리먼트의 위치를 지정하기 위해 사용 (position의 default는 absolute로 설정되어 있음)
- 자신이 포함되어 있는 box에서 top, left, bottom, right 거리를 지정하는 속성
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.side{
position:absolute; border:1px solid purple;
width:100px; height:100px; text-align:center;
}
.output {
width:400px; height:400px; position:relative; background:silver;
font:15px/1.6em bold Verdana; padding:10px; text-align:justify;
}
.palegreen{
top:50px; left:50px; background-color:palegreen;
}
.gold{
top:50px; right:50px; background:gold;
}
.tomato{
bottom:50px; left:50px; background:tomato;
}
.royalblue{
bottom:50px; right:50px; background:royalblue;
}
</style>
</head>
<body>
<!--class 여러개는 아래와 같이 공백으로 구분-->
<div class="output">
<div class="palegreen side">
top:50px;
left:50px;
</div>
<div class="gold side">
top:50px;
right:50px;
</div>
<div class="tomato side">
bottom:50px;
left:50px;
</div>
<div class="royalblue side">
bottom:50px;
right:50px;
</div>
</div>
</body>
</html>
overflow
상위 엘리먼트에 속한 내용이 엘리멘트의 크기보다 클 경우 어떻게 처리할 것인지에 대한 설정
- visible : 상위 Box의 내용을 모두 표시 (box의 width, height가 증가)
- hidden : 상위 Box의 Width, Height 범위를 넘어가는 내용은 보이지 않음
- auto : 상위 Box의 크기보다 넘어가는 내용은 스크롤바를 통해 표시
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.side{
position:absolute; border:1px solid purple;
width:100px; height:100px; text-align:center;
}
.output {
width:400px; height:400px; position:relative; background:silver;
font:15px/1.6em bold Verdana; padding:10px; text-align:justify;
}
.palegreen{
top:50px; left:50px; background-color:palegreen;
overflow:visible;
}
.gold{
top:50px; right:50px; background:gold;
overflow:hidden;
}
.tomato{
bottom:50px; left:50px; background:tomato;
overflow:auto;
}
.royalblue{
bottom:50px; right:50px; background:royalblue;
}
</style>
</head>
<body>
<!--class 여러개는 아래와 같이 공백으로 구분-->
<div class="output">
<div class="palegreen side">
top:50px;
left:50px;
overflow:visible;
overflow:visible;
overflow:visible;
overflow:visible;
overflow:visible;
</div>
<div class="gold side">
top:50px;
right:50px;
overflow:hidden;
overflow:hidden;
overflow:hidden;
overflow:hidden;
overflow:hidden;
</div>
<div class="tomato side">
bottom:50px;
left:50px;
overflow:auto;
overflow:auto;
overflow:auto;
overflow:auto;
overflow:auto;
</div>
<div class="royalblue side">
bottom:50px;
right:50px;
</div>
</div>
</body>
</html>
float
Box를 화면의 어느 위치에 배치할 것인지를 설정 (글 왼쪽 정렬, 글 오른쪽 정렬 과 같은 기능)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.side{
border:1px solid purple;
width:100px; height:100px; text-align:center;
}
.output {
width:400px; height:400px; position:relative; background:silver;
font:15px/1.6em bold Verdana; padding:10px; text-align:justify;
}
.palegreen{
background-color:palegreen;
overflow:visible; float:left;
}
.gold{
background:gold;
overflow:hidden; float:right;
}
</style>
</head>
<body>
<!--class 여러개는 아래와 같이 공백으로 구분-->
<div class="output">
<div class="palegreen side">
top:50px;
left:50px;
float:left;
</div>
<div class="gold side">
top:50px;
right:50px;
float:right;
</div>
start float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float end
</div>
</body>
</html>
clear
float 속성이 가지고 있는 값을 초기화하기위해 사용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.side{
border:1px solid purple;
width:100px; height:100px; text-align:center;
}
.output {
width:400px; height:400px; position:relative; background:silver;
font:15px/1.6em bold Verdana; padding:10px; text-align:justify;
}
.palegreen{
background-color:palegreen;
overflow:visible; float:left;
}
.gold{
background:gold;
overflow:hidden; float:left;
clear:left;
}
</style>
</head>
<body>
<!--class 여러개는 아래와 같이 공백으로 구분-->
<div class="output">
<div class="palegreen side">
top:50px;
left:50px;
float:left;
</div>
<div class="gold side">
top:50px;
right:50px;
float:right;
</div>
start float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float float end
</div>
</body>
</html>
* float에 의해 정렬될때 가로가 아닌 세로로 붙이고 싶을 때 사용한다고 이해하면 맞는 것 같다.
다시 말해 clear를 사용하지 않고 float:left를 여러개 사용시 아래와 같이 가로로 붙어가는데
이 상태에 goldBox에 clear:left 사용시 새로운 줄에서 왼쪽으로 배치된다.
clip
이미지 사이즈가 클 경우 이미지의 일부를 가려서 표시
- rect(top, right, top_, right_)순으로 픽셀 값을 설정
top : 위를 기준으로 시작하는 위치
right : 왼쪽을 기준으로 끝나는 위치
top_ : 위를 기준으로 끝나는 위치
right_ : 왼쪽을 기준으로 시작하는 위치
- rec (auto, auto, auto, auto) => 이미지를 모두 보여줌
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
position:absolute;
width:900px;
height:1000px;
border:1px solid purple;
background:silver;
font:15px bolder Verdana;
}
.auto{
left:250px;
position:absolute;
clip:rect(auto auto auto auto);
}
.rect{
position:absolute;
top:300px;left:100px;
clip:rect(15px auto auto auto);
}
.bottom{
position:absolute;
top:300px; left:500px;
clip:rect(auto auto 15px auto);
}
.right{
top:600px;left:100px;
position:absolute;
clip:rect(auto 15px auto auto);
}
.left{
position:absolute;
top:600px; left:500px;
clip:rect(auto auto auto 50px);
}
</style>
</head>
<body>
<!--class 여러개는 아래와 같이 공백으로 구분-->
<div class="box">
<div class="auto">
<img src="../image/pikachu.jpg"><br>
auto
</div>
<div class="rect">
<img src="../image/pikachu.jpg"><br>
top
<br>
</div>
<div class="right">
<img src="../image/pikachu.jpg"><br>
right
</div>
<div class="bottom">
<img src="../image/pikachu.jpg">
<br>bottom
</div>
<div class="left">
<img src="../image/pikachu.jpg">
<br>left
</div>
</div>
</body>
</html>
* 이렇게 저렇게 해봤는데 이렇게 불편한데 쓴다고...?
visibility : E { visibility : visible | hidden }
엘리먼트를 화면에 보이거나 숨기기 위해 사용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.auto{
visibility:visible;
}
</style>
</head>
<body>
<div class="auto">
<img src="../image/pikachu.jpg"><br>
</div>
</body>
</html>
z-index : { z-index : 정수값 }
여러 개의 엘리먼트를 화면에서 쌓아서 표시하기위해 사용
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.auto{
position:absolute;
visibility:visible;
z-index:1;
}
#p{
position:absolute;
color:black;
font:bold 20px italic;
z-index:2;
}
#p2{
position:absolute;
color:black;
font:bold 20px italic;
z-index:0;
}
</style>
</head>
<body>
<div class="auto">
<img src="../image/pikachu.jpg"><br>
</div>
<p id="p">
글자 위로!
</p>
<p id="p2">
이거는 짤리게 해야겠다아아아앙아아아아아아아아아
</p>
</body>
</html>
'kosta > HTML,CSS,JavaScript,JQuery' 카테고리의 다른 글
[AJAX] 맛보기 (0) | 2022.03.30 |
---|---|
[JavaScript] 웹 브라우저 (0) | 2022.03.28 |
[JavaScript] 기초 (0) | 2022.03.26 |
[html, css] 실습 (0) | 2022.03.23 |
[HTML] 기초 (2) | 2022.03.22 |
댓글