[CSS] 텍스트 관련 스타일과 예제

🌐 FrontEnd/HTML & CSS

[CSS] 텍스트 관련 스타일과 예제 - 2

m-ur-phy 2022. 5. 20. 22:10

시작하면서

텍스트와 관련된 스타일을 예제와 함께 공부합니다.

3. 문단 스타일

(1) direction 속성

텍스트의 쓰기 방향을 지정합니다.

/* 예 */

h3 {
	direction: rtl; /* 제목을 오른쪽에서 왼쪽으로 표시 */
}

(2) text-align 속성 - 텍스트 정렬하기

문단의 텍스트 정렬 방법을 지정합니다.
사용할 수 있는 속성값은 left 와 right, center, justify 입니다.
기본 값은 브라우저에 따라 달라지며, 부모 요소의 값을 상속합니다.

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>LoveDive</title>
  <style>
  	p {
  		border: 1px solid plum; /* 테두리 - 자두색 1픽셀 실선 */
  		padding: 10px; /* 테두리와 내용 사이의 패딩 여백 */
  		margin: 10px; /* 단락 주변의 마진 여백 */
  	}
    .align-left {text-align: left;}  /* 왼쪽 정렬 */
    .align-right {text-align: right;}  /* 오른쪽 정렬 */
    .align-center {text-align: center;}  /* 가운데 정렬 */
    .align-justify {text-align: justify; }  /* 양쪽 정렬 */
  </style>
</head>
<body>
  <h1>텍스트 정렬 </h1>
  
	<!-- 왼쪽 정렬 -->
	<p class="align-left"> 
		Narcissistic, my god, I love it
		서로를 비춘 밤
		아름다운 까만 눈빛 더 빠져 깊이
		(넌 내게로, 난 네게로)
		숨 참고 love dive
		Ooh-ooh, ooh-ooh, lalalalalalala
		Ooh-ooh, ooh-ooh 어서 와서 love dive
		Ooh-ooh, ooh-ooh, oh, perfect sacrifice
		Yeah 숨 참고 love dive
	</p>  

	<!-- 오른쪽 정렬 -->
  	<p class="align-right"> 
		Narcissistic, my god, I love it
		서로를 비춘 밤
		아름다운 까만 눈빛 더 빠져 깊이
		(넌 내게로, 난 네게로)
		숨 참고 love dive
		Ooh-ooh, ooh-ooh, lalalalalalala
		Ooh-ooh, ooh-ooh 어서 와서 love dive
		Ooh-ooh, ooh-ooh, oh, perfect sacrifice
		Yeah 숨 참고 love dive
	</p> 

	<!-- 가운데 정렬 -->
	<p class="align-center">
		Narcissistic, my god, I love it
		서로를 비춘 밤
		아름다운 까만 눈빛 더 빠져 깊이
		(넌 내게로, 난 네게로)
		숨 참고 love dive
		Ooh-ooh, ooh-ooh, lalalalalalala
		Ooh-ooh, ooh-ooh 어서 와서 love dive
		Ooh-ooh, ooh-ooh, oh, perfect sacrifice
		Yeah 숨 참고 love dive
	</p> 	
 
	<!-- 양쪽 정렬 -->
	<p class="align-justify">
		Narcissistic, my god, I love it
		서로를 비춘 밤
		아름다운 까만 눈빛 더 빠져 깊이
		(넌 내게로, 난 네게로)
		숨 참고 love dive
		Ooh-ooh, ooh-ooh, lalalalalalala
		Ooh-ooh, ooh-ooh 어서 와서 love dive
		Ooh-ooh, ooh-ooh, oh, perfect sacrifice
		Yeah 숨 참고 love dive
	</p> 

</body>
</html>

(3) text-justify 속성 – 정렬 시 공백 조절하기

정렬 시 공백을 조절하는 속성입니다.

(4) text-indent 속성 – 텍스트 들여쓰기

텍스트가 많은 문서일 경우 여러 문단으로 이루어지는데, 문단의 첫 글자를 얼마나 들여쓸지 지정합니다.

(5) line-height 속성 - 줄간격 조절하기

여러 줄로 구성된 텍스트 단락에서 줄 간격을 조절합니다.
숫자나 크기 값, 백분율 등을 사용할 수 있습니다.
숫자나 크기 값을 지정하면 글자 크기를 기준으로 계산합니다.

/* 예 */

p {
    line-height: 1.2; /* 숫자를 사용 */
}
p {
    line-height: 1.2; /* 백분율 사용 */
}
p {
    line-height: 1.2; /* 크기 값 사용 */
}

(5) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>my bag</title>
  <style>
    p { 
      border:1px solid gray;
      padding:10px;
    }
    .big-line {
      line-height:2;  /* 글자 크기 2배만큼의 줄간격 */
    }
    .small-line {
      line-height: 0.2;  /* 글자 크기 0.1배만큼의 줄간격 */
    }

  </style>
</head>
<body>
  <h2>idle - my bag</h2>
  <p>
    Red five diamonds in my bag
    If you wanna see it, dance to a beat like that
    My mama saw it and 'oh, my god, dang'
    Okay, I'll show you what's in my bag
</p>
<p class="big-line">
  Red five diamonds in my bag
  If you wanna see it, dance to a beat like that
  My mama saw it and 'oh, my god, dang'
  Okay, I'll show you what's in my bag
</p>
<p class="small-line">
  Red five diamonds in my bag
  If you wanna see it, dance to a beat like that
  My mama saw it and 'oh, my god, dang'
  Okay, I'll show you what's in my bag
</p>
</body>
</html>

(6) text-overflow 속성 – 넘치는 텍스트 표기하기

