Jam's story

[CSS] 텍스트 본문

WEB/CSS

[CSS] 텍스트

애플쩀 2022. 5. 20. 14:58

 

텍스트 양쪽 정렬 
text-align: justify;

 

 

우측방향으로 글쓰기 
style 속성에 추가 
direction:rtl;
unicode-bidi: bidi-override;

 

 

vertical-align 텍스트에서 이미지의 수직정렬 

vertical-align: baseline;이 기본값

img.a{vertical-align: baseline;}
img.b{vertical-align: text-top;}
img.c{vertical-align: text-bottom;}
img.d{vertical-align: sub;}
img.d{vertical-align: sup;}
img.e{vertical-align:middle;}

 

a태그 상태 
  • a:link  - 방문하지 않은 링크
  • a:visited  - 사용자가 방문한 링크
  • a:hover  - 마우스를 링크에 올려놓을때
  • a:active  - 클릭할 때

     (주의사항)
     a:hover는 a:link 및 a:visited 뒤에 와야 한다. 
     a:active는 a:hover 뒤에 와야 한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
a{
color:black;
text-decoration: none;
}
a:visited{
color:green;
}
a:hover{
color:hotpink;
text-decoration: underline overline line-through;
/* 텍스트변환  */
text-transform: uppercase;
/*
uppercase: 대문자 변환 , lowercase 소문자변환 , capitalize 각 단어의 첫 글자만 대문자로 변환 
  */
}

a:active {
	color:blue;
}
</style>

</head>
<body>
<a href="#">naver</a><br>
<a href="#">daum</a><br>
<a href="#">sist</a>
</body>
</html>
Insert title here naver
daum
sist

 

텍스트 장식, 변환
  • text-indent      텍스트 들여쓰기 , 모두 들여쓰기가 아닌, 첫번째 라인에만 해당
  • letter-spacing  텍스트의 문자 간의 간격(px), 음수값을 주면, 글자간 격차가 겹쳐진다. 
  • line-height      라인(줄) 사이의 간격 (기준:1, px는 붙히지 않음)
  • text-transform  uppercase: 대문자 변환 , lowercase 소문자변환 , capitalize 각 단어의 첫 글자만 대문자로 변환
  • word-spacing  단어 사이의 간격: (px)
  • white-space  태그의 너비 지정때문에 공백이 생기게 되는데, 개행작업을 비활성화 시키는 코딩    
  • word-break 
  • word-wrap 
<p>아무속성없는 p문장:<br>Lorem ipsum dolor sit amet</p><br><br>

<p style="text-indent: 50px">
Lorem ipsum dolor sit amet</p>
<p style="letter-spacing: 5px">
Lorem ipsum dolor sit amet</p>
<p style="letter-spacing: -3px">
Lorem ipsum dolor sit amet</p>
<p style="line-height: 1.8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem delectus amet impedit officia necessitatibus magnam illum nulla optio sapiente pariatur voluptate perferendis quisquam vel temporibus a perspiciatis incidunt blanditiis esse!</p>
<p style="word-spacing: 10px">
Lorem ipsum dolor sit amet</p>
<p style="word-spacing: -5px">
Lorem ipsum dolor sit amet</p>
<p style="word-spacing: -5px">
Lorem ipsum dolor sit amet</p>

아무속성없는 p문장:
Lorem ipsum dolor sit amet



Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem delectus amet impedit officia necessitatibus magnam illum nulla optio sapiente pariatur voluptate perferendis quisquam vel temporibus a perspiciatis incidunt blanditiis esse!

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

 

 

white-space

 

이러한 공백이 생긴다 .

p 태그 너비 때문에 자동으로 개행이 되는 것을 고치기

white-space: nowrap;

이 속성을 추가하면 

줄바꿈이 일어나지 않는다 .

 

word-wrap : break-word;

긴 단어를 끊고 다음 줄로 줄바꿈 

 

 

긴단어가 끊어지지않고 쭉 나오는 문제

 

줄바꿈하지 않는 white-space: nowrap; 적용시 

 

긴단어를 끊는 word-wrap:break-word; 적용시 

긴 단어를 끊었다. + 공백 생김

 

word-break :break-all;

라인 (줄) 끝에 도달할때 단어가 끊어지는 방식 지정

공백이 생기지 않는다.

​

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] font  (0) 2022.05.20
[CSS] text-shadow  (0) 2022.05.20
[CSS] box model - 총넓이 , 총높이 계산  (0) 2022.05.20
[CSS] padding (안쪽여백 ) & width 속성  (0) 2022.05.20
[CSS] inherit (상속)  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments