오늘은 CSS에 대한 속성과 속성값에 대해 살펴보겠습니다. 앞선 포스팅에서 HTML은 웹페이지의 뼈대를 만드는 것이고 CSS는 만든 뼈대에 다양한 속성을 부여하는 것이라고 했습니다. 태그에 속성과 속성값을 부여하기 위해서 어떤 속성이 있는지, 속성값을 어떻게 넣어야할지 알아보도록 하겠습니다.
1. font & text 속성과 속성값
전자책을 작성할 때 먼저 어떤 글꼴을 사용할지 결정해야 합니다. 오늘은 먼저 글꼴(font) 관련 속성에 대해 알아보겠습니다. 불특정 다수의 대중에게 상업적 용도로 배포되는 전자책의 경우라면 반드시 무료 글꼴을 사용해야 합니다. 저는 전자책에 나눔글꼴을 사용했습니다. 나눔 글꼴 이외에 다른 글꼴을 사용하고 싶다면 font-family 속성을 이용해 글꼴 지정이 가능합니다. 또 폰트의 크기를 지정할 경우 font-size, 폰트의 두께를 지정할 경우 font-weight, 폰트 스타일을 지정할 경우 font-style을 사용하면 됩니다.
글꼴 이외에 텍스트(text) 관련 속성도 살펴보면 글자의 색상을 바꾸고 싶을 경우는 속성 color를 사용하고 해당 속성값을 넣어주면 됩니다. 작성한 글의 정렬 방식은 text-align을 사용하고 왼쪽 정렬, 오른쪽 정렬, 중앙 정렬, 양쪽 정렬 중 원하는 방식을 속성값으로 넣어주면 됩니다. 또 줄간격 지정은 line-height, 자간 간격 지정은 letter- spacing, 텍스트 꾸밈은 text-decoration을 사용합니다.
전자책의 스타일 시트에 작성한 예를 보겠습니다. h1제목과 p의 스타일을 지정하였는데 h1은 "폰트 종류"로 "NanumMyeongjoExtraBold" 를 지정해 주었고 "글꼴의 크기"는 1.5em, "정렬"은 중앙 정렬, "글꼴 색상"은 네이비로 지정해 주었습니다. 또 margin은 추후 CSS 속성에서 다시 다룰 예정인데 여백 지정이라고 생각하시면 됩니다.
p는 "폰트 종류"로 "NanumMyeongjo" , "글꼴의 크기"는 0.9em, "정렬"은 왼쪽 정렬, "줄간격"은 1.9em, "아래쪽 마진은 5%", "문단 들여쓰기(text-indent)는 0.5em으로 지정해 주었습니다.
예시)
h1{font-family: NanumMyeongjoExtraBold; font-size: 1.5em; text-align: center; margin-top:15%; margin-bottom:5%;
color:navy; }
p{font-family: NanumMyeongjo; font-size:0.9em; text-align:left; line-height:1.9em; margin-bottom:5%; text-indent:0.5em;}
위와 같이 "스타일 시트"에 일괄 지정하고 적용하면 해당 태그에 일일이 지정해줘야 하는 번거로움을 줄일 수 있습니다. 여기서 em이 뭐지? 라는 궁금증을 가질 수 있을 텐데요. "em" 단위는 "부모로 부터 상속받은 폰트 사이즈에 대한 비율"이라고 생각하면 됩니다. 현재 h~ 태그들은 body가 부모 요소 이므로 body의 기본 사이즈가 16px이면 1em은 16px이 됩니다. 만약 부모의 font-size가 14px 이라면 1em = 14px이 되겠죠. 지난 포스팅에서 h4가 1em이라고 했으므로 h4의 크기가 16px 이라는 의미입니다. 또 h1의 폰트 사이즈를 보시면 2em 이므로 2배 크기라는 뜻이므로 36px이 됩니다. 굳이 외울 필요없이 이런 의미구나라고 이해만 해두시면 될 것 같습니다.
2. 무료 글꼴 다운받기
먼저 무료 글꼴을 다운로드 받을 수 있는 사이트를 알려드릴께요^^ 검색창에 "눈누"를 검색하시면 해당 웹페이지로 이동이 가능합니다.
눈누
상업용 무료한글폰트 사이트
noonnu.cc
눈누의 웹페이지로 이동하면 다양한 글씨체가 보이는데 우측 상단의 "모든 폰트"를 눌러 더 많은 글씨체를 볼 수 있습니다. 원하는 글씨체를 선택한 후 "폰트 미리보기"를 통해 어떤 모양의 글씨체인지 사용해볼 수도 있습니다. 마음에 들면 "다운로드 페이지로 이동"을 눌러 글꼴 파일을 다운로드해 주면됩니다.
파일을 다운로드 받으면 두 개의 파일이 나타납니다. 두 개의 차이는 확장자가 otf와 ttf라는 것인데요, 그럼 어떤 것을 다운로드 받아야 할까요?
- otf : 고해상도 출력 작업이 필요할 경우 사용/ 포토샵, 일러스트 등에 사용하기 적합
- ttf : 일반 문서 작업 시 사용/ 한글, 워드 등 문서 작업에 적합
그렇다면 우리는 ttf를 다운로드 받으면 된다는 의미이겠죠^^. 해당 파일을 클릭한 후 "설치"를 눌러주면 글꼴 다운로드가 마무리 됩니다. 이렇게 다운로드 받은 글꼴은 sigil에 좌측 폴더 "Fonts"에 추가해 주어야 합니다. "Fonts"를 우클릭한 후 "기존 파일 추가"를 통해 업로드해줍니다.
마지막으로 전자책의 스타일 시트에 @font-face {font-family: NanumMyeongjo; src: url("../Fonts/NanumMyeongjo.ttf");}를 작성해 줍니다. 내가 쓰려는 전자책을 Fonts 파일에 있는 나눔명조글꼴로 작성하겠다라는 것을 지정해 주는 것입니다.
3. 글꼴 색상 속성값 알아보기
글꼴 색상의 속성값을 보면 #000000 형식으로 넣어주어야 합니다. 어떻게 속성값을 얻을 수 있으까요? 아래 사이트에서 컬러 코드를 쉽게 얻을 수 있습니다.
HTML 컬러 코드
HTML 컬러 차트 사각형 모양의 컬러버튼을 클릭하여 HTML 컬러 코드를 찾으세요. HTML 컬러 코드 이론 "이 이상한 기호와 숫자와의 조합이 어떤 의미가 있을까?" 하고 궁금하신가요. 그 답은 "예" 입
html-color-codes.info
HTML Color Codes 웹페이지로 이동하면 아래와 같은 화면이 나타나는데 컬러 차트에서 원하는 색상을 한개 선택하면 아래에 컬러 코드가 나타납니다. 혹은 상단 탭에서 "colors from image"를 선택한 후 원하는 이미지를 불러와 이미지에 사용된 칼라 중 한 개를 골라서 컬러 코드를 추출할 수도 있습니다. 원하는 글꼴 색상이나 특정 영역의 배경색을 사용할 경우 여기서 쉽게 컬러 코드를 얻을 수 있습니다.
오늘은 font와 text 속성과 무료 글꼴 다운받는 방법, 컬러 코드 추출하는 방법 등에 대해 살펴보았습니다. 다음에는 여백 지정을 포함한 CSS 속성에 대해 조금 더 살펴보겠습니다^^
'전자책' 카테고리의 다른 글
| 1인 전자책 출판을 위한 HTML & CSS 이해하기(2) : 주요 HTML 태그 중심으로 (0) | 2023.02.05 |
|---|---|
| 1인 전자책 출판을 위한 HTML & CSS 이해하기(1) (0) | 2023.02.04 |
| 전자책(E북) 만들기 : sigil 다운로드 & 화면 구성 이해하기 (0) | 2023.01.31 |
| 캔바로 전자책 북커버(책표지) 만들기 (2) | 2023.01.30 |
| 나의 첫 전자책, 무료 온라인쇼핑몰 만들기, 전자책 유통 (0) | 2023.01.25 |
댓글