🍁텍스트 속성
한글 Ipsum (간세네)
한글 Lorem Ipsum (간세네)
로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종
guny.kr
<body>
<h1>텍스트 관련 속성</h1>
<p>대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 모든 국민은 학문과 예술의 자유를 가진다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대통령은 법률이 정하는 바에 의하여 사면·감형 또는 복권을 명할 수 있다. 국회의원은 국회에서 직무상 행한 발언과 표결에 관하여 국회외에서 책임을 지지 아니한다. 법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다.</p>
<p class="txt">이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다. <span>나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.</span> 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다. 국가는 평생교육을 진흥하여야 한다. 혼인과 가족생활은 개인의 존엄과 양성의 평등을 기초로 성립되고 유지되어야 하며, 국가는 이를 보장한다. 군인은 현역을 면한 후가 아니면 국무위원으로 임명될 수 없다. 연소자의 근로는 특별한 보호를 받는다.</p>
<p>국민경제의 발전을 위한 중요정책의 수립에 관하여 대통령의 자문에 응하기 위하여 국민경제자문회의를 둘 수 있다. 모든 국민은 주거의 자유를 침해받지 아니한다. 주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 국회는 법률에 저촉되지 아니하는 범위안에서 의사와 내부규율에 관한 규칙을 제정할 수 있다. 헌법개정안은 국회가 의결한 후 30일 이내에 국민투표에 붙여 국회의원선거권자 과반수의 투표와 투표자 과반수의 찬성을 얻어야 한다. 법원은 최고법원인 대법원과 각급법원으로 조직된다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다.</p>
<hr>
<!-- (p>lorem100)*3 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, in? Id quo veniam porro ad veritatis repellendus sunt ab libero placeat, rerum deleniti voluptatum numquam modi architecto repudiandae recusandae iure suscipit temporibus repellat dicta, incidunt alias atque fuga! Blanditiis dignissimos, harum molestiae tempora placeat pariatur ut eveniet! Consequuntur eum, dolorem nostrum sint quae explicabo fugit? Vero molestiae dolores atque exercitationem, repellendus perspiciatis maxime ullam nam? Minima sed natus excepturi fuga velit! Quibusdam esse, qui officia optio harum accusantium debitis, nobis, iste ipsum totam modi corrupti sunt odio reprehenderit veritatis! Cupiditate asperiores dolore voluptates reprehenderit aspernatur! Reprehenderit nam quibusdam magni eum!</p>
<p class="txt">Mollitia, doloribus dolore culpa magnam asperiores sit dolorum voluptatibus, architecto optio dolor impedit beatae quia repellendus officiis pariatur voluptatem id expedita veritatis laudantium in illo. <span>Eos accusamus ipsam, quaerat possimus vel sapiente adipisci, eveniet, sint commodi provident recusandae alias maiores!</span> Nobis molestiae odio ea omnis earum illo vitae, rerum quis dignissimos saepe quia distinctio excepturi vel aliquid adipisci non perferendis assumenda tempora inventore mollitia temporibus esse doloremque maxime! Doloremque voluptas suscipit, obcaecati voluptatum voluptatibus aperiam dolores repellat nihil possimus neque perspiciatis officiis eaque quis! Natus sint id ipsa nostrum, excepturi totam ipsam alias ut neque a dolore explicabo itaque quo.</p>
<p>Sed quia eaque repellat nesciunt, voluptatem ipsa dignissimos. Quasi distinctio ratione numquam autem, totam cumque nisi at ipsum laboriosam sit deserunt soluta itaque, aliquam maiores earum error dolores quia, quo velit perferendis. Nam inventore id neque illo incidunt in voluptates odio placeat quod laborum, distinctio iusto magnam! Voluptatibus necessitatibus libero perferendis hic totam dicta vel exercitationem doloremque impedit facilis! Incidunt fuga molestiae qui dignissimos laudantium excepturi laborum eos a autem ea, vero, tempore, quaerat ipsum. Atque ipsum rerum repudiandae facere saepe, dignissimos reiciendis asperiores illum. Sint, tempora aperiam! Possimus tempore vero, odit reiciendis iusto laborum. Distinctio expedita impedit delectus cum!</p>
</body>한글 Ipsum을 만들어서 예제를 만들었다.
색상 (전경색)
웹페이지의 글자는 완전 검은색이 아니다.
배경이 흰색인데 글자의 색을 완전 검은색으로 하면 눈이 아프기 때문에 약간 회색을 띤다.
.txt {
color: #444444; /* #333333 ~ #555555 */
}
글자색은 보통 #444444를 사용하며, 보통 #333333 ~ #555555 사이의 색상을 주로 사용한다.
정렬 (수평 정렬)
.txt {
text-align: center;
}
크기
.txt {
font-size: 12pt;
font-size: 16px;
}텍스트 크기의 기본값은 12pt(16px)이다.
텍스트 크기를 20pt로 변경해 보도록 하자.
.txt {
font-size: 20pt;
}
글자가 커졌음에도 선명한 것을 확인할 수 있다.
레스터 방식과 벡터 방식 중에 폰트는 벡터 방식을 채택하므로 공식에 따라 그리기 때문에 배율을 조절하여 품질이 떨어지지 않는다.
1pt로 폰트 크기를 지정할 경우 1pt보다 더 크게 보이게 되는데, 브라우저가 사람 눈으로 보이지 않는 한계 이상으로 폰트 크기가 작아지지 않게 하기 때문이다.
줄간격
line-height 속성으로 줄간격을 지정한다.
주로 %, em(rem), px을 사용한다.
일반적으로 1.4rem ~ 1.8rem 정도면 보기 좋은 줄간격이 된다.
.txt {
line-height: 1.5rem;
}
스타일
폰트 스타일은 normal, italic 외에는 잘 사용하지 않는다.
.txt {
font-style: italic;
}
두께
폰트 두께는 다양한 것처럼 보이지만, 실제로는 normal(400), bold(900) 외에는 잘 사용하지 않는다.
.txt {
font-weight: bold;
}
단어 간격 (스페이스 크기)
.txt {
word-spacing: -.01rem;
}
스페이스 크기를 작게 하면 더 많은 데이터를 한 줄에 보여준다.
다량의 텍스트를 보여줘야 할 때 용이하게 사용할 수 있으며, 보통 -0.1rem을 준다.
자간 (문자 간격)
.txt {
letter-spacing: -1px;
}
꾸밈
.txt {
text-decoration: line-through;
}
꾸밈 속성을 이용하면 밑줄 등의 서식을 적용할 수 있다.
들여쓰기
p {
text-indent: 1rem;
}
폰트 (서체, 글꼴)
.txt {
font-family: 궁서체;
}
글꼴을 변경하기 위해서는 어딘가에 실제로 설치된 폰트로부터 서식이 적용되는 것이기 때문에 폰트명을 알고 있어야 하는 것은 물론 실제 설치가 되어 있어야 한다.
보통 '맑은 고딕' 폰트를 사용한다.
⭐폰트 사용 주의사항
페이지 폰트는 서버 측 폰트를 사용하는 것이 아니라, 브라우저가 동작 중인 클라이언트 컴퓨터의 폰트를 사용한다.
만약 폰트가 없다면 기본 폰트(맑은 고딕)로 출력한다.
폰트 예약어
.txt {
font-family: '맑은 고딕', '궁서체', '바탕체', serif;
}폰트 예약어는 폰트의 종류를 나타내는 용어이다.
폰트의 이름을 작성할 때에는 홀따옴표로 묶어서 표시한다.
위 코드에서 serif는 else절 같은 느낌이다. 개발자의 의도 중에 가장 적합한 폰트를 찾다가 없을 경우 serif 폰트를 사용하라는 의미이다.
코딩할 때에는 monospace type의 폰트가 좋다. d2coding는 산세리프(Sans-serif) 스타일의 고정폭(monospace) 글꼴이다.
1. serif: 획 끝에 장식이 있는 폰트 (궁서체, 바탕체)
2. sans-serif: 획 끝에 장식이 없는 폰트 (돋움체, 고딕체)
3. monospace: 문자폭이 균일한 폰트 (궁서(X), 궁서체(O))
4. cursive: 장식체
5. fantasy: 장식체
네이버의 font-family의 경우 'Segoe UI', 'Arial', 'Malgun Gothic', 'Gulim', sans-seif 순서로 지정되어 있는 것을 확인할 수 있다.
🍁웹 폰트
폰트를 서버로부터 다운로드 받아서 사용하는 기술이다.
서핑중인 페이지에만 적용할 수 있으며, 서비스 업체를 사용하여 구현한다.
구글 폰트
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
위 사이트에 들어가서 마음에 드는 폰트를 찾는다.
Remove Regular 400을 클릭한 뒤, import를 선택하여 만들어진 코드를 복사한다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
.txt {
font-family: 'Bagel Fat One', cursive;
}
</style>
그리고 폰트 이름을 복사하여 폰트 서식을 지정한 곳에 붙여넣기 해주면 된다.
눈누 폰트
눈누
상업용 무료한글폰트 사이트
noonnu.cc
사용할 폰트를 찾은 뒤, 웹폰트로 사용 부분을 복사한다.
<style>
@font-face {
font-family: 'neurimboGothicRegular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/neurimboGothicRegular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.txt {
font-family: 'neurimboGothicRegular';
}
</style>
마찬가지로 폰트를 적용할 위치에 붙여넣기 해주면 폰트가 적용된다.
🍁수치 표현법
HTML 수치 표현법
1. 숫자(px, 문자수, 셀병합 크기)
2. 백분율(%)
CSS 수치 표현법
단위를 생략하면 동작하지 않기 때문에 수치 데이터는 반드시 단위 표기를 해야 한다.
CSS 수치 표현법은 HTML 수치 표현법보다도 훨씬 많은 단위를 지원한다.
그러나 모든 단위를 사용하지 않으며, 주로 pt, px, em, rem, % 단위를 사용한다.
1. pt: 포인트(글꼴에 사용), 절댓값, 1/72인치
2. px: 픽셀(모든 분야에서 사용(크기, 여백, 위치, 글꼴 등)), 절댓값
3. em: 기본 글꼴 크기를 기준으로 하는 상대값(%), 알파벳 대문자 M의 높이를 100%으로 하는 상대값, 상속받음 (부모 글꼴 크기를 100%으로 하는 상대값)
4. rem: 기본 글꼴 크기를 기준으로 하는 상대값(%), 알파벳 대문자 M의 높이를 100%으로 하는 상대값, 상속받지 않음 (부모와 상관없이 브라우저의 기본 글꼴 크기를 100%으로 하는 상대값)
5. %: 백분율(크기, 여백, 위치, 정렬 등..), 상대값 (부모의 크기를 기준으로 하는 상대값)
6. ex: 알파벳 소문자 x의 높이를 100%으로 하는 상대값
7. mm: 밀리미터 (인쇄용도)
8. cm: 센티미터 (인쇄용도)
9. in: 인치
10. pc: 파이카 (12pt), 절댓값
11. 기타 등등..
em 단위의 사용
.txt {
font-size: 2em;
}
em을 2로 지정하면 기본값에서 200% 커지게 되며, 이를 수치화하면 24pt, 31px가 된다.
PC와 모바일의 기기 크기와 해상도가 다르기 때문에 em과 rem 단위를 사용하여 기기간에 최적화하는 작업이 필요하다.
현재는 장치가 더욱 다양해졌기 때문에 em과 rem 단위를 많이 사용하는 편이다.
em과 rem의 상속
.txt {
color: #444444;
font-size: 2em;
}
.txt span {
background-color: yellow;
font-size: 2em;
}.txt {
color: #444444;
font-size: 2em;
}
.txt span {
background-color: yellow;
font-size: 2rem;
}
CSS는 부모가 가진 특성을 자식이 물려받는 상속에 가까운 현상이 발생하곤 하는데, em은 상속을 받지만, rem은 상속을 받지 않는다.
따라서 em은 부모를 기준으로 상대 배율이 적용되며, rem은 브라우저와 상관없이 브라우저를 기준으로 적용된다.
