크게 6가지의 속성을 가지며 글자의 색상은 따로 font 속성의 하위가 아닌 color 속성으로 지정할 수 있습니다.
font-style
이탤릭체등의 글꼴의 스타일 지정
font-weight
글자두께
font-variant
글꼴 변형 (소문자를 대문자로 바꾸는 등의)
font-size
글자크기
line-height
줄 간격
font-family
글꼴(굴림, 돋움, …)
@font-style
※font-style은 폰트의 표시 형태를 지정하는 속성으로, 폰트의 기본 형태로 표시하는 normal 값과 이탤릭체 또는 기울임 꼴로 표시하는 italic과 oblique가 있습니다.
@코드로 보기
<title>font 예제</title>
<style>
#ex1 {
font-style: italic;
}
</style>
</head>
<body>
<p>기본</p>
<pid="ex1">이텔릭체</p>
</body>
</html>
@font-weight
※font-weight는 폰트가 표시되는 굵기를 지정하는 속성입니다.
100~900 사이의 굵기 단계를 표시하는 수치값이나 normal, bold 등의 키워드로 선언할 수 있습니다.
@코드로 보기
<title>font 예제</title>
<style>
#ex1 {
font-weight: 100;
}
#ex2 {
font-weight: 700;
}
#ex3 {
font-weight: bold;
}
</style>
</head>
<body>
<p>기본</p>
<pid="ex1">굵기 100</p>
<pid="ex2">굵기 700</p>
<pid="ex3">bold 속성</p>
</body>
</html>
@font-variant
※font-variant는 영문 폰트의 소문자 표시 형태를 변경하는 속성입니다.
font–variant–position : 폰트의 표시 위치를 지정하는 속성, 화학식의 윗첨자, 아랫첨자 등과 같은 형태
font–variant–ligatures : 발음 기호 형태와 [æ] 같은 묶음 표시 형태를 표시하는 속성
font–variant–caps : 대소 문자 형태를 변경하는 속성
font–variant–numeric : 분수나 회계용 숫자 등의 표시 형태를 변경하는 속성
font–variant–alternates : 폰트의 장식 요소나 특수 문자의 표시 형태를 변경하는 속성
font–variant–east–asia : 한자나 일본어의 폰트를 약자 형식으로 변경할 수 있는 속성
@font-size
※font-size는 폰트의 크기를 지정하는 속성으로, xx-small, x-small, small, medium, large, x-large, xxlarge과 같은 절대 크기와 smaller, larger와 같은 상대 크기 등을 사용할 수 있습니다. (일반 웹 페이지에서는 px를 사용)
@font-family
※font-family는 텍스트의 폰트를 지정하는 속성으로, 속성 값은 복수로 지정할 수 있으며 복수 지정 시에는 (,)로 구분합니다. 지정된 순서대로 표시할 수 있는 폰트를 찾게 됩니다.
※우선 각각 다른 속성값을 주기 위해 form id로 "login"을 각 필드마다 "loginbox", "mailbox", "joinbox"로 구분을 지어놓았습니다. 그리고 <ul><li>를 통하여 각 항목, <input>으로 입력란을 만들어 준 뒤 이를 <label>로 묶어주었습니다.
<labelfor="user-id"> 아이디 </label><inputid="user-id"type="text"placeholder="공백 없이 2자 이상"autofocusrequired>
<label for="묶어줄 아이디"><id="묶어줄 아이디">로 활용하시면 됩니다.
<input type=""> : text, password, email, tel 등 원하는 입력방식에 맞추어 지정해 주시면 됩니다.
<input placeholder="내용"> : 내용을 입력하면 사라지는 힌트 개념이라고 생각하시면 됩니다.
<input autofocus> : 화면이 실행될 시 커서가 위치할 수 있도록 해줍니다.
<input required> : 필수 입력항목을 지정하는 것으로 submit버튼으로 넘어갈 때에 지정된 항목이 비어있다면 항목을 채우라는 메시지를 보냅니다.
<input autocomplete> : 자동완성기능 사용여부를 정하는 속성입니다. on과 off를 사용합니다.
<input value="보여줄 값" readonly> : 값을 입력할 수 없고 입력되어 있는 값을 보여주기만 하는 속성입니다.
※CSS에서 레이아웃 페이지를 나눌 때에 주로 플렉스(Flex)와 그리드(Grid)를 많이 사용합니다.
flexbox는 한 방향 레이아웃 시스템(1차원), grid는 두 방향 레이아웃 시스템(2차원)으로 이번 시간은 그리드에 대해서 알아보려 합니다. 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 사용합니다.
테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. 이번 시간은 간단한 기본 구조와 속성에 대해 알아보고 다음시간에 아이템배치방법이나 축약어등을 다루어 보도록 하겠습니다.
