1. CSS
- CSS: HTML문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며, CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.
1) CSS스타일 시트로 웹페이지 꾸미기
[1] CSS 적용 X
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 없는 웹 페이지</title>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>--> 결과
[2] CSS 적용 O
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일을 가진 웹 페이지</title>
<style>
/* CSS 스타일 시트 작성 */
body {
background-color: mistyrose;
}
h3 {
color: purple;
}
hr {
border: 5px solid yellowgreen;
}
span {
color: blue;
font-size: 20px;
}
/* span 태그 스타일 선언 */
</style>
</head>
<body>
<h3>CSS 스타일 맛보기</h3>
<hr>
<p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
</body>
</html>- <body>요소의 배경색을 mistyrose로 지정한다.
- <h3>요소의 글자 색을 purple로 지정한다.
- <hr>수평선을 yellowgreen에 두께 5픽셀 외곽선으로 지정한다.
- <span> 요소의 글자를 blue에 20픽셀로 지정한다.
--> 결과
2) CSS스타일 시트로 웹페이지 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><style> 태그로 스타일 만들기</title>
<style>
body {
background-color: linen;
color: blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3 {
text-align: center;
color: darkred;
}
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서
책읽기를 좋아합니다. 김치 찌개와 막국수 무척
좋아합니다.</p>
</body>
</html>- 페이지 전체 글자색(color)은 blueviolet, 배경색(background-color)은 linen으로 하고, 페이지의 왼쪽 마진(margin-left), 오른쪽 마진(margin-right)은 30픽셀로 했다.
- <h3> 태그로 출력되는 글자색은 darkred로 했다.
--> 결과
3) style속성에 스타일 시트 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><style> 속성에 스타일 시트 만들기</title>
<style>
p {
color: red;
font-size: 15px;
}
/* 모든 p 태그에 적용 */
</style>
</head>
<body>
<h3>손 홍 민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color:blue">김치부침개를 좋아하고</p>
<p style="color:magenta; font-size:30px">축구를 좋아합니다.</p>
</body>
</html>- style태그에 <p>태그에 관한 디자인을 넣어준다. html에 있는 모든 <p>태그를 red색에 15픽셀 크기로 꾸미지만, style속성을 이용해 2개의 <p>는 다른 모양으로 꾸민다.
--> 결과
4) style속성에 스타일 시트 만들기
[1] mystyle.css
body {
background-color: linen;
color: blueviolet;
margin-left: 30px;
margin-right: 30px;
}
h3 {
text-align: center;
color: darkred;
}[2] ex4-05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><link> 태그로 스타일 파일 불러오기</title>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>- CSS3 스타일 시트만 떼어내어 .css확자를 가진 파일에 저장하고, 필요한 웹페이지에서 불러 사용할 수 있다.
- <link>태그를 이용했다.
--> 결과
[3] ex4-05.html(@import 이용)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><@import>로 외부 스타일 불러오기</title>
<style>
@import url(mystyle.css);
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
김치 찌개와 막국수 무척 좋아합니다.</p>
</body>
</html>- @import를 통해 css파일을 html에 불러올 수 있다.
5) 여러 스타일 시트 중첩
[1] mystyle.css
p{
background: mistyrose;
}[2] ex4-08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 합치기 및 오버라이딩</title>
<link type="text/css" rel="stylesheet" href="external.css">
<style>
p {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<h3>p 태그에 스타일 중첩</h3>
<hr>
<p>Hello, students!</p>
<p style="font-size:25px">안녕하세요 교수님!</p>
</body>
</html>- <p>태그에 여러 스타일 시트가 중첩된 것이다.
- Hello, students!에는 background색 mistyrose, 글자색 blue, 글자크기 12픽셀이 적용된다.
- 안녕하세요 교수님!은 background색 mistyrose, 글자색 blue, 글자크기 25픽셀이 적용된다.
--> 결과
6) 셀렉터
- 셀렉터: HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
h3,
li {
/* 태그 이름 셀렉터 */
color: brown;
}
div>div>strong {
/* 자식 셀렉터 */
background: yellow;
}
ul strong {
/* 자손 셀렉터 */
color: dodgerblue;
}
.warning {
/* class 셀렉터 */
color: red;
}
body.main {
/* class 셀렉터 */
background: aliceblue;
}
#list {
/* id 셀렉터 */
background: mistyrose;
}
#list span {
/* 자손 셀렉터 */
color: forestgreen;
}
h3:first-letter {
/* 가상 클래스 셀렉터 */
color: red;
}
li:hover {
/* 가상 클래스 셀렉터 */
background: yellowgreen;
}
</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>[1] 태그 이름 설렉터
- 태그 이름이 셀렉터로 사용되는 유형이다.
- 셀렉터는 , 로 분리한다.
h3,
li {
/* 태그 이름 셀렉터 */
color: brown;
}[2] class 설렉터
- 셀렉터 이름 앞에 . 을 붙인 경우, 이 셀렉터는 html 태그의 class 속성으로만 지정할 수 있다.
div>div>strong {
/* 자식 셀렉터 */
background: yellow;
}[3] id 설렉터
- 셀렉터 이름 앞에 # 을 붙인 경우, 이 셀렉터는 html 태그의 id속성으로만 지정할 수 있다.
#list {
/* id 셀렉터 */
background: mistyrose;
}[4] 설렉터 조합하기
1) 자식 셀렉터: 부모 자식 관계인 두 설렉터를 '>' 기호로 조합한 형태이다.
div>div>strong {
/* 자식 셀렉터 */
background: yellow;
}2) 자손 셀렉터: 자손 관계인 2개 이상의 태그를 나열한 형태이다.
ul strong {
/* 자손 셀렉터 */
color: dodgerblue;
}[5] 가상 클래스 셀렉터
- 어떤 상황이 발생했을 때 적용하도록 CSS3 표준에 만들어진 설렉터이다.
- h3:firstletter는 <h3>태그의 첫번째 글자만 red색으로 출력하는 셀렉터이다.
- <li> 태그위에 마우스가 올라오면, yellowgreen을 배경색으로 출력. 마우스가 내려가면 원래대로 복귀한다.
h3:first-letter {
/* 가상 클래스 셀렉터 */
color: red;
}
li:hover {
/* 가상 클래스 셀렉터 */
background: yellowgreen;
}--> 결과
7) 색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 색 활용</title>
<style>
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:#008B8B">
darkcyan(#008B8B)</div>
<div style="background-color:#6B8E23">
olivedrab (#6B8E23)</div>
</body>
</html>- 색 이름과 색 코드로 <div> 태그의 배경색을 칠한다.
--> 결과
8) 텍스트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 꾸미기</title>
<style>
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;
/* 1 글자 들여쓰기 */
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>
</body>
</html>- 문단 들여쓰기나 문단 정렬 등 텍스트의 출력모양을 제어할 수 있다.
--> 결과
9) 폰트
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폰트</title>
<style>
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>- font-family: 폰트 이름을 지정한다.
- font-size: 글자 크기를 지정한다.
- font-style: 폰트 스타일을 나타낸다.
- font-weight: 글자의 굵기를 지정한다.
- font: 단축 프로퍼티로, font-style font-weight font-size font-family순으로 지정한다.
--> 결과
10) 박스
[1] 박스 모델
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
body {
background: ghostwhite;
}
span {
background: deepskyblue;
}
div.box {
background: yellow;
border-style: solid;
border-color: peru;
margin: 40px;
border-width: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
<span>DIVDIVDIV</span>
</div>
</body>
</html>
- 콘텐츠(Content): html 태그의 텍스트나 이미지 부분
- 패딩(Padding): 콘텐츠를 직접 둘러싸고 있는 내부 여백
- 테두리(Border): 패딩 외부의 외곽선으로 직선이나 점선 혹은 이미지를 입힐 수 있음
- 여백(Margin): 박스의 맨 바깥 영역. 테두리 바깥 공간으로 아래위 인접한 태그와 만나는 공간
--> 결과
[2] 박스 모델 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<style>
div.inner {
background: yellow;
padding: 20px;
border: 5px dotted red;
margin: 30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div class="inner">
<img src="media/mio.png" alt="고양이눈">
</div>
</body>
</html>- <div>태그에 이미지를 담은 것이다.
--> 결과
11) 테두리
[1] 다양한 테두리선 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 soild</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>- border 프로퍼티에 테두리의 두께(width), 테두리 선 스타일(style), 테두리 선 색(color)을 한번에 지정한다.
--> 결과
[2] 고급 테두리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>둥근 모서리 테두리</title>
<style>
p {
background: #90D000;
padding: 20px;
width: 300px;
}
#round1 {
border-radius: 50px;
}
#round2 {
border-radius: 0px 20px 40px 60px;
}
#round3 {
border-radius: 0px 20px 40px;
}
#round4 {
border-radius: 0px 20px;
}
#round5 {
border-radius: 50px;
border-style: dotted;
}
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
<p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>- border-radius를 이용해 테두리의 모서리를 둥글게 만들 수 있다.
--> 결과
[3] 이미지 테두리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 테두리 만들기</title>
<style>
p {
background: yellow;
width: 200px;
height: 60px;
padding: 10px;
border: 20px solid lightgray;
/*border-width와 border-style 동시 지정 */
}
#round {
border-image: url("media/border.png") 30 round;
}
#repeat {
border-image: url("media/border.png") 30 repeat;
}
#stretch {
border-image: url("media/border.png") 30 stretch;
}
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
다음은 원본 이미지입니다.<br>
<img src="media/border.png" alt="원본">
<hr>
<p>20x20 크기의 회색 테두리를 가진 P 태그</p>
<p id="round">round 스타일 이미지 테두리</p>
<p id="repeat">repeat 스타일 이미지 테두리</p>
<p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>- border-image를 이용해 테두리에 이미지를 입힐 수 있다.
--> 결과
12) 배경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배경 꾸미기</title>
<style>
div {
background-color: skyblue;
background-size: 100px 100px;
background-image: url("media/spongebob.png");
background-repeat: repeat-y;
background-position: center center;
}
div {
width: 200px;
height: 200px;
color: blueviolet;
font-size: 16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div>SpongeBob is an over-optimistic
sponge that annoys other characters. </div>
</body>
</html>- <div>박스에 100*100 크기로 배경이미지를 출력하고 남은 곳에는 skyblue 색의 배경색이 칠해지도록 하고, 배경 이미지는 중간에 y축을 따라 반복배치 했다.
--> 결과
13) 마우스 커서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스 커서</title>
</head>
<body>
<h3>마우스 커서</h3>
아래에 마우스를 올려 보세요. 커서가 변합니다.
<hr>
<p style="cursor: crosshair">십자 모양 커서</p>
<p style="cursor: help">도움말 모양 커서</p>
<p style="cursor: pointer">포인터 모양 커서</p>
<p style="cursor: progress">프로그램 실행 중 모양 커서</p>
<p style="cursor: n-resize">상하 크기 조절 모양 커서</p>
</body>
</html>- cursor를 이용해 html 태그 위에 출력되는 마우스의 커서 모영을 지정할 수 있다.
--> 결과
2. CSS 활용
1) 박스의 유형 제어, display
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 프로퍼티</title>
<style>
div {
border: 2px solid yellowgreen;
color: blue;
background: aliceblue;
}
span {
border: 3px dotted red;
background: yellow;
}
</style>
</head>
<body>
<h3>인라인, 인라인 블록, 블록</h3>
<hr>
나는 <div style="display:none">
div(none)</div>입니다.<br><br>
나는 <div style="display:inline">
div(inline)</div> 입니다.<br><br>
나는 <div style="display:inline-block; height:50px">
div(inline-block)</div> 입니다.<br><br>
나는 <div>div<span style="display:block">
span(block)</span> 입니다.
</div>
</body>
</html>- display를 이용하면 디폴트 박스 유형을 무시하고 html 태그의 박스 유형을 달리 지정할 수 있다.
1) 블록 박스 - display:block
- width, height 값을 주어 태그가 출력되는 블록박스의 크기를 변경할 수 있으며, 한 줄을 독점적으로 차지해 양 옆에 다른 요소가 배치되지 않는다.
2) 인라인 박스 - display:inline
- 인라인 박스로 변경한 사례이다. 새 줄에 출력되지도 새 줄로 넘어가지도 못한다.
3) 인라인 블록 박스 - display:inline-block
- 기본적으로 인라인 박스이면서 블록 박스처럼 height, width로 크기를 조절하고 padding(패딩), margin(여백) 등을 조절할 수 있다.
--> 결과
2) 박스의 배치, position
- position을 이용하면 normal flow를 무시하고 원하는 위치에 박스를 배치할 수 있다.
[1] 정적, 상대 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid lightgray;
text-align: center;
color: white;
background: red;
}
#down:hover {
position: relative;
left: 20px;
top: 20px;
background: green;
}
#up:hover {
position: relative;
right: 20px;
bottom: 20px;
background: green;
}
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
<hr>
<div>T</div>
<div id="down">h</div>
<div>a</div>
<div>n</div>
<div id="up">k</div>
<div>s</div>
</body>
</html>1) 정적배치 - position: static(디폴트)
- 웹페이지가 작성된 순서대로 html 태그의 출력 위치를 정하는 방식으로, 브라우저의 디폴트 배치방식이다.
2) 상대배치 - position: relative
- HTML태그가 출력되는 위치를 left, top, bottom, right 값만큼 이동할 수 있다.
--> 결과
[2] 절대 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>절대 배치</title>
<style>
div {
display: inline-block;
position: absolute;
/* 절대 배치 */
border: 1px solid lightgray;
}
div>p {
/* div의 자식 p */
display: inline-block;
position: absolute;
/* 절대 배치 */
height: 20px;
width: 15px;
background: lightgray;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<p>예수님이 탄생하셨습니다.</p>
<div>
<img src="media/christmastree.png" width="200" height="200" alt="크리스마스 트리">
<p style="left:50px; top:30px">M</p>
<p style="left:100px; top:0px">E</p>
<p style="left:100px; top:80px">R</p>
<p style="left:150px; top:110px">R</p>
<p style="left:30px; top:130px">Y</p>
</div>
</body>
</html>1) 절대배치 - position: absolute
- 절대 위치는 left, top, bottom, right값으로 정하며, 부모 태그안에서의 상대좌표이다.
- 브라우저 크기가 변해도 절대 배치된 태그 위치는 변하지 않는다.
--> 결과
[3] 고정 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 배치</title>
<style>
#fixed {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
background: red;
color: white;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<img src="media/christmastree.png" width="300" height="300" alt="크리스마스 트리">
<div id="fixed">예수님이 탄생하셨습니다.
</div>
</body>
</html>1) 고정배치 - position: fixed
- left, top, right, bottom 값으로 뷰포트의 특정 위치에 고정시키는 배치 방식이다.
- 뷰포트(브라우저의 보이는 영역)에 고정시켜 브라우저에 항상 보이게 한다.
--> 결과
[4] float를 이용한 유동 배치
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#float {
float: right;
/* 뷰포트의 오른쪽에 붙여 */
border: 1px dotted black;
width: 7em;
/* 7개의 글자 크기 */
padding: 0.25em;
margin: 1em;
}
</style>
</head>
<body>
<h3>학기말 공지</h3>
<hr>
<div>
<p id="float">
24일은 피아니스트 조성진의 크리스마스 특별
연주가 있습니다.</p>
<p>
이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한
Java, C++ 프로그래밍 열심히 하기 바랍니다.
인턴을 준비하는 학생들은 프로젝트 개발에
더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>
</div>
</body>
</html>1) 유동배치 - float: left 혹은 float:right
- float프로퍼티를 지정시 태그를 오른편이나 왼편에 항상 배치시킬 수 있다.
--> 결과
3) 수직으로 쌓기, z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index 프로퍼티</title>
<style>
div {
position: absolute;
}
img {
position: absolute;
}
#spadeA {
z-index: -3;
left: 10px;
top: 20px;
}
#spade2 {
z-index: 2;
left: 40px;
top: 30px;
}
#spade3 {
z-index: 3;
left: 80px;
top: 40px;
}
#spade7 {
z-index: 7;
left: 120px;
top: 50px;
}
</style>
<!--z-index 값 순서대로 겹쳐지는 순서가 다르다. 같으면 나중에 그린것이 위로온다.-->
</head>
<body>
<h3>z-index 프로퍼티</h3>
<hr>
<div>
<img id="spadeA" src="media/spade-A.png" width="100" height="140" alt="스페이드A">
<img id="spade2" src="media/spade-2.png" width="100" height="140" alt="스페이드2">
<img id="spade3" src="media/spade-3.png" width="100" height="140" alt="스페이드3">
<img id="spade7" src="media/spade-7.png" width="100" height="140" alt="스페이드7">
</div>
</body>
</html>- z-index는 html 태그들을 z축을 따라 수직으로 쌓는 순서를 지정하는 프로퍼티로 값이 클수록 위에 쌓인다.
--> 결과
4) 보이게 하거나 숨기게 하는 것, visibility
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility 프로퍼티</title>
<style>
span {
visibility: hidden;
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<hr>
<ul>
<li>I (<span>love</span>) you.
<li>CSS is Cascading
(<span>Style</span>) Sheet.
<li>응답하라 (<span>1988</span>).
</ul>
</body>
</html>- visibility를 이용해 html 태그를 출력할 건지 숨길건지를 정할 수 있다.
- 보이게 하려면 visible, 숨길거면 hidden을 설정하면 된다. 단, hidden으로 설정시 공간은 차지하지만 텍스트는 보이지 않는다.
--> 결과
5) 리스트 단축 프로퍼티, list-style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트로 메뉴 만들기</title>
<style>
#menubar {
background: olive;
}
#menubar ul {
/* 여백과 패딩 모두 0 */
margin: 0;
padding: 0;
width: 567px;
/* 모든 아이템(<li>)을 한 줄에 품을 수 있는 폭 */
}
#menubar ul li {
display: inline-block;
/* 새 줄로 넘어가지 않게 */
list-style-type: none;
/* 마커 삭제 */
padding: 0px 15px;
/* top=bottom=0, left=right=15px */
}
#menubar ul li a {
color: white;
text-decoration: none;
/* 링크 보이지 않게 */
}
#menubar ul li a:hover {
color: violet;
/* 마우스 올라 갈 때 색 */
}
</style>
</head>
<body>
<nav id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</nav>
</body>
</html>- list-style은 마커의 타입, 위치 이미지를 지정할 수 있다.
list-style: list-style-type list-style-position list-style-image--> 결과
6) 표 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
<style>
table {
/* 이중 테두리 제거 */
border-collapse: collapse;
}
td,
th {
/* 모든 셀에 적용 */
text-align: left;
padding: 5px;
height: 15px;
width: 100px;
}
thead,
tfoot {
/* <thead>의 모든 셀에 적용 */
background: darkgray;
color: yellow;
}
tbody tr:nth-child(even) {
/* 짝수 <tr>에 적용*/
background: aliceblue;
}
tbody tr:hover {
/* 마우스가 올라오면 pink 배경 */
background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합</th>
<th>310</th>
<th>249</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>황기태</td>
<td>80</td>
<td>70</td>
</tr>
<tr>
<td>이재문</td>
<td>95</td>
<td>99</td>
</tr>
<tr>
<td>이병은</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>김남윤</td>
<td>50</td>
<td>40</td>
</tr>
</tbody>
</table>
</body>
</html>
--> 결과
7) 폼 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일 주기</title>
<style>
input[type=text] {
/* text 창에만 적용 */
color: red;
}
input:hover,
textarea:hover {
/* 마우스 올라 올 때 */
background: aliceblue;
}
input[type=text]:focus,
input[type=email]:focus {
/* 포커스 받을 때 */
font-size: 120%;
}
label {
display: block;
/* 새 라인에서 시작 */
padding: 5px;
}
label span {
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
</style>
</head>
<body>
<h3>CONTACT US</h3>
<hr>
<form>
<label>
<span>Name</span><input type="text" placeholder="Elvis">
</label>
<label>
<span>Email</span><input type="email" placeholder="elvis@graceland.com">
</label>
<label>
<span>Comment</span><textarea placeholder="메시지를 남겨주세요"></textarea>
</label>
<label>
<span></span><input type="submit" value="submit">
</label>
</form>
</body>
</html>
--> 결과
'비트교육센터 > 웹' 카테고리의 다른 글
| [비트교육센터] 웹 28일차 Javascript, 마우스 핸들링, 윈도우와 브라우저 객체 (0) | 2023.07.07 |
|---|---|
| [비트교육센터] 웹 27일차 Javascript, 이벤트 (0) | 2023.07.06 |
| [비트교육센터] 웹 25일차 VSCODE 설치, html 기초, html 구조 (0) | 2023.07.04 |