- text-align : left - 내용을 왼쪽 정렬합니다.
- text-align : center - 내용을 가운데 정렬합니다.
- text-align : right - 내용을 오른쪽 정렬합니다.
- text-align : justify - 내용을 양쪽 정렬합니다. (내용이 많을때 적용)
text-align
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
text-align 은 그림이나 텍스트등의 내용의 정렬 방법을 지정합니다.
예제 1
텍스트에 적용
보기
text-align : left
text-align : center
text-align : right
text-align : justify
소스
<style type="text/css">
.css_test {
border : 3px solid silver;
border-radius : 5px;
padding : 7px;
}
</style>
<div class="css_test" style="text-align:left;">text-align : left</div>
<div class="css_test" style="text-align:center;">text-align : center</div>
<div class="css_test" style="text-align:right;">text-align : right</div>
<div class="css_test" style="text-align:justify;">text-align : justify</div>
.css_test {
border : 3px solid silver;
border-radius : 5px;
padding : 7px;
}
</style>
<div class="css_test" style="text-align:left;">text-align : left</div>
<div class="css_test" style="text-align:center;">text-align : center</div>
<div class="css_test" style="text-align:right;">text-align : right</div>
<div class="css_test" style="text-align:justify;">text-align : justify</div>
설명
예제 2
이미지에 적용
보기
center
right
left
소스
<div style="text-align:center;">
<img src="http://cfile2.uf.tistory.com/image/2604833354D74FB40E65BC" /><br>center
</div>
<div style="text-align:right;">
<img src="http://cfile2.uf.tistory.com/image/230D9C3454D7331920123C" /><br>right
</div>
<div style="text-align:left;">
<img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" /><br>left
</div>
<img src="http://cfile2.uf.tistory.com/image/2604833354D74FB40E65BC" /><br>center
</div>
<div style="text-align:right;">
<img src="http://cfile2.uf.tistory.com/image/230D9C3454D7331920123C" /><br>right
</div>
<div style="text-align:left;">
<img src="http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8" /><br>left
</div>
사용된 CSS (클릭시 보기) :
text-align
예제 3
실습 - 정렬속성 조절해 보기
보기
CSS 공작소에 방문해 주셔서 감사드립니다 !!
| 정렬 | |
|---|---|
| text-align : | |
|
text-align : left
|
|
예제 4
justify 설정 사용 : (저스티파이) 정확히, 딱 의 뜻입니다.
보기
text-align : left;
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
text-align : justify;
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*
소스
text-align : left;
<div style="border:1px solid silver; text-align:left;">현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* <br>현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*</div>
text-align : justify;
<div style="border:1px solid silver; text-align:justify;">현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* <br>현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*</div>
<div style="border:1px solid silver; text-align:left;">현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* <br>현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*</div>
text-align : justify;
<div style="border:1px solid silver; text-align:justify;">현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* <br>현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^* 현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*현재 시각은 2015년 2월 10일 화요일 오전 12시 22분 입니다. ^^*</div>
사용된 CSS (클릭시 보기) :
bordertext-align
설명
- text-align : justify 영역의 끝부분에 맞도록 자간(글자간격)을 조절하여 끝부분의 글자를 맞춰줍니다.
예제 5
실습 - 텍스트 정렬 속성보기
보기
안녕하세요? 관리맨 입니다. 2006년 4월 어느날 있었던 업데이트 이후 8년만에 다시 한번 업데이트를 하였습니다. 이곳을 운영한지도 이제 10년이 훌쩍 넘었네요. 2000년도에 개인홈페이지에 재미삼아 만들어본 어떤 메뉴가 이곳의 시작이었습니다.
그후 꾸준히 미디자료를 수집하고, 또 어떤 고마우신 분의 자료 제공으로 많은 도움이 되었습니다. 지금이야 상상하기 힘들지만, PC통신(천리안) 음악자료실에서 많은 자료를 구했죠. 영원한것은 없다지만... PC통신은 너무 빨리 사라져 버렸고. 더불어 주옥같은 많은 자료들도 사라졌습니다.
오래된 미디자료실
오래된 미디자료실
| 정렬 | |
|---|---|
| text-align : | |
|
text-align : left
|
|
설명
- justify 속성은 좌우 여백에 맞게 자간을 조절해 줍니다.
- 그리고 justify 는 left 속성 처럼 왼쪽 정렬입니다.
- justify 와 left 를 번갈아 보면서 비교해 보세요.
- 그리고 justify 는 left 속성 처럼 왼쪽 정렬입니다.
- justify 와 left 를 번갈아 보면서 비교해 보세요.
예제 6
실습 - textarea 에 적용해 보기
보기
| text-align : | |
|---|---|
|
text-align : left
|
|
설명
- textarea 에 justify 적용은 테스트 해보니 브라우저마다 다르네요.
- 크롬과 파이어폭스는 됩니다. (15.03.10 기준 최신버젼)
- 파이어폭스는 white-space : normal 을 추가해 주어야 적용되었습니다.
참고 : white-space
연구 1
text-align:justify 을 letter-spacing 으로 비교해 보기
보기
꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -
letter-spacing : -2px;
꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -
letter-spacing : 5px;
꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -
소스
<style type="text/css">
.css_test {
border : 3px solid gray;
margin-bottom : 20px;
text-align : justify;
padding : 10px;
border-radius : 5px;
}
</style>
<div class="css_test">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
letter-spacing : -2px;
<div class="css_test" style="letter-spacing:-2px;">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
letter-spacing : 5px;
<div class="css_test" style="letter-spacing:5px;">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
.css_test {
border : 3px solid gray;
margin-bottom : 20px;
text-align : justify;
padding : 10px;
border-radius : 5px;
}
</style>
<div class="css_test">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
letter-spacing : -2px;
<div class="css_test" style="letter-spacing:-2px;">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
letter-spacing : 5px;
<div class="css_test" style="letter-spacing:5px;">꿈을 꾼다는 것은 '생각하는 것'이 아니라 '움직이는 것'이다. 그러므로 꿈은 '명사'가 아니라 '동사'다. 나를 움직이면 그만큼 꿈에 점점 다가가게 되는 것이다. 그러니 움직이자. 빛나는 나와 만나는 날이 언젠가 반드시 올 것이다. - 이동진의《당신은 도전자입니까》중에서 -</div>
설명
- text-align : justify 를 사용하면 영역 양쪽끝에 문자열을 맞춰줍니다.
연구 2
실습 - text-align : justify + line-height + letter-spacing 콜라보
보기
두바퀴로 가는 자동차 네바퀴로 가는 자전거 물속으로 나는 비행기 하늘로 나는 돗단배 복잡하고 아리송한 세상위로 오늘도 에드벌룬 떠있건만 포수에게 잡혀온 잉어만이 한숨을 내쉰다. 휴...
설명