[2021/12/17]국비지원 CSS3 1-(4) font 스타일 property

CSS3 font 스타일 property

, (comma) : 그룹 선택자
body default font-size : 16px, 100%, 1em
기본 글꼴 : 굴림, serif명조, sans-serif고딕
font property들을 { font : ; }으로 한 번에 정리하고자 할 경우
: font-weight font-style font-variant font-size line-height font-family
→ font property에 대해서는 이렇게 쓰지 않는 것이 낫다.
문단 첫 줄만 들여 쓰기 하려 할 경우 text-indent : 0px ( 내어쓰기 -0px )
text-decoration : underline 밑줄, overline 윗줄, line-through 취소선
( 취소선의 경우 html의 del과 보기에는 같아 보이는 느낌은 있음)
text-align : 가로 정렬
left (왼쪽) / right (오른쪽) / center (가운데) / justify (양쪽)
▶ 특정 영역 안에서 텍스트만 가지고 세로 정렬하고 싶을 땐 line-height : 해당 영역 높잇값으로 설정하면 세로 정렬 가능
letter-spacing : 글자 간격
word-spacing : 단어 간격
vertical-align : 이미지와 함께 쓸 때의 세로 정렬. bottom 기본값
text-transform : 로마자로 쓸 때의 글자 변형.
uppercase (all 대문자) / lowercase (all 소문자) / capitalize : 첫 문자 대문자
white-space : pre = 공백 유지. ( html의 pre와 동일 기능 )
white-space : nowrap = 자동 줄 바꿈 취소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document<title>
    <style type="text/css">
        .size{font-size: 30px;}
        .basic{font-size: 16px;}
        /* body 기본폰트사이즈 : 16px, 100%, 1em */
        .family{font-family: Dotum,"돋움",sans-serif;}
        /* 기본글꼴: 굴림, serif명조, sans-serif고딕 */
        .weight{font-weight: bold;}
        strong,h3{font-weight: normal;}/* , 그룹선택자 */
        .style{font-style: italic;}
        em,address{font-style: normal;}
        .variant{font-variant: small-caps;}
        .line{line-height: 300%;}
        .font{font:bold italic small-caps 20px /1.5 Dotum, "돋움",sans-serif;}
        /* font 순서 중요 : font-weight font-style font-variant font-size line-height font-family*/
        .font2{font: 20px Dotum,"돋움",sans-serif;}
        .indent{text-indent: 50px;}
        /* 문단 첫줄 only 들여쓰기 -50px 내어쓰기 */
        .underline{text-decoration: line-through;}
        /* underline 밑줄, overline 윗줄, line-through 취소선 */
        a{text-decoration: none;color: black;}
        .align{text-align: right;}
        /* 가로정렬:left right center justify 양쪽정렬 */
        .letter{letter-spacing: -3px;}
        .word{word-spacing: 30px;}
        .top{vertical-align: top;}
        .mid{vertical-align: middle;}
        .bottom{vertical-align: bottom;}/* 기본값 */
        .upper{text-transform: uppercase;}/* 대문자 */
        .lower{text-transform: lowercase;}/* 소문자 */
        .capital{text-transform: capitalize;}/* 첫글자만 대문자 */
        .pre{white-space: pre;}/* 공백처리 */
        .nowrap{white-space: nowrap;} /* 줄바꿈 자동X */
    </style>
</head>
<body>
    <p class="size">글자크기 30</p>
    <p class="basic">글자크기 16</p>
    <p class="family">글꼴 돋움</p>
    <p>글꼴</p>
    <p class="weight">글자 굵게</p>
    <p><strong>강한 강조</strong></p>
    <h3>제목</h3>
    <p class="style">글자 기울임</p>
    <p><em>약한 강조</em></p>
    <address>Copyright&copy;</address>
    <p class="variant">Home, home</p>
    <p class="line">줄간격, 행간 300%</p>
    <p>기본</p>
    <p class="font">FONT, font 라는 속성에 다 값을 넣어 사용 가능. 순서 중요</p>
    <p class="font2">font 속성에서는 반드시 font-size와 font-family가 들어가야 함</p>
    <p class="indent">들여쓰기 50 들여쓰기 50 들여쓰기 50 들여쓰기 50 들여쓰기 50<br>
        들여쓰기 50들여쓰기 50들여쓰기 50들여쓰기 50들여쓰기 50
    </p>
    <p class="underline">글자 밑줄</p>
    <p><a href="#">네이버 바로가기</a></p>
    <p class="align">가로정렬 왼쪽, 가운데, 오른쪽, 양쪽 가로정렬 가로정렬 왼쪽, 가운데, 오른쪽, <br>
        양쪽 가로정렬 가로정렬 왼쪽, 가운데, 오른쪽, 양쪽 가로정렬가로정렬 왼쪽, 가운데, 오른쪽, 양쪽 가로정렬<br>
        가로정렬 왼쪽, 가운데, 오른쪽, 양쪽 가로정렬가로정렬 왼쪽, 가운데, 오른쪽, 양쪽 가로정렬
    </p>
    <p class="letter">자간 -3, 글자와 글자 사이 간격</p>
    <p class="word">단어와 단어사이 간격</p>
    <p><img src="naver.gif" alt="네이버">세로정렬</p>
    <p><img src="naver.gif" alt="네이버" class="top">세로정렬 위</p>
    <p><img src="naver.gif" alt="네이버" class="mid">세로정렬 가운데</p>
    <p><img src="naver.gif" alt="네이버" class="bottom">세로정렬 아래</p>
    <p class="upper">text-transform 영문 소문자를 대문자로</p>
    <p class="lower">TEXT-transform 대문자를 소문자로</p>
    <p class="capital">Text-transform 첫글자만 대문자로</p>
    <p class="pre">공백문자를 
        
        
        
        
                                                            위해서 
        
        
        
        
        
        white-space를 사용</p>
    <p class="nowrap">공백처리공백처리공백처리공백처리공백처리공백처리공백처리공백처리
        공백처리공백처리공백처리공백처리공백처리공백처리
        공백처리공백처리공백처리공백처리공백처리공백처리공백처리</p>
</body>
</html>

결과물

font 관련해서 과제물이 2개 있었지만 해당 과제물은
이 내용의 복습에 지나지 않기 때문에 따로 올리지 않을 생각

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바