유용한 CSS 속성들

FE_Log

JunO3O

홈

방명록

전체글

검색

분류 전체보기 (50)

태그 목록

CSS 단위 속성 선택자 중앙 레이아웃 공간 분할 html 글자 생략 목록태그 상태 선택자 the web developer bootcamp 요소 배치 아이디 선택자 후손 선택자 글자태그 반응 선택자 one true 레이아웃 배경 속성 display 속성 Udemy 자손 선택자 css 태그 선택자 vscode 그레이디언트 글자 속성 유동 속성 박스 속성 입력 양식 위치 속성 수평 레이아웃 구조 선택자

즐겨찾기

유용한 CSS 속성들

유용한 CSS 속성들

2023. 3. 21. 03:12ㆍ비공개

불투명도 / 알파 채널 rgba

ㅁ rgba

: rgba는 rgb에 알파(alpha)를 추가한 것으로, 알파 채널은 색상이 비치는 정도(=투명도)를 결정합니다.

rgba(___, ___, ___, __알파___);  
/* 알파 자리에는 0부터 1까지의 숫자가 들어가며 0은 완전 투명, 1은 불투명을 의미합니다. */

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/alpha.css">
</head>

<body>
    <section>
        <div id="rgba"></div>
    </section>
</body>

</html>

ㅁ alpha가 0일 때 = 투명

section {
    width : 500px;
    height : 500px;
    background-color: #ef476f;
}

#rgba {
    width : 50%;
    height : 50%;
    background-color: rgba(214, 204, 194, 0); /* alpha가 0인 경우 완전 투명하게 됩니다. */
    /* background-color: rgba(214, 204, 194, 0.5); /* alpha가 0.5인 경우 반투명하게 됩니다. */
    /* background-color: rgba(214, 204, 194, 1); /* alpha가 1인 경우 완전 불투명하게 됩니다. */ 
}

rgba의 alpha가 0으로 설정되어 div가 완전 투명하게 되어 없어진 것처럼 보입니다.

ㅁ alpha가 0.5일 때 = 반투명

section {
    width : 500px;
    height : 500px;
    background-color: #ef476f;
}

#rgba {
    width : 50%;
    height : 50%;
    /* background-color: rgba(214, 204, 194, 0); alpha가 0인 경우 완전 투명하게 됩니다. */
    background-color: rgba(214, 204, 194, 0.5); /* alpha가 0.5인 경우 반투명하게 됩니다.
    /* background-color: rgba(214, 204, 194, 1); /* alpha가 1인 경우 완전 불투명하게 됩니다. */ 
}

rgba의 alpha가 0.5로 적용되어 div가 반투명하게 적용됩니다.

ㅁ alpha가 1일 때 = 불투명

section {
    width : 500px;
    height : 500px;
    background-color: #ef476f;
}

#rgba {
    width : 50%;
    height : 50%;
    /* background-color: rgba(214, 204, 194, 0); alpha가 0인 경우 완전 투명하게 됩니다. */
    /* background-color: rgba(214, 204, 194, 0.5); /* alpha가 0.5인 경우 반투명하게 됩니다. */
    background-color: rgba(214, 204, 194, 1); /* alpha가 1인 경우 완전 불투명하게 됩니다. */
}

ㅁ opacity

: opacity는 해당 요소의 콘텐츠 및 자손을 포함한 전체 요소의 투명도를 결정하는 특성합니다.

opacity : 0~1;     /* 0은 전체 요소가 투명해진 상태, 1은 전체 요소가 불투명해진 상태를 의미합니다. */

ex)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/alpha.css">
</head>
<body>
    <section>
        <div id="opacity">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet maiores similique, velit quae in
            molestias inventore saepe corrupti quos distinctio qui blanditiis sint repudiandae quam soluta ullam facere
            id et.</div>
    </section>
</body>
</html>

ㅁ opacity가 0일 때 = 투명

#opacity {
    width : 50%;
    height : 50%;
    background-color: blanchedalmond;
    opacity: 0;   /* opacity 가 0이면 투명 */
}

ㅁ opacity가 0.5일 때 = 반투명

#opacity {
    width : 50%;
    height : 50%;
    background-color: blanchedalmond;
    opacity: 0.5;   /* opacity 가 0.5이면 반투명 */
}

ㅁ opacity가 1일 때 = 불투명

