Dynamic Web Project : CSS
Folder : 01_css
File : exam01.html
1. CSS 개요
(1) CSS(Cascading Style Sheets) :
웹페이지에 자주 적용되는 부분들은 미리 정리하고 조합하여 정의한 후
페이지 내부에서 필요할 때마다 해당 부분을 적용하는 스타일시트 중 하나.
HTML로는 부족한 레이아웃이나 폰트 등에 다양성을 부여한다.
- 폰트 크기는 지정하는 수치에 따라 마음대로 조절 가능
- 자간/행간 배치가 자유로워 가독성을 높인다.
- 링크 상의 밑줄 변형이 자유롭다.
- 페이지의 여백을 원하는 만큼 만들어 줄 수 있다.
2. CSS 기본동작
(1) CSS 사용하는 방법 3가지
① <head></head>사이 기술
② <body>안에서 직접기술
③ *.css(파일)로 따로 저장
<head></head>사이 기술
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
background: mistyrose;
}
h3{
color: purple;
}
hr{
border: 5px solid yellowgreen;
}
span{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background-color: linen;
color: blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3{
text-align: center;
color: darked;
}
</style>
</head>
<body>
<h3>김연아</h3>
<hr>
<p>저는 피겨 선수 김연아입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 삼겹살을 무척 좋아합니다.</p>
</body>
</html>
exam03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<h3>손 흥 민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p style="color: blue;">김치부침개를 좋아하고</p>
<p style="color: magenta; font-size: 30px;">축구를 좋아합니다.</p>
</body>
</html>
*.css(파일)로 따로 저장
1. <link rel="stylesheet" href="./myStyle.css">
exam04.html
@charset "UTF-8";
body {
background-color: linen;
color: blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3{
text-align: center;
color: darkred;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./myStyle.css">
</head>
<body>
<h3>김연아</h3>
<hr>
<p>저는 피겨 선수 김연아입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 삼겹살을 무척 좋아합니다.</p>
</body>
</html>
2. @import url("./myStyle.css")
exam05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@import url("./myStyle.css")
</style>
</head>
<body>
<h3>김연아</h3>
<hr>
<p>저는 피겨 선수 김연아입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 삼겹살을 무척 좋아합니다.</p>
</body>
</html>
<em>
- emphasize
- 중요한 문구를 강조하는 HTML 태그 중 하나이다
- (기본) 글자가 기울임체로 표현된다
상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것을 의미한다.
상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.
하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.
font, color, visibility, opacity, line-height, text-align, white-space 이 상속 가능하다
exam06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>부모 스타일 상속</h3>
<hr>
<p style="color: green">자식 태그는 부모의 스타일을
<em style="font-size: 25px;">상속</em>받는다.
</p>
</body>
</html>
* 스타일 시트가 중첩되었을 때 순위
- 1순위 : 태그 안의 스타일 시트
- 2순위 : <style> 태그
- 3순위 : 파일 스타일 시트
font-size를 pt로 주기도 하고 em 방식을 사용하기도 한다.
em 방식은 현재 글자 크기에서 몇 배의 크기로 해라 하는 뜻이다.
만일 font-size: 1.4em 라고 하면 1.4배의 크기로 만들어라 하는 뜻이다
※ em태그와 em단위가 다른 것 확인
exam07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@import url("./external.css");
p{
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<h3>태그에 스타일 중첩</h3>
<hr>
<p>Hello, students!</p>
<p style="font-size: 25px">안녕하세요 길동님!</p>
</body>
</html>@charset "UTF-8";
p{
background: mistyrose;
}
Folder : 02_cssSelector
* 가상 선택자
CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다.
이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다.
가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 쓴다.
하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동한다.
* 가상 요소
가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,
가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.
가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있다.
HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자이다.
* 가상 클래스 기법
---------------------------------------------------------------------------------------------------------------------
가상 클래스 의미
---------------------------------------------------------------------------------------------------------------------
:first-child 여러 개의 반복되는 태그들중에서 첫 번째 요소
:last-child 여러 개의 반복되는 태그들중에서 마지막 요소
:link 링크의 기본 상태
:active 요소 위에서 마우스가 눌려져 있는 상태
:hover 요소에 마우스가 올라가 있는 상태
:visited 방문했던 경험이 있는 링크
:focus 요소에 포커스가 지정된 상태
:checked 체크박스나 라디오버튼 등이 체크된 상태
:selected 드롭다운에서 선택된 요소
* 자식 selector(선택자)
① > 로 지정한다.
② 중간 태그를 건너 띄면 안된다.
* 자손(후손) selector(선택자)
① 공백으로 지정한다.
② 중간 태그를 건너 띄어도 된다.
exam01.html ( 자식 셀렉터 / 자손 셀렉터 / 클래스에 적용하는법 / id이용 /
가상클래스 - 원래 있는 거에 효과 부여 - 첫 번째 글자에 효과 적용 / 마우스 올렸을 때 /
가상요소 - 태그 특별하게 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h3, li{
color: brown;
}
div > div > strong { /* 자식 셀렉터 */
background: yellow;
}
ul strong { /* 자손(후손) 셀렉터 */
color: dodgerblue;
}
div.warning{
color: red;
}
body.main{
background: aliceblue;
}
#list span {
color: forestgreen;
}
h3:first-letter { /* 가상 클래스 - 첫 번째 문자를 선택 */
color: red;
font-size: 25px;
}
li:hover{
background: yellowgreen;
}
::selection{ /* 가상 요소 - 마우스로 드래그하면 글자색은 빨강, 바탕색은 노랑으로 변한다. */
color: red;
background: yellow;
}
</style>
</head>
<body class="main">
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong>입니다.</div>
<ul id="list">
<li><span>HTML5</span></li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F</div>
</div>
</body>
</html>
동적처리
값이 고정되어있는게 아님.
클릭하면 내려가지고 올라가지고 그런거
DOM 이라는 문법을 알아야한다. - 트리구조
*content
① html 문서에 쓰지 않고도 CSS로 내용(텍스트나 이미지)을 생성하는 역할
② ::before, ::after 가상 요소와 주로 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1::before{
content: "안녕하세요";
}
h2::after{
content: url("../image/img1.gif")
}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<h2>Hello World!!</h2>
</body>
</html>
Folder : 03_cssCOlorText
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
padding: 0 0 0 0; /* 시계방향 - 위, 오른쪽, 아래, 왼쪽 */
/* padding : 0 0; => 위/아래, 왼쪽/오른쪽 */
margin: 0;
}
div {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 10px;
color: white;
}
</style>
</head>
<body>
<h3>CSS3 색 활용</h3>
<hr>
<div style="background-color: deepskyblue;">deepskyblue(#00BFFF)</div>
<div style="background-color: brown;">brown(#A52A2A)</div>
<div style="background-color: fuchsia;">fuchsia(#FF00FF)</div>
<div style="background-color: darkorange;">darkorange(#FF8C00)</div>
<div style="background-color: darkcyan;">darkcyan(#008B8B)</div>
<div style="background-color: olivedrab;">olivedrab (#6B8E23)</div>
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h3 {
text-align: right;
}
span {
text-decoration: line-through; /* 중간 줄 */
}
strong {
text-decoration: overline; /* 윗 줄 */
}
.p1 {
text-indent: 3em; /* 3글자 들여쓰기, 음수이면 내어쓰기 */
text-align: justify; /* 양쪽 정렬 */
}
.p2 {
text-indent: 1em;
text-align: center;
}
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p class="p1">
HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백, 간격 등과
세밀한 <span>텍스트 제어</span>를 할 수 없다.
</p>
<p class="p2">
그러나, <strong>스타일 시트</strong>는 이를 가능하게 한다. 들여쓰기, 정렬에 대해서 알아본다
</p>
<p>
<a href="http://www.naver.com" style="text-decoration: none">
밑줄이 없는 네이버 링크
</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
font-family: "Times New Roman", Serif;
font-size: large;
}
h3 {
font: italic bold 40px consolas, sans-serif;
}
</style>
</head>
<body>
<h3>Consolas font</h3>
<hr>
<p style="font-weight: 900">font-weight 900</p>
<p style="font-weight: 100">font-weight 100</p>
<p style="font-style: italic;">Italic Style</p>
<p style="font-style: oblique;">Oblique Style</p>
<p>현재 크기의 <span style="font-size: 1.5em;">1.5배</span> 크기로</p>
</body>
</html>
