1 교시
1. box model
=> 태그로 표현되는 하나의 영역
1) width : 컨텐츠의 너비
2) height : 컨텐츠의 높이
3) box-sizing : box의 크기를 설정하는 방법
값으로는 content-box 와 border-box
content-box를 설정하면 width 와 height가 컨텐츠의 크기로만 설정되고 border-box를 설정하면 borser의 너비까지 포함
4) max-height, max-width, min-height, min-width
=> 컨텐츠의 최대 최소 크기를 설정
=> 반응형 웹 디자인에서 너비가 너무 작아지면 컨텐츠를 제대로 표시할 수 없어서 min-width를 설정해서 일정 크기 이하로는 작아지지 않도록 설정
5) overflow
=> 영역의 크기에 비해서 컨텐츠의 크기가 더 클 때 어떻게 할 것인지 설정
=> visible, hidden, scroll, auto
=> 최근에는 많은 양의 텍스트의 경우 일부분만 보여주고 더 보기 버튼을 만들어서 나머지 부분을 출력할 수 있도록 하는 편이다.
6) padding
=> 경계선과 컨텐츠 사이의 여백
=> padding하고 값을 설정하면 상하좌우 동일하게 설정
=> padding-right, padding-left, padding-top, paddingbottom을 이용해서 한 쪽 방향의 여백을 설정할 수 있다.
7) margin
=> 경계선과 경계선 사이의 여백
=> 설정 방법은 padding과 같다.
=> margin은 중첩되는 경우 큰 값 하나만 적용
<style>
#aa(margin-bottom:30px;)
#bb(margin-top:60px;) // 이거 하나만 적용됨
</style>
<div id="aa">영역</div>
<div id="bb">영역</div>
8) 스타일시트를 보다보면
*{
padding:0;
margin:0;
}
=> 브라우저 간의 호환성 문제 때문에 설정
호환 모드: width 나 height에 border + padding + margin의 크기를 포함
표준 모드: width 나 height에 border, padding, margin의 크기를 포함하지 않음.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<h1>CSS</h1>
<ul>
<li><a href="box.html">박스모델</a></li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스 모델</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- div는 블록 영역이고 span은 인라인 영역
id를 부여한 이유는 각각을 구분해서 사용하기 위해서 -->
<div id="box1">박스모델</div>
<div id="box2">박스모델</div>
</body>
</html>
style.css 파일을 css 폴더안에 만들기
#box1{
border:2px solid blue;
width:100px;
height:50px;
padding:10px;
margin:30px;
background-color:papayawhip;
}
#box2{
width:100px;
height:50px;
padding:10px;
margin:30px;
border:1px solid red;
background-color:blue;
}
2. border
=> 경계선
1) border-style : 선 모양
none, dotted, sashed, solid, double, groove, ridge, inset, outset
=> 각 방향에 따라 다르게 설정하고자 하면 border-left-style, border-right-style, border-top-style, border-bottom-styel 로 설정
=> 이 설정을 하지 않으면 다른 설정은 무시
2) border-width : 선 두께
=> 방향에 따라 다르게 설정 가능
2) border-color : 선 색상
=> 투명(transparent) 가능
=> 방향에 따라 다르게 설정 가능
4) border : 선두께 선스타일 선색상 으로 한번에 설정하는 것도 가능
#box1{
border:2px solid blue;
width:100px;
height:50px;
padding:10px;
margin:30px;
background-color:papayawhip;
}
#box1:hover{
border:10px inset red;
}
#box2:active{
width:100px;
height:50px;
border-style:solid;
border-width:1px;
border-top-color:red;
border-left-color:red;
border-right-color:red;
}
5) border-radius
=> 경계선에 라운드 효과를 설정할 수 있다.
=> 4개 방향으로 각각의 값을 설정
=> 원 모양이나 반원 모양 등을 생성하는 것이 가능
2~3 교시
6) border-image-source
=> 경계선에 이미지를 설정
=> url(파일경로)
=> img 태그나 배경으로 설정되는 경우는 이미지의 크기를 조절할 수 있지만 list나 border에 이미지를 설정하면 크기 조절이 안된다.
=> 이미지를 만들 때 적절한 크기로 만들어 주어야 한다.
7) border-image-slice
=> 시계방향으로 4개의 값을 설정해서 이미지를 잘라내는 옵션
8) border-image-repeat
=> 반복 여부를 설정하는 것으로 stretch, repeat, round, space
9) border-image-width
=> 두께
10) border-image-outset
=> 경계선 바깥으로 나올 이미지의 거리
3. resize
=> 크기 조절 여부를 설정하는 것으로 horizontal(수평), vertical(수직), both
4. box-shadow
=> 2개의 값과 색상을 설정
=> 첫번째 값은 x offset
=> 두번째 값은 y offset
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>경계선</title>
<style>
li{
font:30px "Arial Black";
color:#333333;
margin:20px;
width:100px;
height:100px;
background-color:#cc6600;
text-align:center;
list-style:none;
border-radius:50px 50px 50px 50px;
float:left;
}
#java3{
border-radius:200px 50px 0px 50px;
}
/* body 태그 내의 모든 요소에 적용 */
body{
font: 12px"Arial";
margin:20px;
}
/* h1 태그 내의 a 태그에 적용 */
h1 a{
font-size:40px;
text-decoration:none; /* 밑줄 없애기 */
color:#000000; /* 글자 색상 설정 */
width:200px; /* 너비 설정 */
padding:30px; /* 내부 여백 설정 */
background-color:#eee; /* 배경색 설정 */
border:1px solid rgb(18,52,86); /* 경계선 설정 */
border-radius:15px; /* 경계선에 라운드 설정*/
box-shadow: inset 0px 0px 20px 15px rgba(18,52,86,0.8);
}
h1 a:hover{ /* 마우스오버 시 색상변경*/
background-color:#aaffff;
}
h1 a:active{ /* 클릭시 배경확장 */
background-color:#33ffff;
padding:32px;
}
</style>
<script>
window.onload = function(){
document.getElementById("btn").addEventListener("click", function(){
alert("클릭");
})
}
</script>
</head>
<body>
<h1>
<a href="#" id="btn">대한민국</a>
</h1>
<ul>
<li id="java1">J</li>
<li id="java2">A</li>
<li id="java3">V</li>
<li id="java4">A</li>
</ul>
</body>
</html>
5. display
=> 요소의 성격을 변경해주는 속성
1) block : 블록 요소가 된다. - 주위에 다른 컨텐츠가 배치될 수 없다.
2) inline : 인라인 요소가 된다. - 주위에 다른 컨텐츠가 배치될 수 있다.
3) inline-block : 박스를 인라인 요소로 변경하고 줄 바꿈이 일어나지 않도록 해주는 설정
4) none : 박스가 보여지지 않음
6. table을 출력 시 고려 사항
=> table에서 많은 행을 출력해야 하는 경우 세로 방향 영역의 크기를 설정하고 스크롤 바를 같이 출력하는 것이 좋다.
table 아래에 다른 컨텐츠가 잇다면 하단으로 많이 내려갸야 컨텐츠를 확인할 수 있기 때문이다.
=> 타이틀은 고정해서 출력하는 것이 좋다.
하단으로 이동하게 되면 값은 보이지만 타이틀이 보이지 않아서 다시 위로 올라가야 하는 불편함이 발생할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타이틀 고정</title>
<style>
table, td{
border:1px solid black;
width:400px;
}
td{
width:200px;
}
div{
width:420px;
height:100px;
overflow:auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>종목</td>
<td>선수</td>
</tr>
</table>
<div>
<table>
<tbody>
<tr>
<td>야구</td>
<td>류현진</td>
</tr>
<tr>
<td>축구</td>
<td>붐근차</td>
</tr>
<tr>
<td>농구</td>
<td>자모란트</td>
</tr>
<tr>
<td>배구</td>
<td>김연경</td>
</tr>
<tr>
<td>당구</td>
<td>바비조</td>
</tr>
<tr>
<td>바둑</td>
<td>알파고</td>
</tr>
<tr>
<td>미식축구</td>
<td>오델베컴주니어</td>
</tr>
<tr>
<td>테니스</td>
<td>조코비치</td>
</tr>
<tr>
<td>아이스하키</td>
<td>웨인 그레츠키</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
4 교시
7. floating
=> 박스를 화면에 떠 있는 형태로 만드는 것
영역만 차지하고 다른 컨텐츠들은 없는 것처럼 배치가 된다.
=> left, right, none, inherit
=> 블록 요소를 인라인 형태로 배치할 때 display속성을 이용하기도 하지만 float:left 이런식으로 적용해서 배치하기도 한다.
=> left로 설정하면 뒤에 나오는 내용은 블록의 윗변의 오른쪽에서 부터 시작하고 right로 설정하면 윗변의 왼쪽에서부터 시작
=> float 해제
clear:none|ldft|right|both
overflow:auto | hidden
float: left | right
=> float 속성을 이용해서 다단 문서나 메뉴 만들 때 많이 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>floating</title>
<style>
#floatdiv{
height:100px;
background-color:papayawhip;
margin-right:5px;
float:left;
}
</style>
</head>
<body>
<div id="floatdiv">안녕하세요. 반갑습니다.</div>
<p>플로팅을 알아보고 있습니다.</p>
<p>플로팅은 css에서 중요하고 어렵습니다.</p>
</body>
</html>
8. position
=> 출력 방식을 설정
=> 기본값은 static 인데 요소들을 순서대로 배치하는 모드로 이 때는 요소의 시작위치를 변경할 수 없다.
=> relative를 설정하면 요소들을 다른 요소와의 관계를 이용해서 배치하는데 시작 위치를 변경할 수 있다.
=> absolute를 설정하면 모든 요소들의 시작위치를 브라우저의 좌상단을 기준으로 지정할 수 있다.
=> fixed 는 고정형태로 absolute와 유사한데 문서가 스크롤 되면 고정이 되서 구형 브라우저에서는 문제가 발생
=> 시작위치는 left, top, right, bottom 속성을 이용해서 배치 가능
9. transition animation
=> transition : 하나의 스타일에서 다른 스타일로 부드럽게 변경해주는 것
transition-property:애니메여션을 적용할 속성을 설정 - all을 지정하면 모든 속성
transition-duration:애니메이션 적용 시간
transition-timing-function:인터폴레이션 효과 설정 - ease, linear, ease-in, ease-out
transition-timing-delay: 애니메이션을 딜레이시키는 시간
=> 벤터프리픽스 이요
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션</title>
<style>
#transition{
width:100px;
height:100px;
background-color:red;
}
#transition:hover{
background-color:blue;
width:150px;
margin-left:100px;
transition-property:all;
transition-duration:10s;
}
</style>
</head>
<body>
<div id="transition">애니메이션</div>
</body>
</html>
10. transform
=> 원본의 크기나 좌표 또는 각도를 변환
1) 이동
translate(x축 이동값, y축 이동값)
2) 크기변화
scale(가로크기 변화배수, 세로크기 변화배수)
3) 회전
rotate(각도deg)
4) 비틀기
skew(x축, y축)
5 교시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 갤러리</title>
<style>
/* list 앞의 기호를 삭제 */
ul{
list-style-type:none;
}
/* 목록들을 한 줄로 배치 */
li{
float:left;
margin-right:10px;
}
/* 이미지 설정 */
img{
width:200px;
height:150px;
box-shadow:2px 2px 2px rgba(0,0,0,.4);
}
/* 이미지 위에 마우스가 올라가면 그림자를 크게 설정*/
img:hover{
box-shadow:6px 6px 6px rgba(0,0,0,.4);
}
/* 이미지를 눌렀을 때 트랜스톰 적용 */
a:focus img{
transform:scale(1.5, 1.5) rotate(-10deg);
}
</style>
</head>
<body>
<ul>
<li><a href="">
<img src="images/anchovies.jpg" id="image1" alt="이미지"/></a></li>
<li><a href="">
<img src="images/jellyfish1.jpg" id="image2" alt="이미지"/></a></li>
<li><a href="">
<img src="images/bluejellyfish.jpg" id="image3" alt="이미지"/></a></li>
<li><a href="">
<img src="images/seadragon.jpg" id="image4" alt="이미지"/></a></li>
</ul>
</body>
</html>
11. Keyframe Animation
=> transition은 시작과 마지막 2가지 값만 설정
=> keyframe Animation 은 중간 값 설정이 가능
@-webkit-keyframes 애니메이션이름{
from{시작값}
to{종료값}
}
=> 중간 중간에 백분율로 다른 값 설정하는 것이 가능
-webkit-animaition-name : 이름
-webkit-animaition-timing-fuction : 인터폴레이션 효과
-webkit-animaition-iteration-count : 반복횟수(infinite를 설정하면 무한반복)
-webkit-animaition-duration : 시간
-webkit-animaition-direction : alternate(반대방향으로도 애니메이션이 설정됨)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 갤러리</title>
<style>
/* list 앞의 기호를 삭제 */
ul{
list-style-type:none;
width:1000px;
height:100px;
-webkit-perspective:600;
}
/* 목록들을 한 줄로 배치 */
li{
float:left;
margin-right:10px;
-webkit-transform:rotateY(45deg);
}
/* 이미지 설정 */
img{
width:200px;
height:150px;
box-shadow:2px 2px 2px rgba(0,0,0,.4);
}
/* 이미지 위에 마우스가 올라가면 그림자를 크게 설정*/
img:hover{
box-shadow:6px 6px 6px rgba(0,0,0,.4);
}
/* 이미지를 눌렀을 때 트랜스톰 적용 */
a:focus img{
transform:scale(1.5, 1.5) rotate(-10deg);
}
@-webkit-keyframes keyany{
from{
transform:rotate(0deg);
}50%{
left:500px;
}to{
left:500px;
transform:rotate(1800deg);
}
}
#keyframe{
/* float 해제 */
clear:both;
position:absolute;
width:50px;
height:50px;
/* 키 프레임 에니메이션 설정 */
-webkit-animation-name:keyany;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
</style>
</head>
<body>
<ul>
<li><a href="">
<img src="images/anchovies.jpg" id="image1" alt="이미지"/></a></li>
<li><a href="">
<img src="images/jellyfish1.jpg" id="image2" alt="이미지"/></a></li>
<li><a href="">
<img src="images/bluejellyfish.jpg" id="image3" alt="이미지"/></a></li>
<li><a href="">
<img src="images/seadragon.jpg" id="image4" alt="이미지"/></a></li>
</ul>
<div id="keyframe"><img src="images/purpledot.png" />
</div>
</body>
</html>
12. 3D 변환 가능
=> scaleX, scaleY, scaleZ, translateX, translateY, translateZ, rotateX, rotateY, rotateZ
6~7 교시
** 회원가입 폼 디자인
=> EMAIL : 한 줄 입력 -> 오른쪽에 중복확인 버튼 배치
마우스오버 그림자
클릭한 상태 그림자
=> PASSWORD : 한 줄 입력
마우스오버 그림자
클릭한 상태 그림자
=> PASSWORD CHECK : 한 줄 입력
password를 입력해야지만 보이게...
마우스오버 그림자
클릭한 상태 그림자
다음페이지에
하고 싶은 메시지: 여러줄 입력(지금 설정하지 않으셔도 됩니다.)
성별 : 필수
국가 : 필수
연령대 : 10, 20, 30, 40, 50, 60, 그 이상
메시지 수신 설정: 메일, SMS : 선택
뒤로, 넘기기(넘기기시 그냥 넘기시면 mail 수신은 자동 동의라고 메시지 띄우기)
=> form에는 id를 반드시 설정
=> 유효성 검사를 수행할려면 id를 설정
=> 서버에게 전송해야하는 데이터는 name을 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일링</title>
<style>
h2{
text-align:center;
}
/* 목록 기호 삭제*/
ul{
list-style-type:none;
}
/* 목록의 floating 해제*/
li{
clear:both;
}
/* form 설정 */
form{
width:50em; /*50글자 정도 크기*/
border:1px solid #666666;
border-radius: 10px;
box-shadow:.2em .2em .5em #999;
background-color:#d0e9f6;
padding: 1em;
overflow:hidden;
}
#email:hover{
box-shadow:6px 6px 6px rgba(0,0,0,.4);
}
#userpw:hover{
box-shadow:6px 6px 6px rgba(0,0,0,.4);
}
/* label 설정*/
label{
display:block;
float:left;
width:10em;
text-align:right;
margin-right:.5em;
color:#04699d;
}
/* 한 줄 글상자 스타일 수정 */
.textinput{
width:30em;
height:2em;
border:1px solid #666666;
margin-bottom:1em;
}
/* 여러 줄 글 상자 스타일 설정 */
textarea{
display:block;
width:30em;
height:5em;
border:1px solid #666666;
margin-bottom:1em;
line-height:1.23;
overflow:auto;
resize:none;
}
/* 입력 란의 글자 모양 설정 */
.textinput, textarea{
font-family:Georgia, Times, sefif;
font-size:0.875em;
}
/* fieldset과 legend 설정 */
fieldset{
margin:0;
padding:0;
border:none;
}
legend{
display:block;
width:10em;
float:left;
margin-right:.5em;
text-align:right;
color:#04699d;
}
/* 라디오 버튼과 체크 박스 설정 */
#genders label, #message label{
colol:#000000;
display:inline;
float:none;
text-align:inherit;
width:auto;
font-weight:normal;
background-color:inherit;
}
/* genders 라는 id를 가진 ul 태그 안의 li 태그 */
#genders ul li{
display:inline;
margon-bottom:0;
}
#message ul li{
display:inline;
margon-bottom:0;
}
#genders, #message{
margin-top:1em;
}
/* 속성 선택자를 이용햇 ㅓ버튼의 스타일을 설정 */
input[type="button"]{
display:block;
width:10em;
height:2em;
float:right;
background:white;
font-size:inherit;
border:1px solid #04699d;
border-radius:4;x;
border-shadow:2px 2px 3px rgba(0,0,0,.5);
}
input[type="submit"], input[type="reset"]{
display:inline;
width:10em;
height:2em;
background:white;
font-size:inherit;
border:1px solid #04699d;
border-radius:4;x;
border-shadow:2px 2px 3px rgba(0,0,0,.5);
margin-top:1em;
}
input[type="submit"]{
margin-left:10.5em;
margin-right:1em;
color:#cc0000;
font-wight:900;
}
</style>
</head>
<body>
<form method="post" action="server.jsp" id="registerform" enctype="multipart/form-data">
<h2>회원가입</h2>
<ul>
<li><label for="email">EMAIL</label>
<input type="text" id="email" name="email" class="textinput"/>
<input type="button" id="emailchechbnt" value="중복확인"/>
</li>
<li><label for="userpw">비밀번호</label>
<input type="password" id="userpw" name="userpw" class="textinput"/>
</li>
<!-- 여러 줄 글상자 -->
<li><label for="story">하고싶은이야기</label>
<textarea id="story" name="story" class="story" cols="30" rows="5"></textarea>
</li>
<!-- 필수 선택
항목이 여러 개 일 대는 select
항목의 개수가 적을 때는 radio -->
<li>
<label for="education">학력</label>
<select id="education" name="education" class="education">
<option value="1">중졸</option>
<option value="2">고졸</option>
<option value="3" selected="selected">대졸</option>
</select>
<fieldset id="genders">
<legend>성별</legend>
<ul>
<li><label for="man">
<input type="radio" name="gender" value="man" id="man" checked="checked"/>남자
</label></li>
<li><label for="woman">
<input type="radio" name="gender" value="woman" id="woman"/>여자
</label></li>
</ul>
</fieldset>
</li>
<!-- 다중 선택 : checkbox 나 select를 사용할 대는 multiple 속성 설정 -->
<li>
<fieldset id="message">
<legend>메시지 수신 설정</legend>
<ul>
<li>
<label>
<input type="checkbox" name="accept" id="acceptemail" value="acceptemail"/>메일 수신 허용
</label></li>
</ul>
</fieldset>
</li>
<li>
<fieldset id="message">
<legend>SMS 수신 설정</legend>
<ul>
<li>
<label>
<input type="checkbox" name="accept" id="acceptsms" value="acceptsms"/>SMS 수신 허용
</label></li>
</ul>
</fieldset>
</li>
<!-- 서버전송과 작성 취소 버튼 -->
<li class="buttons">
<input type="submit" value="회원가입"/>
<input type="reset" value="작성취소"/>
</li>
</ul>
</form>
</body>
</html> |