2021.06.14
ex13_text.html
텍스트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
/* 눈누 */
@font-face {
font-family: '국립박물관문화재단클래식B';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/국립박물관문화재단클래식B.woff') format('woff');
font-weight: normal;
#text2 {
/*
글꼴(서체)
- 폰트
- 공백 주의 > '폰트명', "폰트명"
- 웹페이지에 사용되는 폰트는 서버측 컴퓨터의 폰트를 사용하는 것이 아니라 페이지를 실행하는 클라이언트측 폰트를 사용한다.
- 브라우저가 실행되는 컴퓨터의 폰트를 사용 -> 원하는 폰트를 이미지로 생성해서 사용
- 웹 폰트 사용 : 폰트를 스트리밍 방식으로 서버로부터 다운로드 받아서 사용(일시적. 접속중일 때만 사용 가능) -> 웹 폰트 제공 사이트 다수.. -> HTML: 5px
- ex) 구글 폰트, 눈누
- 웹 폰트는 꼭 필요할 때만 사용 -> 무거워짐. 다운로드 비용 발생
- 폰트는 사람들마다 보기 좋은 호불호가 있음.
*/
/* font-family: 궁서체; */ /* 유니코드 지원 -> 한글서체 사용 가능 */
/* font-family: '맑은 고딕'; */
/* font-family: 'Jua', sans-serif; */
/* font-family: '국립박물관문화재단클래식B'; */
/* 우선 순위 */
font-family: 'Courier New', Courier, monospace;
/* font-family: cursive; */
/*
폰트의 생김새에 따른 폰트의 카테고리
monospace -> 현재 pc에 monospace종류에 해당하는 기본 글꼴
serif, cursive ..등
*/
/* 스타일(normal, Italic) */
font-style: normal;
/* 두께(normal, bold) */
/* 100~400 : 글자 두께 -> 잘 안쓰임 */
font-weight: normal;
/* 꾸미기(none, underline, line-through) */
text-decoration: none;
/* text-decoration: overline; */ /* 윗줄 */
/* text-decoration: line-through; */ /* 취소선 */
}
/* 문단 들여쓰기(px, em) */
p {
text-indent: 2em; /* 2글자 크기만큼 들여쓰기 */
}
h1{
font-variant: small-caps;
/* 모든 글자가 대문자가 되고 크기는 소문자 대문자 구분됨(디자인적인 요소) */
}
#text1 {
/* 보편적인 텍스트 서식 */
font-family: '맑은 고딕';
color: #444;
font-size: 15px;
line-height: 1.5em;
/* letter-spacing: -1px; */ /* 쓰기도 하고 안쓰기도 함 */
}
</style>
</head>
<body>
<h1>Text CSS</h1>
<p id="text1" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>
<p id="text2" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.<!-- <img src="images/catty01.png"> -->권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>
<p id="text3" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>
</body>
</html>ex13_box.html
박스 모델
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1. 테두리, border
- 모든 태그는 출력시 자신의 영역을 가진다.(독점)
- 순수 HTML에서 테두리를 가지는 태그는 일부(테이블, 이미지, 폼 컨트롤)
- CSS는 모든 태그에 테두리 표현 가능
*/
#box2 {
/*
1px : 테두리 선 두께 -> 보통 px사용, 0px일땐 안적음.
solid, dashed(점선),, : 선 타입
*/
/* 속성 그룹화 -> 가장 많이 쓰이는 방법 */
/* border: 50px solid black; */
/* 케밥 표기법(HTML, CSS)을 많이 사용 */
/* border-color: blue; */
/* border-style: solid; */ /* solid, dashed, dotte를 많이 사용 */
/* border-width: 2px; */
/* 방향 지정 */
/*
border-top: 1px solid black;
border-right: 5px solid blue;
border-left: 3px dashed blueviolet;
border-bottom: 15px solid red;
*/
/* 따로 통제 가능 */
border-top-color: red;
border-top-style: solid;
border-top-width: 2px;
border-right: tomato;
border-right-style: solid;
border-right-width: 5px;
border-left: yellow;
border-left-style: solid;
border-left-width: 6px;
border-bottom: deepskyblue;
border-bottom-style: dashed;
border-bottom-width: 15px;
}
h1 {
border-bottom: 1px dashed black; /* 밑줄 */
}
/* 폼 태그 특징 : 1개 이상의 CSS속성을 적용하면 나머지 속성들이 브라우저 설정을 따르지 않고 기본값으로 출력된다. */
.txt, .btn {
background-color: yellow;
border: 1px solid grey;
}
body {
border: 30px solid violet; /* 이 부분이 실제 <body>의 영역이다. */
background-color: aquamarine;
}
html {
border: 30px solid blue;
}
#box3 {
border: 1px soild black;
background-color: goldenrod;
}
</style>
</head>
<body>
<!--
1. Selector
2. Box Model
박스 모델, Box Model
- HTML의 모든 태그는 화면에 출력될 때 직사각형 형태로 출력된다. -> 이 규칙을 기반으로 적용되는 CSS의 속성(+규칙)들을 박스 모델이라고 한다.
1. 테두리, border
2. 너비, 높이, width, height
3. 여백, padding, margin
-->
<h1>CSS 박스 모델</h1>
<div>
데이터: <input type="text" class="txt">
<input type="button" value="보내기" class="btn">
</div>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
</body>
</html>ex14_box.html
박스 모델
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
박스 모델
2. 너비, 높이 (객체의 크기)
- width, height
- 모든 태그의 영역 크기를 지정한다.
- width(px, %)
- height(px, %)
*/
.box {
border: 1px solid black;
}
#box2 {
background-color: yellow;
/* width: auto; */ /* 100% */
/* height: auto; */ /* auto : 내용물 크기 만큼 */
/* width: 300px; */ /* 고정값. 부모의 영역이 커지든 상관 없음. 절대값*/
/* height: 300px; */
width: 30%; /* % : 부모영역에 따른 상대값 */
height: 30%;
}
.txt, .btn {
border: 1px solid #CCC;
/* height: 23px; */
}
.txt {
height: 180px;
}
.btn {
width: 100px;
height: 100px;
}
.etc {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS 박스 모델</h1>
<div>
데이터: <input type="text" class="txt">
<input type="button" value="보내기" class="btn">
</div>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2</div>
<div id="box3" class="box">상자3</div>
<hr>
<input type="checkbox" class="etc">
<input type="radio" class="etc">
</body>
</html>ex15_box.html
width, height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
교재 대용
1. w3shcools
- 자습서 or 레퍼런스
2. MDN
- 레퍼런스
*/
/*
박스 모델
모든 태그
1. 블럭 태그
2. 인라인 태그
a. 대체 불가능한 요소, Non-replaced Element
- 거의 대부분의 인라인 태그
- 태그 자체가 화면에 출력되는 태그
b. 대체 가능한 요소, Replaced Element
- 폼태그, 이미지태그
- 태그 자체가 화면에 출력되지 않고 다른 무언가로 교체되어 출력되는 태그
<블럭태그와 인라인 태그의 너비/높이 정책>
블럭 태그 정책
1. 기본 정책
- 명시적으로 width, height를 지정하지 않았을 때
a. width: auto(부모 영역을 채운다.)
b. height: 내용물의 높이가 영역의 높이가 된다.
2. 명시적 기재
- 내용물의 크기와 상관없이 지정한 크기로 출력된다.
- 내용물이 상자의 면적보다 많아지면(overflow) 상자 밖으로 빠져나간다.
- 내용물의 크기에 따라 width, height를 고정을 할지 말지 잘 선택해야 한다.
a. width: 지정한 크기
b. height: 지정한 크기
인라인 태그 정책
1. 기본 정책
- 명시적으로 width, height를 지정하지 않았을때
a. width : 내용물의 너비가 영역의 너비가 된다.
b. height : 내용물의 높이가 영역의 높이가 된다.
2. 명시적 기재
1. 대체 불가능한 요소
- 인라인의 성질에 반하는 행동이라서..
- ex) <span>
a. 너비 : 지정 불가능
b. 높이 : 지정 불가능
2. 대체 가능한 요소
- ex) 폼태그, 이미지태그
a. 너비 : 지정 가능
b. 높이 : 지정 가능
*/
.box {
border: 1px solid black;
}
#box2 {
/* 명시적 기재 */
width:300px;
height: 250px;
/* height: auto; */
}
/* 어떤 태그가 영역이 얼마나 되는지? 1. 배경색을 준다. 2. 테두리를 준다. */
span {
/* border: 1px solid red; */
background-color: yellow;
/* 인라인 태그는 width와 height 지정 불가능 */
/* width: 200px;
height: 200px; */
}
img {
/* 원래너비:원래높이 = 수정너비:수정높이 */
/* 95:140 = 300:X 종횡비 유지*/
width: 300px;
/* height: 442px; */
height: auto; /* 원본비율을 유지하면서 자동으로 맞춰진다. */
}
</style>
</head>
<body>
<h1>CSS 박스 모델</h1>
<div id="box1" class="box">상자1</div>
<div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자<span>홍길동</span>2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자</div>
<div id="box3" class="box">상자3</div>
<hr>
<span>홍길동</span> /* 대체 불가능한 요소 */
<!-- Replaced Element-> 다시 서버로 가서 다운받아와서 이미지태그랑 바꿔치기한다. -->
<img src="images/0.png"> /* 대체 가능한 요소 */
</body>
</html>
ex16_box.html
padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
박스 모델
1. border
2. width, height
3. padding, margin
- padding
- 가독성 여백 조절, 내부 요소의 배치(위치 조정)
*/
.box {
border: 10px solid black;
width: 200px;
height: 200px;
}
#box2 {
border-color: red;
/* height: auto; */
/*
padding 방향(위, 오른쪽, 아래, 왼쪽) > 따로 통제 가능
*/
/* padding: 20px; -> 네방향 모두 */
/* padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px; */
/* top -> right -> bottom -> left (시계방향) */
/* padding: 10px 20px 30px 40px; */
/* top -> (right + left) -> bottom */
/* padding: 10px 20px 30px; */
/* top(bottom) -> right(left) -> 많이 사용하는 방법 */
/* padding: 10px 30px; */
/* top(right, left, bottom) -> 가장 많이 사용하는 방법 */
/* padding: 20px; */
/* 가독성 좋음 */
/* padding: 5px; */ /* 일괄 적용 */
/* padding-top: 20px; */ /* 덮어쓰기 */
/*
테두리 기준
- padding : 안쪽 여백
- margin : 바깥쪽 여백
padding
- 테두리와 안쪽 컨텐츠 사이의 거리
margin
- 해당 요소(테두리)와 외부 요소간의 거리
- 태그 사이의 간격이 조절된다 -> 거리 조절 -> 요소 배치 작업
- 세밀한 거리 조정 가능
*/
margin-top: 19px;
margin-bottom: 21px;
}
.txt {
/* padding: 10px; */
/* padding: 2px 15px */
outline: none;
border: 0px; /* 테두리 안보이게 가능 */
border-radius: 0;
border-bottom: 1px dashed gray;
padding-bottom: 15px 10px;
}
h1 {
/* 글자 밑줄 */
border-bottom: 1px solid black;
padding-bottom: 50px;
/* text-decoration: underline; 제어 불가능*/
}
</style>
</head>
<body>
<h1>CSS 박스 모델</h1>
<!--
블럭요소의 수직 거리는 절대로 <br>로 조절하면 안된다!!! > margin 사용
1. <br> 용도 : 인라인 태그의 개행을 목적으로 한다.
2. 세밀한 거리 조절 불편하다.
-->
<div id="box1" class="box">상자1</div>
<!-- <br><br> -->
<div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2</div>
<!-- <br> -->
<div id="box3" class="box">상자3</div>
<hr>
<input type="text" class="txt">
</body>
</html>
ex17_box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
border: 1px solid #999;
/* 인접한 border끼리의 상태(separate, collapse(병합)) */
border-collapse: collapse;
width: 700px;
}
.list th,
.list td { /* 부모선택자 */
border: 1px solid #999;
padding: 5px;
}
`
.list td {
text-align: center;
}
.list .col1 { width: 50px; }
.list .col2 { width: 80px; }
.list .col3 { width: 50px; }
.list .col4 { width: 70px; }
.list .col5 { width: 450px; }
.list th {
background-color: #DDD;
}
/* 주소 왼쪽 정렬 */
.list .cell5 {
text-align: left;
}
/* 마우스 올렸을때 색상표시 */
.list tr:hover {
background-color: gold;
}
</style>
</head>
<body>
<!--
HTML : 뼈대 + 데이터
CSS : 서식
-->
<h1>주소록</h1>
<table class="list">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list {
border: 1px solid #999;
/* 인접한 border끼리의 상태(separate, collapse(병합)) */
border-collapse: collapse;
width: 700px;
}
.list th,
.list td { /* 부모선택자 */
border: 1px solid #999;
padding: 5px;
}
.list td {
text-align: center;
}
.list .col1 { width: 50px; }
.list .col2 { width: 80px; }
.list .col3 { width: 50px; }
.list .col4 { width: 70px; }
.list .col5 { width: 450px; }
.list th {
background-color: #DDD;
}
/* 주소 왼쪽 정렬 */
.list .cell5 {
text-align: left;
}
/* 마우스 올렸을때 색상표시 */
.list tr:hover {
background-color: gold;
}
</style>
</head>
<body>
<!--
HTML : 뼈대 + 데이터
CSS : 서식
-->
<h1>주소록</h1>
<table class="list">
<tr>
<th class="col1">번호</th>
<th class="col2">이름</th>
<th class="col3">나이</th>
<th class="col4">성별</th>
<th class="col5">주소</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td class="cell5">서울시 강남구 역삼동 123-45</td>
</tr>
<tr>
<td>2</td>
<td>아무개</td>
<td>21</td>
<td>여자</td>
<td class="cell5">서울시 영등포구 대림동 123-45</td>
</tr>
<tr>
<td>3</td>
<td>김흥부</td>
<td>22</td>
<td>남자</td>
<td class="cell5">서울시 서대문구 홍제동 123-45</td>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td class="cell5">서울시 강남구 역삼동 123-45</td>
</tr>
<tr>
<td>2</td>
<td>아무개</td>
<td>21</td>
<td>여자</td>
<td class="cell5">서울시 영등포구 대림동 123-45</td>
</tr>
<tr>
<td>3</td>
<td>김흥부</td>
<td>22</td>
<td>남자</td>
<td class="cell5">서울시 서대문구 홍제동 123-45</td>
</tr>
</table>
<h2>비고</h2>
<table>
<tr>
<td>비고 : 위의 데이터는 연습용입니다.</td>
</tr>
</table>
</body>
</html> <tr>
<th class="col1">번호</th>
<th class="col2">이름</th>
<th class="col3">나이</th>
<th class="col4">성별</th>
<th class="col5">주소</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td class="cell5">서울시 강남구 역삼동 123-45</td>
</tr>
<tr>
<td>2</td>
<td>아무개</td>
<td>21</td>
<td>여자</td>
<td class="cell5">서울시 영등포구 대림동 123-45</td>
</tr>
<tr>
<td>3</td>
<td>김흥부</td>
<td>22</td>
<td>남자</td>
<td class="cell5">서울시 서대문구 홍제동 123-45</td>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td class="cell5">서울시 강남구 역삼동 123-45</td>
</tr>
<tr>
<td>2</td>
<td>아무개</td>
<td>21</td>
<td>여자</td>
<td class="cell5">서울시 영등포구 대림동 123-45</td>
</tr>
<tr>
<td>3</td>
<td>김흥부</td>
<td>22</td>
<td>남자</td>
<td class="cell5">서울시 서대문구 홍제동 123-45</td>
</tr>
</table>
<h2>비고</h2>
<table>
<tr>
<td>비고 : 위의 데이터는 연습용입니다.</td>
</tr>
</table>
</body>
</html>ctrl + h : 바꾸기
ex18_box.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
/* 태그를 통제하기 위해 0으로 시작 */
padding: 0;
margin: 0;
}
body {
background-color: #ffcc29;
}
.menu {
border: 0px solid black;
width: 100%;
border-spacing: 0;
}
.menu td {
border: 0px solid red;
width: 20%;
height: 60px;
text-align: center;
font-family: Arial;
font-size: 1.5em;
background-color: #206a5d; /* 간격여백지우기 */
color: white;
font-variant: small-caps;
cursor: pointer; /* 커서 모양 (pointer: 손가락 모양)*/
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.menu td:hover {
background-color: #81b213;
border-top-color: #c84b31;
border-bottom-color: #c84b31;
}
main {
width: 1000px;
/* 중앙 정렬 */
margin-left: auto;
margin-right: auto;
}
section {
padding: 25px;
margin-bottom: 200px;
}
section > article > h1 {
border-bottom: 1px dashed #206a5d;
padding-bottom: 5px;
margin-bottom: 15px;
}
section > article > p {
line-height: 1.6em;
}
section > article {
margin-bottom: 25px;
}
</style>
</head>
<body>
<!--
페이지 상단 메뉴 + 컨텐츠
1. 화면 스케치(프로토타이핑, 목업, 와이어프레임)
- Adobe XD
- Figma
- 발사믹 목업
- 카카오톡 오븐
- Visio(MS Office)
2. 색상표 구성
- #206a5d
- #81b213
- #ffcc29
- #f58634
3. 최적 해상도 설정
- 다양한 환경의 고객들이 사이트 접근 > 중간정도 해상도를 선택(1000px ~ 1200px) (시대마다 다름) > 화면을 거기에 맞춰서 구현
-->
<main>
<header>
<nav>
<table class="menu"> <!-- borderspacing="0" -->
<tr>
<td>Home</td>
<td>Employee</td>
<td>Department</td>
<td>Manager</td>
<td>Location</td>
</tr>
</table>
</nav>
</header>
<section>
<article>
<h1>제목입니다.</h1>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
</article>
<article>
<h1>제목입니다.</h1>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
</article>
<article>
<h1>제목입니다.</h1>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
<p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
</article>
</section>
</main>
</body>
</html>ex19_align.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
정렬, Alignment
- 인라인 태그와 블럭 태그의 수평 정렬
1. 인라인 태그
- 내용물의 수평 정렬은 지정할 수 없다.
- 내용물의 크기와 공간의 크기가 동일하기 때문.. 움직일 여백이 없어서..
- text-align 속성 사용 안함
- 인라인 태그는 스스로 수평정렬을 할 수 없다. > 부모인 블럭 태그의 text-align을 통해서 수평 정렬이 가능하다.
2. 블럭 태그
- 내용물을 정렬할 수 있다.
- 내용물의 너비와 무관하게 블럭 태그는 항상 너비가 100% > 움직일 여백이 있어서..
- 블럭 태그의 스스로 수평 정렬 > 관련된 CSS 속성 없음. > margin을 사용해서 수평 정렬을 대신한다.
*/
#box1 {
background-color: yellow;
text-align: center;
width: 200px;
/* margin-left: 300px; */
/*
블럭태그 수평정렬하는 법
1.width가 고정이여야한다.
고정값이라 창 크기에 따라서 유동적이지 않음 -> 2. 왼쪽 마진과 오른쪽 마진을 똑같이 설정
*/
margin-left: auto;
margin-right: auto;
}
#span1 {
background-color: red;
/* text-align: center; */
}
</style>
</head>
<body>
<h1>인라인 태그</h1>
<div id="box1">
<span id="span1">인라인 태그</span>
</div>
<h1>블럭 태그</h1>
<div id="box2">
<div id="box3">블럭 태그</div>
</div>
</body>
</html>ex20_overflow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin-bottom: 200px;
}
#box1 {
border: 1px solid black;
width: 200px;
/* height: auto; */
height: 200px;
/*
visible : 오버플로우가 되든 안되든 다 보여준다.
hidden: 감추기
scroll : 스크롤바를 생성
auto: 오버플로우가 생겨야 스크롤바를 제공
*/
/* overflow: visible; */
overflow: hidden;
/* overflow: scroll; */
/* overflow: auto; */
}
#box2 {
margin-top: 20px;
border: 5px solid black;
width: 128px;
height: 128px;
overflow: hidden;
}
/*
각각의 이미지 파일을 만들지 않고, 커다란 덩어리 이미지로 만드는 이유?
1. 디자이너 <-> 개발자 협업이 쉽다.
a. 이미지 100개 주고 받기 > 파일명 정하기..
b. 이미지 1개 주고 받기 > 파일명 1개
- 개별 파트의 크기 + 위치(좌표값) > 디자이너가 개발자에게 알려준다.
2. 네트워크 트래픽 감소 + 서버 운용 비용 감소
*/
#naver {
border: 0px solid black;
width: 445px;
height: 110px;
background-image: url(images/sp_main_4efc7a.png);
background-position: 0 -315px;
}
#naver2 {
border: 0px solid black;
width: 136px;
height: 53px;
background-image: url(images/sp_main_4efc7a.png);
background-size: 440px 408px;
background-position: -270px -110px;
cursor: pointer;
}
#naver2:hover {
background-position: -270px -55px;
}
</style>
</head>
<body>
<div id="box1">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.</div>
<div id="box2">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
<img src="images/catty06.png">
<img src="images/catty07.png">
<img src="images/catty08.png">
<img src="images/catty09.png">
<img src="images/catty10.png">
</div>
<hr>
<img src="images/sp_main_4efc7a.png">
<hr>
<div id="naver"></div>
<hr>
<div id="naver2"></div>
</body>
</html>- 브라우저가 페이지를 요청하고 요청을 응답받아서 페이지를 보기까지의 과정
Apache : 웹서버
Tomcat: WAS (Web Application Server)
http://test.com -> 상대방 컴퓨터 주소 (pc를 찾는다.)
:5500 -> 웹서버를 찾는 포트 번호 (웹 응용 프로그램 -> 사이트를 찾는다.)
/css/ -> 자원의 경로
ex20_overflow.html -> 자원명
-
웹 (http://) -> 실시간 지원 안함, 접속이 끊겨있는 상태 -> 수정사항 새로고침해야 바뀐다.
-
연결지향적 (1:1, 실시간연결 - 트래픽, 서버에 부담) <-> 비연결지향적(다량의 데이터 전달, 해석과 실행에 대한 책임을 브라우저에게 넘김, 서버 부담 적음, 파일이 변경이 없으면 캐시를 읽는다. (비용 발생 적음), 인터넷 속도 빠름, 트래픽 감소)
ex21_visibility.html
가시성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
visibility, 가시성
visibility
- visible, hidden
- 요소를 화면에 출력하는 역할
- 요소의 영역이 그대로 유지된다. (객체는 존재한다. 안보일뿐)
Rendering, 출력 방식
display
- block, inline, none 등..
- 요소를 화면에 안보이게 하는 역할(none)
- none : 출력 결과를 생성하지 않는다. 객체가 없음.
- 요소의 영역도 같이 사라진다.
*/
#cat2 {
/* visibility: hidden; */
/* display: none; */
}
/* 인접형제 선택자 */
/* #cat1:hover + #cat2 { */
#cat1:hover ~ img {
/* border: 1px solid black; */
visibility: hidden;
}
/* body {
border: 10px solid red;
} -- body 영역을 정확이 파악할 것 */
body:hover * {
visibility: hidden;
}
</style>
</head>
<body>
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
</body>
</html>ex22_opacity.html
불투명도
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 1px solid black;
width: 200px;
height: 200px;
background-color: yellow;
/*
opacity, 불투명도
- 0~1
- 0: 투명, 1: 불투명
*/
opacity: 0; /* 눈에만 안보일뿐 자리는 차지함 */
}
#list {
border: 0px solid black;
width: 680px; /* enter -> 사이 간격 엔터 크기까지 생각해야함. */
}
#list > img {
border: 0px solid blue;
opacity: 0.3;
cursor: pointer;
}
#list > img:hover {
opacity: 1;
}
</style>
</head>
<body>
문자열
<div id="box1" class="box">상자1</div>
문자열
<h1>고양이</h1>
<div id="list">
<img src="images/catty01.png">
<img src="images/catty02.png">
<img src="images/catty03.png">
<img src="images/catty04.png">
<img src="images/catty05.png">
</div>
</body>
</html>
모르면 괴롭고 알면 즐겁다.