개발하는 삶

[CSS] text style 본문

JavaScript, Vue.js, CSS/CSS

[CSS] text style

삶_ 2022. 6. 24. 17:18

텍스트 스타일

 

  • font-style : normal / italic (기울어짐. *보통 이걸 사용) / oblique
  • font-weight : 굵기
    • normal(400. 기본두께), bold (700. 두껍게). 100~900까지 가능
  • font-size : 크기
    • 16px (기본크기), 단위(px, em, rem 단위로 지정)
  • line-height : 한 줄의 높이(행간 느낌)
    • normal (브라우저의 기본정의를 사용), 숫자(1.4 = 1.4배. 요소의 글꼴 크기의 배수로 지정)
    • 단위(px,em,rem 등의 단위로 지정)
  • font-familly : 서체(글꼴) 지정
    • font-family: 글꼴1, “글꼴2”(띄어쓰기, 특수문자가 포함된 글꼴은 “”로 묶음)
      • serif //바탕체계열
      • sans-serif //고딕체 계열
      • monospace //고정너비(가로폭이 동등) 글꼴 계열
      • cursive //필기체 계열
      • fantazy //장식 글꼴계열
    • font-family: "123","san","..."...;
      • → 여러개 적힌 글꼴들의 앞 순서대로 사용가능한걸 지정함

 

text

text-align : center; //문서 중간정렬
text-align : right; //오른쪽 정렬
// 이밖에도 left 등등

line-height: 30px; //줄간격
line-height: 200%; //줄간격. 퍼센트비율(2배). 이게 더 편함.

text-decoration: underline; //텍스트 아래에 밑줄 긋기
text-decoration: line-through; //텍스트에 취소선 긋기
text-decoration: none; //텍스트에 줄(장식) 없애기

text-indent: 50px //들여쓰기(첫시작부분 여백 만들기)
text-indent: -50px //내어쓰기

//텍스트 그림자 색 설정하기
text-shadow:5px 5px 3px #222 //가로, 세로, 그림자 번지는 정도, 색상값.

 

 

 

color 속성

  • 글자색지정
    • rgb(0,0,0) : 검정색(기본)
  • 16진수값, rgb값, hsl값, 색상이름 중 사용
    • 16진수 : 000000(검은색) ~ ffffff(흰색)
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
				<link href="ex1.css" rel="stylesheet">
        <style>
            h1 {
                color:rgb(255, 165, 0);
                color:orange;
	            }
        </style>
    </head>

 

list 설정

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <style>
        .mylist {
            list-style-type: square; //리스트 내 스타일을 지정. 동그라미 -> 네모
            //list-style: 이렇게 적어도 동일함
            list-style-type: none; //앞의 도형 아예 없애기
        }
        .mylist2 {
            list-style-type: upper-alpha; //abcd -> ABCD
        }  
        </style>
    </head>
    <body>
        <ul class="mylist">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ul>

        <ol class="mylist2">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
        </ol>
    </body>
</html>

 

배경

  • background-color : 배경 색상
    • transparent (투명함), 그 외 색상
    • 이미지 뒤에 나타남
  • background-image : 요소의 배경 이미지 삽입
    • none : 이미지없음
    • url(”경로”) : 이미지 경로
  • background-repeat : 배경 이미지 반복
    • repeat : 이미지를 수직/수평 반복 (바둑판식)
    • no-repeat : 반복 없음
    • repeat-x : 수평으로만 반복
    • repeat-y : 수직으로만 반복
  • background-position : 배경 이미지 위치
    • 0% 0% : x축 0%, y축 0%
    • 방향 : top, bottom, left, right, center
      • background-position: top left; == 위쪽 왼쪽으로 이미지 박기
      • background-position: 100px 30px; == 왼쪽위쪽 시작기준으로, 각각 떨어져서
    • 단위 : px, em, rem
  • background-size : 배경 이미지 크기
    • auto : 이미지의 실제크기
    • px, em, rem 단위 지정
    • cover : 비율을 유지. 요소의 더 넓은 너비에 맞춰 이미지를 늘림
    • (가로가 길면 가로에 딱 맞게)
    • contain : cover의 반대뜻
  • background-attachmemt : 배경 이미지 스크롤 특성
    • scroll : 이미지가 요소를 따라서 같이 스크롤 (기본값)
    • fixed : 이미지가 뷰포트에 고정.(이미지가 화면에 고정된 위치가 그대로 유지) 스크롤X
저작자표시

'JavaScript, Vue.js, CSS > CSS' 카테고리의 다른 글

[CSS] inline, block 등  (0) 2022.07.05
[CSS] flexbox  (0) 2022.06.30
[CSS] margin, padding, border  (0) 2022.06.27
[CSS] 기본 단위  (0) 2022.06.24
[CSS] 선택자  (0) 2022.06.23
'JavaScript, Vue.js, CSS/CSS' Related Articles more