🕵
Web Animation 1부 css Animation/
🗼
ch2 - 5. 정렬
🗼

ch2 - 5. 정렬

Index

Index1. 정렬이란?2. 텍스트 정렬3. float 정렬3.1 float 의미3.2 기본 개념3.3 블록 속성 태그 vs float 속성 태그 3.4 float:left, float:right3.5 float 속성의 문제점

1. 정렬이란?

정렬이란 사용자들이 알아보기 쉽게 텍스트나 태그를 왼쪽, 가운데 또는 오른쪽에 배치하는 작업을 말합니다.

2. 텍스트 정렬

가장 기본적인 텍스트 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬에 대해서 배워보겠습니다. 텍스트 정렬인 text-align과 관련 있는 속성값은 4가지가 존재합니다.
속성값
의미
left
기본값으로 텍스트를 왼쪽에 정렬합니다.
right
텍스트를 오른쪽에 정렬합니다.
center
텍스트를 가운데에 정렬합니다.
justify
텍스트를 양쪽에 정렬합니다.
이해를 돕기 위해서 간단한 예제를 작성해보겠습니다. 먼저 left, right, center에 대한 간단한 예제입니다.
<!DOCYPE html>
<html>
  <head>
    <title>텍스트 정렬</title>
    <style>
      .text_center{
        text-align: center;
      }
      .text_left{
        text-align: left;
      }
      .text_right{
        text-align: right;
      }
			
      </style>
    </head>
    <body>
      <div class="text_left">
        <span>왼쪽 정렬</span>
      </div>
      <div class ="text_right">
        <span>오른쪽 정렬</span>
      </div>
      <div class="text_center">
        <span>가운데 정렬</span>
      </div>
    </body>
</html>
notion imagenotion image
위와 같이 아주 간단한 정렬 결과를 확인해볼 수 있습니다.
다음은 양쪽 정렬에 대한 코드와 결과입니다. 양쪽 정렬은 이해하기 쉽도록 양쪽 정렬 기능을 주지 않았을 때와 줬을 때를 비교하여 보여드리겠습니다. 또한 확실히 비교하기 위해서 텍스트 길이가 충분히 긴 애국가 1절 가사를 이용하였습니다!
<!DOCYPE html>
<html>
  <head>
    <title>텍스트 정렬</title>
    <style>
      .text_initial{
        text-align: initial;
      }
      .text_justify{
        text-align: justify;
      }

      </style>
    </head>
    <body>
      <div class="text_initial">
        <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
      </div>
      <br>
      <div class="text_justify">
        <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
      </div>
    </body>
</html>
notion imagenotion image
오른쪽 끝에 '만'부분을 보시면 양쪽 정렬을 한 경우는 왼쪽과 오른쪽 여백의 크기를 맞춰주기 위해서 기존 정렬과 다른 모습을 알 수 있습니다.
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다. 예시로 첫 번째 예제 .text_center 코드를 수정해보겠습니다.
 .text_center{
        text-align: center;
				padding 10px 0px;
      }
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다.
padding 코드를 추가하면 기존의 글자 위치보다 더 아래쪽으로 내려간 결과를 볼 수 있습니다. 
text_center{
        text-align: center;
				margin: 10px 0px;
      }
비슷한 방식으로 margin도 세로 속성을 설정하는데 사용할 수 있습니다. 자신이 사용하고자 하는 높이에 맞게 설정을 주어서 사용하면 됩니다.

3. float 정렬

3.1 float 의미

float은 '띄우다'라는 뜻을 가지고 있으며 float 정렬은 다양한 객체를 띄워서 정렬을 하는 속성을 가집니다.
 

3.2 기본 개념

<div>, <p>, <table>와 같은 블록 속성을 가진 객체를 정렬하는 가장 기본적인 방법입니다. float 정렬은 크게 두 가지 속성이 있습니다. 좌측 정렬, 우측 정렬이 있으며 중앙 정렬은 없습니다. 하지만 불가능한 것은 아닙니다. margin 속성을 이용해서 할 수 있으며 좌측, 우측 정렬을 설명한 후에 예제를 통해 보여드리겠습니다.
 

3.3 블록 속성 태그 vs float 속성 태그

float 정렬의 예시를 보여드리기 이전에 블록 속성 태그의 성질과 float 속성의 성질에 대해 설명드리겠습니다.
 
블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있습니다.
notion imagenotion image
 
1번째에 float:left 속성을 준 그림은 다음과 같습니다.
notion imagenotion image
위 그림과 다른 점이 보이십니까? float 속성을 주면 '1번째'에 해당하는 공간만큼만 차지하고 다른 요소에 대해서 왼쪽으로 배치됩니다. 오른쪽에 대해서도 동일하게 적용됩니다.
 

3.4 float:left, float:right

지금부터는 좌측, 우측 정렬에 대해서 설명드리겠습니다. 먼저 좌측 정렬에 대한 설명입니다. 위 예제에서도 보다시피 float:left의 성질은 블록 박스에 해당하는 만큼의 공간만 차지하고 나머지 내용은 박스 오른쪽에 위치하며 위에서 아래의 방향의 흐름을 가집니다.
<!doctype html>
<html>
<head>
  <style>
    img{
      width:300px;
      float:left;
    }

  </style>
</head>
<body>
  <img src="/computer.jpg" alt="">
    float:left 예제입니다.
</body>
</html>
아래 왼쪽 화면은 이미지에 float:left 속성, 오른쪽 화면은 float:right 속성을 둔 결과입니다.
notion imagenotion image
 

3.5 float 속성의 문제점

다양한 객체를 간편하게 띄워서 정렬하는 float 정렬에도 문제점이 존재합니다. 전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있습니다.
아래 코드는 float 속성을 설정하지 않은 상황입니다.
<!doctype html>
<html>
<head>
<style>
	.wrap{
    border: 4px solid blue;
	}
	.content{
    margin: 5px;
		height: 20px;
		border: 2px solid green;
	}
</style>
</head>
<body>
		<div class="wrap">
		    <div class="content">내용1</div>
        <div class="content">내용2</div>
		</div>
</body>
</html>
notion imagenotion image
다음은 float 속성을 설정한 코드와 결과입니다. 자식한테 float 속성을 설정하면 자식 요소들은 붕 띄워진 상태이기 때문에 부모 요소가 자식 박스들의 존재를 인식하지 못합니다. 따라서 다음과 같은 결과가 나옵니다.
<!doctype html>
<html>
<head>
<style>
	.wrap{
    border: 4px solid blue;
	}
	.content{
    float: left;
    margin: 5px;
		height: 20px;
		border: 2px solid green;
	}
</style>
</head>
<body>
		<div class="wrap">
		    <div class="content">내용1</div>
        <div class="content">내용2</div>
		</div>
</body>
</html>
notion imagenotion image
위 문제점을 해결하는 방법은 다양하게 존재합니다.
첫째, 부모 요소에 overflow:hidden를 추가합니다.
overflow:hidden은 넘치는 현상을 해결해주기 때문에 넘쳐흐르는 자식 요소를 포함하도록 부모 요소의 높이를 늘여줍니다. 즉 .wrap 부분에 overflow:hidden;을 추가하여 해결합니다.
.wrap{
    border: 4px solid blue;
		overflow:hidden; 
	}
둘째, 부모 요소에 높이 값을 직접 지정해줍니다.
.wrap{
    border: 4px solid blue;
		height:35px;
	}
위와 같은 방법으로 수정하면 아래와 같이 해결된 모습을 볼 수 있습니다.
notion imagenotion image