본문 바로가기
Programming/HTML & CSS & JavaScript

CSS 4일차 - 색상, visibility, opacity, font, google font, text

by yoon9i 2024. 4. 25.

15. 색상
1) 영단어 표기
ex) color:red | blue | aqua | ...


2) 16 진수
- #RRGGBB ( 6비트 ), #RGB ( 3비트 )
- #FFFFFF: 흰색
  #000000: 검정

ex) color: #FF6347;


3) 10 진수 ( 0~255 ) + rgb( r, g, b )
- rgb( 0 ~ 255, 0 ~ 255, 0 ~ 255 )
  rgb( 0, 0, 0 ) <== 검정
  rgb( 255, 255, 255 ) <== 흰색

ex) color: rgb( 15, 184, 226 );


4) 투명도 + 10진수 ==> rgba( 0 ~ 255, 0 ~ 255, 0 ~ 255, 0 ~ 1 )
- alpha 값은 0이면 완전투명, 1이면 완전불투명

ex) color: rgba( 15, 184, 226, 0.3 );

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>색상</title>
    <style>
        #a {
            /* 영단어 */
            color: aqua;
        }

        #b {
            /* 16진수 */
            color: #ff6347;
        }

        #c {
            /* 10진수 + rgb(r,g,b) */
            color: rgb(15, 184, 226);
        }

        #d {
            /* 투명도 + 10진수 => rgba */
            color: rgba(15, 184, 226, 0.3);
        }
    </style>
</head>

<body>
    <p id="a">Hello1</p>
    <p id="b">Hello2</p>
    <p id="c">Hello3</p>
    <p id="d">Hello4</p>
</body>

</html>

 

16. visibility 속성
용도: 요소를 보이거나 보이지 않게 동작.
문법:
visibility: visible(기본) | hidden | collapse

* display:none vs visibility: hidden
 display:none 은 영역유지 안됨.
 visibility: hidden 는 영역유지가 됨.

- visibility:collapse 는 <table> 를 안보이게 처리( 영역유지 안됨 )

<!DOCTYPE html>
<html lang="en">

<head>
    <title>visibility</title>
    <style>
        #b {
            display: none;
        }

        #c {
            visibility: hidden;
        }

        table {
            visibility: collapse;
        }
    </style>
</head>

<body>
    <p id="a">Hello1</p>
    <hr>
    <p id="b">Hello2</p>
    <hr>
    <p id="c">Hello3</p>
    <hr>
    <p id="d">Hello4</p>
    <hr>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>20</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>30</td>
        </tr>
        <tr>
            <td>유관순</td>
            <td>18</td>
        </tr>
    </table>
</body>

</html>

 

17. 투명도(opacity) 속성
- 요소의 투명도 제정
- 0 ~ 1 사용 ( 0: 완전투명, 1:완전불투명 )

ex) opacity: 0.3

<!DOCTYPE html>
<html lang="en">

<head>
    <title>opacity</title>
    <style>
        #a {
            opacity: 0.2;
        }

        #b {
            opacity: 0.4;
        }

        #c {
            opacity: 0.6;
        }

        #d {
            opacity: 0.7;
        }
    </style>
</head>

<body>
    <p id="a">Hello1</p>
    <hr>
    <p id="b">Hello2</p>
    <hr>
    <p id="c">Hello3</p>
    <hr>
    <p id="d">Hello4</p>
    <hr>
    <table border="1">
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td>홍길동</td>
            <td>20</td>
        </tr>
        <tr>
            <td>이순신</td>
            <td>30</td>
        </tr>
        <tr>
            <td>유관순</td>
            <td>18</td>
        </tr>
    </table>
</body>

</html>

 

18. 글꼴(font)관련

1) 스타일 속성
font-style: normal | italic | oblique | ...

2) 두께 속성
font-weight: bold | bolder | lighter | 100~900

3) 사이즈 속성
font-size: rem( * ) | px

4) 글꼴 속성
font-family: 값1, 값2, 값3;


값에 지정가능한 이름 2가지

가. generic family
- 웹브라우저에서 기본적으로 제공
- 여러 폰트가 가지는 특별한 주요 특징을 가짐.
- 종류: serif, sans-serif, monospace(고정폭글꼴), cursive(필기체), 산술글꼴

나. font family
- generic family 에 속하는 실제 글꼴의미.

대표:
serif: Tims New Roman, Geogia
sans-serif: consolas
monospance: ..

결론: 글꼴들의 특징을 담은 generic family 가 있고
        그 안에 공통특징은 공유(꼬리유무)하지만 생김새는 다른 여러 다양한 font family
        가 있다고 생각하자. 