#opacity {
    width : 50%;
    height : 50%;
    background-color: blanchedalmond;
    opacity: 1;   /* opacity가 1이면 불투명 */
}

위치 속성 position

: position 은 문서 내에서 요소의 위치를 지정할 때 사용합니다.

position : ___;

/* position은 static이 기본값이며, top, bottom, left, right 등의 속성은 영향을 주지 않습니다. */
position : static;

/* relative는 문서의 일반적인 흐름에 따라 위치가 정해지지만 
top,bottom, left, right 등으로 현 위치와의 상대적 위치로 오프셋을 줄 수 있습니다. */
position : relative;

/* absolute는 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않습니다. 
가장 가까운 위치에 있는 조상을 기준으로 위치가 조정됩니다. 
가까운 위치에 조상이 없다면 초기 컨테이너 블록 즉, <body>를 기준으로 상대적인 위치에 배치됩니다. */
position : absolute;

/* fixed는 일반 문서 흐름에서 요소가 제거되고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않습니다. 
뷰포트 에 의해 설정된 초기 컨테이닝 블록 에 상대적으로 배치됩니다 . 단, 조상 중 하나에 또는 속성이 이외의 것으로 설정되어 있거나
( CSS Transforms Spec 참조 ) 속성이 로 설정된 경우는 예외입니다. 조상은 컨테이닝 블록으로 동작합니다.*/
position : fixed;   /* 네비게이션바를 만들 때 사용합니다. */

/* sticky는 sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static, 
도달 이후에는 fixed처럼 행동하게 됩니다. sticky를 사용할 때는 부모 요소에 높이(height)를 지정해줘야 합니다. */
position : sticky;

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/position.css">
</head>

<body>
    <h1> position 연습</h1>
    <section id="static">
        <h2> position : static </h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>
    <br><br><br><br><br><br>
    <section id="relative">
        <h2> position : relative </h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>
    <br><br><br><br><br><br>
    <section id="absolute">
        <h2> position : absolute </h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>
    <br><br><br><br><br><br>
    <section id="fixed">
        <h2> position : fixed </h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>

    <br><br><br><br><br><br>
    <section id="sticky">
        <h2> position : sticky </h2>
        <div></div>
        <div id="middle"></div>
        <div></div>
    </section>
    <p> 
    	lorem * 50
    </p>
</body>

</html>

ㅁ position : static

#static #middle {
    position : static;   /* 요소의 위치(position)가 static이면 변화에 영향을 받지 않습니다. */
    top : 100px;
}

top : 100px; 이 적용되어 있음에도 불구하고 position : static이기 때문에 위치에 변화를 주지 않습니다.

ㅁ position : relative

#relative #middle {
    position : relative;   /* 오프셋을 주지 않는 원래 위치에서 상대적인 위치로 이동합니다. */
    top : 100px; 
    left : 100px;
}

#middle 요소(분홍색 네모)는 원래 위치에서 top : 100px, left : 100px 만큼 움직여 하단 우측에 배치되었습니다.

ㅁ position : absolute

#absolute #middle {
    /* absolute는 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않습니다. 
    가장 가까운 위치에 있는 조상을 기준으로 위치가 조정됩니다. 
    가까운 위치에 조상이 없다면 초기 컨테이너 블록 즉, <body>를 기준으로 상대적인 위치에 배치됩니다. */
    position : absolute;   
    top : 0px;
    left : 0px;
}

absolute는 가까운 위치에 있는 조상을 기준으로 배치하기 때문에 가까운 위치에 조상이 없는 경우 <body>를 기준으로 배치합니다.

=> 이를 해결하기 위해서는 id가 absolute인 부모 요소의 위치를 지정하기 위해 relative라고 입력하면 absolute 위치를 지정하고 top과 left로 50px씩 오프셋을 준 <div>에 위치가 지정된 조상이 생깁니다.

#absolute {
    /* 어떤 요소의 위치기 지정되면 static이 아닌 위치 세트가 있는건데 
    id가 absolute인 부모 요소의 위치를 지정하기 위해 relative라고 입력하면 absolute 위치를 지정하고 
    top과 left로 50px씩 오프셋을 준 <div>에 위치가 지정된 조상이 생깁니다. 
    이렇게 하면 더 이상 <div>가 <body>를 기준으로 생기지 않고 <section>을 기준으로 생기게 됩니다. */
    position : relative;
} 

