[02] CSS/CSS3 - 텍스트 관련

35489 단어 CSSCSS

1. TEXT STYLING

🎨 기본적인 텍스트 스타일링

color : 글자 색상

방법1 : 색상을 영어단어로 표기하는 경우

/* 사용가능한 키워드 : red, blue, green, olivegreen 등 */
<p style="blue">HELLO WORLD</p>

방법2 : RGB 코드를 작성하기

/* 최소값0에서 최대값255 사이에서 쓰면 됨 */
<p style="color: rgb(255,255,255);">HELLO WORLD</p>

방법3 : RGBA 코드를 작성하기

/* A는 투명도를 나타내며, 0부터 1사이의 값으로 표현함 */
<p style="color: rgba(255,255,255, 0.5);">HELLO WORLD</p>

방법4 : RGB 코드표에서 16진수값 읽어들이기 

<p style="color: #000;">HELLO WORLD</p> 
/*
#000000;   검정색, #000 으로 줄여쓰기 가능
#ffffff;   하얀색, #fff 으로 줄여쓰기 가능
*/

font-size : 글자 크기

  • px, pt, em, rem, % 등의 단위로 글자 크기를 지정하는 속성
  • 웹 접근성의 이유로 14px이상을 주로 사용한다. (참고: 크롬의 최소 폰트사이즈는 10px)
<p style="font-size:11px;">HELLO WORLD!</p>

font-style : 글자 스타일 (기울임꼴)

/* 사용할 수 있는 스타일 : italic, oblique, normal 등 */
<p style="font-style:italic;">HELLO WORLD!</p>

font-weight : 글자 굵기

/* 키워드로 정의하는 경우 */
font-weight: normal;
font-weight: lighter;
font-weight:bold 또는 bolder;
/* 수치로 정의하는 경우 */
/* 100 ~ 900까지 지정할 수 있으며, 100단위로 사용 가능함. */
/* 100 ~ 300(가늘게), 400 ~ 600 (중간), 700 ~ 900(굵게)*/
font-weight: 100;
font-weight: 500;
  • NOTE: HTML요소인 <th>, <strong>, <b>,<h1>~<h6>는 기본적으로 굵은 서체를 지원한다.

text-decoration : 폰트에 가로줄 표시하는 속성

<!--

텍스트 위에 밑줄긋기 */
<p style="text-decoration: overline;">HELLO WORLD!</p>
/* 텍스트 가운데 줄 긋기 */
<p style="text-decoration: line-through;">HELLO WORLD!</p>
/* 텍스트 아래에 밑줄긋기 */
<p style="text-decoration: underline;">HELLO WORLD!</p>

text-shadow : 텍스트 그림자넣기

<style>
  p{
    font-size: 32px;
    /*  text-shadow? x좌표 y좌표 blur 그림자색상 */
    text-shadow: 9px 6px 3px rgba(0,0,0,0.6);
    }
</style>
<p> Hello, world!</p>
<style>
  /* text-shadow를 여러개 사용하여 효과를 줄 수 있음 */
  h2{ text-shadow: 0px 0px 4px yellow, 0px 4px 6px rgb(180, 128, 30), 0px 6px 7px red;}
</style>
<h2>HELLO WORLD</h2>



🎨 TEXT LAYOUT

text-align : 글자 가로정렬

텍스트, inline/inline-block 요소를 x축으로 정렬하기 위해 사용
왼쪽정렬(left), 오른쪽정렬(right), 가운데정렬(cener), 양쪽정렬(justify) 가능

<div style="text-align:left;"> 왼쪽정렬 </div>
<div style="text-align:right;"> 오른쪽정렬 </div>
<div style="text-align:center;"> 가운데 정렬 </div>
<div style="text-align:justify;"> 양쪽정렬 </div>

vertical align : 글자 세로정렬

inline요소와 텍스트, inline요소와 inline요소, table 셀의 내용을 세로정렬

1.inline/inline-block요소 + 텍스트 간의 세로맞춤

<!-- 이 경우 radio 버튼이 글씨보다 약간 윗쪽에 위치함 -->
<input type="radio">선택   
<!-- vertical=align으로 가운데정렬시켜줌 -->
<input type="radio" style="vertical-align:middle;">선택
  1. inline요소(인라인블록) + inline요소(인라인블록) 간의 세로 정렬 (추후 추가/수정)
  1. table 셀 내용의 세로 정렬시 사용