- 웹브라우저가 글꼴(font)를 결정하는 방법
가. font-family를 명시적으로 지정하지 않은 경우
- 웹브라우저의 표준글꼴에 설정된 font-family 로 랜더링된
  현재 설정된 표준글꼴인 font-family 는 Malgun Gothic 이다.
  따라서 웹 브라우저에서 출력되는 글꼴은 Malhun Gothic임.

  글꼴확인 방법은 마우스오버 또는 개발자도구에서 computed 탭 클릭하면 됨.

나. font-family 를 명시적으로 지정한 경우
a. generic family

font-family: serif;
<== 웹브라우저의 글꼴설정에서 정의된 serif 에 해당되는 실제 font family 로 랜더링이 된다.
        현재는 Batang 글꼴이다.

font-family: sans-serif;
<== 웹브라우저의 글꼴설정에서 정의된 san serif 에 해당되는 실제 font family 로 랜더링이 된다.
        현재는 Malgun Gothic 글꼴이다.

b. font family 지정한 경우 ( 마지막 generic family 지정 권장 )
font-family: 'Malgun Gothic', 'Batang', serif;
font-family: 'Malgun Gothic', 'Batang', sans-serif;

* 단축표현식
font: style weight size family;
ex) font: italic  bold  2rem  'Malgun Gothic', 'Batang', serif;

<!DOCTYPE html>
<html lang="en">

<head>
    <title>font관련</title>
    <style>
        #a {
            font-style: italic;
            font-weight: bold;
            font-size: 2rem;
            font-family: 'Times New Roman', Times, serif;
        }

        #b {
            /* 축약표현식 */
            font: italic bold 2rem 'Times New Roman', Times, serif
        }
    </style>
</head>

<body>
    <p id="a">Hello1</p>
    <p id="b">Hello2</p>
</body>

</html>

 

19. 구글폰트
- 웹폰트( web font ) 라고 부름.
- 장점은 로컬에 설치된 폰트와 상관없이 사용 가능함.
  단점은 <link> 사용해야됨.
- https://fonts.google.com/ 접속 해서
  language 와 generic family 먼저 선택 > 목록에 나온 글꼴 선택 > get Fonts 버튼 선택
  > get embed code 선택 > <link> 와 css 복사해서 사용.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>구글font</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
    <style>
        /* // <uniquifier>: Use a unique and descriptive class name
        // <weight>: Use a value from 100 to 900 */
        /* .noto-sans-kr-<uniquifier> {
            font-family: "Noto Sans KR", sans-serif;
            font-optical-sizing: auto;
            font-weight: <weight>;
            font-style: normal;
        } */

        #a {
            font-family: "Noto Sans KR", sans-serif;
            font-optical-sizing: auto;
            font-weight: bold;
            font-style: normal;
        }
    </style>
</head>

<body>
    <!-- class="noto-sans-kr-<uniquifier> -->
    <p id="a">Hello1</p>
    <p id="b">Hello2</p>
</body>

</html>

 

 

20. text 관련 속성
1) 색상
color : red

2) 수평 정렬
text-align: center | left | right | justify(양쪽정렬)

3) 밑줄 및 취소선
text-decoration: underline | overline | line-throuth(취소선)

4) 대소문자, 첫글자 대문자
text-transform: uppsercase | lowercase | capitalize

5) 첫라인 들여쓰기
text-indent: 10px;

6) 줄간격
- font-size: 16px 에 비례해서 적용됨
line-height: 값

ex) line-height: 1 ( 16px * 1 )
     line-height: 2 ( 16px * 2 )
     line-height: 0.8 ( 16px * 0.8 )

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>text관련</title>
    <style>
        #a {
            color: red;
            text-align: center;
            text-decoration: line-through;
            text-transform: uppercase;
        }

        #b {
            width: 200px;
            background-color: yellow;
            /* 첫문장 들여쓰기 */
            text-indent: 30px;
            /* 양쪽정렬 */
            text-align: justify;
        }

        #x {
            /* font-size 에 비례해서 line 에 높이를 줌 */
            line-height: 5;
            background-color: skyblue;
        }

        #y {
            background-color: skyblue;
        }
    </style>
</head>

<body>

    <p id="a">Hello1</p>
    <p id="b">Hello2 Lorem ipsum dolor sit amet consectetur,
        adipisicing elit. Fugiat, laboriosam.
        Autem consequatur ab aliquid culpa velit similique iste
        vel recusandae, accusamus doloribus, error tenetur?
        Fuga eos aliquam itaque sapiente nesciunt.</p>
    <p id="x">world1(line-height설정 o)</p>
    <p id="y">world2(line-height설정 x)</p>
</body>

</html>

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

CSS 5일차 - 4일차 정리  (2) 2024.04.26
CSS 4일차 - FlexBox(1)  (0) 2024.04.25
CSS 4일차 - 3일차 정리  (0) 2024.04.25
CSS 3일차 - 크기단위 ( units )  (0) 2024.04.24
CSS 3일차 - background  (0) 2024.04.24

관련글

티스토리툴바