CSS 하이퍼엔트리: 텍스트 장식

14492 단어 초보자CSS
저번에 CSS 기본을 배웠어요~
이번에는 CSS의 텍스트 장식 기능에 대해 소개합니다.글꼴 크기와 줄 사이의 조정 등 풍부하고 다채롭다

CSS 단위


CSS는 수치 + 단위로 값을 지정합니다.
CSS에서 길이를 지정할 때 사용하는 단위는 다음과 같습니다.
단위
독법
설명
px
픽셀
모니터의 1 픽셀 (픽셀) 을 1px 단위로 설정합니다.글꼴 크기와 상자 크기를 지정하는 데 자주 사용
em
엠
문자 크기가 1em인 단위입니다.글꼴 크기와 상자 크기를 지정하는 데 자주 사용
%
퍼센트
원하는 길이의 백분율을 지정합니다.데이텀 길이란 속성에 따라 길이가 다른 것을 가리킨다.상자의 크기를 지정하는 데 주로 사용
rem
뿌리잎<html> 태그에 지정된 글꼴 크기를 1rem 단위로 설정합니다.글꼴 크기를 상대적으로 쉽게 지정할 수 있습니다.
vw
뷰포트 마법사
뷰포트 (창 크기 또는 터미널 화면 크기) 의 너비의 1% 를 1vw 단위로 설정
vh
뷰포트 마법사
뷰포트 높이의 1% 가 1vh인 단위

웹 글꼴 크기를 지정하는 방법


웹 페이지의 글꼴 크기를 지정하는 방법은 크게 두 가지로 나뉜다.
(1) 각 레이블에 글꼴 크기를 지정하는 방법
(2) 기준의 글꼴 크기를 결정하는 동시에 각 요소의 글꼴 크기를 상대값으로 지정하는 방법
(1)의 장점은 CSS가 쉽게 해석되고 어떤 요소가 몇 픽셀로 표시되는지 한눈에 알 수 있다는 것이다.
(2) CSS를 관리하고 수정하기 쉽다. 예를 들어 컴퓨터와 스마트폰에서 글씨체를 바꾸려면 시간이 걸리면 편리하다
(2) 우선 <html> 요소에 대해 단위 px로'기준의 글꼴 사이즈'를 설정합니다(※<body> 요소가 아님을 주의하세요)
html{
  font-size:14px;
}
데이텀 글꼴 크기를 지정한 다음 제목과 같은 글꼴 크기를 지정합니다.
ex.css
h1{
  font-size:1.4rem;
}
h2{
  font-size:1.14rem;
}
여기서 사용하는 단위는 "rem(뿌리em)"입니다. 여기서 말하는'뿌리'는 모든 원소의 부모 원소를 가리키며 항상<html>을 가리킵니다.rem을 단위로 사용하면 요소의 글꼴 크기는 <html> 에서 지정한 글꼴 크기에 대한 배율로 지정할 수 있습니다.이번 배율 설정은 다음과 같다.<h1><html>의 글꼴 크기(14px)의 1.4rem(1.4배) = 약 20px<h2><html>의 글꼴 크기(14px)의 1.14rem(1.14배) = 약 16px
다른 요소 계승 <html> 글꼴 크기 (14px) = 14px

텍스트 행 간격 조정

body{
  line-height:1.7;
}
line-height 속성을 사용하여 텍스트 줄의 위아래 공간을 추가합니다.
단위가 없는 값을 지정합니다.
line-height 속성 이불 원소 계승으로 설정<body>하면 전체 페이지의 줄 간격을 통일적으로 조정할 수 있어 편리합니다.한 1.5 ~ 1.8 정도.

단락 텍스트의 인용문만 굵게 만들기


클래스 선택기를 이용한 라벨이 없기 때문에 단락의 <p>에 클래스 이름을 붙여서 대체합니다.
→ 이 클래스 이름을 선택기로 사용하여 CSS에서 텍스트를 굵게 만들기
・・・
<style>
body{
  line-height:1.7;
}
.lead{
  font-weight:bold;
}
</style>
</head>
<body>
<h1>アベンジャーズ</h1>
<p class="lead">「アベンジャーズ」はマーベル・スタジオ製作、ウォルト・ディズニー・スタジオ・モーション・ピクチャーズ配給で公開された2012年のアメリカ合衆国の映画。</p>
<p>複数のヒーロー映画のクロスオーバー作品であり、それらすべての作品を同一の世界観として扱う「マーベル・シネマティック・ユニバース」シリーズに属する作品に当たる。</p>
<p>その作品群の中では第6作品目の映画であり、その「フェイズ１」のクライマックスを飾る作品でもある。</p>
</body>
</html>
이것이 바로

이렇게 나와요.

표시할 글꼴 설정


웹 페이지에 표시되는 글꼴은 컴퓨터에 설치된 글꼴일 수도 있고 웹 서버에서 다운로드한 웹 글꼴을 사용할 수도 있습니다.
일반적으로 컴퓨터에 설치된 글꼴을 사용하지만 모든 Windows, Mac, Android, iOS에 설치된 글꼴이 없기 때문에 어떤 기기에서도 조회할 수 있도록 몇 가지 후보를 열거할 필요가 있다.
일반 글꼴 지정 방법
일본어 사이트에서는 통상적으로 고딕체를 선택한다.다음 CSS를 쓰기로 결정했습니다.
<style>
body{
  line-height:1.7;
  font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ　ProN",
Meiryo,"MS　Pゴシック",sans-sarif;
}
</style>
아니면 이거 생략했어요.
<style>
body{
  line-height:1.7;
  font-family:sans-serif;
}
</style>
주류(※ 패턴을 생략하면 미묘한 변화가 나타날 수 있음)
웹 글꼴 사용
웹 글꼴을 사용하면 글꼴 선택이 늘어나는 것 외에도 어떤 컴퓨터에서 열람해도 같은 글꼴로 표시할 수 있는 장점이 있다.
여기서 Google Font 서비스에서 제공하는 일본어 글꼴'Noto Sans Japan ese'를 사용합니다.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<style>
body{
  line-height:1.7;
  font-family:'Noto Sans Japanese',sans-serif;
}
</style>
</head>

