<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p {
font-style: italic;
font-weight: 900; /*글자 두께. 폰트에 따라 적용되지 않을 때도 있어서 실제 결과를 확인해보면서 하기 */
font-size: 16px; /*크기단위 입력 -> %, 배수단위, em/rem
기본적으로 h1태그(32px)는 기본p태그(16px)의 2배. 텍스트 기반으로 레이아웃을 잡으면 안됨(?)*/
/*font-size와 line-height 사이에 "/" 넣기. 그냥 따로따로 입력하는게 낫다..*/
line-height: 15px; /*글자의 줄높이 지정. 수직정렬. css는 block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일속성이 없다. 대체방안으로 라인헤잇을 사용. block형식 태그에만 적용. 크게 변경하는 경우는 잘없으나, button을 만들때 적용되기도 함. 이때 글자를 감싸는 박스의 height과 같은 크기로 지정한다.*/
font-family: AppleGothic, MalgunGothic, serif;
font-family: AppleGothic, MalgunGothic, sans-serif;
font-family: AppleGothic, MalgunGothic, monospace;
/*글꼴 자체를 지정하는 속성. 앞쪽부터 적용할 수 있는 폰트인지 확인하면서 적용하게 된다.
두 단어 이상으로 구성된 폰트에만 따옴표를 사용해서 잡아줘야 한다.
s-srif/mono : 사용자컴에 내가 지정한 폰트가 없을 경우를 대비해, 마지막에 넣는다.*/
text-align: center; /*글자 정렬. block형식 태그에만 적용. span같이 inline형식의 태그는 적용안됨*/
}
a {
text-decoration: none; /*링크에 자동으로 생기는 밑줄 제거.*/
color: red;
}
a:hover{ /*마우스를 링크 텍스트에 갖다댔을 때 바뀌는 색깔 지정하기*/
color: red
}
</style>
</head>
<body>
<h1><a href="#">Hello Worlda></h1>
<p>Ad labore anim minim do pariatur mollit voluptate.</p>
<p>Commodo do qui quis duis ullamco ea dolore tempor labore deserunt nulla sit. Incididunt ex incididunt quis dolore ad officia magna irure. Lorem nisi pariatur sunt laborum ex esse id minim veniam minim amet consequat. Sint dolore incididunt exercitation Lorem Lorem voluptate excepteur. Adipisicing consequat quis et eu. Veniam occaecat do sint officia tempor fugiat culpa ut aliquip. Aute ullamco aute mollit aliquip minim sunt ea voluptate.</p>
</body>
</html>
'Programming > html5 & css3' 카테고리의 다른 글
| css3 / 레이아웃(1) - float 속성, 중앙정렬 (0) | 2019.08.21 |
|---|---|
| css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow (0) | 2019.08.21 |
| css3 / 배경background 속성 (0) | 2019.08.21 |
| CSS3 / border 속성 (0) | 2019.08.21 |
| CSS3 / 박스box 속성 - margin, padding, box-sizing (0) | 2019.08.21 |