<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 텍스트 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
#font p:first-child {font-size:30px; background: yellow}
/* html 기본 폰트 크기 : 16px(p.42cm) */
#font p:nth-child(2) {font-size:20px; font-family: 궁서체; background: aliceblue}
#font p:nth-child(3) {font-size:20px; font-family: 궁서체; font-weight:bolder; background: aliceblue}
#font p:nth-child(3) {font-size:20px; font-family: 굴림체; font-style:italic; background: mediumpurple}
#font p:last-child {font: italic bold 20px 굴림체; background: chocolate}
/* font :스타일 대소문자변환 굵기 크기 선간격 종류 */
#line p {width: 750px}
#line p:first-child{line-height:170%; background: aliceblue}
#line p:nth-child(2) {line-height:70%; background: lavenderblush}
/* line-height 의 기본값은 110~120% */
#logo p:first-child {letter-spacing: 20px}
#logo p:nth-child(2) {letter-spacing: -2px}
#logo2 p:first-child {word-spacing: 30px}
#logo2 p:nth-child(2) {word-spacing: -10px}
#align p:first-child {text-align: center}
#align p:nth-child(2) {text-align: right}
#align p:last-child {text-align: justify}
#decor p:first-child {text-decoration: underline}
#decor p:nth-child(2) {text-decoration: overline}
#decor p:last-child {text-decoration: line-through}
#space p, #overflow p {width: 150px; height:200px; border: 1px solid red;
padding: 10px; margin: 40px 0}
#space p:nth-child(2) { white-space: nowrap } /*텍스트의 줄바꿈 무시*/
#space p:last-child {white-space: pre}
#overflow p:first-child{white-space: nowrap; overflow:hidden } /*넘치는 텍스트 감춤*/
#overflow p:nth-child(2) {white-space: nowrap; overflow:hidden; text-overflow: ellipsis }
#overflow p:last-child {overflow:hidden; white-space: nowrap; text-overflow: clip }
#shadow p {font-size:50px }
#shadow p:first-child {text-shadow: 5px 5px 0 gray }
#shadow p:nth-child(2) {text-shadow: 5px 5px 5px gray }
#shadow p:last-child {text-shadow: -5px -5px 5px red }
</style>
</head>
<body>
<h1>CSS 텍스트 관련 속성</h1>
<h2>개요</h2>
<p>폰트 크기, 지정, 스타일, 텍스트의 정렬등을 다룰수 있음</p>
<h2>font-xxx 속성</h2>
<p>font-size : 텍스트의 크기를 지정</p>
<p>font-family : 텍스트의 폰트를 지정</p>
<p>font-weight : 텍스트의 진하기를 지정</p>
<p>font-style : 텍스트의 스타일을 지정</p>
<p>font-xxx 단축 표기 : </p>
<div id="font">
<p>클래스 선택자 : 미리 정의해둔 스타일에 이름을 부여한 뒤 여러 요소에 일괄적 스타일 적용
단, 선택자 적용시 class 속성을 사용</p>
<p>아이디 선택자 : 유일한 이름을 가진 요소에 스타일 적용
단, 요소에 id 속성으로 이름이 지정되어 있어야 함</p>
<p>속성 선택자 : 지정한 속성이나 속성값이 있는 요소에 스타일 적용</p>
<p>조합(결합) 선택자 : 스타일을 적용할 대상이 하나 이상인 경우에 사용하는 선택자</p>
<p>후손 descendant 선택자: 해당 요소 아래에 있는 모든 하위 요소들를 대상으로 하는 선택자</p>
<p>자식 child 선택자: 해당 요소 직계 아래에 있는 모든 하위 요소들를 대상으로 하는 선택자</p>
<p>그룹 선택자 : 여러 선택자를 혼합해서 요소들을 지정할때 사용하는 선택자</p>
</div>
<h2>line-height</h2>
<p>텍스트의 줄간격 설정</p>
<div id="line">
<p>수상 무대에서는 어떤 소감을 얘기할 수 있는 시간이 제한돼 있어서 많은 얘기를 말씀 못 드렸는데
이 자리에서 다시 말씀드리면 글쎄요. 이런 성과나 이런 결과가 과연 우리 영화, 한국 영화를
사랑해 주시는 영화팬 여러분들의 사랑과 성원이 없었다면 가능했을까, 이런 생각이 듭니다.
다시 한 번 이 자리를 빌려 한국 영화를 끊임없이 예의주시해 주시고 성원 보내주시는
대한민국 영화를 사랑해 주시는 영화팬 여러분께 다시 한 번 감사드립니다.</p>
<p>수상 무대에서는 어떤 소감을 얘기할 수 있는 시간이 제한돼 있어서 많은 얘기를 말씀 못 드렸는데
이 자리에서 다시 말씀드리면 글쎄요. 이런 성과나 이런 결과가 과연 우리 영화, 한국 영화를
사랑해 주시는 영화팬 여러분들의 사랑과 성원이 없었다면 가능했을까, 이런 생각이 듭니다.
다시 한 번 이 자리를 빌려 한국 영화를 끊임없이 예의주시해 주시고 성원 보내주시는
대한민국 영화를 사랑해 주시는 영화팬 여러분께 다시 한 번 감사드립니다.</p>
<p> 무대에서는 어떤 소감을 얘기할 수 있는 시간이 제한돼 있어서 많은 얘기를 말씀 못 드렸는데
이 자리에서 다시 말씀드리면 글쎄요. 이런 성과나 이런 결과가 과연 우리 영화, 한국 영화를
사랑해 주시는 영화팬 여러분들의 사랑과 성원이 없었다면 가능했을까, 이런 생각이 듭니다.
다시 한 번 이 자리를 빌려 한국 영화를 끊임없이 예의주시해 주시고 성원 보내주시는
대한민국 영화를 사랑해 주시는 영화팬 여러분께 다시 한 번 감사드립니다.</p>
<p>수상 무대에서는 어떤 소감을 얘기할 수 있는 시간이 제한돼 있어서 많은 얘기를 말씀 못 드렸는데
이 자리에서 다시 말씀드리면 글쎄요. 이런 성과나 이런 결과가 과연 우리 영화, 한국 영화를
사랑해 주시는 영화팬 여러분들의 사랑과 성원이 없었다면 가능했을까, 이런 생각이 듭니다.
다시 한 번 이 자리를 빌려 한국 영화를 끊임없이 예의주시해 주시고 성원 보내주시는
대한민국 영화를 사랑해 주시는 영화팬 여러분께 다시 한 번 감사드립니다.</p>
</div>
<h2>spacing</h2>
<p>글자사이 간격을 조정</p>
<div id="logo">
<p>Marvel's Avengers Infinity War</p>
<p>Marvel's Avengers Infinity War</p>
<p>Marvel's Avengers Infinity War</p>
</div>
<h2>word-spacing</h2>
<p>텍스트 내 단어사이 간격을 조정</p>
<div id="logo2">
<p>Marvel's Avengers : End Game</p>
<p>Marvel's Avengers : End Game</p>
<p>Marvel's Avengers : End Game</p>
<p>Marvel's Avengers : End Game</p>
</div>
<h2>text-align</h2>
<p>텍스트의 수평 방향 정렬을 설정</p>
<div id="align">
<p>시간은 금이라구, 친구!</p>
<p>시간은 금이라구, 친구!</p>
<p>시간은 금이라구, 친구!</p>
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!</p>
</div>
<h2>text-decoration</h2>
<p>텍스트에 여러가지 꾸밈효과를 부여/제거함</p>
<div id="decor">
<p>시간은 금이라구 친구!</p>
<p>시간은 금이라구 친구!</p>
<p>시간은 금이라구 친구!</p>
</div>
<h2>white-space</h2>
<p>텍스트의 공백, 들여쓰기, 줄바꿈에 대한 처리를 설정</p>
<img src="../img/wsp.png">
<div id="space">
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
</p>
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
</p>
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
</p>
</div>
<h2>text-overflow</h2>
<p>특정영역을 벗어나 있는 줄바꿈이 되지 않은 텍스트에 대한 처리방법 설정
단, white-space와 overflow 속성과 함께 사용해야 함</p>
<div id="overflow">
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
친구!시간은 금이라구, 친구!시간은 금이라구, 친구!친구!시간은 금이라구, 친구!시간은 금이라구, 친구!</p>
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!</p>
<p>시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!
시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!시간은 금이라구, 친구!</p>
</div>
<h2>text-shadow</h2>
<p>CSS3에서 추가된 기능</p>
<p>텍스트에 그림자 효과를 부여함</p>
<p>선택자 { 그림자수평오프셋 그림자수직오프셋 블러효과 그림자색상 }</p>
<div id="shadow">
<p>Infinity War</p>
<p>Infinity War</p>
<p>Infinity War</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS display 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
/*span은 inline 요소 -> width, height 불가!*/
/*inline 요소를 inline-block으로 변경하면 적용가능!*/
/*block : 너비는 기본 100%, 항상 새로운 줄에 배치,
크기 지정 가능 */
/*inline : 너비는 내용에 따라 결정, 줄이 바뀌지 않고
다른 요소들과 같은 줄에 배치, 크기 지정 불가 */
/*inline-block:너비는 내용에 따라 결정, 줄이 바뀌지 않고
다른 요소들과 같은 줄에 배치, 크기 지정 가능 */
#display span:first-child {background: red;
color:white; font-weight: bold;
display: inline-block; width: 100px;
width: 100px; text-align: center} /*p로하면 줄이 바뀜*/
#display p:nth-child(2) span {display: none} /*요소 지움*/
#display p:nth-child(3) span {visibility: hidden} /*공간은 남김*/
#opacity p { width:150px; height:100px; display:inline-block }
#opacity p:first-child {background: red}
#opacity p:first-child:hover {opacity: 0.3}
#opacity p:nth-child(2) {background: blue}
#opacity p:nth-child(2):hover {opacity: 0.7}
#opacity p:last-child{background: green}
</style>
</head>
<body>
<title>CSS display 관련 속성</title>
<h2>개요</h2>
<p>html 요소가 브라우저에 의해 어떻게 보여줄지를 결정하는 속성</p>
<p>웹페이지 레이아웃을 정할때 자주 사용하는 중요한 속성</p>
<p>대부분의 html요소는 block또는 inline 중 하나로 결정되어
브라우저에 보여짐</p>
<p>하지만, 웹페이지 레이아웃 구성시 요소의 속성을 바꿔야 할때가 존재하는데,
display속성으로 바꿀수 있음</p>
<div id="display">
<p>시간은 <span>금</span>이라구, 친구!</p>
<p>시간은 <span>금</span>이라구, 친구!</p>
<p>시간은 <span>금</span>이라구, 친구!</p>
</div>
<h2>visibility</h2>
<p>요소를 화면상에서 사라지게 함.
단, 그 요소가 차지하는 영역은 남겨둠</p>
<h2>opacity</h2>
<p>요소의 투명도를 지정. 값의 범위는 0~1 사이</p>
<div id="opacity">
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>