Day32
키워드 : HTML복습 / CSS 요소 스타일 및 속성 변경
****
1. 복습
웹표준 = HTML(구조) + CSS(모양) + JavaScript(동작)
---> 화면과 연관되어 웹 브라우저에서 구동하는 front-end
vs
ASP / PHP / JSP (웹서버와 JAVA를 인식하는 프로그램)
---> 웹 서버와 연관되어 DB와 연결되는 back-end
< HTML >
※ w3schools.com 열어두고 새로 나온 태그나 모르는 태그는 참고해서 사용하기
※ 요소 - block element : 개행이 되는 요소
ex) p, h1~h6, li, (의미O) div (의미X)
- inline element : 개행되지 않는 요소
ex) img, a, (의미O) span (의미X)
※ 폼(form) : 웹에서 사용자의 입력값 및 선택값을 서버로 전송
<input type='text' name='중요' id='' class=''>
---> name은 back-end에서 사용 / id, class는 front-end에서 사용
<input type='HTML5에서 세분화됨'>
---> number, range, date, email 등 (모바일 사용시 키팬 변경을 위해)
<CSS>
※같은 가중치를 주었을 경우, 같은 태그를 찾을 때에 우선순위는 inline > internal > external 이다.
※ @를 사용하여 다양한 설정 가능
※ 여러 곳에서 공통적으로 사용하는 것을 가장 먼저 import
※ 문자셋은 반드시 지정해줘야 한다.
※ 선택자의 style sheet를 잘 찾아두면 JQeury를 다룰 때도 도움이 된다.
※ 가중치 우선순위 : ID(#~~~) > Class(.~~~) > E (요소)
---> 외부파일을 수정하기보다는 우선순위를 시용하여 덮음으로 수정하는 것이 권장된다.
div#point100 { color : blue; }
body div#point100 { color : green; } /* 가중치로 색을 덮을 수 있다. */
<div id="point100" class="point10">안녕하세요</div>
※ :nth-child(n) - "~"의 부모의 자식 중 n번째 자식인 요소 (단, 태그가 동일해야 함)
ex) p:nth-child(3) ..... <p>의 부모<article>의 자식 중 3번째 요소 (단, p여야 함)
--> p:nth-chile(1) ..... <p>의 부모<article>의 자식 중 1번째 요소 (h4라서 해당X)
ex) li:nth-chile(3) ..... <li>의 부모<ul>의 자식 중 3번째 요소 (단, li여야 함)
vs
:nth-of-type(n) - "~" 태그의 n번째 요소
ex) li:nth-of-type(3) ..... <li> 중 3번째
ex) p:nth-of-type(2) ..... <p> 중 2번째
※ class는 중복이 존재할 수 있기에 고유값으로 볼 수 있는 id로 스타일 적용할 요소를 찾는 것이 좋다.
2. ul, ol의 목차모양 변경
- ul > li { list-style-type : square; } ...... 사각형으로
- ol > li { list-style-type : lower-alpha; } ...... 알파벳 소문자로
- ul > li { list-style-type:none; ...... 삽입한 이미지로
list-style-image:url(/WebUI/images/common/icon_h2.gif); }
- ul > li { list-style-type : none;
list-style-image: url(../../images/common/icon_h2.gif); }
3. display (화면에 보일지를 결정 : none, inline, block)
- span에 있는 요소를 보이지 않게 처리
span { display : none; } ....... 공간도 사라지게 함
{ visibility : hidden; } ....... 공간은 남겨두고 카드만 사라짐
- input에 포커스가 왔을 때 바로 다음 요소인 span을 개행하지 않고 보이게 처리
input:focus + span { display : inline; }
..... 새라인에서 시작 못하고 옆에 다른 요소와 배치 가능
..... width, height, padding, margin, border 조절 불가능
- input에 포커스가 왔을 때 바로 다음 요소인 span을 개행하면서 보이게 처리
input:focus + span { display : block; }
..... 항상 새라인에서 시작하고 옆에 다른 요소 배치 안됨
..... width, height, padding, margin, border 조절 가능
- { display : inline-block; }
..... 새라인에서 시작 않고 옆에 다른 요소와 배치 가능
..... width, height, padding, margin, border 조절 가능
4. 특정 태그의 요소들의 스타일 변경
(1) 폰트 변경
(방법1)
p { font-family:"궁서"; font-size:15px; }
(방법2)
p { font:14px 굴림; }
(2) 배경색 변경
p { background:#317946; }
(3) 자간 변경 (글자간격)
p { width:600px; }
(4) 여백 변경 1 (안쪽 여백)
p { padding: 40px; } ...... 사방에 적용
p { padding: 40px 0px; } ...... 40px 0px 40px 0px;과 동일한 결과
p { padding: 40px 0px 0px 0px; } ...... 좌측상단에서부터 x,y(0,0)이므로 북, 동, 남, 서에 각각 적용
p { padding: 40px 100px 0px; } ...... 40px "100px" 0px "100px"와 동일한 결과 (반대쪽에 자동적용)
(5) 여백 변경 2 (바깥쪽 여백)
p { margin: 40px; }
(6) 테두리 라운드 처리
p { border-radius: 40px; } ...... 전체 라운드 처리
p { border-radius: 20px 40px; } ...... 좌측상단, 우측하단 20px, 우측상단, 좌측하단 40px 라운드 처리
(7) 테두리 스타일 변경
p { border-style : dotted; }
(8) 응용 예제 이해 (span 파일에서)
/* adress의 자손 중 addr클래스를 찾아 스타일 적용*/
address .addr { padding-right:10px;
color : #9922cc;
font-size: 18px; }
(9) 배경에 이미지 바둑판이 아닌 형태로 넣기 ......... 파일경로 대소문자 모두 구분하여 정확히 입력
body{ background:#FFF url(../../images/new/bg3.jpg)
repeat-x fixed left bottom; }
(10) 텍스트 중앙에 오도록 배치
{ text-align : center; } ... 가로
{ line-height : ~~~px; } ... 세로
5. 스타일 요소 모두 안 나오게 변경
(방법1)
#footer .guideMenu a { text-decoration : none; }
(방법2) - 경로를 명확히 하므로 권장됨
div#footer ul.guideMenu a { text-decoration : none; }
6. 요소 또는 속성 변경
(1) 마우스가 올라가는 위치의 스타일 요소 변경
div#footer ul.guideMenu a:hover { background : cyan; }
<style type="text/css">
/* 이미지 위치 및 크기 변경 */
img, h1 { float: left; width:30%}
.clear_both {clear: both;}
img:hover { width: 50%; }
</style>
(2) block 요소인 li 태그에 인라인 속성으로 변경
div#footer ul.guideMenu > li { display : inline;
padding : 0px 30px; }
(3) 커서 모양 변경
.addr { cursor : pointer; }
.tel { cursor : crosshair; }
.fax { cursor : progress; }
.email { cursor : help; }
.copyright { cursor : n-resize; }
(4) 테이블의 테두리와 셀의 테두리 사이에 간격에 관한 속성 변경
{ border-collapse : collapse; } ...... 간격 없애기 (겹치는 부분은 한 줄로 표시)
{ border-collapse : separate; } ...... 간격 두기
----> 간격의 크기는 border-spacing 속성으로 결정
{ border-collapse : initial } ...... 간격을 기본값으로 설정
{ border-collapse : default; } ...... 부모 요소의 속상값을 상속받음
7. 화면 내 요소의 위치
{ position : absolute; } ...... 페이지 내 고정
{ position : fixed; } ...... 화면 내 고정
{ position : relative; } ...... 마우스가 올라오면 변경
div:nth-of-type(odd):hover{
position: relative;
left: 20px;
top: 20px;
background: yellow;
}8. 영역 지정
- 한 요소를 다른 요소가 감싸는 형태를 만들기 위해 사용된다고 함
- position과는 또 다른 형태로 영역을 설정하기 위함
- w3scools에 left/ right 외의 더 많은 위치 설정이 있음
{ float : left; }
{ float : right; }
{ clear : both; }
<style type="text/css">
/* 영역을 만들 때 */
/* float : left / right */
/* clear : both */
#header { border: 2px solid black; }
#left { float: left; width: 200px; height: 100px; border: 2px solid green; }
#content{ float: right; width: 400px; height: 400px;border: 2px dotted red; }
#footer { clear: both; border: 2px dashed blue; }
</style>
<style type="text/css" media='print'>
/* 프린트시 주요내용만 중앙에서 출력되게 함 */
#header, #left, #footer { display: none; }
#content { float: left; }
</style>
<style type="text/css" media='screen and (max-width:500px)'>
<!-- 모바일과 같은 환경에서 화면 너비가 500p이 안 될 경우 특정 내용이 출력되지 않게 함 -->
#left { display: none; }
#content { float: left; }
</style>
9. 텍스트 길이에 따른 처리
{ overflow : hidden; } ...... 초과되는 글자는 보이지 않도록 처리
{ overflow : auto; } ...... 글자수가 초과될 때 자동으로 스크롤바 생성
{ overflow : scroll; } ...... 글자수가 초과되지 않더라도 무조건 스크롤바 생성
10. z-index
맨 앞에 보이기 : 제일 큰 수
맨 뒤에 보이기 : 제일 작은 수
<style type="text/css">
img { position:absolute; }
/* z-index로 화면 위로 출력될 우선순위를 지정 */
#spadeA { z-index: 4; left: 10px; top: 120px; }
#spade2 { z-index: 30; left: 50px; top: 140px; }
#spade3 { z-index: 2; left: 90px; top: 160px; }
#spade7 { z-index: 1; left: 130px; top: 180px; }
</style>
11. table 꾸미기 연습
<05_html5_table연습.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 테이블 꾸미기 연습 </title>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style type="text/css">
body {
background: #FFF url(../images/twice2.jpg)
repeat-y fixed bottom;
}
#twice {
position: fixed;
left: 50px;
}
#album01 {
position: fixed;
left:30px; top:350px;
border: 5px solid white;
border-radius: 10px;
}
/*
#album01, #album02:hover {
positioin: relative;
right: 10px;
}*/
#album02 {
position: fixed;
left:30px; top:570px;
border: 5px solid white;
border-radius: 10px;
}
#celebs {
position: fixed;
left: 500px; top:45px;
}
h2 {
width: 300px;
margin: 0px 0px 5px 10px;
padding: 3px;
background:#ACB900;
border: 4px solid #EFEAB5;
border-radius: 10px;
text-align: center;
color: white;
font-family: 'Hi Melody', cursive;
}
.panel {
width: 300px;
background: #EFEAB5;
border: 1px solid white;
border-radius: 10px;
}
th {
background: #ACB900;
padding: 3px 22px;
color: white;
font-family: 'Hi Melody', cursive;
font-size: 17px;
}
td:nth-child(odd) {
background: #D5D679;
padding: 3px;
text-align: center;
font-family: 'Nanum Pen Script', cursive;
font-size: 17px;
}
td:nth-child(even) {
background: #E8DE73;
text-align: center;
font-family: 'Nanum Pen Script', cursive;
font-size: 17px;
}
/*
td:nth-child(3) {
background: #D1D734;
}
*/
</style>
</head>
<body>
<div id="celebs">
<h2 class="heading"> 우리 스타 보기</h2>
<fieldset class="panel">
<table class="data">
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>직업</th>
<th>거주지</th>
</tr>
</thead>
<tbody>
<tr>
<td>203A</td>
<td>샤이니</td>
<td>가수</td>
<td>용인</td>
</tr>
<tr>
<td>141B</td>
<td>소녀시대</td>
<td>가수</td>
<td>부산</td>
</tr>
<tr>
<td>2031</td>
<td>김수현</td>
<td>배우</td>
<td>뉴욕</td>
</tr>
<tr>
<td>007F</td>
<td>국카스텐</td>
<td>가수</td>
<td>마산</td>
</tr>
<tr>
<td>8A05</td>
<td>김태희</td>
<td>배우</td>
<td>서울</td>
</tr>
<tr>
<td>6636</td>
<td>송혜교</td>
<td>배우</td>
<td>런던</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<video id='twice' width="400" height="300" controls >
<source src="../media/likey.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<span id='album01'>
<img src='../images/twice3.png' width='200' height='200'/>
</span>
<span id='album02'>
<img src='../images/twice4.jpg' width='200' height='200'/>
</span>
</body>
</html>
12. 폼 꾸미기 연습
<06_html5_form.html 소스 코드>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap" rel="stylesheet">
<style type="text/css">
/* 최외각 디자인 */
#total {
width: 400px;
background: #EE8D88;
border: 1px white;
border-radius: 5px;
}
/* 제목 패널 디자인 */
legend {
color: #FF5A5A;
font-family: 'Hi Melody', cursive;
font-weight: bold;
background: white;
border: 1px solid white;
border-radius: 7px;
}
/* 내부 패널 디자인 */
.login, .info, .level {
font-family: 'Hi Melody', cursive;
background: #FBC9CB;
border: 2px dotted white;
border-radius: 10px;
}
.send {
font-family: 'Hi Melody', cursive;
background: #FFAAAA;
border: 2px solid white;
border-radius: 20px;
}
/* 항목 디자인 */
label, li {
color: #FF5A5A;
font-family: 'Hi Melody', cursive;
}
/* 입력창 내 폰트 디자인 */
#grade, #name, #email, #birth {
font-family: 'Hi Melody', cursive;
}
/* 제출 버튼 디자인 */
#send {
color: #FFFFFF;
font-family: 'Hi Melody', cursive;
background: #FF5A5A;
border: 2px solid #FFFFFF;
border-radius: 6px;
outline: 0;
cursor: pointer;
}
/* 다이얼 바 디자인 */
#dial {
-webkit-appearance: none;
appearance: none;
width: 80%;
height: 2px;
margin-top: -13px;
background: #FF5A5A;
border: 5px dotted #FFFFFF;
border-radius: 1px;
outline: none;
cursor: pointer;
/* box-shadow: 1px 1px 1px #F5C4AC, 0px 0px 1px #0d0d0d; */
}
/* 다이얼 포인터 디자인 */
#dial::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 25px;
background: #FF7F50;
border: 1px solid #FFFFFF;
cursor: pointer;
}
td < label {
float: left;
}
td < input {
left:20px;
}
</style>
</head>
<body>
<form action="xxxx.jsp" method='get'>
<fieldset id='total'>
<fieldset class='login'>
<legend>로그인 정보</legend>
<table class='panel1'>
<tr>
<td><label for='id'>1. 아이디</label></td>
<td><input type='text' id='id' name='id' autofocus/></td></tr>
<tr>
<td><label for='pw'>2. 비밀번호</label></td>
<td><input type='text' id='pw' name='pw'/></td></tr>
<tr>
<td><label for='pwconfirm'>3. 비밀번호 확인</label></td>
<td><input type='text' id='pwconfirm' name='pwconfirm'/></td></tr>
<tr>
<td><label for='grade'>4. 회원등급</label></td>
<td><input type='text' id='grade' name='grade' value='준회원'/></td></tr>
</table>
</fieldset>
<fieldset class='info'>
<legend>개인 정보</legend>
<table class='panel2'>
<tr>
<td><label for='name'>1. 이름</label></td>
<td><input type='text' id='name' name='name' placeholder='5자미만 공백없이'/></td></tr>
<tr>
<td><label for='email'>2. 메일 주소</label></td>
<td><input type='text' id='email' name='email' placeholder='abcd@domain.com'/></td></tr>
<tr>
<td><label for='tel'>3. 연락처</label></td>
<td><input type='text' id='tel' name='tel'/></td></tr>
<tr>
<td><label for='birth'>4. 생일</label></td>
<td><input type='text' id='birth' name='birth' value='연도-월-일'/></td></tr>
</table>
</fieldset>
<fieldset class='level'>
<legend>코딩 숙련도(상,중,하)</legend>
<ol>
<li>
<input type='range' id='dial' min='0' max='100' step='1' value='50'/></li>
</ol>
</fieldset>
<br/>
<fieldset class='send'>
<input type='button' id='send' value='제출'/>
</fieldset>
</fieldset>
</form>
</body>
</html>