728x90
백그라운드 이미지 변경
<style>
body{
background-image: url('eee.png'), url('rrr.png');
background-size : 100% 400px;
/*첫번째이미지, 두번째이미지 //만약 ,안써주면 이미지 전체 적용*/
background-repeat : no-repeat;
background-attachment: fixed; /* 이걸줘야 배경이 고정되고 내용만 움직임 */
background-position: bottom;
background: url('rrr.png') bottmon / 100% no-repeat fixed;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea iure nobis repellat impedit doloribus assumenda tenetur. A soluta, ipsum odit quasi, esse aliquam corrupti doloremque neque fuga magni deleniti quia. Deserunt architecto incidunt possimus quam voluptatum perspiciatis fugit necessitatibus? Quo pariatur quidem veniam quos illo nemo sunt ea culpa nulla.</p>
</body>
<style>
body{
background: url('rrr.png') bottom / 100% no-repeat fixed, //위에 설정한것과 같은것이다!!
url('eee.png') bottom / 100% no-repeat fixed #eee;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea iure nobis repellat impedit doloribus assumenda tenetur. A soluta, ipsum odit quasi, esse aliquam corrupti doloremque neque fuga magni deleniti quia. Deserunt architecto incidunt possimus quam voluptatum perspiciatis fugit necessitatibus? Quo pariatur quidem veniam quos illo nemo sunt ea culpa nulla.</p>
</body>
글꼴크기 설정
<style>
.a1 {
font-size: 32px;
}
.a2 {
font-size: 2em;
}
.b {
font-size: large;
}
.c {
font-size: small;
}
.font_arial {
font-family: Arial, Helvetica, sans-serif;
}
.font_roman {
font-family: 'Times New Roman', Times, serif
}
</style>
</head>
<body>
<h1 class="font_arial">font_arial 글자크기 조정하기</h1>
<h1 class="font_roman">font_roman 글자크기 조정하기</h1>
<p class="a1">글자크기를 32px으로 지정</p>
<p class="a2">글자크기를 2em으로 지정</p>
<p class="b">글자크기를 large로 지정</p>
<p>p태그의 기본 크기는?</p>
<p class="c">글자크기를 small로 지정</p>
</body>
<style>
.b {
font-size: large;
}
.c {
font-size: small;
}
.font_arial {
font-family: Arial, Helvetica, sans-serif;
}
.font_roman {
font-family: 'Times New Roman', Times, serif
}
.font_bic{
font-size: 2.5em;
}
.font_italic{
font-style: italic;
}
.font_bold{
font-weight :bold;
}
.font_center {
text-align : center;
}
.font_right {
text-align : right;
}
</style>
</head>
<body>
<p class="b font_bold">글자크기를 large로 지정</p>
<p>p태그의 기본 크기는?</p>
<p class="c font_italick">글자크기를 small로 지정</p>
<p class="font_bic">글자크기 2.5em</p>
<p class="font_italic">글자가 기울어짐</p>
<p class="font_bold">글자 굵게</p>
<span class="font_center">span 태그의 중앙 정렬은 안됨.</span>
</body>
<style>
.font_big {
font-size: 2em;
}
.font_italic {
font-style: italic;
}
.font_bold {
font-weight: bold;
}
.font_center{
text-align: center;
}
.button{
width: 150px;
height:70px;
background-color: orange;
border: 10px solid white;
border-radius: 30px;
box-shadow : 5px 5px 5px grey;
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">click</a>
test
<!-- anchor태그가 inline 요소여서 중앙으로 안간다 -->
</div>
</body>
<style>
.font_big {
font-size: 2em;
}
.font_italic {
font-style: italic;
}
.font_bold {
font-weight: bold;
}
.font_center {
text-align: center;
}
.button {
width: 150px;
height: 70px;
background-color: orange;
border: 10px solid white;
border-radius: 30px;
box-shadow: 5px 5px 5px grey;
}
div>a {
display: block;
/* inline요소인 a태그를 block태그로 바꿔준다. */
line-height : 70px;
text-decoration: none;
/* click밑에 밑줄 사라짐 */
}
</style>
</head>
<body>
<div class="button">
<a href="#" class="font_big font_italic font_bold font_center">click</a>
</div>
</body>
Position속성
<style>
.box {
width: 100px;
height: 100px;
position:relative; //만약 얘를 absolute로 주면 yellow만 나옴!
}
.box:nth-child(1){background-color: red;}
.box:nth-child(2){background-color: orange;}
.box:nth-child(3){background-color: yellow;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left:10px;
top:10px;
}
.box:nth-child(2) {
background-color: orange;
left: 50px;
top: 50px;
}
.box:nth-child(3) {
background-color: yellow;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
위아래로 글자넣고싶을때
<body>
<h1>Lorem ipsum dolor sit.</h1>
<div> <!-- alt + w -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor sit.</h1>
</body>
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left:10px;
top:10px;
}
.box:nth-child(2) {
background-color: orange;
left: 50px;
top: 50px;
}
.box:nth-child(3) {
background-color: yellow;
left: 100px;
top:100px;
}
body > div { /* body 바로밑에있는 div에게 속성주기 */
width : 400px;
height : 220px;
border : 1px solid black;
position : relative;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit.</h1>
<div> <!-- alt + w -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>Lorem ipsum dolor sit.</h1>
</body>
overflow속성
메뉴 만들기
728x90
댓글