JS | CSS | HTML
60일차 CSS FONT , TEXT, BORDER, DISPLAY
leo lee
2022. 12. 20. 17:16
반응형
폰트
기본 명령어
| 명령어 | 설명 |
| font-family | 폰트 설정 |
| font-size | 폰트 크기 설정. small, medium, large 등이 가능, %, px 사용 가능 |
| font-style | 폰트 스타일 설정. normal, italic(이탤릭체), oblique(기울임꼴)중 하나 선택 가능 |
| font-weight | 폰트의 굵기 설정 |
| font | font에 관련된 속성을 한꺼번에 설정할 수 있음 |
외부 폰트 사용 방법
아래 링크로 접속해서 원하는 폰트 선택
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
1. 웹폰트 링크
선택된 부분을 복사해서 HEAD 에 넣고 주어진 font-family를 꼭 사용해 주어야 한다.
<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>
<!-- 1.웨폰트 링크 -->
<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=Stylish&display=swap" rel="stylesheet">
</head>2. 웹폰트 임포트
아래 표시된 부분을 복사해서 사용하면 된다.
<!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>
<!-- 2.웹폰트 임포트 -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Stylish&display=swap');
body,html{
font-family: 'Stylish', sans-serif;
font-size: 30px;
font-weight: 500;
}
</style>
</head>3. 웹폰트 다운로드
아래 링크에 다운로드 방법은 잘 설명이 되어 있다.
나만 모르는? 구글 폰트 다운로드 방법! 상업용 무료 한글 폰트 836종(사이트 4곳)!
구글 폰트 다운로드 방법, 폰트 설치법, 상업용 무료 한글 폰트 836+종을 모두 한 번에 알아보겠습니다! 지금 확인해보세요!
sergeswin.com
텍스트
텍스트 속성
| 명령어 | 설명 |
| color | 텍스트 색을 지정한다. |
| line-height | 줄 간격을 지정한다. |
| letter-spacing | 문자사이의 간격을 설정한다. normal로 지정하거나 0.5px등으로 나타 낼 수 있다. |
| text-align | 텍스트 정렬상태를 설정한다. left, right, center, justify 중 하나를 지정할 수 있다. |
| text-decoration | 텍스트에 줄을 표시한다. none속성이 주로 사용된다. |
| white-space | nowrap을 사용하였을 경우에는 공백은 유지하며 줄 바꿈 기능을 하지 않는다 |
| text-align | 텍스트 정렬상태를 설정한다. (left, right, center, justify) |
| vertical-align | 나란히 배치된 요소에 적용하여 수직정렬의 기준을 맞춘다. (top, middle, bottom) |
| overflow | 일정 공간에 글들이 넘칠 때 넘치는 것을 방지하는 속성이다. |
텍스트 정렬 팁 한줄 텍스트를 수평가운데로 보내고 싶을때 height와 line-height를 동일하게 맞추면 문단이 수평 가운데 정렬이 됩니다
텍스트 예시
<!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>
<style>
.tx{
color: red;
letter-spacing: -5px; /* 글자 간격 */
text-align: center; /* 글자 정렬(블럭요소)
블럭 요소에서 사용가능, 인라인에서 써도 움직이지 않음*/
}
/* 기준이 되는 나란히 배치는 요소에 들어감 */
.tx1 img{
vertical-align: top;
}
/* 기준이 되는 요소가 없을 때 수직 정렬 */
.tx2{
border: 1px solid #777;
height: 100px;
line-height: 50px; /*줄간 간격*/
}
</style>
</head>
<body>
<p class="tx">
안녕하세요
</p>
<p class="tx1">
<img src="img/css3.png" alt="이미지">
버티컬 얼라인
</p>
<p class="tx2">
기준이 되는 요소가 없을 때 수직 정렬<br>
기준이 되는 요소가 없을 때 수직 정렬
</p>
</body>
</html>텍스트 결과
문단 숨김 속성
| 명령어 | 설명 |
| visible | 기본 값, 넘치더라도 보이게 함 |
| hidden | 넘치는 부분 숨김 |
| scroll | 스크롤이 무조건 만들어짐 |
| auto | 내용이 넘칠 때만 스크롤 생성 |
문단 숨김 예시
<!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>
<style>
p{
border: 1px solid #777;
height: 100px;
width: 300px;
}
.tx1{overflow: hidden;}/*숨김 */
.tx2{overflow: scroll;}/*무조건 스크롤 생성 */
.tx3{overflow: auto;}/*내용이 넘칠 때만 스크롤 생성 */
.tx4{overflow: visible;}/*기본값 */
</style>
</head>
<body>
<p class="tx1">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다.
물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
</p>
<p class="tx2">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다.
물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
</p>
<p class="tx3">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다.
물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
</p>
<p class="tx4">
2004년 새해가 밝았습니다.
어느새 설날이 다가왔습니다.
이때가 되면 생각하는 것은 하나님은 우리에게 또 한 장의 도화지를 주셨다고 생각합니다.
'1년 365일'시간(時間)이라는 도화지(圖畵紙) 위에 실천(實踐)이라는 붓으로, 우리는 인생(人生)이라는 그림을 그리는 것이라 생각을 해봅니다.
그래서 2004년에는 각자 자기가 원하는 그림을 구상하고, 계획하고, 생각하면서, 훌륭한 삶의 그림을 그려야 한다고 생각합니다.
그런데 그림도 무작정 그리면 안됩니다.
열정과 패기를 가지고, 철저한 계획과 준비와 끊임없이 훈련하면서 그려야 합니다.
거기에 언제나 '상냥한 웃음'과 '아름다운 친절'과 '존경의 인사'라는 '물감'을 사용한다면 더욱더 아름다운 그림이 그려지리라 생각합니다.
물론 거기에 '지혜(智慧)'라는 물감까지 첨가하면 더욱 좋겠지요.
</p>
</body>
</html>문단 숨김 결과
보더
border: 3가지 속성을 한번에 지정해서 많이 사용한다.
ex) (두께, 선모양, 색상) 1px solid #777
border-radius: 테두리가 둥근 사각형 또는 원을 만들 수 있다
<style>
.box{
border: thick dashed black;
/*border-radius: 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래*/
border-radius: 50px 40px 20px 10px
}
</style>
디스플레이 (중요)
디스플레이 속성
| 스타일 이름 | 설명 |
| none | 태그를 화면에서 보이지 않게 만듬 (보통 화면에서 없다가 생기게 하거나 있다가 없게 하게 하는데 사용) 사용 시 완전히 화면에서 제거가 됨 |
| block | 태그를 block 형식으로 지정 사용 시 태그가 한 줄을 차지함(너비, 높이, 정렬은 block 요소에서만 작용함) |
| inline | 태그를 inline 형식으로 지정 사용 시 한 줄에 들어감 |
| inline-block | 태그를 inline-block 형식으로 지정 사용 시 한 줄에 들어감 inline과 inline-block의 차이점은 inline-block은 박스요소(크기, 너비) 를 지정할 수 있다는 점이 다 르다 |
디스플레이 예시1
<!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>
<style>
.list .inner{
display: inline;
}/* 인라인 요소로 변경 */
.list2 span{
display: block;
}/* 블럭 요소로 변경 */
.list3 a{
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
text-align: center;
}/* 인라인으로 배치, 블럭의 성질을 가지게함 */
.box{
display: none;
}/* 숨기기 */
</style>
</head>
<body>
<div class="list">
<div class="inner">블럭</div>
<div class="inner">블럭</div>
<div class="inner">블럭</div>
</div>
<div class="list2">
<span>인라인</span>
<span>인라인</span>
<span>인라인</span>
</div>
<div class="list3">
<a href="#">인라인</a>
<a href="#">인라인</a>
<a href="#">인라인</a>
</div>
<div class="box">
<p>디스플레이 none</p>
</div>
</body>
</html>디스플레이 결과 1
첫번째 사진에서 두번째 사진으로 변경이 된다.
디스플레이 예시2
<!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>
<style>
*{
list-style: none;
padding: 0;
margin: 0;
}/*이렇게 하면 기본 주어진 list의 속성을 다 없애고 시작 할 수 있다.*/
.nav{
text-align: center;
}
.nav li{
display: inline;
}
.nav li a{
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
text-decoration: none;/* 밑줄 제거 */
}
#header{
text-align: center;
background-color: #000;
color: #fff;
}
.wrap ul li{
display: inline;
}
.wrap ul li a{
color: #fff;
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
.wrap ul li a:hover{
background-color: #777;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
<header id="header">
<h3>목록만들기</h3>
<nav class="wrap">
<ul>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
<li><a href="#">목록</a></li>
</ul>
</nav>
</header>
</body>
</html>디스플레이 결과2
첫번째 사진에서 두번째 사진으로 변경이 된다.
반응형