(HTML/CSS)텍스트, span (4)

*텍스트 색

 

-htmlcolorcodes.com에서 색을 찾을 수 있습니다.

• {color: rgb(00,00,00);} rgb를 이용해 텍스트에 색을 적용합니다. (RGB는 빛의 삼원색을 이용해 색을 표현하는 방식으로 수가 커질수록 색이 밝아집니다.)

• {color: #000000;} HEX코드를 이용하여 텍스트에 색을 적용합니다. (HEX코드는 16진수를 이용하여 색을 표현하는 방식이며 디지털 상에서 많이 이용됩니다.)

+hex코드 6자 뒤에 ff추가 시 가장 불투명 00 추가 시 투명한 효과를 줄 수 있습니다.

 

 

*텍스트 스타일링

 

• {font-weight: 100~900;}: 텍스트 굵기를 조정합니다.(커질수록 두꺼워집니다.)

• {text-align: 위치}: center left right 등의 위치를 사용합니다.(글을 가운데, 왼쪽, 오른쪽 정렬을 할 때 이용합니다.)

+가운데 정렬 안될 시에는 div 사용하여 문장을 묶어주면 해결이 되기도 합니다.

 

• {text-decoration: underline;}: 밑줄 긋기

• {text-decoration: overline;}: 글 위에 줄 긋기

• {text-decoration: line-through;}: 취소선을 긋는 것입니다.

• {text-decoration: none;}: 줄 없이 나타내기이며, 기본값입니다.(a태그의 밑줄을 없앨 때 사용합니다)

 

*텍스트 크기(절대적 크기 결정: px, pt 상대적 크기 결정: em, %)

 

• font-family(폰트)와 font-size에 따라 content area가 정해집니다.

• line-height는 content area와 상관없습니다.

• line-height를 통해 해당 줄이 실제로 차지할 공간을 설정합니다.(텍스트를 세로 가운데 정렬할 때에도 활용합니다.)

 

*폰트 설정

 

• {font-family: "1 지망", "2 지망";}

• fonts.google.com 또는 fonts.google.com/earlyaccess 이용하여 폰트를 저장합니다.

 

*폰트 파일 사용

• @font-face { src: url("../fonts/BMJUA_otf.otf); font-family:"BM";}: 이렇게 하면 다른 클래스나 태그에 font-family:"BM";을 통해 폰트 적용이 가능합니다.

 

*span 태그

• div와 다르게 줄 안에서 이용합니다.

• display에서 inline 속성이 적용됩니다.

• 문자의 일부를 지정할 때 유용합니다.