#absolute #middle {
    /* absolute는 문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않습니다. 
    가장 가까운 위치에 있는 조상을 기준으로 위치가 조정됩니다. 
    가까운 위치에 조상이 없다면 초기 컨테이너 블록 즉, <body>를 기준으로 상대적인 위치에 배치됩니다. */
    position : absolute;   
    top : 0px;
    left : 0px;
}

위의 absolute에서는 <body> 위치부터 배치가 되었지만 #absolute에 relative를 적용하여 <section>에서부터 배치가 되었습니다.

ㅁ position : fixed

#fixed #middle {
    position : fixed; /* fixed로 지정되면 화면을 이동하더라도 그 자리에 계속 유지됩니다. */
    top : 100px;
    left : 100px;
}

top : 100px, left : 100px을 적용하여 위의 사진과 같이 나오지만 position : fixed로 인해 화면을 이동하더라도 분홍색 네모는 해당 위치에 고정되어 있습니다.

화면을 이동하더라도 fixed 된 요소는 같은 위치에 배치되어 있습니다.

ㅁ position : sticky

#sticky {
    height : 500px;   /* position : sticky를 사용하기 위해서는 부모 요소에 height 값을 지정해줘야 합니다. */
}

#sticky #middle {
    position : sticky;
    top : 100px;
}

position : sticky는 sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 됩니다.

top : 100px 이후부터는 fixed와 같이 화면을 이동하더라도 고정된 위치에 보입니다.

CSS 전환 transition

: transition은 한 특성값에서 다른 값으로 변화할 때 전환으로 애니메이션 효과를 줄 때 사용합니다.

: 주로 hover 등과 같이 상호작용하는 속성과 많이 쓰입니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

선택자 { 
	transition : _딜레이_;          /* 모든 특성을 딜레이에 맞춰 적용합니다. */
}
ex) 
.circle {
    width : 300px;
    height : 300px;
    background-color: #ff006e;
    transition: 2s;               /* 2초에 거쳐 hover를 적용합니다. */
}

.circle:hover {
    border-radius: 50%;
    background-color: #8338ec;
}

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/transition.css">
</head>

<body>
    <div class="circle"></div>
</body>

</html>

.circle {
    width : 300px;
    height : 300px;
    background-color: #ff006e;
    transition: 2s;
}

.circle:hover {
    border-radius: 50%;
    background-color: #8338ec;
}

transition : 2s에 따라 2초에 거쳐 hover가 적용됩니다.

ㅁ 구체적인 transition

선택자 {
	transition : 속성이름 지속시간 타이밍 대기시간;
}
ex)
.circle {
    width : 300px;
    height : 300px;
    background-color : blue;
    /* 배경색을 3초에 거쳐서 hover 효과를 줍니다. */
    transition : background-color 3s;   /* 모든 속성이 변하게 하려면 background-color 대신 all을 입력합니다. */
}

CSS 변형 transform

: 사물을 확대, 축소, 늘리고 기울이기, 회전시키거나 왜곡시키는 등 변형과 관련되어 있을 때 transform을 사용합니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

ㅁ rotate = 회전

: rotate는 요소를 회전시킬 때 사용하며, 보통 각도(deg)와 함께 사용합니다.

선택자 {
	transform : rotate(_각도_);
}
ex)
div {
	transform : rotate(45deg);
}

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/transform.css">
</head>

<body>
    <section>
        <h1>transform 1</h1>
        <h1>transform 2</h1>
        <h1>transform 3</h1>
        <h1>transform 4</h1>
        <h1>transform 5</h1>
    </section>
    <section>
        <h1>transform 1</h1>
        <h1>transform 2</h1>
        <h1>transform 3</h1>
        <h1>transform 4</h1>
        <h1>transform 5</h1>
    </section>
</body>

</html>

h1 { 
    background-color: #ffcfd2;
    border : 5px solid #b9fbc0;
    color : black;
    padding : 0.7em;
    width : 500px;
    font-size : 1.8em;
    text-align : center;
    margin : 10px auto;
    font-family: 'Courier New', Courier, monospace;
    font-weight : lighter;
}

h1:nth-of-type(2n) {
    background-color: #ffbe0b;
}

h1:nth-of-type(3n) {
    background-color : #fb5607; 
}

h1:nth-of-type(4n) {
    background-color: #8338ec;
}

h1:nth-of-type(5n) {
    background-color : #3a86ff;
}

