개발/CSS

CSS 레이아웃

에크키키 2022. 8. 10. 19:56

 

box-sizing
웹 문서에 여러요소 배치하려면 각 요소의 너비계산 해야함
css의 wdith는 콘텐츠 영역의 너비를 나타내기때문에 테두리나 크기는 따로 계산해야함
이럴때 box-sizing속성 사용
content-box : 기본 값, width 콘텐츠 영역의 너비를 나타냄
border-box : width 콘텐츠영역에 테두리까지 포함한 박스모델 전체너비값으로 사용

float 요소를 왼쪽이나 오른쪽에 배치

<style>
	.box1{float:left;}
	.box2{float:left;}
	.box3{float:right;}
</style> /*박스 1,2 순으로 왼쪽에 배치 box3 오른쪽에 배치 */

clear float속성 해제하기 left right both

<style>
	.box1{float:left;}
	.box2{float:left;}
	.box3{/*float 지정하지 않음 ->겹쳐서 표시}
	.box4{clear:both;} /*앞에서 사용한 left해제 both로 하는게 편리 */
</style>

position 속성 배치방법,static제외한 나머지 속성에는 top bottom left right 로 위치값 지정가능
static:기본 값 나열한 순서
relatvie:부모요소
absolute:relative와 묶어서 자주사용
fixed:브라우저 창기준으로 배치

<style>
		#wrap{
			position:relative;
			width:300px;
			height:300px;
			border:1px solid #ccc;
		}
		.box{
			position:absolute;
			width:50px;
			height:50px;
			background:#0094ff;
		}
		#crd1{ top:0; left:0; }
		#crd2{ top:0; right:0; }
		#crd3{ bottom:0; left:0; }
		#crd4{ bottom:0; right:0; }
		#crd5{ top:100px; left:100px; }
	</style>
</head>
<body>
	<div id="wrap">
		<div class="box" id="crd1"></div>
		<div class="box" id="crd2"></div>
		<div class="box" id="crd3"></div>
		<div class="box" id="crd4"></div>
		<div class="box" id="crd5"></div>
	</div>
</body>

z-index 한요소위에 다른요소를 쌓을떄 쌓는 순서를 지정 숫자가 클수록 위에 쌓임

 
<style>
   div#wrapper {position: relative;}

    .box {
		position:absolute;
		width:100px;
		height:100px;
		border:1px solid black;
		font-size:26px;
	}
	#b1 {				
		left:50px;
		top:50px;
		z-index:1;
	}
	#b2 {				
		left:110px;
		top:70px;
		z-index:3;
	}
	#b3 {
		left:70px;
		top:110px;
		z-index:1;
	}
</style>
	<div id="wrapper">
		<div id="b1" class="box">1</div>
		<div id="b2" class="box">2</div>
		<div id="b3" class="box">3</div>
	</div>

 

 

표스타일

border 테투리 속성

 
            .table1 {
                border:1px solid black;
            }
            .table1 td {
                border:1px dotted black; /*점선*/
            }

 

 

border-collapse

  • separate: 기본값 테두리 따로표시
  • collapse:테두리 합쳐 표시
            .table1 {
                border:1px solid black;
                border-collapse:collapse; /*바깥선이 하나로 합쳐짐*/
            }
            .table1 td {
                border:1px dashed black;
                padding:10px;
                text-align:center;
            }

 

 

border-sapcing 

separate로 셀들을 분리하였을때 인접한 셀 테두리 사이의 거리지정

            .table2 {
                border-collapse:separate;
                border-spacing:20px 10px;  /*수평 수직 */              
            }

표너비

            table {
                border-collapse:collapse;
                width:300px;
            }
            td {
                width:150px;/*셀의 크기도 설정 */
                padding:10px;/*셀의 패딩, 셀의 테두리와 내용사이에 여백을 줌 */
            }

table-layout

  • fixed
  • auto:고정값, 셀 내용에 따라 셀의 너비가 달라짐

word-break:break-all;

셀 너비보다 긴 내용도 셀 안에 표시

            .table1 {
                border-collapse:collapse;
                width:300px;
                table-layout:fixed;
                word-break:break-all;
                height:auto;  /*셀에서 내용이 벗어나지않도록 auto설정*/
            }          

text-align:셀 안의 텍스트 정렬 left right center

vertical-align: 인라인이나 인라인블럭 요소의 세로 정렬방법 

            .va1 { vertical-align:top; }
            .va2 { vertical-align:bottom; }
            .va3 { vertical-align:middle; }
저작자표시 (새창열림)