JavaScript
36일차 2023-04-26
choi Hoon
2023. 4. 26. 20:16
CSS3
Font03.html
-글자(텍스트)와 관련된 CSS속성
font-family:글꼴 설정 =>굴림체,돋움체
font-size:글꼴의 크기 =>12pt(기본크기),1em,1.2em 대부분 pt안쓰고 em,rem쓴다=>pt는 고정값, em은 상대값 근데 우리의 해상도(모니터의 크기)에 따라 달라져야되서 em,rem씀
해상도가 큰 것에서12pt는 정말 작고, 해상도가 작은 것에서는 커서 pt(고정값)은 별로임
1pt(point)는 1/72inch
font-style:글꼴의 스타일 지정 =>italic,normal =>(italic)기울어진거, 세우려면 (normal)
font-weight:글꼴 두께 =>normal,bold,100~900
100에 가까울수록 얇다
font-variant:소문자를 대문자로 =>normal,small-caps =>잘안씀
letter-spacing:글 자 사 이 의 간 격 =>10pt
line-height:줄간격 => 180% (주로 블락 엘리먼트에서 세로로 가운데 배치시 사용: height와 line-height를 동일하게 주면 세로로 가운데 배체됨)=>잘안씀
color:글자색 =>red,#ff38f4,#f00 =>색상명,16비트, 8비트로 표기법 =>다양한 색상을 구현
*css속성에 속성값을 줄때 숫자형의 값을 줄때는
값이 0이면 단위(pt,px,em등)를 표시 안해도 되나
값이 0이 아니면 반드시 단위를 표시해라.=> 단위 표시 중요
em
rem의 r은 root를 뜻함
em은 부모 요소의 텍스트 크기에 대한 비율
rem은 최상위 부모 "
Font03.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>Font03.html</title>
<style>
html{
/*font-size:36pt;*/
}
h4{
background-color: red;
}
span{
border:1px red solid;
}
</style>
</head>
<body>
<h2>폰트관련 CSS속성들</h2>
<div ><!--style="font-size: 12pt;"추가후 em 및 rem비교-->
<h3>텍스트 크기 및 글꼴</h3>
글자 크기(기본 텍스트)<br />
<span style="font-size: 12pt;">글자 크기 12pt</span><br />
<span style="font-size: 1em;">글자 크기 1em</span><br />
<span style="font-size: 1rem;">글자 크기 1rem</span><br />
<span style="font-size: 24pt;">글자 크기 24pt</span><br />
<span style="font-size: 2em;">글자 크기 2em</span><br />
<span style="font-size: 2rem;">글자 크기 2rem</span><br />
<span style="font-size: 0.8em;">글자 크기 0.8em</span><br />
<span style="font-size: .8em;">글자 크기 .8em</span><br />
<span style="font-size: 0.8rem;">글자 크기 .8rem</span><br />
<span style="font-size: 1.8em; font-family: 돋움체;">글자 크기 1.8em,글꼴 돋움체</span><br />
<!--
상대적인 비율을 나타내는 크기
em:부모 요소의 텍스트 크기에 대한 비율
rem:최상위 요소(html태그)의 텍스트크기에 대한 비율
-->
<div style="font-size: 36pt;">
글자 크기<br/>
<span style="font-size: 1em;">글자 크기 1em</span><br />
<span style="font-size: 1rem;"> 글자 크기 1rem</span><br />
</div>
<h3>텍스트 두께 및 스타일</h3>
<span style="font-weight: bold; font-style: italic;">텍스트 두껍게,스타일은 기울이기 </span>
<address style="font-style: normal;">서울시 종로구 탑골</address>
<h3>글자 사이의 간격</h3>
<span style="letter-spacing: .5em;">한국소프트웨어 인재개발원입니다.</span>
<h3>줄 사이의 간격</h3>
<!--블락 엘리먼트는 컨텐츠 영역의 세로폭이 컨텐츠 크기였다가
5em만큼 세로폭이 늘어나서 마치 줄간격이
생긴 효과가 난다.
-->
<h4 style="line-height: 5em;">블락엘리먼트에 줄간격 적용</h4>
<h4>블락엘리먼트에 줄간격 적용</h4>
<h4>블락엘리먼트에 줄간격 적용</h4>
<div class="inline">
<h4>인라인 엘리먼트에 적용하기</h4>
<!--인라인 엘리먼트는 컨텐츠 영역의 크기가 변하지 않고
5em만큼 줄간격이 생긴다-->
<span style="line-height: 5em;">인라인 엘리먼트</span>
<span>인라인 엘리먼트</span>
<span>인라인 엘리먼트</span>
</div>
<h3 >수직으로 가운데 정렬시</h3>
<!-- height속성 과 line-height속성의 값을 동일하게 지정-->
<div style="background-color: yellow; height: 200px;line-height: 200px;">
텍스트
</div>
<h3>영역의 정 가운데 정렬시</h3>
<div style="background-color: yellow; height: 200px;line-height: 200px;text-align: center;">
텍스트
</div>
</div>
</body>
</html>결과)
Paragraph04.html
4. 문단관련 속성
-문단(paragraph)과 관련된 CSS속성
text-align:태그영역안에 있는 문단 정렬(수평방향)
(left,center,right,justify)
inline엘리먼트에는 의미 없다=> content만큼 세로 길이라서
text-decoration: 밑줄긋기
(none,underline,overline,line-through)
none:밑줄 없애기(주로 a태그에 적용)
underline:밑줄
overline:윗줄
line-through:가운데 선 긋기
text-indent:들여 쓰기 예]10pt
inline엘리먼트에는 의미 없다
(IE에서만 한번 들여쓰기 됨)
vertical-align:수직방향의 정렬(top,middle,bottom)
주로 img태그에 적용시
block/inline 엘리먼트에 적용시 의미 없다.
수직방향은 여백(margin/padding으로 조정)
<!--height랑 line-height를 같게 주면 정 중앙으로 배치!-->
Paragraph04.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>Paragraph04.html</title>
</head>
<body>
<h2>문단 관련 CSS속성들</h2>
<div>
<h3>컨텐츠 수평방향 정렬</h3>
<div style="background-color: red; text-align: center;">블락 엘리먼트</div>
<span style="background-color:#00ff00; text-align: center">인라인 엘리먼트</span>
</div>
<div>
<p style="border:1px red solid; text-align: justify;">
'비선 실세' 최순실(60·구속기소)씨를 둘러싼 의혹을 수사중인 검찰이 최씨의 딸 정유라(20·개명 전 정유연)씨도 필요하면 소환해 조사하겠다는 방침을 재확인했다.
검찰 특별수사본부(본부장 이영렬 서울중앙지검장) 관계자는 22일 "오늘 이화여대를 압수수색했으니 향후 수사가 진행될 것"이라고 밝혔다.
이 관계자는 "입학이나 학사관리와 관련해 정씨 본인이 직접 관련된 비리 혐의가 있다거나, 꼭 그런 것이 없더라도 조사해야 할 필요성이 있다고 판단되면 정씨를 소환해서 조사할 예정"이라고 말했다.
지난해 이화여대에 입학한 정씨는 체육특기자 입시 과정과 입학 이후 학사관리에서 부당한 특혜를 받았다는 의혹에 휩싸였다. 지난달 시민단체 서민민생대책위원회가 최경희 전 이대 총장과 최씨
모녀를서울중앙지검에 고발하면서 수사 대상에도 올랐다.
논란이 확산하자 교육부가 특별감사를 진행한 결과, 이런 의혹들중 상당수는 사실로 드러나기도 했다.
교육부는 이대가 지침과 달리 면접고사장에 정씨가 금메달을 반입하도록 허가했으며, 정씨가 수업에 거의 제대로 참여하지 않고 출석 대체물을 내지 않았음에도 출석과 학점을 인정해줬다고 발표했다.
</p>
<h3>텍스트 꾸미기</h3>
<span style="text-decoration: overline;">윗줄긋기</span><br />
<span style="text-decoration: underline;">밑줄 긋기</span><br />
<span style="text-decoration: line-through;">가운데선 긋기</span><br />
<a href="http://www.nate.com" style="text-decoration: none;">네이트</a>
<h3>들여쓰기</h3>
<div style="text-indent: 5em;">블락 엘리먼트</div><!--가로로 여백있어서 5칸 띄기 가능 -->
<!--들여쓸 가로 공간이 없음.적용 안됨-->
<span style="text-indent: 5em;">인라인 엘리먼트</span><!--content중심으로 여백이 없는게 인라인 엘리먼트라서 불가능-->
<h3>수직방향 정렬</h3>
<!-- 세로로 움직일 공간이 없음으로 둘다 적용 안됨-->
<div style="background-color: red;vertical-align: middle;height:200px;">블락 엘리먼트</div><!--여백이 없어서 위치시키진 못하지만 블락엘리먼트는 높이(height) 주는게 가능-->
<span style="background-color: yellow;vertical-align:middle;">인라인 엘리먼트</span><br /><!--인라인 엘리먼트는 가로만 건들 수 있어서 높이(height) 주는게 불가능-->
<img src="../Images/button.jpg" width="200" height="200" alt="제품" style="vertical-align: middle;"/>제품 이미지<!--하지만,height를 줬을때 vertical로 높이 중심을 주는게 가능-->
<h3>블락엘리먼트의 컨텐츠 정 가운데 정렬방법</h3>
<div style="background-color: red;height:200px;text-align: center;line-height:200px">블락 엘리먼트</div><!--height랑 line-height를 같게 주면 정 중앙으로 베치!-->
<!--height를 200px주고line-height200px으로 높이를 맞춰주는 것임, 그리고 거기에 text-align:middle로 가로중앙 위치시킴-->
<!--※line-height는 텍스트 라인의 높이를 의미함 행간을 제어할 떄 사용-->
</div>
</body>
</html>결과)
Background05.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>Background05.html</title>
<style>
#div div{/*id가 div인 태그의, 자식의 모든 div태그 싹다 적용(손자도 적용됨),(첫번째 DIV와 두번째 DIV 두 개가 적용됨)*/
width:80%;
height:400px;
background-image: url(../Images/sumnail.png) ;
background-color: #B10D0D;
background-repeat: no-repeat;
}
#div div:first-child{/*div태그 자식의 div태그 중 첫번째 자식만 선택*/
/* css3.0에서 등장*/
background-size: 100% 100%;/* 가로폭 세로폭*/
}
#div div:last-child{/*div태그 자식의 div태그 중 두번째 자식만 선택*/
/* css3.0에서 등장*/
background-size: 30% 50%;/* 가로폭 세로폭*/
}
</style>
</head>
<body>
<h2>배경관련 CSS속성</h2>
<div>
<h2>배경색 지정</h2>
<div style="background-color: red;">블락 엘리먼트</div><!--가로폭 전체의 넓이를 가지는 직사각형 형태, 줄바꿈 일어남-->
<span style="background-color: #00ff00;">인라인 엘리먼트</span><!---->
<h2>배경 이미지 지정</h2>
<!-- 배경색 과 배경이미지 동시에 주면 최종적으로
배경이미지가 적용됨
이미지의 가로 세로 위치는 반복속성이
no-repeat일때 의미 있다.
다시 말해서 repeat-x일때는 x좌표는 의미 없고
repeat-y일때는 y좌표는 의미 없다.
-->
<div style="background-color: yellow; background-image:url(../Images/sumnail.png);width:500px;height: 300px;background-repeat: no-repeat;background-position: 50% 50%;">
다이브 입니다.<!--배경:노란색,이미지 불러오고,가로500px,새로300px, 원래 반복그림이 디폴트라서 no-repeat줌,이미지의 위치는 왼쪽위를 기준점으로 50%,50%에 위치시킴-->
</div>
<div id="div">
<div>첫번째 DIV</div>
<hr/>
<div>두번째 DIV</div>
</div>
<hr/><!--background-position은 왼쪽위부터 기준으로 우측으로 50%가고 사진을 위치 시킴,
/background-size는 padding의 느낌으로 (90%)들어감-->
<!-- 50% 50%(background-position)/30% 30%(background-size) 액자 느낌-->
<div style="width:300px;height:300px;background:url(../Images/sumnail.png) no-repeat rgb(143, 37, 8) 50% 50%/90% 90% ;"></div>
동시에 여러 속성 지정하기
</div>
</div>
</body>
</html>결과)
Border06_1.html
5. 배경관련 속성
background-color:배경색 지정
background-image:배경이미지 지정
background-image:url(이미지경로)
background-repeat:배경이미지의 반복속성 지정
repeat:x,y축으로 배경이미지 반복=>(디폴트)쌍으로 늘어남
repeat-x:x축으로 반복
repeat-y:y축으로 반복
no-repeat:반복 안함
background-position:배경이미지의 위치 지정
background-position:가로위치 세로위치
위치값은 px이나 %로 지정
background-size:사이즈 지정(보통 %로 지정)
※background속성으로 배경이미지 및 반복속성 및
위치를 동시에 줄 수 있다.=>-빼고 한번에 속성 설정 가능
예]
background:url(이미지경로) 반복속성 이미지위치
단, 순서는 상관없다.
Border06_1.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>Border06_1.html</title>
<style>
div div{
width:200px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<h2>box-sizing속성</h2>
<div>가로 세로 200px</div>
<div>가로 세로 200px</div>
<div>가로 세로 200px</div>
<div class="last">가로 세로 240px</div>
<h2>테두리 관련 CSS속성</h2>
<div>
<h3>테두리 스타일</h3>
<div style="border-top-style: dotted;border-bottom-style: dashed;border-left-style: solid;border-right-style: double;">border-style</div>
<h3>테두리 색상</h3>
<div style="border-style:solid;border-top-color: red;border-bottom-color: green;border-left-color: blue;border-right-color: rgb(45, 45, 64);">border-color</div>
<h3>테두리 두께</h3>
<div style="border-style:solid;border-top-width: 5px;border-bottom-width: 10px;border-left-width: 15px;border-right-width: 20px;border-color: red;">border-width</div>
<h3>테두리 색상/두께/스타일 동시지정</h3>
<div style="border:5px red solid">border</div>
<h3>폼의 하위요소 input type="text"계열에 테두리 적용</h3>
<input type="text" style="border:none;border-bottom: 1px green solid;"/>
</div>
</body>
</html>결과)
Border06_2.html
6.테두리 속성
[테두리 모양]
border-style:전체 테두리 모양지정
border-top-style:위쪽 테두리
border-bottom-style:아래쪽 테두리
border-left-style:왼쪽 테두리
border-right-style:오른쪽 테두리
모양에 줄수 있는 속성값:
none:테두리가 없음
dotted:점선
dashed:점선보다 긴 실선
solid:실선
double:이중실선
[테두리 색상]
border-color:전체 테두리 색상지정
border-top-color:위쪽 테두리
border-bottom-color:아래쪽 테두리
border-left-color:왼쪽 테두리
border-right-color:오른쪽 테두리
[테두리 두께]
*주로 px단위로 지정
border-width:전체 테두리 두께지정
border-top-width:위쪽 테두리
border-bottom-width:아래쪽 테두리
border-left-width:왼쪽 테두리
border-right-width:오른쪽 테두리
※테두리의 모양,색상, 두께를 border속성으로
동시에 부여할 수 있다
예]
border:색상 두께 모양
순서는 상관없다
Border06_2.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>Border06_2.html</title>
<style>
div > div{
width:200px;
height: 200px;
}
.radius{
border: 5px green solid;
text-align: center;
line-height: 200px;
/*https://developer.mozilla.org/ko/docs/Web/CSS/border-radius*/
/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 100px 100px;
}
.shadow{
background-color: rgb(255, 0, 0);
text-align: center;
line-height: 200px;
box-shadow: 20px 20px 10px gray;
}
</style>
</head>
<body>
<h2>둥근 테두리 및 그림자</h2>
<div>
<div class="radius">RADIUS</div>
<hr/>
<div class="shadow">SHADOW</div>
</div>
</body>
</html>결과)
Border06_3.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>Border06_3.html</title>
<style>
*{
margin: 0;
padding: 0;
}
div:not(.last){
width:200px;
height: 200px;
text-align: center;
line-height: 200px;
padding: 10px;
border:10px aqua solid
}
div:nth-child(2){
background-color: red;
border:none;
padding: 0;
/* border와 padding도 영역의 크기에 포함됨*/
}
div:nth-child(3){
background-color: green;
/*레이아웃 설계시 테두리 줄때 아래도 함께 */
box-sizing: border-box;
}
div:nth-child(4){
background-color: blue;
box-sizing: content-box;
}
</style>
</head>
<body>
<h2>box-sizing속성</h2>
<div>가로 세로 200px</div>
<div>가로 세로 200px</div>
<div>가로 세로 200px</div>
<div class="last" style="width:240px;height: 240px;background-color: yellow;">가로 세로 240px</div>
</body>
</html>결과)
MarginPadding07.html
8.여백 속성
margin:태그 외부의 여백
margin:상하좌우 모든 여백 지정
margin-top:위쪽 여백
margin-bottom:아래쪽 여백
margin-left:왼쪽 여백
margin-right:오른쪽 여백
padding: 태그와 태그안에 있는 컨텐츠(내용)과의 여백
padding:상하좌우 모든 여백 지정
padding-top:위쪽 여백
padding-bottom:아래쪽 여백
padding-left:왼쪽 여백
padding-right:오른쪽 여백
*서로 여백이 겹칠때 block과 block 사이에서는
큰값을 따른다.
단, 인라인 엘리먼트사이에서는 +연산이 되서
여백이 결정된다.
또한 블락과 인라인에서 margin-top,margin-bottom
을 적용하려면 블락엘리먼트에 주어야 한다.
*margin에는 음수값이 적용되나 padding은 음수값을 주면 0을 준거와 같다
*block엘리먼트에서 컨텐츠의 가로정렬은 text-align으로
수직정령은 padding으로 정렬한다.
(inline엘리먼트는 정렬이 적용 안됨)
*한꺼번에 위쪽,아래쪽,왼쪽,오른쪽등의 여백을 줄때는
margin이나 padding이나
순서가 정해져 있다.
-아래내용은 padding도 동일하다
margin :10px (상 하 좌 우 10px씩 여백)
margin :10px 20px (상하 여백은 10px 좌우 여백은 20px)
margin :10px 5px 30px(상 여백은 10px 좌우 여백은 5px
하 여백은 30px)
margin : 5px 10px 20px 30px
(상(5px) 우(10px) 하(20px) 좌(30px) =>시계방향
MarginPadding07.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>MarginPadding07.html</title>
</head>
<body>
<h2>여백관련 속성</h2>
<div>
<h3>padding</h3>
<div style="border: 1px red solid;box-sizing: border-box;padding-top: 20px;padding-right: 40px;padding-bottom: 60px;padding-left: 80px;">상하좌우 여백 각각 지정(블락엘리먼트)</div>
<hr/>
<div style="border:1px green solid;box-sizing: border-box;padding:40px">상하좌우 여백 동시 지정(블락엘리먼트)</div>
<!-- 왼쪽 여백을 줄때만 컨텐츠가 오른쪽으로 움직인다.
그외 (위/아래/오른쪽)는 텍스트는 그대로 있고
영역이 늘어난다-->
<hr/>
<span style="border:1px green solid;box-sizing: border-box;padding-top: 20px;padding-right: 40px;padding-bottom: 60px;padding-left: 80px;">인라인 엘리먼트</span>
<h3>margin</h3>
<fieldset>
<legend>block과 block</legend>
<!--
block1과 block2는 서로 margin-top 및 margin-bottom이 적용되고
(상하로 배치)
block1과 block2에 margin-left 와 margin-right는
부모 영역과의 여백이다.
그래서 margin-left 와 margin-right를 주면
영역의 가로폭이 줄어 든다.
-->
<div style="border:1px red solid;margin-bottom: 50px;margin-left: 50px;margin-top: 50px;margin-right: 50px;">block1</div>
<div style="border:1px green solid;margin-top: 40px;">block2</div><!--마진 크기 마진 크기가 겹치면 큰값을 두 사이간 기준이 됨-->
</fieldset>
<!--결론은 인라인은 margin-left와 margin-right만 적용된다 -->
<fieldset>
<legend>block과 inline</legend>
<!-- block 에 마진을 주자-->
<div style="border:1px red solid;margin-bottom: 50px;">block</div>
<!-- 인라인도 margin-left는 부모영역과의 여백이다:margin-left만 적용됨 -->
<span style="border:1px green solid;margin-top: 100px;margin-left: 100px;">inline</span>
</fieldset>
<!-- 수직으로 컨텐츠를 정가운데 배치시에는 위쪽하고 아래쪽 padding을 동일하게 주면된다
단,padding을 준 부모영역이 그만큼 늘어난다
-->
<fieldset style="padding-top: 50px;padding-bottom: 50px;">
<legend>inline과 inline</legend>
<!--
인라인 인 경우 margin-top 및 margin-bottom은
부모와 여백을 의미하지만 적용이 안된다.
이때는 부모에서 padding으로 적용한다
-->
<span style="border:1px red solid;margin-top:50px;margin-bottom: 50px;">inline1</span>
<span style="border:1px green solid;">inline2</span>
</fieldset>
<fieldset>
<legend>블락엘리먼트 안의 컨텐츠 정렬</legend>
<!--
수평정렬:text-align:center
수직정렬 height와 line-height값을 동일하게(영역이 늘어나지 않는다)
-->
<div style="width:200px;height:200px;border:5px solid red;box-sizing: border-box;line-height: 200px;text-align: center;">텍스트 정렬</div>
</fieldset>
</div>
</body>
</html>결과)
7.목록 속성
list-style-type : disc;●
circle;○
square;■
decimal;//숫자 1 2 3
lower-roman;//소문자 로마숫자 i ii iii iv
upper-roman;//대문자 " I II III IV
lower-alpha;//소문자 알파벳 a b
upper-alpha;//대문자 알파벳
none;//블릿 제거
list-style-image:url(이미지경로);블롯대신 이미지로 교체
list-style-position:inside;블릿이 li태그 테두리 안으로
들어감
outside;블롯 내어쓰기(기본값)
*목록 태그(ul이나 ol)를 inline 엘리먼트로 만들때
<ul> 이나 <ol>에 display:inilne(display:inline-block)을 적용시키는게 아니라
<li>태그에 적용 시켜야 한다.
위 속성을 적용시키면 list-style-type:none이 동시에 적용되는
효과가 있다.
*display:inline은 모든 block엘리먼트에 적용되는 것으로
block엘리먼트를 inline엘리먼트로 바꿔 준다.
display:inline-block -배치는 가로배치가 되나 블락 엘리먼트의 속성은
유지됨.
List08.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>List08.html</title>
<style>
ul.sport{
border: 1px red solid;
box-sizing: border-box;
list-style-position: inside;
}
ul.sport > li{
border: 1px green solid;
box-sizing: border-box;
}
/*
모양이 안 예쁨
ul.image{
list-style-image: url(../Images/arrow_icon.png);
}*/
ul.image li{
display:flex;
height: 48px;
align-items: center;
}
ul.image > li > div.icon{
width:48px;
height: 48px;
background-image:url(../Images/arrow_icon.png) ;
}
ul.inline1 > li{
/* li를 인라인으로 만들면 블릿이 제거된다. li태그에 설정 */
display:inline;
border: 1px red solid;
box-sizing: border-box;
/* 아래는 적용 안됨- 인라인 엘리먼트니까*/
width: 100px;
height: 100px;
}
ul.inline2{
list-style: none;
}
ul.inline2 > li{
float:left;
border: 1px red solid;
box-sizing: border-box;
/*※가로 배치는 됬지만 블락 얼리먼트의 성격은 그대로.*/
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
ul.inline3 > li{
display: inline-block;
border: 1px red solid;
box-sizing: border-box;
/*
인라인 엘리먼트처럼 가로배치는 되나 블락엘리먼트 성격은
그대로 유지
*/
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*방법2와 유사하다*/
ul.inline4 {
list-style: none;
display: flex;
}
ul.inline4 > li {
border: 1px red solid;
box-sizing: border-box;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
ul.bullet{
border: 1px red solid;
box-sizing: border-box;
list-style: none;
/*패딩은 음수값이 적용이 안된다*/
/*padding-left:0;*//*왼쪽 여백을 더 없애고 싶다*/
}
ul.bullet > li{
border: 1px green solid;
box-sizing: border-box;
margin-left: -50px;/*margin 은 음수값 가능*/
}
</style>
</head>
<body>
<h2>목록관련 CSS속성</h2>
<div>
<fieldset>
<legend>당신이 좋아하는 스포츠는?</legend>
<ul class="sport">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<fieldset>
<legend>당신이 좋아하는 스포츠는?</legend>
<ul class="image">
<li><div class="icon"></div><div>축구</div></li>
<li><div class="icon"></div><div>배구</div></li>
<li><div class="icon"></div><div>야구</div></li>
</ul>
</fieldset>
<fieldset>
<legend>당신이 좋아하는 스포츠는?(li를 인라인으로)[방법1]</legend>
<ul class="inline1">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<fieldset>
<legend>당신이 좋아하는 스포츠는?(li를 인라인으로)[방법2]</legend>
<ul class="inline2">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<fieldset>
<legend>당신이 좋아하는 스포츠는?(li를 인라인으로)[방법3]</legend>
<ul class="inline3">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<fieldset>
<legend>당신이 좋아하는 스포츠는?(li를 인라인으로)[방법4]</legend>
<ul class="inline4">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<fieldset class="fieldset">
<legend>당신이 좋아하는 스포츠는?(블릿만 제거)</legend>
<ul class="bullet">
<li>축구</li>
<li>배구</li>
<li>야구</li>
</ul>
</fieldset>
<style>
div > fieldset:last-child > ul > li{
display: inline;
border-right: 1px gray solid;
padding-right: 5px;
}
div > fieldset:last-child > ul > li:last-child{
border:none;
}
a{
text-decoration: none;
color:black
}
a:hover{
text-decoration: underline;
}
</style>
<fieldset>
<legend>UL을 메뉴로 구현</legend>
<ul>
<li><a href="https://www.nate.com">회원가입</a></li>
<li>공지사항</li>
<li>로그인</li>
<li>게시판</li>
</ul>
</fieldset>
</div>
</body>
</html>결과)
JavaScript
BOM10_1.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>BOM10_1.html</title>
</head>
<body>
<h2>BOM의 최상위 객체 window</h2>
<script>
var fn={
login:function(){
//메시지 대화상자:window.alert("뿌려줄 메시지");
var user = document.querySelector('#user');
if(user.value===''){
alert('아이디를 입력하세요?');
user.focus();
}
},
drop:()=>{
//확인 대화상자:boolean window.confirm("확인메시지");
var flag = confirm('퇴실하실래요?');
console.log(flag);
if(flag){
//퇴실처리 로직.....
console.log('퇴실처리 했어요');
}
},
insertName:function(){
//입력 대화상자:String window.prompt("메시지","기본값");
//주로 사용 안함.
var name = prompt('이름을 입력하세요?','');
alert('당신의 이름은 '+name+' 이군요');
},
insertAge:age=>{
var age = prompt('나이를 입력하세요?',age);
console.log(typeof age);
alert('당신의 10년후 나이는 \r\n'+(parseInt(age)+10)+' 이군요');
}
};
</script>
<fieldset>
<legend>alert()/confirm()/prompt()</legend>
아이디 <input type="text" id="user" />
<input type="button" value="로그인" onclick="fn.login();"/>
<input type="button" value="퇴실" onclick="fn.drop();" />
<input type="button" value="입력" onclick="fn.insertName()"/>
<input type="button" value="나이입력" onclick="fn.insertAge(1)"/>
</fieldset>
<script>
/*
팝업창:광고 나 공지사항 게시할때
window.open("팝업으로 띄울 페이지 경로",
"팝업창명",
"팝업창 모양을 설정하기 위한 속성들");
- open()메소드는 윈도우 객체를 반환
- 팝업창을 여러개 띄울때 팝업창명이 같으면
하나의 창에 계속 뿌려진다.
*팝업창 모양 설정을 위한 속성들
width:팝업창의 가로폭
height:팝업창의 세로크기
top:팝업창을 띄울 y좌표(모니터 기준)
left:팝업창을 띄울 x좌표(모니터 기준)
//아래 속성값들의
기본값은 no(0)
enable시 yes(1)를 주면됨
toolbar
location
menubar
scrollbars :auto가 추가됨(팝업창 안의 내용이
많으면 자동으로 스크롤바가 생김)
resizable(파이어폭스는 적용 안됨)
*/
//1]기본 팝업창
/*var winObj= window.open('https://www.daum.net','popup1','width=400,height=400,left=100,top=100')
console.log('%O',winObj);
window.open('DOM09_1.html','popup2','width=400,height=400,left=150,top=150');
window.open('DOM09_2.html','popup3','width=400,height=400,left=200,top=200');
*/
//팝업창 모니터 정가운데 띄우기
var width = window.screen.width;
var height = window.screen.height;
console.log('모니터 해상도:가로-%s,세로-%s',width,height);
console.log('모니터 해상도(트레이바 제외):가로-%s,세로-%s',screen.availWidth,screen.availHeight)
var xpos = width/2 - 200;
var ypos = height/2 - 200;
//var winObj= window.open('https://www.daum.net','popup1','width=400,height=400,left='+xpos+',top='+ypos);
//2]팝업창 닫기
//window객체의 close()함수로 창 닫기
//self.close();현재 보고있는 웹브라우저를 닫기]
function popupClose(){
//self.close();//현재 페이지가 표시된 브라우저 닫기(현재 최신브라우저에는 적용안됨)
winObj.close();//해당 팝업창이 닫힘
}
//3]우편번호 팝업창 띄우기
function zipOpen(){
window.open('Zip.html','zipcode','width=400,height=400,left='+xpos+',top='+ypos);
}
</script>
<fieldset>
<legend>open()/close()/opener속성</legend>
<button onclick="popupClose();">부모에서 팝업창 닫기</button>
<hr/>
<table style="border-spacing:1px;background-color:green">
<tr style="background-color:white">
<td>우편번호</td>
<td>
<input type="text" id="zip1" size="3" maxlength="3" /> -
<input type="text" id="zip2" size="3" maxlength="3" />
<input type="button" value="우편번호" onclick="zipOpen();" />
</td>
</tr>
<tr style="background-color:white">
<td>기본 주소</td>
<td><input type="text" size="50" id="addr" /></td>
</tr>
<tr style="background-color:white">
<td>상세 주소</td>
<td><input type="text" size="50" id="detail" /></td>
</tr>
</table>
</fieldset>
<!--https://postcode.map.daum.net/guide#usage-->
<link rel="stylesheet" href="//t1.daumcdn.net/postcode/cssjs/guide/1680590229301/guide.v2.min.css">
<fieldset>
<legend>카카오 우편번호 API 적용하기</legend>
<input type="text" id="sample4_postcode" class="d_form mini" placeholder="우편번호">
<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기" class="d_btn"><br/>
<input type="text" id="sample4_roadAddress" class="d_form std" placeholder="도로명주소">
<input type="text" id="sample4_jibunAddress" class="d_form std" placeholder="지번주소"><br/>
<span id="guide" style="color:#999;display:none"></span>
<input type="text" id="sample4_detailAddress" class="d_form" placeholder="상세주소">
<input type="text" id="sample4_extraAddress" class="d_form" placeholder="참고항목" hidden>
</fieldset>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample4_execDaumPostcode() {
var themeObj = {
bgColor: "#162525", //바탕 배경색
searchBgColor: "#162525", //검색창 배경색
contentBgColor: "#162525", //본문 배경색(검색결과,결과없음,첫화면,검색서제스트)
pageBgColor: "#162525", //페이지 배경색
textColor: "#FFFFFF", //기본 글자색
queryTextColor: "#FFFFFF", //검색창 글자색
postcodeTextColor: "#F4E10D", //우편번호 글자색
//emphTextColor: "", //강조 글자색
outlineColor: "#444444" //테두리
};
new daum.Postcode({
theme:themeObj,
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample4_postcode').value = data.zonecode;
document.getElementById("sample4_roadAddress").value = roadAddr;
document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("sample4_extraAddress").value = extraRoadAddr;
} else {
document.getElementById("sample4_extraAddress").value = '';
}
var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
console.log('guideTextBox:',guideTextBox);
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
}
}
}).open();
}
</script>
<fieldset>
<legend>setTimeout()/clearTimeout(),setInterval()/clearInterval()</legend>
<h4>일정 시간후 함수 실행</h4>
<input type="button" value="5초후 함수 실행" onclick='fnCallAfter("T");' />
<input type="button" value="함수 호출 중지" onclick="fnCallBreak(1);" />
<h4>일정시간마다 함수실행</h4>
<input type="button" value="3초마다 함수 실행" onclick="fnCallAfter('I');" />
<input type="button" value="함수 호출 중지" onclick="fnCallBreak(2);" />
<h4>시분초 표시</h4>
<span id="clock" style="color:Green;font-size:1.8em;font-weight:bold"></span>
</fieldset>
<script>
/*
var 타이머 식별자=setTimeout("함수명()" 혹은 함수표현식,1000분의 1초단위)
:타이머 식별자 반환
:특정시간이 지난후 어떤 함수를 한번만
실행시키고자 할때 사용하는 메소드
타이머 객체로 실행 중지시
clearTimeout(타이머식별자)호출
타이머 변수=setInterval("함수명()" 혹은 함수표현식,1000분의 1초)
: 매개변수에 주어진 시간이 되면 해당 함수가
계속 호출됨
해제시- clearInterval(타이머 변수);
*/
var timerOnce,timerContinue;
function fnCallAfter(flag){
if(flag==='T'){
//첫번째 인자를 함수표현식으로 전달
//timerOnce = setTimeout(function(){console.log('5초후 한번 실행');},5000);
//첫번째 인자를 별도의 외부함수로 전달
timerOnce = setTimeout('fnOnce()',5000);
}
else{
//timerContinue=setInterval(function(){console.log('3초마다 실행');},3000);
timerContinue=setInterval('fnContinue()',3000);
}
}/////////////////
function fnCallBreak(flag){
if(flag===1) clearTimeout(timerOnce);
else clearInterval(timerContinue);
}
function fnOnce(){
console.log('5초후 한번 실행');
}
function fnContinue(){
console.log('3초마다 실행');
}
//문]현재 페이지가 웹브라우저에 로드시 'clock'이라는 아이디를
// 가진 span태그에 ?시 ?분 ?초를 표시하되 1초마다 갱신 되어야한다.
var span = document.querySelector("#clock");
window.setInterval(()=>{
var date = new Date();
span.textContent=date.getHours()+"시 "+date.getMinutes()+"분 "+date.getSeconds()+"초";},1000);
</script>
<fieldset>
<legend>encodeURIComponent()/decodeURIComponent()/isNaN()/pasreInt()/parseFloat()/eval()</legend>
</fieldset>
<script>
/*
escape() :한글이나 일본어및 중국어등 2바이트로
표현하는 언어들을 UTF-8형식으로 인코딩
숫자나 영문자은 아스키코드(ANSI)로 표현함으로 인코딩이 안됨.
더 정확히 말하면 16진수 4자리로 표현하는 유니코드로 인코딩 됨.
에를들면 빈 공백은 %20으로 인코딩 처리됨.
Ajax나 jQuery Ajax에서 한글 처리시 주로 사용.
*/
var escapeString ='안녕 가! HELLO 123456789';
console.log(escape(escapeString));//%uC548%uB155%20%uAC00%21%20HELLO%20123456789
//unescape():UTF-8형식으로 인코딩된 값을 디코딩
console.log(unescape('%uC548%uB155%20%uAC00%21%20HELLO%20123456789'));
/*
[encodeURI() / decodeURI()]
최소한의 문자만 인코딩
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
상기 문자는 인코딩하지 않음.
※[encodeURIComponent() / decodeURIComponent()]-추천
알파벳과 숫자 외의, 대부분의 문자를 모두 인코딩
[escape() / unescape()]
encodeURI() 와 encodeURIComponent() 의 중간 정도의 범위로
문자를 인코딩
*/
var query = 'name=가길동&key=you&age=30';
console.log('encodeURI:',encodeURI(query));
console.log('escape:',escape(query));
console.log('encodeURIComponent:',encodeURIComponent(query));
/*
isNaN():IS NOT A NUMBER
숫자인지 아닌지 판단하는 함수
숫자라면 false 숫자가 아니면 true반환
*/
isNaN('100A')?console.log('숫자가 아니다'):console.log('숫자다');
isNaN('가100')?console.log('숫자가 아니다'):console.log('숫자다');
isNaN('100')?console.log('숫자가 아니다'):console.log('숫자다');
/*
parseInt(): 숫자 부분만 반환해주는 함수
단, 숫자가 아닌 문자로 시작하면 NaN반환.
*/
console.log(parseInt('100A'));
console.log(parseInt('10A20'));
console.log(parseInt('가10A20'));//NaN(Not a Number)반환
console.log(parseInt('3.14'));//3
console.log(parseFloat('3.14'));//3.14
//eval('문자열'):매개변수에 있는 값을 자바스크립트 코드로 해석
//문자열을 자스코드로 실행한다.
console.log('alert("메시지 대화상자");');
//eval('alert("메시지 대화상자");');
//※eval()은 문자열을 자스로 그대로 실행하기 때문에 보안상 위험하다.
// 고로 사용하지 않는 것이 좋다
var user="{\"name\":\"가길동\",\"years\":20}";//스트링 객체에는 name이 없다그래서 undefined
console.log(user.name);//undefined
//eval()로 적용시킬때는 반드시 ()로 감싸야한다
//var userObj=eval("({\"name\":\"가길동\",\"years\":20})");
//console.log(userObj.name);
var userObj=JSON.parse(user);
console.log(userObj.name);
console.log(userObj.years);
</script>
<h2>BOM10_2.htnl과 테스트용 코드</h2>
<hr/>
<button onclick="location.replace('BOM10_2.html')">location객체의 replace()함수</button>
<button onclick="history.go(-1)">history객체의 go(-1)함수</button>
<script>
//이전 페이지 URL얻기:document.referrer
console.log('이전 페이지 URL is:',document.referrer);
</script>
</body>
</html>결과)
