반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>스타일의 상속</title>
<link rel="stylesheet" href="./style/study1.css">
</head>
<body>
<div class="a">
<h1>title</h1>
<p>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.</p>
</div>
</body>
</html>
.a{color:red;}
h1{color:blue;}
a{color:inherit;}/*inherit 는 상속 컬러*/
/* 자식에게 직접 스타일을 넣으면, 부모에게 상속받은 스타일은 무시된다. */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font 관련 css 속성</title>
<link rel="stylesheet" href="./style/study2.css">
</head>
<body>
<p class="a">글자크기 50px</p>
<p class="b">글꼴 돋움</p>
<p class="c">글자 굵게</p>
<h1 id="c">TITLE</h1>
<p class="d">들여쓰기 20px</p>
<p class="f">줄간격 150%(행간)</p>
<p class="g">글자 밑줄</p>
<a href="#">글자 밑줄 없애기</a>
<p class="h">자간 3px</p>
<p class="i">글자 기울임</p>
<i>text</i>
<p class="j">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.</p>
<p class="k">text-transform</p>
<p class="l">TEXT-TRANSFORM</p>
<p class="m">text-transform</p>
<p class="color">color</p>
</body>
</html>
.a{font-size:50px;}
/* 글씨의 높이 단위는 px, 기본 폰트 크기는 16px*/
.b{font-family:Dotum,"돋움",sans-serif}
/* 앞에서부터 순차적으로 글꼴 적용
최종적으로 sans-serif(획이 없는 시스템 기본 서체 적용)
콤마(,)는 Dotum 이 없으면 돋움이라고 된 글씨체를 했다가 이것도 없으면 sans-serif로 해라 라는 뜻
*/
.c{font-weight:bold;}
/* 100~900까지 100단위로 글씨 굵기를 수정, 수치가 높을수록 글씨가 두꺼워짐.
lighter/bold/bolder 문자도 사용 가능, 보통 bold와 normal을 많이 사용함 */
#c{font-weight:400;}/* 글씨굵기 : 400=normal */
.d{text-indent:20px;}/* 들여쓰기 */
.f{line-height:150%;}
/* 행간=텍스트를 감싸는 보이지 않는 라인의 높이(기본값은 120%), %가 아닌 px로 써도 문제 없음, 텍스트 기본 사이즈는 16px로 가령 150%은 = 16*150 = 각 위 아래 24px */
.g{text-decoration:underline;color:blue;} /*밑줄 긋기*/
a{color:black;text-decoration:none;} /*a태그의 기본 적용 스타일인 기존 파랑과 밑줄 삭제하기*/
.h{letter-spacing:-3px;}/*글자 사이 간격 벌이기, 글자 간격을 줄이려면 수치 앞 음수 '-'를 넣으면 됨*/
.i{font-style:italic;}/*글자 기울이기, 기본값이 normal*/
i{font-style:normal;}/*i태그의 기본 기울임 스타일을 없앤다 = normal*/
.k{text-transform:uppercase;}/*대문자로 표기하기*/
.l{text-transform:lowercase;}/*소문자로 표기하기*/
.m{text-transform:capitalize;}/*앞에 있는 문자만 대문자로 표기하기*/
.color{color:rgb(113 209 26);font-size: 80px;text-transform:uppercase;}/*글씨 컬러 바꾸기*/
.j{text-align:justify;font-family:myfont;}
/*문단정렬 총 4가지(왼 left,오 right,가운데 center,양쪽 justify)*/
@font-face{
font-family:myfont;
src:url(../font/newtown.ttf);
}
.a{font-family:myfont;}
/* 폰트 다운로드 > 등록 > 태그 입력하여 스타일 적용!
폰트를 사용하기 위해 등록만 한 상태 = @font-face(폰트를 등록하겠다는 의미)
font-face는 폰트를 등록하는 태그로 font-family 속성은 폰트 이름을 정함
src 경로 속성을 만들어서 상대경로를 만들어 줌 : style폴더이므로 상위폴더로 간다음 폰트있는 폴더의 해당 폰트 명을 입력!
*/
반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] Background_배경 스타일 넣기(2021-10-07) (0) | 2021.11.18 |
|---|---|
| [CSS] 웹폰트, inline vs block(2021-10-05) (0) | 2021.11.18 |
| [HTML] CSS 기초 - 블록라벨/인라인구조, 스타일 상속, CSS 파일 분리방법(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-16) (0) | 2021.11.09 |