- 13일차 프론트엔드 공부 -
CSS 상속
부모 요소의 속성값을 자식 요소에게 상속한다.
하지만 상속되지 않은 속성들도 존재한다
상속되는 속성
color
font-family
font-size
상속되지 않는 속성
padding
margin
border
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
안녕하세요. 처음 뵙겠습니다.
<div class="inner_box">
<p>저는 프망생입니다.</p>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.container {
color: blue;
font-size: 40px;
border: 4px solid orange;
}
.inner_box {
color: red;
}
웹폰트
HTML 요소의 글씨체를 바꾸고 싶다면?
font-family
font-family: “폰트 이름”
ex)
font-family: arial, “맑은 고딕”, sans-serif;
ABC가나다 - ‘ABC’에는 arial이 적용 ‘가나다’에는 맑은 고딕이 적용
유저 컴퓨터에도 폰트 파일이 설치되어 있어야 글씨체가 제대로 보인다
이를 위해 만들어진 것이 웹폰트이다.
웹폰트?
웹 전용 폰트. 사용자가 로컬에 폰트를 직접 설치하지 않아도 특정 서버에 위치한 폰트를 다운받아 웹페이지에 표시해준다.
웹 폰트 적용 방법
- 폰트 파일을 직접 다운로드 받아서 적용하는 방법
@font-face 이용
- 외부 서비스에서 제공하는 링크를 이용하는 방법
@import / <link> 이용
@font-face 이용 방법
- 웹폰트 파일을 준비한다. (확장자명 woff / woff2 / ttf / eot)
- CSS 문서에서 @font-face를 이용해 폰트 파일을 불러온다.
- 불러온 폰트 파일을 이용해 새로운 font-family를 만든다.
- 만든 font-family를 사용한다.
@import 사용 방법
- 구글 폰트에 접속해서 원하는 폰트를 찾는다.
- 폰트를 상세페이지 접속 후, 우측 상단에 있는 Get font을 클릭한다.
- web 항목에서 import를 선택하고 해당 import 구문을 css 파일 내에 입력한다.
- CSS rules to specify families를 참고하여 font-family를 사용하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
안녕하세요. 웹폰트 연습입니다.
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
div {
font-family: "Nanum Pen Script", cursive;
font-weight: 400;
font-style: normal;
}
폰트
폰트 속성
font-size
텍스트의 크기를 지정한다.
font-weight
텍스트의 두께를 지정한다.
특정 웹 폰트의 경우 텍스트의 두께를 지원안하는 경우도 있다
text-decoration
텍스트에 장식용 선을 추가한다.
text-decoration: line-through 텍스트를 가로지르는 줄
text-decoration: over;line 윗줄
text-decoration: underline 밑줄
text-decoration: None 부여되어있는 줄을 없앤다
color
텍스트의 색을 지정한다.
line-height
텍스트의 행간을 설정한다.
letter-spacing
텍스트의 자간을 설정한다.
word-spacing
텍스트의 단어 간 간격을 지정한다.
text-align
블록요소나 표 안에서 텍스트의 가로 정렬 방식을 지정한다.
vertical-align
인라인 요소나 표 안에서 텍스트의 세로 정렬 방식을 지정한다.
text-indent
텍스트의 들여쓰기를 설정한다.
text-transform
영문 텍스트의 대/소문자를 바꿀 수 있다.
text-transform: capitalize; 모든 단어의 첫번째 글자를 대문자로 바꿈
text-transform: uppercase; 모든 요소들을 대문자로 바꿈
text-transform: lowercase; 모든 요소들을 소문자로 바꿈
word-break
텍스트가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정한다.
word-break: keep-all; 단어의 어절을 기준으로 띄어쓰기를 함.
word-break: break-all; 한단어 한단어를 쪼개서 띄러쓰기를 함
overflow-wrap
단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정한다.
overflow
콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때, 어떤 방식으로 보여줄지 설정한다.
overflow: visible;(기본값) 콘텐츠 영역 밖으로 텍스트가 나와도 텍스트를 보여준다
overflow: hidden; 콘텐츠 영역 밖으로 텍스트가 나오면 잘라서 안보이게 한다
overflow: scroll; 해당 영역안에 길이 상관없이 스크롤을 만든다.
overflow: auto; 콘텐츠 영역 밖으로 텍스트가 나오면 스크롤을 만든다
text-overflow
줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표시할 것인지 설정한다.
선행조건
white-space: nowrap;
overflow: hidden;
white-space: nowrap; 무조건 한 줄에 텍스트가 정렬되도록 강제한다.
text-overflow: clip; (기본값) 텍스트가 영역을 넘치면 짜른다
text-overflow: ellipsis; 텍스트가 영역을 넘치면 …으로 표시해준다
단위
절대단위
px = pixel = 화소
화면을 구성하는 가장 기본이 되는 단위
pt
인쇄를 위한 단위
1pt (포인트) = 1/72 inch (인치)
웹에서는 잘 사용하지 않음
상대단위
%
부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 지정한다.
em
스타일 지정 요소의 font-size 속성 값에 비례하여 값을 결정한다.
font-size: 16px 인 경우
1em = 16 x 1 = 16px
0.8em = 16 x 0.8 =12.8px
3em = 16 x 3 = 48px
rem
최상위 html 요소의 font-size 속성 값에 비례하여 값을 결정한다.
font-size: 16px 인 경우
1rem = 16 x 1 = 16px
0.8rem = 16 x 0.8 =12.8px
'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글
| 15일차 프론트엔드 공부 - 함수, position, transition (0) | 2024.09.19 |
|---|---|
| 14일차 프론트엔드 공부 - 폰트, 단위 (0) | 2024.09.12 |
| 12일차 프론트엔드 공부 - Float, Flex (0) | 2024.09.10 |
| 11일차 프론트엔드 공부 - Float, Flex (0) | 2024.09.09 |
| 09일차 프론트엔드 공부 - 기초 CSS (0) | 2024.09.04 |