#6 CSS 레이아웃

hwanginchang·2021년 7월 5일
CSSSublime Texthtml레이아웃웹프로그래밍
0

대구 AI스쿨_웹프로그래밍

목록 보기
6/53
post-custom-banner

과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_4레이아웃_210509
주제 : css

레이아웃

z-index 속성

  • 객체에 Z값을 주는 속성
  • 객체는 기본적으로 Z값 0을 갖고 있다.
  • Z값이 높은 객체가 더 높이 올라온다.
  • 3차원 속성을 부여하는 position의 속성값과 함께 사용된다.
    position: adsolute ;
    position: fixed ;
    position: relative ;
<div class="z-one"></div>
<div class="z-two"></div>
.z-one {
	position: absolute;
    
	width: 200px;
	height: 400px;
	background-color: yellow;

	z-index: 1;
}

.z-two {
	position: absolute;
	width: 200px;
	height: 300px;
	background-color: blue;

	z-index: 0;

두가지 객체중 z-index속성값이 1이라도 높은 객체가 중첩에서 상단(z축 기준)에 배치된다. 2개 이상의 객체에도 적용된다. 기본 적으로 객체의 3 차원 속성에 영향을 준다.

2차원 객체와 3 차원 객체

형제 관계 객체들의 포지션 속성은 윗 순서를 가지고 있는 객체의 포지션 속성에 따라 정해진다. 즉 서로 맞붙어 있는 객체들 중 앞순서의 차원 속성에 따라 겹쳐질지 혹은 겹쳐지지 않을지 결정된다. 따라서 일반적으로 웹페이지의 설계도면에서 큰 구역을 나눌때는 2차원 객체를 그리고 세부적인 공간을 나누거나 컨텐츠를 입력할때는 2차원 객체와 3차원 객체를 필요에 따라 활용할 수 있다.

  • 2 차원 객체 : 서로의 공간을 침범하지 못함
  • 3 차원 객체 : 서로의 공간을 침범하여 겹쳐질 수 있고 z-index속성을 통해 객체를 조정할 수 있다.

float 속성

형제 객체의 x축 정렬이 필요할 때는 float속성을 사용한다. 해당 객체를 3차원 속성으로 만들어 정렬시키는 float속성은 다음 순서의 객체와 겹처지게된다. 때문에 float속성을 가진 객체와 다음 객체를 분리하기 위해 clear: both ;속성을 함께 사용한다. 

<header></header>
	 <div = class="left"></div>
	 <div class="center"></div>
	 <div class="right"></div> 	
<footer></footer>

.header {
	width: 100%;
	height: 100px;
	background-color: yellow;
}

.left {
	float: left;

 	width: 300px;
 	height: 200px;
 	background-color: pink;
}

.center {
	float: left;

    width: 500px;
    height: 200px;
    background-color: blue;
}


.right {
	position: static;
	float: right;

	width: 200px;
	height: 200px;
	background-color: green;
}


footer {
	clear: both;

	width: 100%;
	height: 100px; 
	background-color: black;
}

float속성이 적용된 마지막 객체 .right와 맞붙는 footer가 겹치지 않도록 하기 위하여 footer에 clear: both ; 속성을 준다.

- TIP -

float속성과 짝을 이루는 clear: both ; 속성을 적용하는 다른 방법으로 clear: both ; 속성을 가진 객체를 만드는 방법이 있다. 

<header></header>
	 <div = class="left"></div>
	 <div class="center"></div>
	 <div class="right"></div> 	
     
    <div class="clearfix"></div>

<footer></footer>
.clearfix {
	clear: both ;
}

clear: both ; 속성을 가진 객체를 만들어 footer객체가 div객체들과 겹쳐지는 것을 막아준다. 이 방법은 속성의 사용을 확인하는데도 도움을 준다. 객체의 clearfix라는 class선택자는 개발자들 사이에서 관례적으로 통용되는 선택자이다.

float속성의 한계

float는 레이아웃을 짜는데 매우 유용한 속성이지만 한계를 가지고 있다. float로 정렬된 객체들은 전체의 width값이 브라우저의 크기를 넘어서면 객체들의 정렬이 틀어지게된다.

float속성의 사용방법

고정값을 가진 객체를 사용

<header></header>
	 <section>
     		<div class="left"></div>
	 	<div class="center"></div>
	 	<div class="right"></div> 	
	</section>
<footer></footer>
section {
	width: 1400px;
	height: 200px;
	background-color:  orange;

float를 사용하는 객체들의 width 총합 보다 같거나 큰 width 값을 가진 부모객체를 사용하여 뒤틀어지는 것을 방지할 수 있다. 고정값을 사용하는 객체는 브라우저의 크기에 영향을 받지 않기 때문에 문제없이 float속성을 사용할 수 있다.

가변값의 사용
브라우저 크기가 조정되면 같이 조정될 수 있도록 float를 사용하는 객체의 width값을 가변값으로 준다.

etc

  • float속성을 사용하는 객체는 부모 객체의 높이값에 영향을 주지 못한다.
  • float속성을 사용하는 객체는 position속성의 static(기본값)과 relative과 사용해야 된다. 순수 3차원 속성이 absolute 그리고 fixed와는 사용할 수 없다.

overflow속성

p태그로 입력되는 본문의 내용이 부모태그이 영역을 넘어갈때 사용하는 속성이다. 

<div class="over-box">
 	<p>Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
</div>

.over-box {
	overflow: hidden;

width: 200px;
height: 200px;
background-color: yellow;
}

div객체를 넘어가는 본문의 내용을 숨기는 속성이다.

  • overflow: hidden; : 객체의 구역을 넘어서는 컨텐츠를 숨김
  • overflow-x: scroll; 객체의 구역을 넘어서는 컨텐츠를 x축 스크롤에 담음
  • overflow-y: scroll; 객체의 구역을 넘어서는 컨텐츠를 y축 스크롤에 담음

flex속성

부모 객체에 담겨있는 자식 객체들을 정렬시키는 속성이다. display속성을 사용한다. 

<div class="container">
 	<div class="item one"></div>
 	<div class="item two"></div>
 	<div class="item three"></div>
</div>
.container {
	display: flex;

display: flex; 정렬
flex-direction: ; 정렬방향

정렬방향

  • flex-direction: row ; 행으로 정렬
  • flex-direction: row-reverse ; 행 역순으로 정렬
  • flex-direction: column ; 열으로 정렬
  • flex-direction: column-reverse ; 열 역순으로 정렬

flex-wrap : nowrap ; 부모영역에 맞춰서 객체를 자동으로 리자이즈

flex-flow : row wrap ; dircetion과 flex모두 적용

x축 정렬
justify-content: flex-start ; 왼쪽 정렬
justify-content: flex-end ; 오른쪽 정렬
justify-content: center ; 가운데 정렬
justify-content: space-between ; 동일한 간격의 띄우기
justify-content: space-around ; 객체를 기준으로 동일한 공간 주기
justify-content: flex-start ;

y축 정렬
align-item: flex-start ; 상단정렬
align-item: flex-end ; 하단정렬
align-item: center ; 상하 가운데 정렬
align-item: baseline ; 객체들 중 가장 낮은 곳에 맞추어 정렬

flex 개념을 이해하는데 도움되는 사이트

중앙 정렬

중앙 정렬은 실무에서 가장 빈번하게 사용되는 정렬이다.

방법 1

<div class="center"></div>
.center {
	width: 300px;
	height: 300px;
	background-color: yellow;

	margin: 0 auto;
}

margin의 속성값으로(margin: 상하값 좌우값)을 주어 객체를 중앙 정렬 시킨다.

방법 2

.center {
	position: relative
	width: 300px;
	height: 300px;
	background-color: blue;
    
    left: 50%
    margin-left: -150px;

position: relative ; 속성과 함께사용하는 left, margin-left를 사용하여 객체를 중앙 정렬 시킨다. 객체의 크기가 변화면 margin-left값도 함께 변경해 줘야 한다.

Review

오늘 강의에서 가장 인상적인 부분은 2차원 객체와 3차원 객체의 활용 이었다. 짧게 언급되고 지나간 부분이지만 2차원 객체를 서로 침범되면 안되는 구역을 기획하는데 사용된다는 이야기를 들었을때 헷갈렸던 2차원과 3차원의 개념이 쉽게 이해 되었다. 그러면서 이전 강의에서 큰 부분부터 작은 구역으로 웹페이지를 구성한다는 내용 역시 오늘에서야 조금이나마 이해가 닿았다.

profile
hwanginchang
Idealist
이전 포스트

#5 CSS 레이아웃

다음 포스트

#7 CSS_레이아웃 실습

post-custom-banner

0개의 댓글