/* 기본형 */

text-overflow: clip | ellipsis

(6) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>투머치토커</title>
  <style>
  .content {
      border: 1px solid lime;  /* 테두리 */
      width: 300px;  /* 단락의 너비 */
      white-space: nowrap;  /* 줄바꿈 없음 */
      overflow: hidden;  /* 넘치는 부분 감춤 */
      text-overflow: ellipsis;  /* 말줄임표 */
  }
	.content:hover {
		overflow: visible;  /* 넘치는 부분 보여줌*/
	}
  </style>
</head>
<body>
  <h2>투머치토커의 원조 박찬호씨</h2>
  <p class="content">
    제가 LA에 있을때는 말이죠 정말 제가 꿈에 무대인 메이저리그로 진출해서 가는 식당마다 싸인해달라 기자들은 항상 붙어다니며 취재하고 제가 그 머~ 어~ 대통령이 된 기분이였어요 그런데 17일만에 17일만에 마이너리그로 떨어졌어요 못던져서 그만두고 그냥 확 한국으로 가버리고 싶었어요 그래서 집에 가는길에 그 맥주6개 달린거 있잖아요 맥주6개 그걸 사가지고 집으로 갔어요 
    그전에는 술먹으면 야구 못하는줄 알았어요 그냥 한국으로 가버릴려구.... 그리고 맥주 6개먹고 확 죽어버릴려고 그랬어요 야구 못하게 되니깐 그러나 집에가서 일단은 부모님에게 전화를 해야겠다고 생각을 했어요 다음날 가려고 전화를 딱 했는데 어머니께서 찬호야 어후~ 찬호야 아들 잘있어 밥은 먹고 다니는겨~ 잘지내는겨 대뜸 그러시는 거에요 내가 말도 하기도 전해 그래서 저는 야구좀 안되지만 잘하고 있다고 여기사람들 잘챙겨준다고 라고 거짓말을 했어요 
    한국은 못가게 됬지 내일 야구장은 가야하지 막막하더라구요 그럼 어떻게 가야하나 생각을 했어요 그리고 나서 영어공부를 하게 됬는데요 영어... 감독한테 이야기를 못해서 한이 맺힌거지 그래서 이야기 할려고 한 단어씩 한 문장씩 만들어서 그래서 다음날 써 먹었어요 그리고 감독에게 Hey How are you라고 말했어요 이렇게 해서 영어공부를 하는거에요
  </p>
</body> 
</html>

4. 목록과 링크 스타일

용도 : 텍스트 나열, 사이트 메뉴, 문서 레이아웃(사진 갤러리)

(1) list-style-type 속성 – 목록의 불릿과 번호 스타일 지정하기

/* 기본형 */

list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

/* 예 */

ul { 
	list-style-type: circle; /* 순서 없는 목록의 불릿을 circle로 표시 */
}

(1) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>시리즈</title>
  <style>
    .Harry {
      list-style-type:lower-alpha;  /* 소문자 알파벳 */
    }
    .Ring {
      list-style-type: upper-roman;  /* 대문자 로마 숫자 */
    }
  </style>
</head>
<body>
  <h1>Harry Potter</h1>
  <ol class="Harry">
    <li>Harry Potter and the Sorcerer's Stone</li>
    <li>Harry Potter and the Chamber of Secrets</li>
    <li>Harry Potter and the Prisoner of Azkaban</li>
    <li>Harry Potter and the Goblet of Fire</li>
    <li>Harry Potter and the Order of the Phoenix</li>
    <li>Harry Potter and the Half-Blood Prince</li>
    <li>Harry Potter and the Deathly Hallows Part 1</li>
    <li>Harry Potter and the Deathly Hallows: Part 2</li>
  </ol>

  <h1>The Lord of the Ring</h1>
  <ol class="Ring">
    <li>The Lord of the Rings: The Fellowship of the Ring</li>
    <li>The Lord of the Rings: The Two Towers</li>
    <li>The Lord of the Rings: The Return of the King</li>
  </ol>
</body>
</html>

(2) list-style-image 속성 – 불릿 대신 이미지 넣기

불릿 기호 대신 원하는 이미지로 삽입할 수 있는 속성입니다.

/* 기본형 */

list-style-image : none | url(이미지 파일 경로)

(2) 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>불릿 대신 이미지</title>
  <style>
    ul {
      list-style-image: url('images/dot.png');  /* 불릿으로 사용할 이미지 */
    }
  </style>
</head>
<body>
  <h1>murphy room</h1>
  <ul>
    <li>웹이란 무엇인가?</li>
    <li>HTML/CSS</li>
    <li>JS</li>
    <li>커뮤니티</li>
  </ul>
</body>
</html>

(3) list-style-position 속성 – 목록에 들여쓰기 효과 내기

목록의 불릿이나 번호는 실제 내용 바깥쪽에 표시됩니다.
list-style-position을 이용하면 내용이 있는 부분에 표시(들여쓰기 효과) 할 수 있습니다.

/* 기본형 */ 

list-style-position : inside | outside

(4) list-style 속성 – 리스트 속성 한꺼번에 표시하기

list-style-type과 list-style-position, list-style-image 속성을 한꺼번에 표시하는 속성입니다.
각 속성의 순서는 중요하지 않습니다.

/* 예 */

article ol li {
	list-style: upper-alpha inside; /* 알파벳 대문자 사용, 안으로 들여쓰기 적용 */
}

마무리하며

텍스트와 관련된 스타일을 예제와 함께 공부해 보았습니다.

다음편에도 스타일은 계속됩니다.

댓글과 공감은 항상 환영입니다!