h1:nth-of-type(1) {
    transform : rotate(45deg);      /* 45deg만큼 회전을 시킵니다. */
}

첫번째 h1만 transform:rotate(45deg)를 하여 회전시킵니다.

ㅁ transform-origin = 변형 기준점

: 기준점을 정하고 정해진 기준점에 따라 변형이 이루어지도록 합니다.

선택자 { 
    transform-origin : __기준점1__ | __기준점2__;
    transform : rotate(_각도_);
}
ex)
h1 {
    transform-origin : bottom left;
    transform : rotate(45deg);
}

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/transform.css">
</head>

<body>
    <section>
        <h1>transform 1</h1>
        <h1>transform 2</h1>
        <h1>transform 3</h1>
        <h1>transform 4</h1>
        <h1>transform 5</h1>
    </section>
    <section>
        <h1>transform 1</h1>
        <h1>transform 2</h1>
        <h1>transform 3</h1>
        <h1>transform 4</h1>
        <h1>transform 5</h1>
    </section>
</body>

</html>

...
h1:nth-of-type(1) {
    transform-origin: bottom left;        /* 왼쪽 아래를 기준점으로 하여 회전을 합니다. */
    transform : rotate(75deg);   
}

transform-origin : bottom left로 인해 요소의 왼쪽 아래를 기준으로 회전을 합니다.

ㅁ scale()

: scale은 요소의 크기를 확대하거나 축소시킬 때 사용합니다.

: scaleX(), scaleY() 등도 있습니다.

선택자 {
	transform : scale(_크기_);
}
ex) 
h1 {
	transform : scale(2);    /* 요소의 크기가 3배로 확대됩니다. */
    /* transform : scale(3, 0.5) 와 같이 (너비, 높이)의 값을 따로 변형할 수 있습니다. */
}

ex)

...
h1:nth-of-type(2) {
    transform : scale(2);
}

transform : scale(2)를 적어 요소의 크기를 기존보다 2배 크게 만듭니다.

ㅁ translate()

: translate는 요소를 오른쪽, 위, 아래 등 움직일 때 사용합니다.

선택자 {
	transform : translate(_크기_);
}

ex)

...
h1:nth-of-type(3) {
    transform : translateX(200px);   /* X축을 기준으로 오른쪽으로 200px만큼 움직입니다. */             
                                     /* 음수(-)로 할 경우 왼쪽으로 움직입니다. */
}

transform : translateX(200px)로 인해 X축을 기준으로 200px만큼 움직입니다.

ㅁ skew

: skew는 2차원 평면상에서 기울일 때 사용합니다.

선택자 {
	transform : skew(_각도_);
}

ex)

...
h1:nth-of-type(4) {
    transform: skew(45deg);   /* X축과 Y축 모두 45도만큼 기울입니다. */
                              /* (X축, Y축)의 형식을 주어 X축과 Y축 각각 다른 각도를 줄 수 있습니다. */
}

transform : skew(45deg); 로 인해 X축, Y축 모두 45도만큼 기울어집니다.

button에 hover 적용하기

: 기본 버튼 스타일은 투박하기 때문에 다양한 속성들을 통해 버튼 스타일을 바꿀 수 있습니다.

ㅁ 버튼의 기본 배경 지우기

button {
	background : none;
}

이 회색 배경을 background : none;를 통해 없앨 수 있습니다.

ㅁ 원하는 버튼 스타일 주기

body {   /* 기본 스타일 비꾸기*/
    font-family: 'roboto', sans-serif;
    display : flex;
    align-items : center;
    justify-content: center;
    height : 100vh;
    background-color: #ffd166;
}

button {   /* 버튼 스타일 바꾸기 */
    background : none;
    color : #390099;
    border : 2px solid ;
    padding : 1em 2em;   /* padding은 content와 border 사이의 여백을 의미하며, 상하 1em, 좌우 2em의 여백을 주었습니다. */
    font-size: 1em;
}

ㅁ button:hover 적용하기

: box-shadow : offset-x | offset-y | 흐림 반경 | 확산 반경 | 색상; 를 통해 박스 뒤에 새겨지는 그림자 효과를 적용할 수 있습니다.

button:hover {
    background-color: #7209b7;
    border-color : #ff0054;   /* hover가 되었을 때 테두리의 색상이 바뀌도록 border-color 적용하기 */
    color : #ff0054; 
    box-shadow : 12px 12px 10px 10px #e0aaff;  /* 박스 뒤의 그림자를 생성하기 위해 box-shadow를 적용합니다. */
}

ㅁ 결과

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/button_hover.css">
</head>

<body>
    <button> button_hover </button>
</body>

</html>

body {
    font-family: 'roboto', sans-serif;
    display : flex;
    align-items : center;
    justify-content: center;
    height : 100vh;
    background-color: #023047;
}

button {
    background : none;
    color : #390099;
    border : 2px solid ;
    padding : 1em 2em;   /* padding은 content와 border 사이의 여백을 의미하며, 상하 1em, 좌우 2em의 여백을 주었습니다. */
    font-size: 1em;
    transition: all 1s;   /* hover가 적용될 때까지의 딜레이를 걸기 위해 transition을 적용합니다. */
}

button:hover {
    background-color: #06d6a0;
    border : 3px solid #216869;   /* hover가 되었을 때 테두리의 색상이 바뀌도록 border 적용하기 */
    color : #1f2421; 
    box-shadow : 0 0.5em 0.5em -0.4em #70d6ff;  /* 박스 뒤의 그림자를 생성하기 위해 box-shadow를 적용합니다. */
    transform : translateY(-0.5em);   /* 마우스를 올려놨을 때 위로 0.5em만큼 움직이기 위해 translate를 적용합니다. */
    cursor: pointer;
}

배경 background

: 배경에 이미지를 넣거나 동영상을 넣을 때 background를 사용합니다.

ㅁ background-image

: 배경화면에 이미지를 넣을 때 background-image를 사용합니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/background

선택자 {
	background-image : url("__주소__");
}

ex)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/background.css">
</head>

<body>
    <section>
        <h1> background </h1>
    </section>
</body>

</html>

section { 
    width : 80%;
    height : 800px;
    background-image: url("https://images.unsplash.com/photo-1530543787849-128d94430c6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    margin : 0 auto;   /* 요소를 중앙에 배치하고 싶을 때 margin에 auto를 주면 화면 중앙에 오게 됩니다. */
}

h1 {
    font-size: 100px;
}

ㅁ background-size

: 이미지의 크기를 바꿀 때 background-size를 사용합니다.

선택자 {
    background-size : contain;   /* contain은 비율을 유지하며 이미지 잘림 없이 꽉 차게 표시합니다. */
    background-size : cover;   /* cover은 비율을 꽉 차게 유지하지만 잘림이 있습니다. */
}

ㅁ background-position

: background-position은 배경의 시작점을 지정해 줄 때 사용합니다.

선택자 {
	background-position : __위치__;
}
ex)
section {
	background-position : top;   /* 이미지의 상단을 기준으로 화면에 나타냅니다. */
}

ㅁ 한 번에 설정하기 : background

: background-image, background-repeat(반복), background-position, background-size 등을 한 번에 설정할 때 background만을 선언하여 설정할 수 있습니다.

선택자 {
	background : 스타일1 | 스타일2 | 스타일3 ...;
}
ex)
section {
    background : center/40% no-repeat url("https://images.unsplash.com/photo-1530543787849-128d94430c6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
}   /* background에서 사용 가능한 속성들을 순서 상관없이 나열하여 한 번에 적용할 수 있습니다. */

ㅁ 다중 배경 적용하기

: 적용된 이미지 이외에 다른 이미지나 색상을 적용하고 싶은 경우, 쉼표(,)를 이용하여 다중 배경을 적용할 수 있습니다.

선택자 {
	background : __1__, __2__;
}
ex)
section {
    background : url("https://images.unsplash.com/photo-1530543787849-128d94430c6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80")
                 , #bde0fe;   /* url에 해당하는 이미지와 #bde0fe에 해당하는 색상을 배경으로 합니다. */
}

글꼴 적용하기 font-family

: font-family는 글꼴을 적용할 때 사용합니다.

선택자 {
	font-family : __글꼴 이름__;
}

ㅁ google fonts

: google fonts은 무료로 이용 가능하며 무료 배포도 가능한 리소스를 제공합니다.

: https://fonts.google.com/에서 원하는 글꼴을 클릭한 후 링크를 가져와 사용합니다.

오른쪽의 노란 박스에서 복사 버튼을 눌러 링크를 가져와 사용하면 됩니다. 노란 박스 아래에는 CSS에서 사용해야할 규칙을 알려줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/google_fonts.css">
    <!-- google fonts 적용 구문 -->
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <!-- google fonts 적용 구문 -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <!-- google fonts 적용 구문 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">   
</head>
<body>
</body>
</html>

body { 
    font-family: 'Roboto', sans-serif;   
    /* Roboto 라는 폰트를 메인으로 하되, 
    Roboto 라는 폰트를 적용하지 못할 경우를 대비해 백업용으로 sans-serif라는 폰트도 적용합니다. */
}

활용하기

: 이미지와 폰트에서 배운 것들을 활용하여 이미지 페이지 만들기

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Blog</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/img_blog.css" />
    <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=Raleway:wght@800&family=Roboto:wght@300;400&display=swap"
        rel="stylesheet" />
</head>

<body>
    <!-- 네비게이션 바  -->
    <nav>이미지</nav>

    <!-- 초록 이미지 -->
    <img
        src="https://images.unsplash.com/photo-1520121401995-928cd50d4e27?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" /><img
        src="https://plus.unsplash.com/premium_photo-1668003644045-c06d7fe7eca2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" /><img
        src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" />

    <!-- 노란 이미지 -->
    <img
        src="https://images.unsplash.com/photo-1521913626209-0fbf68f4c4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" /><img
        src="https://images.unsplash.com/photo-1512425406684-952ff74cb8d1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1197&q=80" /><img
        src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
    
    <!-- 하늘 이미지 -->
    <img
        src="https://images.unsplash.com/photo-1463947628408-f8581a2f4aca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" /><img
        src="https://images.unsplash.com/photo-1514477917009-389c76a86b68?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1067&q=80" /><img
        src="https://images.unsplash.com/photo-1472190649224-495422e1b602?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" />
</body>

</html>

img { 
    width : 30%;
    margin : calc(10%/6);
}

nav {
    text-transform: uppercase;   /* uppercase는 글자를 대문자로 바꾸기 위해 사용됩니다. */
    border-bottom : 2px solid black;
    margin-left : calc(10%/6);
    margin-right : calc(10%/6);
    padding : 1.5em 0;   /* 상하 20px, 좌우 0px */ 
    font-family: 'Raleway', sans-serif;   /* 구글 폰트 설정 */
    font-size : 1.5em;
}

ㅁ img 태그의 연결성에 따른 차이(White Space)

: [1]과 [2] 모두 태그를 여러 개 나열할 것이지만 태그 사이의 여백에 따라 화면에 표시되는 모습이 달라집니다.

[1]
<img src="___"><img src="___"><img src="___">

vs

[2]
<img src="___">
<img src="___">
<img src="___">

: HTML 에는 화이트스페이스(White Space)라는 것이 있는데, [2]번의 경우 <img>와 <img> 줄 사이에 화이트스페이스가 존재하여 공간이 생겼기 때문입니다. <span> 태그를 예로 들 수 있는데, <span> 태그를 나란히 이어 붙이면 화이트 스페이스는 생기지 않아 사이 공간이 존재하지 않습니다. 하지만 <span> 태그를 한 줄씩 띄어 작성하면 줄로 인해 화이트 스페이스가 생기게 됩니다.

...
<body>
	<!-- 화이트 스페이스 X -->
    <span>화</span><span>이</span><span>트</span><span>스</span><span>페</span><span>이</span><span>스</span>
    <br>
    <!-- 화이트 스페이스 O -->
    <span>화</span> <span>이</span> <span>트</span> <span>스</span> <span>페</span> <span>이</span> <span>스</span>
    <br>
    <!-- 화이트 스페이스 O -->
    <span>화</span>
    <span>이</span>
    <span>트</span>
    <span>스</span>
    <span>페</span>
    <span>이</span>
    <span>스</span>
</body>

태그와 태그 사이에 공간이 생기게 되면 HTML에서는 화이트스페이스가 발생하여 공백이 생기게 됩니다.

'비공개' 카테고리의 다른 글

CSS 박스 모델 (1)	2023.03.21
CSS 선택자 (1)	2023.03.21
CSS : 기초 (1)	2023.03.21
HTML : 폼, 테이블 (0)	2023.03.21
HTML : 시맨틱(Semantics) (0)	2023.03.21

'비공개' 카테고리의 다른 글

관련글

티스토리툴바