<table>
  <tr>
    <!--td의 경우는 기본 middle정렬-->
    <td style="border:1px solid red; height:100px;">text</td>   
    <!-- top 정렬 -->
    <td style="border:1px solid red; height:100px;vertical-align:top;">text</td>
    <!-- bottom정렬 -->
    <td style="border:1px solid red; height:100px;vertical-align:bottom;">text</td> 
  </tr>
</table>

line-height : 줄간격 (행간)

텍스트 중심선으로부터 텍스트 위 아래까지의 높이를 말한다.
단위: px, %, pt

<!-- 줄간격을 지정x한 경우 -->
<p> 
line-height<br>
line-height<br>
line-height<br>
line-height
</p>
<!-- 줄간격을 지정한 경우 -->
<p style="line-height:80px;">     
line-height<br>
line-height<br>
line-height<br>
line-height
</p>

letter and word spacing

  • letter-spacing : 텍스트간 간격 (자간)
    0에서 1사이 수가 가장 적절함 (포토샵에서 -100이었을지라도 웹구현할때는 -3을 넘기지 않도록 한다)
    음수값, 양수값 가능
<p style="letter-spacing:3px;">자간을 주는 속성</p>
<p style="letter-spacing:-1.5px;">자간을 주는 속성</p>
  • word-spacing: 단어 사이의 간격 (normal, 10px, 2em 등)



🎨 OTHERS

word-break 

break-all(기본값). 단어사이를 끊으며 줄바꿈.
keep-all: 단어사이를 끊지 않고 줄바꿈.

text-indent : 텍스트 들여쓰기

화면에서 글씨를 보이지 않게 할때나, padding 대용으로 많이 쓰기도 함
음수값, 양수값 사용가능

<!-- 들여쓰기 적용한 문단 -->
<p>일반 문단</p>
<p style="text-indent: 100px">들여쓰기 적용한 문단 <br>두번째 줄은 들여쓰기 적용안됨</p>
<!-- 내어쓰기 적용한 문단 -->
<p>일반 문단</p>
<p style="text-indent: -100px">내어쓰기 적용한 문단 <br>두번째 줄은 내어쓰기 적용안됨</p>



2. STYLING LISTS

list-style-type : 목록의 각 항목이 지닌 불릿(bullet)의 모양 정하기

ex) disc(까만 동그라미, 기본값), circle (속이 빈 동그라미), none, square (사각) 등등

list-style-position : 목록의 들여쓰기(앞쪽 간격) 효과 정하기

ex) inside (안쪽으로 더 들여쓰기), outside (덜 들여쓰기)

//CSS
<style>
  ul{
    background-color:powderblue;
    list-style-type:square;
    list-style-position: inside;
  }
</style>
//HTML
<ul>
  <li>호빵</li>
  <li>붕어빵</li>
  <li>군고구마</li>
</ul>

list-style-image: url('주소');

list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다.
이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 맞는 이미지를 만들어야 합니다.

<style>
  ul{
    list-style-image: url('상대경로 지정'); /* none, initial, inherit */
    list-style-position: outside; /* inside 들여쓰기, outside 내어쓰기 */ 
  }
</style>
none : 이미지없음 (기본값)
url : 사용할 이미지의 URL을 입력합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
list-style-type : space-counter | disc | circle 등 /* 더 많은 정보는 MDN 참조*/

NOTE: image url로 넣게 되면, 글자와 불릿이미지 간의 간격/위치 조정이 안되기 때문에, 불릿문자를 background로 지정하여 padding으로 조정해주는 방법이 있음.



3. STYLING LINKS

추가/수정 예정



4. WEB FONTS

font-family : 폰트의 서체/글꼴

1. 기본폰트 사용하기

1) 한글폰트: 돋움, 굴림, 나눔고딕 (*나눔고딕: 라이센스없이 무료로 배포되는 폰트)
2) 영문폰트: verdana, tahoma, arial

<p style="font-family:'dotum';">

2. 웹폰트 사용하기 (CDN)

구글 웹폰트(https://fonts.google.com/?subset=korean)에서 저작권 반드시 체크하고 사용

<style>
  @import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
  html, body{font-family: 'Hi Melody', cursive;}
</style>

3. 다운받은 폰트 사용하기

<style>
  @font-face{ 
    src: url('resource/BlackAndWhitePicture-Regular.ttf'); /* ttf파일 설치 */
    font-family:'bp'; /* 불러온 ttf파일을 bp라고 부를것이라 설정 */
  };
 html, body{font-family:'bp';} /* 웹 문서내에 해당 서체 사용하도록 설정 */
</style>



📖 REFERENCE

BeautifulSoup에서 특정 태그의 내용을 가져오는 방법 자세히 보기
sass 개념 및 사용법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage