반응형
/* IM 혜민체 Bold */
@font-face {
font-family: 'IM_Hyemin-Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/IM_Hyemin-Bold.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
/* 빙그레 싸만코체 */
@font-face {
font-family: 'BinggraeSamanco-Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/BinggraeSamanco-Bold.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>웹폰트</title>
<!-- 구글처럼 따로 폰트 등록한 것을 font css 파일을 링크 연결 -->
<link rel="stylesheet" href="./css/font.css">
<!-- 웹상에 저장되어 있는 폰트 = 웹 폰트 -->
<link rel="stylesheet" href="./css/study1.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=Ephesis&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="f_im">IM 혜민체 Bold</h1>
<hr>
<!-- 아래와 같은 형식으로 클래스 명 안에 띄어쓰기를 해서 여러개 넣어 사용하여 id 중복을 피하는 방법! = f 언더바 im의 이름을 가지고 있거나, f30의 이름을 가지고 있는 클래스 명으로 css 태그 입력 -->
<p class="f_im f30">IM 혜민체 Bold 폰트 - 30픽셀</p>
<p class="f_im f60">IM 혜민체 Bold 폰트 - 60px</p>
<p class="f_im f30 f60">IM 혜민체 Bold 폰트 - 90px</p>
<!-- 클래스 명은 같으나 글씨 크기가 다르다 이것은 어떻게? id명을 다르게 넣어서 태그 삽입 -->
<form>
<textarea class="f_im" placeholder="글씨를 입력해보세요."></textarea>
</form>
<!-- 현재 대부분의 디자인은 입체보다 플랫디자인!! = 웹에 들어가는 색상 거의 대부분 3개 + 포인트 색상 1개 정도여서 약.... 4~5개면 끝나므로 왠만하면 class 를 사용하는게 편리 -->
<div class="f_im">
<h1>IM 혜민체 Bold</h1>
<hr>
<p>IM 혜민체 Bold 폰트 - 30픽셀</p>
<p>IM 혜민체 Bold 폰트 - 60px</p>
<form>
<textarea placeholder="글씨를 입력해보세요."></textarea>
</form>
</div>
<hr>
<h1 class="f_bgr">빙그레 싸만코체 Bold</h1>
<hr>
<!-- 현재 id 명이 중복 된 상태, css 상으론 문제 없어 보이나 자바스크립트 할 때 문제가 생긴다. -->
<p class="f_bgr f30">빙그레 싸만코 Bold 폰트 - 30픽셀</p>
<p class="f_bgr f60">빙그레 싸만코 Bold 폰트 - 60px</p>
<p class="f_bgr f30 f60">빙그레 싸만코 Bold 폰트 - 90px</p>
<form>
<textarea class="f_bgr" placeholder="글씨를 입력해보세요."></textarea>
</form>
<h1 class="ggEn">Lorem ipsum dolor sit amet.</h1>
</body>
</html>
.f_im{font-family: 'IM_Hyemin-Bold';}
.f30{font-size:30px;}
.f60{font-size:60px;}
.f30.f60{font-size:90px;}
.f_bgr{color: salmon;font-family: 'BinggraeSamanco-Bold'}
.ggEn{font-family: 'Ephesis', cursive;}
/* cursive 는 곡선이 들어갔다는 의미 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>inline vs block</title>
<link rel="stylesheet" href="./css/study2.css">
</head>
<body>
<h1>블록레벨요소(80%)</h1>
<hr>
<ul>
<li>자동 줄바꿈이 된다.</li>
<li>한폭의 너비를 차지한다.</li>
<li>규격의 개념이 있다.(박스형태)</li>
</ul>
<h1>인라인레벨요소(10%)</h1>
<hr>
<ul>
<li>자동 줄바꿈이 되지 않는다.</li>
<li>태그가 포함하는 컨텐츠만큼의 너비를 차지한다.</li>
<li>규격의 개념이 없다.(라인형태) = 사이즈를 잡을 수가 없다는 의미</li>
</ul>
<h3 class="a">TITLE</h3><!--h3태그 = 블록레벨요소-->
<span class="b">내용</span><!--span태그 = 인라인레벨요소-->
<span class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<h3 class="a">TITLE</h3>
<h1>포함관계(태그를 구성할 때)</h1>
<ul>
<li>인라인레벨은 블록레벨을 포함할 수 없다.(단, a 태그는 모두 포함 가능)</li>
<!-- 단, a태그만 예외 :(아래 예시)
<a href="#">
<h1>title</h1>
</a> -->
<li>인라인레벨끼리 자유롭게 포함 가능</li>
<!-- <i><b>text</b></i> : 인라인레벨끼리는 자유롭게 순서 변경 가능 -->
<li>블록레벨은 인라인레벨을 포함할 수 있다.</li>
<li>블록레벨끼리 "문맥으로 올바른 경우에만" 포함 가능</li>
</ul>
</body>
</html>
.a{
border:1px solid red;
width:300px;
height:300px;
}
/* border, solid 속성은 a클래스가 생긴만큼 테두리를 그린다는 의미 */
.b{border:1px solid blue;
width:300px;
height:300px;
}반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] 박스모델 3요소(선, 바깥여백, 안여백)_border, margin, padding_별5개(2021-10-08) (0) | 2021.11.24 |
|---|---|
| [CSS] Background_배경 스타일 넣기(2021-10-07) (0) | 2021.11.18 |
| [CSS] 스타일 상속 및 Font 관련 CSS 속성(2021-09-28) (0) | 2021.11.18 |
| [HTML] CSS 기초 - 블록라벨/인라인구조, 스타일 상속, CSS 파일 분리방법(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-23) (0) | 2021.11.17 |