posotion

sisun·2023년 4월 15일
0

HTML연습

목록 보기
5/8
post-thumbnail

01_ 다양한 position 속성값

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_다양한 positiont속성값</title>
    <style>
        /*리셋*/
        *{margin:0; padding:0;}
ul li,ol li{list-style:none;}
        /*가이드라인과 초기설정*/
        body{
            height: 3000px;
        }
        div{
            border: 1px solid gray;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        #warpper{
            border: 1px solid red;
            width: 700px;
            height: 700px;
            position: absolute;
            bottom: 0;left: 100px;
        }
        #wrap{
            border-color: blue;
            width: 500px; height: 300px;
            position: absolute;
            top: 200px; right:200px;
        }
        /*position style*/
        
        /* absolute를 갖게되면 자신의 자리는 없어지고 부모의 왼쪽상단 기준으로 자리를 잡는다. 만약 아무리 거슬러올라가도 부모가 absolute속성을 가지고 있지 않다면 body를 따르게된다. */
        .first{
            position: absolute;
            left: 0;
            top: 0;
        }
        .second{
            position: absolute;
            right: 0;
            top: 0;
        }
        /*relative를 갖게되면 현재 갖고있는 자리는 유지하되 현재자리 기준으로 이동하게된다.*/
        .third{
            position: relative;
            left: 300px;
            top: 100px;
        }
        /*static은 position의 디폴트값이다.
        forth에 들어간 position관련 효과는 적용되지 않는다. 
        static은 원래 있어야할 곳에 고정되는 속성이다 html구조에 의해서 자리를 잡게된다.*/
        .forth{
            position: static;
            left: 500px;
        }
        .content{
            position: absolute;
            left: 0;
            top: 0;
        }
        .fifth{
            background: orange;
            position: fixed;
        }
  

    </style>
</head>
<body>
    <div id="warpper">
        <div class="first">absolute</div>
        <div class="second">absolute</div>
        <div class="third">relative</div>
        <div class="forth">static</div>
        <div id="wrap">
            <div class="content">content</div>
        </div>
        
    </div>
    <div class="fifth">fixed</div>
</body>
</html>

02_Z_index

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_z-index</title>
    <style>
        /*초기화*/
        *{margin:0; padding:0;}
ul li,ol li{list-style:none;}
        /**/
        #wrapper{
            border: 1px solid red;
            position: relative;
            top: 300px;
            left: 300px;
            width: 500px;
            height: 500px;
        }
        #wrapper>div{
            border: 1px solid gray;
            width: 100px;
            height: 100px;
            position: absolute;
        }
        #wrapper>div:nth-child(1){
            background: pink;
            z-index: 3;
        }
        #wrapper>div:nth-child(2){
            background: beige;
            top: 50px; left: 50px;
            z-index: 2;
        }
        #wrapper>div:nth-child(3){
            background: lightblue;
            top: 100px;
            left: 100px;
            z-index: 3;
        }
        #wrapper>div:nth-child(4){
            background: yellow;
            top: 150px;left: 150px;
            z-index: 4;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
        <div class="box">box4</div>
    </div>
</body>
</html>

03_position_fixed


