[Web] class 0714-1

[ class 0714-1 ]

<!DOCTYPE html>

<html>

<head>

body {

padding: 0px;

margin: 0px;

}

#nav {

width: 165px;

box-shadow: 2px 2px 5px gray;

font-size: 20px;

}

.main_ul {

list-style-type: none;

padding: 0px;

margin: 0px;

}

.main_ul>li>a {

text-decoration: none;

color: black;

border-bottom: 3px solid gray;

height: 45px;

box-shadow: 2px 2px 5px gray;

display: block;

line-height: 45px;/* height와 값이 같으면 veritcal center이 된다. */

}

.main_ul>li:HOVER {

background: gray;

}

.main_ul>li:HOVER >.sub_ul{

background: white;

display: block;

}

.main_ul>li:HOVER .sub_ul>li{

background: white;

text-align: center;

}

.sub_ul {

padding: 0px;

display: none;

}

.sub_ul>li>a{

list-style-type: none;

border-bottom: 1px solid gray;

text-decoration: none;

color: black;

display: block;

}

</style>

<title>Insert title here</title>

</head>

<body>

<li><a href="#">목살김치찌개</a></li>

<li><a href="#">차돌된장찌개</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">티본스테이크</a></li>

<li><a href="#">먹물잠발라야</a></li>

<li><a href="#">스팀드푸아그라</a></li>

</ul>

</li>

<li><a href="#">목살김치찌개</a></li>

<li><a href="#">차돌된장찌개</a></li>

</ul>

</li>

<li><a href="#">스노윙치킨</a></li>

<li><a href="#">신포닭강정</a></li>

<li><a href="#">장작간장바베큐</a></li>

</ul>

</li>

</ul>

</div>

<table>

<tr>

</tr>

</table>

</body>

</html>

============================================

<!DOCTYPE html>

<html>

<head>

body {

padding: 0px;

margin: 0px;

}

ul {

padding-left: 10px;

margin: 0px;

list-style-type: none;

text-align: center;

background: black;

text-decoration: none;

color: white;

overflow: hidden; /* 만약에 내 영역을 넘어갔을 때 할 처리 */

}

ul>li {

float: left;

}

a {

text-decoration: none;

color: white;

display: block;

height: 50px;

line-height: 50px;

padding-left: 20px;

}

#list {

float: right;

padding-right: 10px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

</html>

============================================

<!DOCTYPE html>

<html>

<head>

body {

padding: 0px;

margin: 0px;

}

.div1 {

background: red;

width: 100px;

height: 100px;

position: absolute;/* 무조건 브라우져를 기준으로 함 */

top: 150px;

left: 150px;

}

.div2 {

background: green;

width: 100px;

height: 100px;

position: relative; /* 위 태그를 기준으로 함, 단 위 태그가 relative 여야함 */

top: 200px;

left: 200px;

}

.div3 {

background: yellow;

width: 100px;

height: 100px;

position: fixed;/* 화면에 지정된 장소에 계속 있음 */

top: 800px;

left: 800px;

}

</style>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

============================================

<!DOCTYPE html>

<html>

<head>

body {

padding: 0px;

margine: 0px;

}

div {

width: 100px;

height: 100px;

position: relative;

}

.div1 {

background: green;

}

.div2 {

background: yellow;

left: 100px;

}

.div3 {

background: red;

left: 50px;

bottom: 50px;

}

</style>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

============================================

<!DOCTYPE html>

<html>

<head>

.div1 {

width: 700px;

height: 300px;

border: 3px dotted black;

margin: 0 auto; /* 블럭 속성들을 가운데 정렬하는 법 */

margin-top: 200px;

}

h1 {

text-align: center;

}

.div2 {

width: 150px;

height: 200px;

border: 1px solid red;

margin-left: 20px;

float: left;

}

.div3 {

width: 150px;

height: 200px;

border: 1px solid red;

overflow: hidden;

float: left;

margin-left: 20px;

}

.div4 {

width: 150px;

height: 200px;

border: 1px solid red;

overflow: scroll;

float: left;

margin-left: 20px;

}

.div5 {

width: 150px;

height: 200px;

border: 1px solid red;

overflow: auto;

float: left;

margin-left: 20px;

}

</style>

<title>Insert title here</title>

</head>

<body>

<h1>overflow 속성 활용하기</h1>

구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/구보니/

</div>

</div>

</div>

</div>

</body>

</html>

============================================

<!DOCTYPE html>

<html>

<head>

.cb:CHECKED ~.div1 { /* 체크박스나 라디오 박스 선택했을 때 */

background-image: url('img/gimo.png');

background-repeat: no-repeat;

}

.rad:CHECKED ~.div1 {

background-image: url('img/tti.png');

}

.div1 {

width: 500px;

height: 500px;

border: 1px solid red;

}

</style>

<title>Insert title here</title>

</head>

<body>

원본 사진

<input type="checkbox" class="cb"> 이미지 변경

<br>

</body>

</html>

============================================

저작자표시

'노트필기' 카테고리의 다른 글

[Web] CSS class0717-2 (0)	2017.07.17
[Web] class0717-1 (0)	2017.07.17
[Web] class 0713-2 (0)	2017.07.13
[Web] class 0713-1 (0)	2017.07.13
[Web] class 0712-2 (0)	2017.07.12

나를 위한 블로그에서 너를 위한 블로그로

[Web] class 0714-1

'노트필기' 카테고리의 다른 글

티스토리툴바

[Web] class 0714-1

'노트필기' 카테고리의 다른 글

'노트필기' Related Articles

티스토리툴바