텍스트의 행 정렬 변경


텍스트의 거의 모든 태그는 왼쪽으로 정렬되지만 CSS를 사용하여 중앙과 오른쪽으로 정렬할 수 있습니다
본문 제목<h1>의 텍스트를 가운데에 맞추려면 아래와 같이 CSS를 쓰십시오
<style>
・・・
.headline{
  text-align:center;
}
・・・
</style>
</head>
<body>
<h1 class="headline">アベンジャーズ</h1>
텍스트의 행 정렬을 변경하려면 텍스트 정렬 속성을 사용합니다.다음 4개의 값을 설정할 수 있습니다
text-align
설명
text-align:left;
텍스트를 왼쪽으로 정렬
text-align:center;
텍스트 가운데 맞춤
text-align:rignt;
텍스트 오른쪽 정렬
text-align:justify;
텍스트 정렬
text-align:justify는 주로 문장 등 긴 문장을 예쁘게 보이는 데 쓰인다

두 번째 줄 뒤에 한 글자 줄여서 쓰세요.


주의사항으로 시작하는 "※"표시만 앞으로 돌출해서 텍스트를 배열합니다.'주의 사항'을 표시하는 라벨이 없기 때문에 라벨에 클래스 속성을 붙여서 대체합니다.<p> 태그 또는 <ul> 태그를 사용하여 태그를 지정합니다.
<style>
.note{
  padding-left:1em;
  text-indent:̠-1em;
}
</style>
</head>
<body>
・・・
<p class="note">※表示価格はメーカー希望小売価格（消費税別）です。実際の価格は販売店にお問い合わせください。</p>
</body>
※ 가격은 제조사가 원하는 소매가격(소비세 제외)으로 표시됩니다.실제적
가격은 판매점에 문의하세요.
이렇게 됐어.
이 경우padding-left 속성은'텍스트의 시작 위치'를 오른쪽으로 1em 이동하고, text-indent 속성은'텍스트의 첫 줄의 시작 위치'를 왼쪽으로 1em 이동합니다.

텍스트 색상 변경


전체 페이지의 텍스트 색을 바꾸는 방법과 부분적으로 색을 바꾸는 방법 두 가지가 있다.
색상 속성
색상 속성을 사용하여 텍스트 색상을 변경합니다.색 속성의 값은'색'을 지정해야 하지만, 이 색 지정에는 몇 가지 방법이 있습니다.가장 많이 사용되는 방법은 6자리 RGB 색상으로 색상을 표시하는 방법입니다.
컴퓨터 화면에 나오는 모든 색은 빨간색, 녹색, 파란색 3색의 빛의 강약으로 표현되고, 빨간색, 파란색 각각의 빛의 강도는 16진법의 수치를 사용하면 두 자리수(00~FF)로 표현할 수 있다.
RGB 색상은 #로 시작하여 "R의 두 자리""G의 두 자리""B의 두 자리"라고 계속 쓰여 있으며, 실제 수치는 Photoshop 등 이미지 편집 소프트웨어로 조사합니다.
전체 페이지의 텍스트 색상 변경
전체 페이지의 텍스트 색상을 변경할 때 CSS 선택기를 "body"로 설정합니다.
<style>
body{
  color:#002a5a;
}
</style>
텍스트 색상 부분 변경
<style>
.important{
  color:#ff0000;
}
</style>
</head>
<body>
<p> ほとんどの物体の表面に張りつくことができ、超人的な腕力、スピード、反射神経を持つ。危険を知らせる <span class="important">スパイダー感覚</span>の持ち主。手首のウェブ・シューターからは、強力なクモの糸を発射する。</p>
</body>
그것은 대부분의 물체의 표면에 붙어 초인적인 완력, 속도, 반사신경을 가지고 있다.위험을 알리는 거미의 감각을 지닌 소지자.손목의 그물 슛기에서 강력한 거미줄을 발사하다.
거미 느낌!!!!!

제목에 부제목을 붙이다


제목에 부제목을 붙이기 위해 <h1> 등 제목 라벨 외에 <br> 및 <span> 을 사용한다.
부제만 <span>로 둘러싸고 클래스 이름에'subtitle'을 붙인다.또한 제목과 부제목 사이에 <br> 줄을 바꿉니다.
<style>
h1{
  font-size:1.5em;
  line-height:1.2em;
  text-align:center;
}
h1 .subtitle{
  font-size:0.7em;
  font-weight:normal;
}
</style>
</head>
<body>
<h1>スパイダーマン<br>
<span class="subtitle">～アイアンマンに憧れる、やんちゃな高校生ヒーロー～</span></h1>

제목이 가운데 있고 부제목이 약간 작은 글자로 표시되어 있다

마지막


음, 너무 길어서 기억할 게 너무 많아~
MySQL과 PHP의 기본 데이터베이스 연결
레스토랑용 맞춤 메뉴 만들기(P2) - 구텐베르크 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage