160404: 16회차
종료하기 전 티스토리 네이버 로그아웃 할 것
1. 툴
동일
추가시:
2. 폴더
동일
추가시:
3. 사용할 사이트
동일
추가시:
4. 공부하는 것
WAS 복습하는 중
쓰타일 - 썁 이랑 쩜
썁은 아이디!
쩜은 클래스
쓰는 법은 그냥 <p id = '아이디'> 랑 <p class = "클래스"> 하면 됨 ㅇㅇ
이제 링크할거임
재미있는 - 우리의친구가 아닌 - 것
사실 이거 저번주에 라이트하게 이미지 파일로 해봄
a href 해가지고 갖다놓는거...를 했었나? -_-);
어 해봤구나 ㅋㅋㅋ img src로 해봄 ㅋㅋㅋㅋ
alt라는 건 이미지가 안 뜰때 엑박 대신 이 문장 띄우는거임 ㅇㅇ
--------------------------------------------------------------------------여기까지 복습
이제 Table 할 거임
행하고 열을 일단 외워야합니다.
행: <tr>- 테이블 로우
열: <td> - 테이블 어... 왜 셀인데 d요? -.- 어쨌든 테이블...디파인즈 어 쎌...
<tr> <td></td> <td></td> <td></td> </tr>
1행 3열
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
2행 3열
이런 식으로 씀
<table border="1" style="width:100%">
이런 것은 줄하고 쓰타일 넣는거임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>David</td>
<td>Bowie</td>
<td>'ㅅ')b</td>
</tr>
<tr>
<td>데이빗</td>
<td>이 글씨 크기</td>
<td>조정을좀</td>
</tr>
<tr>
<td>해야겠다</td>
<td>그리고 왜</td>
<td>한글이 더작아 무시하냐</td>
</tr>
</table>
</body>
</html>
이거는
| David | Bowie | 'ㅅ')b |
| 데이빗 | 이 글씨 크기 | 조정을좀 |
| 해야겠다 | 그리고 왜 | 한글이 더작아 무시하냐 |
그냥 이런 식으로 출력이 되어지니까 이쁘게 보더를 넣어줍시다.
<table border ="1">
| David | Bowie | 'ㅅ')b |
| 데이빗 | 이 글씨 크기 | 조정을좀 |
| 해야겠다 | 그리고 왜 | 한글이 더작아 무시하냐 |
이렇게 나옴
더이쁘게
| David | Bowie | 'ㅅ')b |
| 데이빗 | 이 글씨 크기 | 조정을좀 |
| 해야겠다 | 그리고 왜 | 한글이 더작아 무시하냐 |
간격도 넣어줍시다.
<table border ="1" style = "width:100%">
이렇게 하면 됨.
<table border ="1" style = "width:50%">
요러면
| David | Bowie | 'ㅅ')b |
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
쪼만해짐.
solid는 선 색깔 넣어줌 ㅇㅇ
| David | Bowie | 'ㅅ')b |
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
<style>
table, th, td{
border: 10px solid orange;
}
</style>
이렇게 예쁘게 한번에 만들 수 있음.
2. border-collapse: collapse;
쟤 생긴거 보면 중간에 비어있는 - 약간 뜬... 그건데
보더-콜랍스 : 콜랍스 하면 저 간격이 없어짐
| David | Bowie | 'ㅅ')b |
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
아까 위에 애랑 같은 애인데 collapse 하니까 이렇게 보임
이제 <TH> 를 해봄
뜻: 헤더 셀을 정의해줌
응 셀 첫번째 줄 이브게 하는거임
<style>
table, th, td {
border: 10px solid orange;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
| David | Bowie | 'ㅅ')b |
|---|---|---|
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
이렇게 중간정렬 + 굵기 바꿔줌
padding 은 cell 안쪽의 중심으로 border 준다는 얘기...인...데...
ㅎㅎ 5px만큼 글씨 위아래 띄워주는 거래...
저거 th라고 안 쓴 td 애들도 적용이 됨 :>
--------------------------------------------------------------------------
2시간째! :>
html은 FireFox 같은 걸로 많이 쓰는데 얘는 웹 표준을 준수하는 양반임
- 그래서 결제가 안된다고!!!!! 으아아 액티브 앢쓰
-ㅅ-
익스플로러 - 우리의친구
크롬 - 애매한 우리의친구
그러니 크롬을 써야 합니다 라고 선생님이 그랬습니다.
그래도 결제할 때는 익스플로러를 쓰고싶다!
야! 마이크로소프트 소리 안들리게 해라!
ㅇㅇ 어쨌든
col span = "n" : n개를 병합하세요
콜... = 콜럼 = 컬럼 의 스타일
| David | Bowie | 'ㅅ')b |
|---|---|---|
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
<colgroup>
<col span = "2" style = "background-color: yellow">
<col style ="background-color:red">
</colgroup>
둘째 컬럼 까지는 노랑색으로 남기고 다른 애들은 뻘건 색을 주고
글씨는 기본 색인 검정 색으로 남겨두어
수박 콜라보 완성
어 다양한 바리에이션으로
| David | Bowie | 'ㅅ')b |
|---|---|---|
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
이렇게 만들어도 됨 ㅋㅋㅋㅋㅋㅋㅋ
ㅇㅇ 그리고 이제
cell padding 할거임
보더 안쪽: 패딩
보더 바깥쪽: 마진
| David | Bowie | 'ㅅ')b |
|---|---|---|
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
| David | Bowie | 'ㅅ')b |
|---|---|---|
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
| David | Bowie | 'ㅅ')b |
| 샘 | 스미스 | 앨범 |
| 사고싶다 | 1알콜머니 | 넘는것... |
왜 아무 일도 없나요
테이블 속성이 두개여서 입니다
전체 복붙을 할만한 가치가 있는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html1 연습</title>
<style>
/*table, th, td {
border: 1px solid lightgreen;
border-collapse: collapse;
}*/
table{
border-spacing: 15px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span = "2" style = "background-color: red">
<col style ="background-color:yellow">
</colgroup>
<tr>
<td>David</td>
<td>Bowie</td>
<td>'ㅅ')b</td>
</tr>
<tr>
<td>샘</td>
<td>스미스</td>
<td>앨범</td>
</tr>
<tr>
<td>사고싶다</td>
<td>1알콜머니</td>
<td>넘는것...</td>
</tr>
</table>
<p>왜 아무 일도 없나요 </p>
<p>테이블 속성이 두개여서 입니다</p>
</body>
</html>
주석이 /**/ 이란 것
이제 새로운 html을 만들 겁니다.
잘있어라!
--------------------------------------------------------------------------
| 이름 | 전화 | ||
|---|---|---|---|
| 빌게이츠 | 555 555 333 | 666 666 333 | |
이 예제는 왜 이렇게 나오냐면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, th, td {
border: 1px solid purple;
border-collapse: collapse
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th colspan="2">전화</th> - column 두개를 합치는 것...
</tr>
<tr>
<td>빌게이츠</td>
<td>555 555 333</td>
<td>666 666 333</td>
</tr>
</table>
</body>
</html>
근데 만약에 colspan을 2로 해놓고
밑에 column을 5개 주면
| 이름 | 전화 | |||
|---|---|---|---|---|
| 빌게이츠 | 555 555 333 | 666 666 333 | 666 666 333 | 666 666 333 |
이렇게 빠짐
+ 왜이렇게 귀가 가렵냐
그리고 로우스팬은
<!DOCTYPE html>
내가 썼는뎅
내가 h2라고 무시하냐
ㅇㅇ
| 이름: | 도날드 트럼프 |
|---|---|
| 전화: | 123 123 1234 |
| 123 345 6789 |
로우 스팬이 살짝 더 헷갈림!
-ㅅ-
-----------------------------
아! 이제 표에 색상 넣는 거 할건데
색상표 editplus 에서 지원하기는 하는데
저는 색덕후이기 때문에 인터넷에서 찾아서 쓸겁니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tired of typing title</title>
<style>
table, th, td {
border: 10px solid purple;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 50%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<!--4행 3열짜리 표인데 복붙할겁니다. -->
<table style="width: 100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<!-- 왜 2개인지 모르겠...이아니라 아 아이디 비교군 -->
<table id="t01"> - 요렇게 쓰면 아까 쓰타일 만들어놓은거 적용 가능
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
이렇게 생겼음.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
이렇게 생긴 표를 출력 가능 :>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
width: 100%;
}
/* 왜 스타일에서는 이게 주석일까
어쨌든 저건 기본 테이블 스타일입니다.*/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
background-color: black;
color: white;
}
/*
처음 보는 양반
*/
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
color: black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01"> - 위에서 다 선언 해놓으면 이렇게 id만 가져다가 쓰면 되니까 편합니다 :>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
| Jill | Smith | 50 |
이게 웹브라우저에서는 하얀색인데 왜 복붙하면 까만색 되는지 의문...
--------------------------------------------------------------------------
3시간째 :>
리쓰트
이런것입니다.
리스트 뜻: 리스트
약자가 li임 -_-;;
<ul> <li> </li> </ul> 이런 식으로 만들면 됨
unordered list라서 ul인것 -똑똑한 데이빗 (x) -> 그냥 써있었던 것... -.-
마치 테이블과 같이 만들면 됨
지금 기본 예제는 인라인 유형으로 만들거임.
- 커피
- 앤
- 티비
- 밀크
- 앤
- 북
- 뉴스
- 앤
- 브래드
- 핸드폰
- 엔
- 라면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul style = "list-style-type:disc">
<li>커피</li>
<li>앤</li>
<li>티비</li>
</ul>
<ul style = "list-style-type:circle">
<li>밀크</li>
<li>앤</li>
<li>북</li>
</ul>
<ul style = "list-style-type:square">
<li>뉴스</li>
<li>앤</li>
<li>브래드</li>
</ul>
<ul style = "list-style-type:none">
<li>핸드폰</li>
<li>엔</li>
<li>라면</li>
</ul>
</body>
</html>
응 별게 없군요
별로 안 예쁘잖아요
그러니까 순서가 있는 리스트를 배워봅니다.
Ordered HTML Lists래
OL! - 오피스 레이디가 아닙니다.
넘나 좋은 끌어다가 놓기 ㅋㅋㅋㅋㅋ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ol type="1">
<li>잉</li>
<li>왜</li>
<li>워닝이</li>
</ol>
<ol type = "A">
<li>뜨는</li>
<li>걸까</li>
<li>의심</li>
</ol>
<ol type = "a">
<li>스럽다</li>
<li>타이핑</li>
<li>오류</li>
</ol>
<ol type = "I">
<li>인가</li>
<li>알수가</li>
<li>없네</li>
</ol>
<ol type = "i">
<li>이런</li>
<li>슬픈</li>
<li>일이</li>
</ol>
</body>
</html>
왜 워닝이 뜨는 지 모르겠지만 잘 나오긴 하는군요.
- 잉
- 왜
- 워닝이
- 뜨는
- 걸까
- 의심
- 스럽다
- 타이핑
- 오류
- 인가
- 알수가
- 없네
- 이런
- 슬픈
- 일이
Attribute (type) is obsolete. Its use is discouraged in HTML5 documents.
응 그래요 ^^
얘가 하란 대로 해도 안 되니까 그냥 씁시다
그리고 나서는 Description Lists를 배우겠습니다.
<dl> tag defines a description list. -얘가 디스크립션 리스트
<dt> tag defines the term (name) - 얘가 리스트명
<dd> tag defines the data (description). - 얘가 리스트 데이타 인것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>나는 H1로 쓰고싶다!</h1>
<h2>Description List는 자판기같은것</h2>
<dl>
<dt>코피</dt>
<dd>믹스로 통일</dd>
<dd>뭘 눌러도 같은 맛</dd>
<dt>우유</dt>
<dd>어린이용(분유)</dd>
</dl>
</body>
</html>
나는 H1로 쓰고싶다!
Description List는 자판기같은것
- 코피
- 믹스로 통일
- 뭘 눌러도 같은 맛
- 우유
- 어린이용(분유)
Description List가 가장 맘에 드는군
정렬이 훌륭해
4. lists inside lists
복붙!
A Nested List
- Coffee
- Tea
- Black tea
- Green tea
- Milk
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>ice green tea</li>
<li>hot green tea</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A Nested List
- Coffee
- Tea
- Black tea
- Green tea
- ice green tea
- hot green tea
- Milk
더 깊게 만들 수도 있음 'ㅅ'
5. Horizontal Lists
얘는 메뉴 만들 때 좋음 :>!
오 예쁜데?
Horizontal List
The href attribute specifies the URL of the page the link goes to.
If the href attribute is not present, the <a> tag is not a hyperlink.
Syntax
<a href="URL">Horizontal List
list04.html오예 4시간!
이거 끝나면 점심입니다
HTML FORMS!
뽐은 그... 입력값 받는 거임
사용자님이 입력을 받으면 -> 이걸 써버로 보내야함
그러기 위해서
- <form> 요소로 선언한다.
- 다른 type의 <input>요소를 가진다. checkboxes, radio buttons, submit buttons
등등
그렇습니다
1. <form>요소의 중요속성
- action 속성 : 사용자가 입력한 값을 server-side script로 보내면서 요청할 webpage를
선언한다. - 응 그러니까 내가 쓴걸 서버로 보내는 기능 (=데이타 넘어가유)
- method 속성 : 사용자가 입력한 값을 Server-Side Script로 보낼때 HTTP Method를
설명한다(GET or POST) -
GET - 민감한 정보를 보내지 않고 페이지 요청시 사용함, 주소에 서브밋되는 정보가
노출됨 - 보이면 안될까 하는 생각을 하지만 일단 ㅇㅋㅇㅋ
POST- 민감한 정보를 보내면서 페이지 요청시 사용함, 주소에 서브밋되는 정보가
노출되지 않음. - 얘가 더 세심한 레이디인가봄... 노출금지...
<form action="action_page.jsp" method="GET"> 이경우 말고도 GET 방식의 페이지
요청이 많음 ㅇㅇ
근뎅 암것도 안쓰면 걍 get임
<form action="action_page.jsp" method="POST"> 이경우만 POST 방식의 페이지 요청임
그러니까 post를 많이 쓰는 것인가 봅니다.
2. Grouping Form Data with <fieldset>
- <fieldset> 폼안에서 관련있는 data를 분류
- <legend> <fieldset>의 타이틀
그렇습니다. 이것은 그루핑하려고 있는 폼의 필드셋 입니다. - 해보면 압니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form test 1</title>
</head>
<body>
<form action = "action_page.php">
<fieldset> <!-- 필드셋은 데이터를 분류해줌 마치 네모처럼 -->
<legend>개인 정보: </legend> <!-- 얘는 필드셋 제목임 -->
First name:<br>
<input type = "text" name = "firstname" value="미키"> <- 얘는 폼의 하위 요소인 인풋인데
얘 타입에 따라서 이름도 쓰고 뭐도 하고 그러는 거임 얘는 텍스트니까 미키 적어도 됨
<br>
Last name:<br>
<input type = "text" name = "lastname" value="마우스">
<br><br>
<input type = "submit" value = "확인"> <- 얘는 버튼 모양임 근데 연결을 안해놔서 눌러놔도 별거 없음다
</fieldset>
</form>
</body>
</html>
First name:
Last name:
여기선 네모가 빠졌는데 사실
이렇게 생김 이게 필드셋!
두개하면 네모가 두개!
+ 버튼친구들과의 시간
<input type = "submit" value = "확인">
<input type = "button" value = "무늬만">
이게 둘다 똑같이 생겼는데
써브밋 - 기능이 있음
버튼 - 버튼 모양인데 얘만 있어서는 기능이 없시다
그래서 action 기능을 써야함 - onclick="뭔행동을하라고!" - 이런거 쓸 떄 씁니다.
<input type = "button" value = "무늬만" onclick= "david.php"> <- 이런 식으로 사용하세요
그리고 이런 애도 있음 <input type = "reset" value = "취소">
- 얘는 기본값 말고 썼던 애들 다 취소해줌 :>
이런 애도 있음 <input type = "image" src = "iguana.gif">
서브밋 - 얘는 누르면 ㅇㅋ 데이타 ㄱㄱ해줌
버튼 - 얘는 액션 기능 필수
리셋 - 리셋 기능
이미지 - 얘도 서브밋처럼 기능 있음
<input type = "image" src = "cat.gif" style = "width: 150px">
이렇게 하면 크기도 조절 가능
그리고 샘플
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
width: 80%;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름:</th>
<td><input type="text"></td>
</tr>
<tr>
<th>성별:</th>
<td><input type="radio"> 남자 <input type="radio">
여자</td>
</tr>
<tr>
<th>보유기술:</th>
<td><input type="checkbox"> JAVA <input type="checkbox">
JSP <input type="checkbox"> MVC <input type="checkbox">
SPRING <input type="checkbox"> jQuery</td>
</tr>
<tr>
<th>취미:</th>
<td><select>
<option>기술 서적 읽기
<option>게임
<option>영화감상
<option>보드타기
</select></td>
</tr>
<tr>
<th>자기소개: </th>
<td>
<textarea rows = "5" cols = "45"></textarea>
</td>
</tr>
</table>
</body>
</html>
| 이름: | |
|---|---|
| 성별: | 남자 여자 |
| 보유기술: | JAVA JSP MVC SPRING jQuery |
| 취미: | |
| 자기소개: |
요런 거 하고 있음 :>
<tr>
<th>성별:</th>
<td><label><input type="radio" name = "gender">남자</label>
<label><input type="radio" name = "gender">여자</label></td>
<!-- 이렇게 label로 감싸고 - 이름을 gender로 안 하면 두 개 다 체크 가능하니까 이름을 지정해준다! :> -->
</tr>
여기 고쳤음
레이블을 사용하면 문자열을 클릭해도 - 굳이 체크박스 쪼만한거 안 눌러도 체크가됨! :>
사용자 배려하쉬는것
html은 db 연결도 못 하고 구졌습니다 - 그리고 그의 친구 javascript도 db 연결도 못하고 구졌습니다.
그래서 내가 CSS (-서버 스크립트 ... s...)를 배워서 이거랑 연결해야함!
야! 잘만들었으면 내가 1개만 배우면 되잖아! -_-+
어 그래서 벌써 css 배워야함 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
기본만 배우고 검색잼으로 배워야합니다.
http://www.w3schools.com/tags/att_a_href.asp
ㅇㅇ... w3필수쉰것
--------------------------------------------------------------------------
밥먹고 나니까 렉쩔어서 새로 만들었음
아까는 HTML
이번엔 html with css
CSS 씬택스
이런거 함
선언 -_-;; 디크라레이션...
프로퍼티: 밸류
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1{background-color: #6495ed;}
p{background-color: #e0ffff;}
div{background-color: #b0c4de;}
</style>
</head>
<body>
<h1>시에스에스 백그라운드 칼라 이그잼플</h1>
<div>
디스이스 어 택스트 인사이드 어 디아비 앨리맨트
<p>디즈 패래그래프 해즈 이스 오운 백그라운드 컬러</p>
위아 스틸 인 더 다이브이 에리멘트
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body {
background-image: url("tree.jpg"); /* 이미지를 백그라운드에 깔아줌*/
background-repeat: no-repeat; /* 반복없다 */
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing
the reader!</p>
</body>
</html>
이렇게 반복없이 1번 나옴
이걸 이렇게 수정하면
body {
background-image: url("tree.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
이렇게 오른쪽 위로 붙음 - 크기를 올려도 저기 끝에 붙어있음
그리고 자바스크립트랑 같이 하는 거는
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 300px;
background: lightblue url('tree.jpg') no-repeat;
color: white;
overflow: auto;
}
</style>
</head>
<body>
<p>Click the radio buttons and scroll the DIV element to see the effect of the background-attachment property:</p>
<form name="myForm">
<input type="radio" name="myAtt" value="scroll" onclick="myFunction()" checked>scroll
<input type="radio" name="myAtt" value="local" onclick="myFunction()">local
</form>
<div id="myDIV">
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</div>
<script>
function myFunction() {
if (document.forms["myForm"]["myAtt"][0].checked) {
document.getElementById("myDIV").style.backgroundAttachment = "scroll";
} else {
document.getElementById("myDIV").style.backgroundAttachment = "local";
}
}
</script>
</body>
</html>
이거 ... -_-);;
scroll 하면 - 나무가 위에 붙은게 따라서 움직이고
local -하면 나무가 그냥 위에 붙어있고 안움직임!
css - 액션 작업 해주는 것
<form name="myForm">
<input type="radio" name="myAtt" value="scroll" onclick="myFunction()" checked>scroll
//on으로 시작하는건 자바 스크립트 함수 호출 - myFunction이라는 것 호출함 - 밑에 내가 만들었음
//걔가 checked 되어있으면 밑에 myFunction 함수가
<input type="radio" name="myAtt" value="local" onclick="myFunction()">local
</form>
<script>
function myFunction() {
//도움 객체(도큐먼트 접근 가능한 객체).이 도큐멘트 안의 폼들로 인해 생긴 객체를 접근 하겠다는 얘기임...
//그중에서 myForm이라는 애를 접근함 (아까 쟤) 의 myAtt인애를 접근함
if (document.forms["myForm"]["myAtt"][0].checked) {// = myform->myatt가 체크되어있으면
document.getElementById("myDIV").style.backgroundAttachment = "scroll";
//아이디가 myDiV라는 애를 찾는 메소드
} else { //첫번째 거가 체크가 안 되어 있으면 2번째 거가 체크되어있을 경우니까 local을 의미함
document.getElementById("myDIV").style.backgroundAttachment = "local";
}
}
</script>
--------------------------------------------------------------------------
인터넷이 짱 느립니다.
<style>
div{
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This is a paragraph with specified margins.</p>
</body>
</html>
이러면 margin이 들어가서 하나는 그냥 쭉------------
하나는 중간에 삑
margin 들어가는 순서- top right bottom left - 시계방향!
위 - 오른쪽 - 아래 - 왼쪽
마진 - 패딩 들어가는 순서
1234 = 위오른쪽아래왼쪽
123 = 위 (오른쪽왼쪽) 아래
12 = (위아래) (오른쪽왼쪽)
1 = 모두 같은 것
p.padding {
background-color: green;
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
이거하고
p.padding {
background-color: green;
padding: 25px 50px;
}
이거하고 같은 결과값인 것이다.
이제 border의 스타일...
<!DOCTYPE html>
이런 것도 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p{
border: 3px solid orange;
outline: green dotted thick;
}
</style>
</head>
<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is
specified.</p>
</body>
</html>
이렇게 잘 나온다.
--------------------------------------------------------------------------
[09]CSS Display and Visibility
이제 이런거 함
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
이러면 클래스명이 hidden인거는 내용이 안보임 - 끝
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>
얘도 그의 친구임
display:none - 공간도 안 잡고 그냥 없는 것
Visability: hidden - 공간은 가지고 있는데 안 보이는 것
2.CSS Display - Block and Inline Elements
역시 사진으로 올리니까 렉이 없군
<!DOCTYPE html>
인라인 : 줄을 차지 하지 않는 요소 / 한 줄에 여러 요소를 시
그래요
--------------------------------------------------------------------------
[10]CSS overflow
[01] CSS overflow property
- overflow, overflow-x, overflow-y
- contents 가 Box 영역을 벗어났을때 처리되는 방법을 나타냄.
스크롤 - 오토 - 비슷한 것
이니셜 - 기본값
히든 - 안보기
인헤릿 - 부모대로
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div.scroll{
background-color: #00ffff;
width: 100px;
height: 100px;
overflow: scroll;
}
div.hidden{
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>
---------------
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: red;
}
h1 {
color: initial;
}
</style>
</head>
<body>
<div>
<h1>Initial</h1>
<p>The header and this text is inside a DIV element, which has the color property set to "red". The header element has its color property set to "initial", which in this case is "black".</p>
</div>
<p><b>Note:</b> The initial keyword is not supported as a property value in Internet Explorer, or in Opera before version 15.</p>
</body>
</html>
이거 할떄 졸았음 - 빨간색
http://webdir.tistory.com/347
졸은거 땜빵!
overflow
요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정한다.
div {
width: 150px;
height: 150px;
overflow: scroll;
}
- overflow-x와 overflow-y 속성에 대한 축약 속성이다.
- 이 속성의 두 번째 값은 선택적이며, 하나의 값만 지정할 경우 overflow-x와 overflow-y 속성에 모두 적용된다.
속성값
- visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다. 기본값이다.
- hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다.
- scroll : 무조건 스크롤을 보여준다
- auto : 자동으로 넘쳤을 때 스크롤을 보여준다 - ㅏ니면 스크롤 없음.
- inherit : 부모 요소로부터 값을 상속 받는다.
--------------------------------------------------------------------------
어느새 float를 하고있다 - 거의 끝났다
나는 inline 부터 다시 봐야 한다
으아아
오늘 1. 티스토리가 구림
2. 인터넷이 구림
난 둘 다~인가
어휴
적절한 동영상
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
float: left; /*왼쪽부터 채우기! :-)*/
width: 110px;
height: 90px;
margin: 5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images do not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_float 이런 거 참조
--------------------------------------------------얘의 친구 같은 것
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
.text_line {
clear: both; /*이거 float 지우고 줄 표시하느라 쓰는 것 - 안쓰면 이것도 이어서 나옴 ㅠㅠ*/
margin-bottom: 2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
5. 수업
진도:
hw:
6. 할것
'Programming' 카테고리의 다른 글
| 160406: 18회차 (3) | 2016.04.06 |
|---|---|
| 160405: 17회차 (3) | 2016.04.05 |
| 160401: 15회차 (5) | 2016.04.01 |
| 160329: 12회차 (3) | 2016.03.29 |
| 160328: 11회차 (5) | 2016.03.28 |