3달 전
font와 text
4달 전
background 관련 속성 정리
5달 전
보여지는 속성 정리
8달 전
CSS Box 모델에 대해 알아봅시다.
9달 전
CSS Selector를 공부해봅시다.
font-family는 device마다 font의 존재 유무가 다르고, 존재하지 않는 폰트로 지정했다고 해서 알아서 default 로 표현되지 않기도 한다. 또는 부모의 기본 포트를 가르키지도 않는다. 대신, font-family 속성에 여러 폰트를 동시에 작성하는 대신 1순위, 2순위, 3순위 식으로 선택되게 된다.
font-family.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .parent-font { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; } .not-existed-font { font-family: "세상에 존재하지 않은 폰트"; } .serif { font-family: "Times New Roman", Times, serif; } .sans-serif { font-family: Arial, Helvetica, sans-serif; } .monospace { font-family: "Courier New", Courier, monospace; } </style> </head> <body> <div class="parent-font"> abcddsa <p class="not-existed-font">sdfdsfsf</p> </div> <div> <h1>font-family</h1> <p class="serif">Times New Roman font.</p> <p class="sans-serif">Arial font.</p> <p class="monospace">Courier New font.</p> </div> </body> </html>
font: font-style(optional) font-variant(optional) font-weight(optional) font-size( mandatory ) line-height(optional) font-family(mandatory);
line-height는 기준이 무엇일까? 아래에는 16px라고 되어 있는데 저 16px는 무엇이 기준일까?
<!DOCTYPE html> <html> <head> <style> .small { line-height: 70%; /* 16px * 70% */ } .big { line-height: 1.2; /* 16px * 1.2 */ } .lh-3x { line-height: 3; /* 16px * 3 */ } </style> </head> <body> <p> default line-height.<br /> default line-height.<br /> 대부분 브라우저의 default line height는 약 110% ~ 120%.<br /> </p> <p class="small"> line-height: 70%<br /> line-height: 70%<br /> </p> <p class="big"> line-height: 1.2<br /> line-height: 1.2<br /> </p> <p class="lh-3x"> line-height: 3.0<br /> line-height: 3.0<br /> </p> </body> </html>
poiemaweb이 white-space 속성을 아주 잘 정리해놨다.
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; padding: 10px; margin: 40px; border-radius: 6px; border-color: gray; border-style: dotted; /*overflow: hidden;*/ } .normal { white-space: normal; } .nowrap { white-space: nowrap; } .pre { white-space: pre; } .pre-wrap { white-space: pre-wrap; } .pre-line { white-space: pre-line; } .overflow { overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <h1>white-space</h1> <div class="normal"> <h3>normal</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="nowrap overflow"> <h3>nowrap</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="pre overflow"> <h3>pre</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="pre-wrap"> <h3>pre-wrap</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> <div class="pre-line"> <h3>pre-line</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </body> </html>
text-overflow 를 사용하기 위해선 다음의 조건을 따라야 한다.
보통은 영역을 벗어난 텍스트에 대해 ...처리를 위함이지만, clip이 기본값으로 단순히 보이지 않게 자른다.
word-wrap과 word-break 두 속성 모두 한 단어의 길이가 길어서 부모 영역을 벗어날 때 텍스트 처리 방식을 정의한다. 그래도 차이점은 존재하는데, word-wrap은 단어를 고려해서 개행하지만, word-break는 단어를 고려하지 않고 부모 영역에 맞추어 강제로 개행 할 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { display: inline-block; width: 150px; height: 150px; padding: 10px; margin: 40px; border-radius: 6px; border-color: gray; border-style: dotted; vertical-align: top; } .word-wrap { word-wrap: break-word; } .word-break { word-break: break-all; } span { display: inline-block; font-size: 24px; margin-top: 20px; } </style> </head> <body> <div> Floccinaucinihilipilification https://poiemaweb.com/css3-font-text </div> <div class="word-wrap"> Floccinaucinihilipilification https://poiemaweb.com/css3-font-text <span>word-wrap</span> </div> <div class="word-break"> Floccinaucinihilipilification https://poiemaweb.com/css3-font-text <span>word-break</span> </div> </body> </html>