1. CSS선택자(클래스)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>1.CSS선택자(클래스).html</title>
<style>
/*
클래스선택자->1.같은 태그에 서로 다른 스타일을 적용시키고 싶을때 사용
2.서로 다른 태그에 같은 스타일을 적용
font-style:글꼴모양(italic,,,)
text-decoration(글꼴장식)=>underline,overline(글자위에),line-through(글자중간에 선)
text-align:수평정렬(left,center,right),vertical-align:수직정렬(top,middle,bottom)
스타일을 적용시킬때 동일한 태그를 사용(맨 마지막에 반영이 된다.)
형식)태그명.클래스명
*/
div.a {
color: brown;
font-family: impact;
font-weight: bold
}
div.b {
font-style: italic;
font-family: 돋움체;
font-size: 23pt
}
.c {
text-align: center;
text-decoration: overline
}
</style>
</head>
<body>
<!-- div(영역을 설정할때 많이 사용) -->
<div class="a">DIV태그</div>
<div class="b">DIV태그2</div>
<div class="c">DIV태그3</div>
<hr>
<h2>서로 다른 여러개의 태그에 공통의 스타일을 적용</h2>
<a class="c">A태그(class=c)적용</a>
<i class="c">i태그(class=c)적용</i>
<h1 class="c">h1태그(class=c)적용</h1>
<div class="c">div태그(class=c)적용</div>
<span class="c">span태그(class=c)적용</span>
</body>
</html>
2. CSS의 id선택자
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>2.CSS의 id선택자.html</title>
<style>
/*
id선택자->전체문서에서 유일한값을 부여해서 스타일을 적용시키는 방법
형식) 태그명.클래스명
태그명#id값(임의로 작성)=>선택자
태그명을 생략해도 스타일이 적용되는 태그는 변화지 않음.
*/
div#x {
font-family: impact;
font-size: 40pt;
font-weight: bold;
font-style: oblique;
background-color: lime
}
#y {
color: blue;
text-indent: 50px;
}
/* text-indent=>들여쓰기 */
</style>
</head>
<body>
<h2>id값은 원칙적으로 유일한값이기때문에 중복을 허용X</h2>
<h1>H1태그</h1>
<h1 id="y">H1태그(id=y) 적용</h1><br>
<div>div태그</div>
<div id="x">div태그(id=x) 적용</div><br>
</body>
</html>
3. div,span태그의 차이점
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3.div,span태그의 차이점.html</title>
<!--
div,span태그를 주로 사용하는 이유?=>다른 태그는 기본적인 기능이 있기때문에 스타일적용
이 잘 반영이 안되기때문
div태그 1.줄바꿈이 일어나는 태그(block태그)
2.영역을 설정할때 주로 사용(width,height를 주로 사용)
3.한라인을 최대로 확대해서 사용->block태그의 특성중 하나
span태그 1.줄바꿈이 일어나지 않은 태그(inline태그)
2.width,height을 잘 사용X
3.글자가 있는 부분까지만 최소한으로 축소해서 사용->inline태그의 특성
display=>화면에 보여주는 속성=>block,inline,inline-block
-->
<style>
div {
background: green;
width: 200px;
height: 50px;
display: inline;
}
span {
background: yellow;
width: 200px;
height: 50px;
display: block;
}
</style>
</head>
<body>
<h1>div태그와 span태그의 차이점</h1>
<div>div태그 연습입니다.</div>
<div>div태그 연습2입니다.</div>
<div>div태그 연습3입니다.</div>
<span>span태그 연습입니다.</span>
<span>span태그 연습2입니다.</span>
<span>span태그 연습3입니다.</span>
</body>
</html>
4. CSS의 BoxModel(여백,테두리)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>4.CSS의 BoxModel(여백,테두리).html</title>
<style>
ul {
background: green;
/*
margin(밖의 여백), padding(안쪽 여백)
*/
margin: 10px 20px 30px 40px;
/* top->right->bottom->left (시계방향) */
/* 상위속성명-하위속성명
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
padding-top,padding-right,padding-bottom,padding-left이 서로 같다면 한번사용
*/
padding: 50px;
/* padding:50px 60px 70px 80px 각 영역이 서로 다른 경우*/
}
li {
color: red;
background: yellow;
list-style: none;
/* 리스트 항목의 마커를 설정하는 속성 안보이게 설정*/
margin: 30px;
/* li태그의 밖의 여백=ul태그의 안쪽 여백(padding과 동일) */
padding: 30px;
/*li태그의 안쪽여백=>글자와 테두리 선사이의 거리 */
}
li.withborder {
/* border(상위속성) border-하위속성명
border:dotted medium red;
*/
border-style: double;
/* solid(실선),double(이중선),dotted(점선) */
border-width: medium;
/* 테두리의 크기를 지정*/
border-color: red;
/*테두리의 색깔 */
}
</style>
</head>
<body>
<ul>
<li>테두리가 없는 경우</li>
<li class="withborder">테두리가 있는 경우</li>
</ul>
</body>
</html>
5. semantic(시멘틱활용)
<!doctype html>
<!---html5 태그선언문-->
<html>
<!--문서의 시작태그 -->
<head>
<!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>5.semantic(시멘틱활용).html</title>
<style>
body {
/*배경이미지 불러오기 background
1.background-color:#FFF
2.background-url:url(경로포함해서 불러올 이미지의 파일명)
3.이미지의 반복부분(no repeat),repeat-x(x좌표에서만 출력),repeat-y(y좌표에서만 출력)
fixed(이미지 고정유무)
4.background-position:이미지의 위치(left,top,bottom,right)
*/
background: #FFF url(../images/bg3.jpg) repeat-x fixed left bottom
}
p {
font-family: "굴림";
font-size: 12px;
}
section {
display: block;
/* 자동 줄바꿈 */
}
mark {
background-color: yellow;
font-size: 12pt;
color: red;
font-family: impact;
font-weight: bolder
}
figcaption {
display: block;
font: 12px 굴림;
/* font-size:12px;font-family:굴림;font-style:~ */
color: blue;
padding: 10px 0 0 0;
/* padding-top:10px 만 적용하라 */
}
</style>
</head>
<body>
<header>
<h1>제주 올레</h1>
</header>
<section>
<!---코스 소개-->
<h3>제주 올레 7코스</h3>
<p>외돌개를 출발하여 법환포구를 경유해 월평포구까지 어어진 해안올레. 올레인들이 가장 아끼고 <mark>자연생태길</mark>인 <mark>'수봉로'</mark>를 만날 수 있다. <br>
수봉로는 세 번째 코스 개척 시기인 2007년 12월, 올레지기인 '김수봉'님이 염소가 다니던 길에 직접 삽과 곡괭이만으로 계단과 길을 만들어서
사람이 걸어다닐 수 있도록 한 길이다.</p>
<strong>패스포트 스탬프 확인 장소</strong>
<p>
<b>시작</b> 외돌개 제주 올레 안내소<br>
<b>중간</b> 강정 올레 쉼터<br>
<b>종점</b> 월평 송이 슈퍼</p>
<p><b>난이도 : 상</b> 총 16.4km(4~5시간)<br>
수봉로는 언덕길이고 일강정 바당올레에서 서건도 사이 바윗길이 험한 편이다.</p>
</section>
<section>
<figure>
<img src="../images/road1.jpg">
<figcaption>수봉로 언덕을 넘자마자 다시 만나게 되는 바다</figcaption>
</figure>
<figure>
<img src="../images/road2.jpg">
<figcaption>외돌개 산책로에서 외돌개가 보인다.</figcaption>
</figure>
</section>
<footer>
<!--작가의 이메일,문서 작성 날짜
html5태그 time태그, 이메일 주소표시(address)태그(이탤릭체표시)
-->
<p>이 문서는 <time datetime="2020-6-15" pubdate>2020년 6월 15일</time>에 작성되었습니다.</p>
<address>12345@test.net</address>
</footer>
</body>
</html>
<!--문서의 종료태그>
6. CSS속성(문단,문자열)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>6.CSS속성(문단,문자열).html</title>
<!--
1.letter-spacing:글자와 글자사이의 간격
2.word-spacing:단어와 단어사이의 간격
3.line-height:줄간격을 표시
4.text-indent:들여쓰기
-->
<style>
.normal {
font-size: 20pt
}
.letter-spacing {
letter-spacing: 20px;
font-size: 20pt
}
.word-spacing {
word-spacing: 30px;
font-size: 20pt
}
.line-height {
line-height: 50pt;
font-size: 20pt
}
</style>
</head>
<body>
<p class="normal">글자와 글자사이의 간격을 조절하지 않은 경우(default)</p>
<p class="letter-spacing">글자와 글자사이의 간격을 조절(20px)</p>
<p class="word-spacing">단어와 단어사이의 간격을 조절(30px)</p>
<p class="line-height">줄사이의 간격을 조절(50pt)</p>
<p class="normal">바로 밑의 글자들(default)</p>
</body>
</html>
7. CSS속성(단위)
<!doctype html>
<!---html5 태그선언문-->
<html>
<!--문서의 시작태그 -->
<head>
<!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>7.css속성(단위).html</title>
<!--
1.절대단위=>cm,mm,pt
2.상대단위=>px(모니터상의 점의 갯수),%(넓이),em
기본단위=>px(글자를 기준)=>1em=100%=16px-->
<style>
div#test {
font-size: 20px;
border: 1px dotted green;
/*굵기,선의종류,선의 색깔*/
}
div#test>p {
/*부모태그>자식태그 ->부모태그 밑에 있는 자식태그를 지칭*/
font-size: 2em;
/*32px->2em */
text-decoration: underline;
color: red;
</style>
</head>
<body>
<div>단위연습</div>
<div id="test">
<!--중첩(=계층적인 구조(Element(태그),Attribute(속성) -->
여긴 상위 div
<p>여기는 하위 p요소</p>
</div>
<p>여기는 하위 p요소2</p>
<div></div>
</body>
</html>
<!--문서의 종료태그>
8. CSS속성(position)
<!doctype html>
<!---html5 태그선언문-->
<html>
<!--문서의 시작태그 -->
<head>
<!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>8.css속성(position).html</title>
<!--
*** position->영역을 설정할때 사용하는 속성(width,height) ***
1.default(=static)=>순차적으로 작성한 순서대로 화면에 보이게 배치하는 영역설정방법
2.absolute=>기준점(브라우저의 좌측상단)을 =>left,top(위치),width,height(크기)을 이용
3.relative=>상대적인 좌표배치방법=>실행결과가 static과 비슷
차이점=>left,top을 지정해서 위치가 변겨된 상태로 이동
4.fixed =>고정된 위치에서 움직이지않은 속성,위,아래 스크롤->변화X
-->
<style>
.rel1 {
position: relative;
}
.rel2 {
position: relative;
top: 30px;
left: 40px;
}
.rel3 {
position: absolute;
top: 30px;
left: 40px;
}
.fix {
position: fixed;
bottom: 0;
right: 0;
/* 스크롤바 하단쪽 */
width: 200px;
border: 3px solid #0066ff;
background-color: white;
font-size: 12px;
}
</style>
</head>
<body>
<div style="background:red;width:120px;height:120px;"></div>
<div style="position:static;background:blue;width:120px;height:120px;"></div>
<div class="fix">fixed된 문자열 연습입니다.</div>
<div class="rel1" style="background:cyan;width:120px;height:120px;"></div>
<div class="rel2" style="background:yellow;width:120px;height:120px;"></div>
<div class="rel3" style="background:green;width:120px;height:120px;"></div>
</body>
</html>
9. 레이아웃(1)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>9.레이아웃(1).html</title>
<style>
#jb-container {
width: 940px;
/* 임의의 기준 설정값*/
border: 1px solid #bcbcbc;
margin: 0px auto;
/* 위쪽상단(margin-top),아래쪽하단(margin-bottom)의 여백 0
좌우여백은 브라우저의 크기에 맞게 좌우폭을 자동으로 설정해달라
*/
padding: 20px;
/*안쪽 여백 20px 4군데 영역 모두 적용*/
}
#jb-header {
border: 1px solid #bcbcbc;
padding: 40px;
/* 테두리안에서 2-Column Layout사이의 여백 */
margin-bottom: 20px;
/* 머리말 과 본문사이의 바깥여백 */
}
</style>
</head>
<body>
<div id="jb-container">
<!-- 문서의 전체 테두리 영역(container) -->
<div id="jb-header">
<!-- 머리말 -->
<h2>2-Column Layout</h2>
</div>
</div>
</body>
</html>
10. 레이아웃(2)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>10.레이아웃(2).html</title>
<style>
#jb-container {
width: 940px;
/* 임의의 기준 설정값*/
border: 1px solid #bcbcbc;
margin: 0px auto;
/* 위쪽상단(margin-top),아래쪽하단(margin-bottom)의 여백 0
좌우여백은 브라우저의 크기에 맞게 좌우폭을 자동으로 설정해달라
*/
padding: 20px;
/*안쪽 여백 20px 4군데 영역 모두 적용*/
}
#jb-header {
border: 1px solid #bcbcbc;
padding: 40px;
/* 테두리안에서 2-Column Layout사이의 여백 */
margin-bottom: 20px;
/* 머리말 과 본문사이의 바깥여백 */
}
#jb-content {
/* 940px sidebar(260px), content(580px)->840
영역을 설정하고나서 float=>left,right
*/
width: 580px;
border: 1px solid #bcbcbc;
float: right;
/* 오른쪽에 정렬*/
margin-bottom: 20px;
/* 본문내용과 footer사이의 거리 */
padding: 20px;
/*본문 내용과 테두리사이의 여백*/
}
#jb-sidebar {
width: 260px;
border: 1px solid #bcbcbc;
float: left;
/* 왼쪽에 정렬*/
margin-bottom: 20px;
/* 본문내용과 footer사이의 거리 */
padding: 20px;
}
#jb-footer {
/*
footer영역을 설정하기위해서는 위의 float설정값을 모두 해제
다시 재영역을 설정->clear:both
*/
clear: both;
border: 1px solid #bcbcbc;
padding: 20px;
}
</style>
</head>
<body>
<div id="jb-container">
<!-- 문서의 전체 테두리 영역(container) -->
<div id="jb-header">
<!-- 머리말 -->
<h2>2-Column Layout</h2>
</div>
<!-- 본문(content) -->
<div id="jb-content">
<h2>Content</h2>
<p> 디지털 경제의 확산으로 우리 주변에는 규모를 가늠할 수 없을
정도로 많은 정보와 데이터가 생산되는 '빅데이터(Big Data)'
환경이 도래하고 있다. 빅데이터란 과거 아날로그 환경에서
생성되던 데이터에 비하면 그 규모가 방대하고, 생성 주기도 짧고
, 형태도 수치 데이터뿐 아니라 문자와 영상 데이터를 포함하는 대규모 데이터를 말한다.</p>
<p>
PC와 인터넷, 모바일 기기 이용이 생활화되면서 사람들이 도처에
남긴 발자국(데이터)은 기하급수적으로 증가하고 있다
(정용찬, 2012a).
쇼핑의 예를 들어 보자.
데이터의 관점에서 보면 과거에는 상점에서 물건을 살 때만 데이터가
기록되었다. 반면 인터넷쇼핑몰의 경우에는 구매를 하지 않더라도
방문자가 돌아다닌 기록이 자동적으로 데이터로 저장된다.
어떤 상품에 관심이 있는지, 얼마 동안 쇼핑몰에 머물렀는지를
알 수 있다. 쇼핑뿐 아니라 은행, 증권과 같은 금융거래, 교육과
학습, 여가활동, 자료검색과 이메일 등 하루 대부분의 시간을
PC와 인터넷에 할애한다. 사람과 기계, 기계와 기계가 서로 정보를
주고받는 사물지능통신(M2M, Machine to Machine)의 확산도
디지털 정보가 폭발적으로 증가하게 되는 이유다.
</p>
</div>
<!-- 사이드바 -->
<div id="jb-sidebar">
<ul>
<li>HTML,HTML5</li>
<li>CSS,CSS의 속성리스트</li>
<li>CSS3의 추가된 속성</li>
<li>자바스크립트 개요 및 작성법</li>
</ul>
</div>
<!-- 꼬리말 -->
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>'KIC > HTML-CSS-JS' 카테고리의 다른 글
| [HTML/CSS/JS] DAY6 (0) | 2020.10.12 |
|---|---|
| [HTML/CSS/JS] DAY5 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY4 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY2 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY1 (0) | 2020.10.12 |