ABOUT ME

    -
    • CSS - 영역 관련
      프로그래밍/HTML & CSS 2021. 9. 23.
      반응형
      .box{

	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box{
	background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}

.static-box{
	position: static;
	background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}
      <div class="box"> <div class="default-box">default</div> </div>
<div class="box"> <div class="static-box">static</div> </div>
<div class="box" style="padding: 10px;"> <div class="default-box">default</div> </div>

      - static의 옵션은 그냥 안준 기본이랑 똑같다고 보면 된다.

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

.box{

	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box{
	background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}

.relative-box{
	position: relative;
	left: 5px;
	top: 5px;
	background: green; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}
	



</style>
</head>
<body>

<h3>position:relative - 일반적인 문서 흐름에 따라 배치하며, 위치를 지정할 수 있다.</h3>

<div class="box"> <div class="relative-box">relative</div> </div>
<div class="box"> <div class="default-box">default</div> </div>



</body>
</html>

      relative 포지션 옵션

      - 보통 문서 흐름에 따라서 배치하고, 위치를 내 임의로 지정 가능함.

      - left와 top에 5px씩 줘가지고 부모로부터 5씩 떨어진걸 볼 수 있다.

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">

.box{

	width: 150px; height: 150px; margin: 30px;
	border: 3px dotted gray;
	background: orange;
}

.default-box{
	background: #333; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}

.absolute-box{
	position: absolute;
	width: 150px;
	height: 150px;
	left: 50px;
	top: 50px;
	background: green; color: #eee; font-weight: bold; text-align: center; line-height: 150px;
}
	



</style>
</head>
<body>

<h3>position:absolute - 일반적인 문서 흐름을 따르지 않으며, 페이지 레이아웃에 공간도 배정하지 않음.</h3>

<div class="box"> <div class="absolute-box">parent:div</div> </div>
<div class="absolute-box">parent:body</div>



</body>
</html>

      position:absolute : 완전 독자적이라고 보면 된다.

      문서의 흐름 안따르고, 페이지 레이아웃에 공간도 배정 안함.

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
	width: 100%; height: 2500px;
	background: yellow;
}

.fixed-box {
	position: fixed;
	width: 150px;
	height: 150px;
	left: 100px;
	top: 100px;
	background: green; color: #eee; font-weight: bold; 
	text-align: center; line-height: 150px;
}
</style>
</head>
<body>

<h3>position:fixed</h3>

<div class="box">
  요소가 문서의 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간을 배정하지 않는다.<br>
  부모 요소와 관계없이 viewport를 기준으로 좌표 프로퍼티을 사용하여 위치를 이동 시킨다.<br>
  스크롤이 되더라도 화면에 사라 지지않고 항상 같은 곳에 위치한다.  
</div>

<div class="fixed-box">fixed-box</div>


</body>
</html>

      position:fixed = 말 그대로 픽스드 고정 시켜버림 그 위치에 딱 고정

       

      스크롤을 움직여도 이 초록 박스는 딱 이 위치에 고정된다.

       

      픽스드 예제

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
*{
	padding: 0; margin: 0;
}
.container {
	width: 100%; height: 1500px;  background: yellow;
}
.container-body {
	position: relative;
	left: 0;
	top:50px;
	padding: 20px;
	z-index: 10;
}
.fixed-box {
	position: fixed; color: tomato;
	font-weight: bold; text-align: center; background: #333;
}
.nav {
	width: 100%; height: 50px; top:0; left: 0; line-height: 50px;
	z-index: 9999; /* 화면이 스크롤되어도 메뉴자리에 내용이 보이지 않게 하기 위해 */
}
.right{
	width: 100px; height: 100%; top:50px; right: 0;
	background: gray;
}
.box{
	width: 150px; height: 150px; left: 100px; top:200px;
	border: 3px dashed blue;
	line-height: 150px;
}
</style>

</head>
<body>

<div class="container">
	<div class="nav fixed-box" style="background: white;">메뉴</div>
	<div class="container-body">
		<h3>내용</h3>
	</div>
</div>
<div class="box fixed-box">fixed-box</div>
<div class="right fixed-box">right</div>

</body>
</html>

       

      현재 메뉴 right바 검은색 사각형 모두 고정 되어 있는걸 확인 할 수 있다.

       

       

      요소의 우선순위

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	border: 3px dotted gray;
}
.absolute-box {
	width: 100px;
	height: 100px;
	position: absolute;
}
.yellow {
	background: yellow;
	z-index: 1000;
}
.orange {
	background: orange;
	left: 100px;
	top:100px;
	z-index: 100;
}
.green {
	background: green;
	left: 150px;
	top:150px;
	z-index: 500;
}
.blue{
	background: blue;
	left: 180px;
	top: 120px;
	z-index: 10;
}
</style>


</head>
<body>

<h3> z-index : position 속성이 static이 아닌 요소와 그 자손의 z축 순서 지정 </h3>

<div class="box yellow">static:z-index 적용안됨</div>
<div class="absolute-box orange"></div>
<div class="absolute-box green"></div>
<div class="absolute-box blue"></div>

</body>
</html>

      z-index는 간단히 말하면 누가 더 우선순위가 높냐에 따라서 겹침 정도를 설정 하는 것.

      그림으로 봤을때 초록이 우선순위가 젤 높다 (z-index값이 제일 크다.)

       

       

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 300px; height: 200px; padding: 10px; margin: 30px;
	border: 2px dotted gray;
}
.img {
	position: absolute;
	top:80px; left: 420px;
	clip: rect(20px, 220px, 220px, 20px); /* top, right, bottom, left */
}
</style>
</head>
<body>

<div class="box"><img src="../img/img2.png" width="300" height="200"></div>
<div class="box"><img src="../img/img2.png" class="img"></div>

</body>
</html>

      clip = 어디서 부터 어디까지 보여줄건지 설정 가능.

      사진 자르기 기능

       

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box1 {
	columns: 3; /* 3단*/
	margin: 30px;
}
.box2 {
	columns: 200px; /* 단의 최소 크기 */ 
	margin: 30px;
}
.box3 {
	columns: 200px 5; /* 단의 최소 크기 및 단의 최대 개수 */
	margin: 30px;
}
</style>
</head>
<body>

<h3>columns : 다단</h3>

<h3>3단</h3>
<div class="box1">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

<h3>단의 최소 크기 지정</h3>
<div class="box2">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

<h3>단의 최소 크기 및 최대 단수 지정</h3>
<div class="box3">
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
	html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>
<hr>

</body>
</html>

      columns = 단의 크기를 지정

      3단으로 지정한 항목들은 크기를 100%하나 50%로하나 일정하게 3단이 유지되는걸 볼 수 있다.

       

      크기로도 지정이 가능하다 box2와 box3은 px로 지정했다.

       

      그리고 단의 최대 갯수도 지정이 가능해서 단이 계속 늘어나는걸 방지 할 수 있다.

       

       

      반응형
      저작자표시

      '프로그래밍 > HTML & CSS' 카테고리의 다른 글

      CSS - grid 그리드  (0) 2021.09.23
      CSS - flex  (0) 2021.09.23
      CSS - float 개요  (0) 2021.09.22
      CSS - margin 마진 겹침 현상  (0) 2021.09.22
      CSS - 다양한 옵션들  (0) 2021.09.22

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바