정현희 / WS

Go to a project
Toggle navigation Toggle navigation pinning
정현희
c707a705 1 parent 87ab79c4

2017.03.28 CSS실습

Inline Side-by-side
Showing 21 changed files with 818 additions and 58 deletions
<html>
<style>
a:link, a:visited
{
/* font-size: 2.5em;
background-color: red;
color:white;
text-decoration: none;*/
//버튼
background-color: lightblue;
color: green;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover
{
color:hotpink;
}
body
{
// background-color: lightblue;
}
ul.a
{
font-family: "Malgun Gothic",serif;
list-style-type: upper-roman;
//list-style-type: square;
}
p
{
font-style: oblique;
font-size: 40px;
}
p1
{
//list-style-image: url('https://pixabay.com/photo-157349/');
border: 1px solid black;
outline-color: lightgreen;
}
p1.solid {outline-style: solid;}
</style>
<title>CSS1</title>
<body>
<h1><a href="https://namu.wiki/w/%EB%B9%85%EB%B1%85"><meta charset="utf-8">빅뱅</a></h1>
<img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
<ul class="a">
<li>구성원</li>
<ul>
<li>지드래곤</li>
<li>태양</li>
<li>탑</li>
<li>대성</li>
<li>승리</li>
<br/>
</ul>
<li>설명</li>
2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
<li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
<br/>
<p1 class="solid">
앨범</br>
1. Always</br>
2. Hot Issue</br>
3. Stand Up</br>
</p1>
</ul>
<p>
추가적으로 기재하는 내용입니당</br>
CSS를 연습해봐요!
</p>
</body>
</html>
<html>
<meta charset="utf-8">
<title>CSS2</title>
<style>
table, th, td
{
border-collapse: collapse;
}
tr:nth-child(even){background-color: red;}
</style>
<body>
<table>
<caption>홈런순위</caption>
<!--표의 제목같은 역할-->
<thead>
<tr>
<th>이름</th>
<th>홈런</th>
</tr>
</thead>
<!--표의 제목같은 역할-->
<tbody>
<tr>
<td>이대호</td>
<td>41</td>
</tr>
<tr>
<td>최진행</td>
<td>27</td>
</tr>
<tr>
<td>홍성은</td>
<td>26</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">2010-08-22</th>
</tr>
</tfoot>
</table>
</body>
</html>
<html>
<meta charset="utf-8">
<title>CSS3</title>
<style>
table
{
border-collapse: collapse;
widtd: 100%;
}
th, td
{
text-align: center;
padding: 8px;
}
tr:nth-child(even)
{
background-color: red;
//padding: 15px;
}
th
{
background-color: #4caf50;
color: white;
}
p
{
border-left: 6px solid green;
    background-color: #f2f2f2;
}
</style>
<body>
<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Grifflin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Grifflin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Calos</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<p>
끄아아앙아앙아아앙</br>
넘나 어려운것!!</br>
자소서 쓰기 시러양!!!!!!
</p>
</body>
</html>
h1
{
text-align: center;
}
a:link, a:visited
{
text-decoration: none;
color: black;
}
a:hover
{
color: hotpink;
}
a.a1:link, a.a1:visited
{
background-color: #50c964;
color: white;
padding: 15px 500px;
text-align: center;
display: inline-block;
border-radius: 15px; /*상자의 끝을 둥글게 굴려주는 역할. 숫자가 클 수록 많이 굴려짐*/
}
a.a1:hover
{
background-color: #5060c9;
color: #000;
}
img
{
width: 375px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
/*클래스 쓰는 방법*/
li.inline_practice
{
display: inline;
margin-right: 10%;
}
li.member:first-letter
{
font-size: 20px;
font-style: italic;
}
p
{
/*왼쪽에만 선을 그림*/
border-left: 20px solid #50c964;
}
p:first-line
{
color: hotpink;
}
table
{
/*margin: 50px 50px; /*위와 왼쪽에 여백을 줌*/
width: 70%;/*간격을 띄움*/
}
td, tr
{
padding:50px;
background-color: gray;
text-align: center;
}
<html>
<style>
h1
{
text-align: center;
}
a:link, a:visited
{
text-decoration: none;
color: black;
}
a:hover
{
color: hotpink;
}
a.a1:link, a.a1:visited
{
background-color: #50c964;
color: white;
padding: 15px 500px;
text-align: center;
display: inline-block;
border-radius: 15px; /*상자의 끝을 둥글게 굴려주는 역할. 숫자가 클 수록 많이 굴려짐*/
}
a.a1:hover
{
background-color: #5060c9;
color: #000;
}
/*클래스 쓰는 방법*/
li.inline_practice
{
display: inline;
margin-right: 10%;
}
table
{
border-collapse: collapse;
width: 50%;/*간격을 띄움*/
}
table
{
margin: 50px 50px; /*위와 왼쪽에 여백을 줌*/
}
p
{
/*왼쪽에만 선을 그림*/
border-left: 20px solid #50c964;
}
</style>
<link rel='stylesheet' type='text/css' href='css_practice1.css' />
<meta charset="utf-8">
<title>실습2</title>
<title>CSS 실습1</title>
<body>
<h1><a class = "a1" href="https://namu.wiki/w/%EB%B9%85%EB%B1%85">빅뱅</a></h1>
<img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
<ul>
<li>구성원</li>
<ul>
<li>지드래곤</li>
<li>태양</li>
<li>탑</li>
<li>대성</li>
<li>승리</li>
<li class = "member">지드래곤</li>
<li class = "member">태양</li>
<li class = "member">탑</li>
<li class = "member">대성</li>
<li class = "member">승리</li>
</ul>
<li>설명</li>
<br/>
<p>
<br/>2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
</p>
<li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
<br/>
<li>앨범</li>
<table border="0">
<table>
<tr>
<td>Always</td>
<td>Hot Issue</td>
......
/*ex02.css*/
a:link, a:visited
{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: white;
padding: 10px;
background-color: gray;
}
a:hover
{
color: yellow;
background-color: black;
}
a.direction:link, a.direction:visited
{
color: yellow;
}
<html>
<link rel='stylesheet' type='text/css' href='css_practice2.css' />
<title>CSS 실습2</title>
<meta charset="utf-8">
<body>
<div class = "pagination">
<a href = "www.naver.com" class="direction"><span class ='arrow'>&lsaquo;</span>이전</a>
<a href = "www.naver.com">11</a>
<a href = "www.naver.com">12</a>
<a href = "www.naver.com">13</a>
<a href = "www.naver.com">14</a>
<a href = "www.naver.com" class ="current">15</a>
<a href = "www.naver.com">16</a>
<a href = "www.naver.com">17</a>
<a href = "www.naver.com">18</a>
<a href = "www.naver.com">19</a>
<a href = "www.naver.com">20</a>
<a href = "www.naver.com" class="direction">다음<span class ='arrow'>&rsaquo;</span></a>
</div>
</body>
</html>
#border
{
}
#header
{
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: #50c964;
color: white;
}
div.col
{
display: inline;
}
div.title
{
padding-right: 50%;
}
div.number
{
padding-right: 5%;
}
div.date
{
padding-right: 10%;
}
div.name
{
padding-right: 20%;
}
<html>
<link rel='stylesheet' type='text/css' href='css_practice3.css' />
<title>CSS 실습3</title>
<meta charset="utf-8">
<body>
<div id="board">
<div id="header">
<div id="row">
<div class="col number">번호</div>
<div class="col title">제목</div>
<div class="col date">날짜</div>
<div class="col name">작성자</div>
</div>
</div>
<div id="content">
<div id="row">
<div class="col number">10</div>
<div class="col title">10번째 게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
</body>
</html>
No preview for this file type
<html>
<style>
a link{
background-color: red;
color : white;
text-decoration: none;
}
</style>
<meta charset="utf-8"><title>2013104114 정현희 퀴즈1</title>
<body>
<p>
<h1>2013104114 정현희</h1>
<ul>
<li>생일 : 1994.02.08</li>
<span style="color:DimGray">
같은 년도에 태어난 연예인
<ul>
<li>혜리</li>
<li>수지</li>
<li>설리</li>
</ul>
</span>
출처 : <a href="http://m.blog.naver.com/0111780/220632755359" target = "_blank">네이버 블로그</a>
</br></br>
<li>좋아했던 연예인 : 지드래곤</li>
<img src="http://cfile26.uf.tistory.com/image/2476714A577939C90EE1CB">
</br></br>
<li>다니는 학교 : <a href="http://khu.ac.kr">경희대학교</a></li>
</br>
<li>좋아하는 게임</li>
<table border="1">
<thead>
<tr>
<th>게임 이름</th>
<th>회사</th>
</tr>
</thead>
<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>
</tbody>
</table>
</ul>
</p>
</body>
</html>
No preview for this file type
<html>
<body>
<h1><meta charset="utf-8">큰 제목</h1>
<p>
이것은 나의 첫 HTML문서입니다. <br/>
<!--<img src="/images/dog.png"/> <!--<br/>-->
<img src="http://download.xpressengine.com/xedownload/app/22753814/thumbnails/md.png"/> <!--URL로 이미지를 넣음-->
<span style="color:red">
빨간 글씨 속에
<b>두꺼운 글씨</b>가 있습니다.
</br>log<sub>10</sub><sup>2</sup>
</span>
</p>
<p>두번째 단락입니다.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
<a href="#top">처음으로 가기</a>
</body>
</html>
<html>
<meta charset="utf-8">
<title>실습3</title>
<body>
<table border="1">
<caption>홈런순위</caption>
<!--표의 제목같은 역할--><thead>
<tr>
<th>이름</th>
<th>홈런</th>
</tr>
</thead>
<!--표의 제목같은 역할-->
<tbody>
<tr>
<td>이대호</td>
<td>41</td>
</tr>
<tr>
<td>최진행</td>
<td>27</td>
</tr>
<tr>
<td>홍성은</td>
<td>26</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">2010-08-22</th>
</tr>
</tfoot>
</table>
</body>
</html>
<html>
<meta charset="utf-8"><title>예제3</title>
<body>
<p>
<form action="/update.php" method="post"><!--수행버튼을 눌렀을 때 update.php를 실행하라는 의미지만 현재 이 파일이 없으므로 아무 일도 일어나지 않는다.-->
<input type="hidden" name="type" value="user"/><!--화면에 보이진 않고 유저에 대한것임을 서버에 알려줌-->
아이디 : <input type="text" name="name" size="10"/><!--name = 번수이름, size = 창의크기-->
<input type="button" value="중복조회"/> <br/>
비밀번호 : <input type="password" name="pwd" size="10"/><br/>
성별:
<input type="radio" name="sex" value="m"/>남
<input type="radio" name="sex" value="f"/>여<br/>
취미:
<input type="checkbox" name="hobby" value="book"/>독서
<input type="checkbox" name="hobby" value="movie"/>영화감상
<input type="checkbox" name="hobby" value="music"/>음악감상<br/>
사진:<input type="file" name="photo"/><br/>
주소:<select name="address">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="etc">기타</option>
</select><br/>
소개:<br/>
<textarea cols="30" rows="5" name="intro"></textarea> <br/>
<input type="submit" value="전송!"/>
</form>
</p>
</body>
</html>
응 깃 짜증나~
지대로 나오지도 않냐 ㅂㄷㅂㄷ
마지막 확인..
\ No newline at end of file
<html>
<title>실습1</title>
<body>
<meta charset="utf-8">
<a href="http://www.khu.ac.kr">경희대학교</a><br/>
컴퓨터공학과<br/>
4학년<br/>
2013104114<br/>
정현희<br/>
</body>
</html>
<html>
<title>실습2</title>
<body>
<h1><a href="https://namu.wiki/w/%EB%B9%85%EB%B1%85"><meta charset="utf-8">빅뱅</a></h1>
<p>
<img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음-->
<ul>
<li>구성원</li>
<ul>
<li>지드래곤</li>
<li>태양</li>
<li>탑</li>
<li>대성</li>
<li>승리</li>
<br/>
</ul>
<li>설명</li>
2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/>
2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/>
힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/>
<li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.-->
<br/>
<li>앨범</li>
<ol>
<li>Always</li>
<li>Hot Issue</li>
<li>Stand Up</li>
</ol>
</ul>
</p>
</body>
</html>
<html>
<meta charset="utf-8">
<title>실습3</title>
<body>
<table border="1">
<!--표의 제목같은 역할-->
<thead>
<tr>
<th>분류</th>
<th>제품명</th>
<th>단가</th>
<th>수량</th>
<th>금액</th>
</tr>
</thead>
<!--표의 제목같은 역할-->
<!--공산품-->
<tbody>
<tr>
<td rowspan="3">공산품</td>
<td>iPhone</td>
<td>900,000</td>
<td>2</td>
<td>1,800,000</td>
</tr>
<tr>
<td>LED TV</td>
<td>3,000,000</td>
<td>3</td>
<td>9,000,000</td>
</tr>
<tr>
<td colspan="3">소계</td>
<td>10,800,000</td>
</tr>
<!--공산품-->
<!--농산품-->
<tr>
<td rowspan="2">농산품</td>
<td>인삼</td>
<td>10,000</td>
<td>200</td>
<td>2,000,000</td>
</tr>
<tr>
<td colspan="3">소계</td>
<td>2,000,000</td>
</tr>
<!--농산품-->
<!--합계-->
<tr>
<td colspan="4">합계</td>
<td>12,800,000</td>
</tr>
<!--합계-->
</tbody>
<!--합계 (두꺼운글자로 나옴)
<tfoot>
<tr>
<th colspan="4">합계</th>
<th>12,800,000</th>
</tr>
</tfoot>
합계-->
</table>
</body>
</html>
<html>
<meta charset="utf-8">
<title>실습3</title>
<body>
<table border="0"><!--기트가 안된다-->
<!--아이디-->
<tbody>
<tr>
<td>아이디</td>
<td colspan="3"><input type="text" name="_id" size="10"/>
<input type="button" value="중복조회"/></td>
</tr>
<!--비밀번호-->
<tr>
<td>비밀번호</td>
<td><input type="password" name="pwd" size="10"/></td>
<td>확인</td>
<td><input type="password" name="pwdCheck" size="10"/></td>
</tr>
<!--이름-->
<tr>
<td>이름</td>
<td colspan="3"><input type="text" name="name" size="10"/></td>
</tr>
<!--이메일-->
<tr>
<td>이메일</td>
<td colspan="3"><input type="text" name="email" size="10"/></td>
</tr>
<!--성별-->
<tr>
<td>성별</td>
<td colspan="3"><input type="radio" name="sex" value="m"/>남
<input type="radio" name="sex" value="f"/>여</td>
</tr>
<!--지역-->
<tr>
<td>지역</td>
<td colspan="3">
<select name="address">
<option value="seoul">서울</option>
<option value="busan">부산</option>
<option value="etc">기타</option>
</select></td>
</tr>
<!--약관동의-->
<tr>
<td colspan="4"><input type="checkbox" name="agree" value="agree"/>약관에 동의합니다.</td>
</tr>
</tbody>
</table>
<input type="submit" value="회원가입"/>
</body>
</html>
<html>
<meta charset="utf-8">
<style>
ul1
{
list-style-type: square;
}
table
{
width: 30%; /*상위 엘레멘트 넓이의 30%*/
text-align: center;
border-collapse: collapse; /*쉽게말해 테이블을 구성하는 선을 한 줄로 설정*/
margin: 10px; /*표와 웹페이지 사이의 여백*/
}
table, th, td
{
border: 1px solid black;
}
td
{
padding: 5px; /*안쪽에 5px씩 여백을 줌*/
}
/*표의 가장 윗칸만 다르게 설정*/
th
{
background-color: #404040; /* 배경색 */
color: #fff; /* 글자색 */
}
</style>
<title>실습3</title>
<body>
<table border="1">
<!--표의 제목같은 역할-->
<thead>
<tr>
<th>분류</th>
<th>제품명</th>
<th>단가</th>
<th>수량</th>
<th>금액</th>
</tr>
</thead>
<!--표의 제목같은 역할-->
<!--공산품-->
<tbody>
<tr>
<td rowspan="3">공산품</td>
<td>iPhone</td>
<td>900,000</td>
<td>2</td>
<td>1,800,000</td>
</tr>
<tr>
<td>LED TV</td>
<td>3,000,000</td>
<td>3</td>
<td>9,000,000</td>
</tr>
<tr>
<td colspan="3">소계</td>
<td>10,800,000</td>
</tr>
<!--공산품-->
<!--농산품-->
<tr>
<td rowspan="2">농산품</td>
<td>인삼</td>
<td>10,000</td>
<td>200</td>
<td>2,000,000</td>
</tr>
<tr>
<td colspan="3">소계</td>
<td>2,000,000</td>
</tr>
<!--농산품-->
<!--합계-->
<tr>
<td colspan="4">합계</td>
<td>12,800,000</td>
</tr>
<!--합계-->
</tbody>
</table>
<ul>
<li>구성원</li>
<ul class="ul1">
<li>지드래곤</li>
<li>태양</li>
<li>탑</li>
<li>대성</li>
<li>승리</li>
<br/>
</ul>
</ul>
</body>
</html>