<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>01_레이아웃실습_self과제</title>
	<style>
		*{margin: 0;
			padding: 0;}
			body{
				height: 3000px;
			}
			#wrapper{
				position: absolute;
				top:45px;
				text-align: center;
				text-transform: uppercase;
			}
			#wrapper,header,#top,#carousel,section, article, h1,h2{
				border:1px solid gray;
			}
			ul li, ol li{
				list-style: none;
				border:1px solid orange;
			}
			header{
				padding:1%;
				overflow: hidden;
				position: fixed;
				width: 100%;
				background-color: white;
				z-index: 9999;
			}
			nav#gnb{
				border:1px solid red;
				width: 50%;
				float: left;
			}
			nav#gnb ul{
				overflow: hidden;
			}
			nav#gnb li{
				width: 25%;
				float: left;
				box-sizing: border-box;
			}
			input{
				float: right;
			}
			input[type="search"]{
				width: 15%;
				margin-right: 1%;
				height: 25px;
			}
			input[type="submit"]{
				width: 9%;
				height: 25px;
			}
			div#top{
				padding:20px;
			}
			#top h1{
				width: 100px;
				height: 100px;
				margin:0 auto;
				border-radius: 50%;
				line-height: 100px;
			}
			#top nav#lnb{
				border:1px solid red;
				width: 70%;
				margin:0 auto;
				overflow: hidden;
				margin-top: 20px;			
			}
			nav#lnb li{
				width: 23%;
				float: left;
				box-sizing: border-box;
				margin: 0 1%;
			}
			div#carousel{
				padding: 50px;
			}
			div#carousel h2{
				width: 55%;
				margin:0 auto 25px;
			}
			section{
				padding:0 100px;
				overflow: hidden;
			}
			section article{
				width: 30%;
				float: left;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- div#wrapper>header+div#top+div#carousel+section -->
		<header>
			<!-- (nav>ul>li*4>a>{menu$})+input*2 -->
			<nav id="gnb">
				<ul>
					<li><a href="">menu1</a></li>
					<li><a href="">menu2</a></li>
					<li><a href="">menu3</a></li>
					<li><a href="">menu4</a></li>
				</ul>
			</nav>
			<input type="submit" value="검색">
			<input type="search">
		</header>
		<div id="wrapper">
			<div id="top">
				<!-- h1{logo}+nav#lnb>ul>li*4>a>{mdenu$} -->
				<h1>logo</h1>
				<nav id="lnb">
					<ul>
						<li><a href="">menu1</a></li>
						<li><a href="">menu2</a></li>
						<li><a href="">menu3</a></li>
						<li><a href="">menu4</a></li>
					</ul>
				</nav>
			</div>
			<div id="carousel">
				<!-- h2{image scroller}+p*2 -->
				<h2>image scroller</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, qui.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, fugit!</p>
			</div>
			<section>
				<!-- article>img+h3{title}+p*2 -->
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
				<article>
					<img src="http://place-hold.it/300x200" alt="">
					<h3>title</h3>
					<p>Lorem ipsum dolor sit amet.</p>
					<p>Lorem ipsum dolor sit amet.</p>
				</article>
			</section>
		</div>
	</body>
	</html>

04_sticky

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>04_sticky</title>
	<style>
		*{margin: 0;
		padding: 0;}
		#wrapper{
			width: 100%;
			/* overflow: hidden; */
			height: 5000px;
		}
        h1{
            padding: 5px;
            text-align: center;
            text-transform: uppercase;
        }
		nav{
			width: 100%;
			overflow: hidden;
            /* position:-webkit-sticky; */
            position: sticky ;
            top: 0px;
		}
		nav li{
			width: 20%;
			background-color: orange;
			height: 50px;
			text-align: center;
			float: left;
			list-style: none;
			line-height: 50px;
		}
		nav li:hover{
			background-color: navy;
			color:white;
		}
		section{
			width: 50%;
			height: 300px;
			border:1px solid gray;
			box-sizing: border-box;
			float: left;
            text-align: center;
            line-height: 300px;
		}
        footer{
            text-align: center;
            line-height: 300px;
        }
	</style>
</head>
<body>
	
	<div id="wrapper">
        <h1>shopping mall</h1>
		<nav>
			<ul>
				<li>menu1</li>
				<li>menu2</li>
				<li>menu3</li>
				<li>menu4</li>
				<li>menu5</li>
			</ul>
		</nav>
		<section>section1</section>
		<section>section2</section>
		<section>section3</section>
		<section>section4</section>
		<footer>footer</footer>
	</div>
</body>
</html>
profile
풀스택 국비수강중

0개의 댓글