CSS 레이아웃
한 사이트가 읽을 수 없는 것인지 유쾌한 것인지를 결정할 수 있는 여러 가지 요소가 있다. 그 중에서 다음과 같다.
조판은 자모와 글씨체의 예술로 볼 수 있다.이 두 사람은 서로 협조하여 사용자에게 좋은 읽기 체험을 만들어 주고 줄마다 적당한 문자 수를 더할 수 있다.
이 글은 전체 레이아웃 개념에 대한 창의적인 작업이 아니라 레이아웃 스타일시트(CSS)를 사용하는 웹 레이아웃에 대한 부드러운 소개입니다.
우리는 아마도 인터넷상의 조판을 토론하고 있을 것이다. 그러나 특히 일부 사람들은 조판에 관한 글을 연구하고 썼는데, 특히 로버트 브린허스트(Robert Bringhurst)의 저서The Elements of Typographic Style에 실린 작품들이 그렇다.이 책의 시작(나의 중점):
Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence. Its heartwood is calligraphy - the dance, on a tiny stage, of the living, speaking hand - and its roots reach into living soil, though its branches may be hung each year with new machines. So long as the root lives, typography remains a source of true delight, true knowledge, true surprise.
이거 예쁘지 않아요?계속합시다.
웹 문서의 대부분 텍스트는 단락 태그 (
p 에 둘러싸여 있으며, 원본 문서의 언어에 따라 텍스트가 왼쪽에서 오른쪽으로 (ltr) 또는 오른쪽에서 왼쪽으로 (rtl) 흐르고, 텍스트가 한 줄에 포함되지 않으면, 줄을 바꾸는 것을 좋아하기 때문에, 대부분의 HTML의 기본 사용자 프록시 스타일 때문에 사용자의 읽기가 어려울 수 있습니다.p 태그가 포함된 요소입니다.CSS는 이러한 읽기 어려움을 완화할 수 있는 도구와 기술을 제공하고 읽기 체험을 강화하여 웹 페이지의 조판을 정확하게 완성하는 느낌을 만들 수 있다.이러한 도구는 다음과 같은 속성으로 존재합니다.
font-size font-weight line-height font-family 다음 HTML 및 CSS를 저장하고 CSS 파일이 HTML 파일에 링크되어 있는지 확인합니다.
<header>
<h1>CSS Typography</h1>
</header>
<main>
<section>
<p class="paragraph-1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p class="paragraph-2"><!-- Duplicate the content of .paragraph-1 --></p>
<p class="paragraph-3"><!-- Duplicate the content of .paragraph-1 --></p>
</section>
</main>
/*
* This code is similar to the snippet we used in
* CSS Media Queries https://dev.to/ziizium/css-media-queries-14fa
*/
header {
padding: 1.2em;
text-align: center;
background-color: #1560bd;
color: #ffffff;
}
main {
background-color: #dddddd;
padding: 1.2em;
}
만약 우리가 브라우저에서 HTML을 본다면, 텍스트를 읽기가 매우 어려울 것이 분명하다.
단락 텍스트는
font-size의 기본값16px으로 설정됩니다. 이것은 브라우저 기본값입니다. 개발자 도구를 사용하여 확인할 수 있습니다.
우리가 추가하고자 하는 첫 번째 속성은
font-family 이며, 글꼴 이름의 쉼표 구분 값을 받아들입니다.우리는 font-family 를 전체 문서에 적용하거나 세부 사항에만 적용할 수 있다.우리는 이를
body 요소에 적용합니다./* Create a declaration for the body tag */
body {
font-family: Georgia, "Trebuchet Ms"; /* Add this */
}
font-size 를 수정해야 합니다./* Create a declaration for the p tag */
p {
font-size: 1.3em; /*Add this */
}
텍스트의 가독성은 갈수록 좋아지지만, 텍스트 줄은 가득 찬 것 같다.우리는
line-height 속성을 이용하여 그들에게 숨 돌릴 공간을 줄 것이다.보낸 사람Mozilla Developer Network:
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text
CSS 규칙은 다음과 같이 업데이트됩니다.
p {
/* All other properties remain the same */
/* Note the we've used a unit less line-height for simplicity */
line-height: 1.618; /* Add this */
}
p 나타난 곳이다.보낸 사람MDN:
The letter-spacing CSS property sets the spacing behavior between text characters.
letter-spacing를 다음과 같이 수정합니다.p {
/* All other properties remain the same */
letter-spacing: 0.02em; /* Add this */
}
지금까지 우리는 이미 약간의 진전을 거두었지만, 줄마다 글자 수가 너무 많다.우리가 할 수 있는 가장 좋은 일은 텍스트 부모 용기
p 요소의 폭을 줄이는 것이다.main {
/* All other properties remain the same */
width: 60%;
margin: 0 auto; /* This will align the main to the center of the page */
}
코드를 개선하는 방법:
p {
/* All other properties remain the same */
font-size: 1.5em; /* These are just */
line-height: 1.8; /* updated values */
}
CSS는 텍스트에 swag를 추가하는 데 사용할 수 있는 몇 가지 옵션이 있습니다. 이 경우 다음 두 가지 선택기를 사용할 수 있습니다.
main ::first-line ::first-letter 텍스트의 첫 번째 줄을 선택하여 원하는 스타일을 설정할 수 있습니다.간단하게 보기 위해서, 우리는 단지 ::first-line 굵게 할 뿐이다./*
* We are only working with the first paragraph hence
* we using the class selector with the pseudo element
* selector.
*/
.paragraph-1::first-line {
font-weight: bold;
}
font-weight 선택기는 일부 텍스트를 포함하는 용기 요소의 첫 번째 알파벳에 엄격하게 적용된다.다음 코드 세그먼트는
::first-letter 의 첫 번째 알파벳 font-size 을 추가합니다./*
* Here are using the ::first-letter selector to get
* the first letter of the paragraph
*
*/
.paragraph-1::first-letter {
font-size: 120px;
}
이 동작의 수정 방법은 값이
.paragraph-1인 float 속성과 일부 left 속성을 외부 간격으로 적용하는 것이다.
.paragraph-1::first-letter {
/* All other properties remain the same */
float: left; /* This will move the letter to the left of its parent */
margin-right: 12px; /* Some outer spacing to keep the letter away from other text*/
margin-top: 0.15em; /* This will let it align with the rest of the line */
}
우리의 웹 페이지는 현재 상태에서 읽을 수 있지만, 우리는 약간의 수직 리듬을 응용하여 미세한 추가를 할 수 있다.
수직 리듬은 인터넷 조판의 개념으로 텍스트 블록 뒤에 공간을 응용하여 가독성을 돕는다.
우리는 이 공간을 얻기 위해 CSS
margin 속성을 사용할 수 있다.margin 는 다른 네 가지 속성의 줄임말인 것을 기억하십시오. 즉,margin margin-top margin-right margin-bottom margin-left 속성은 모든 텍스트가 블록 요소에 있기 때문에 우리에게 필요한 수직 리듬을 제공할 것이다.margin-bottom 레이블입니다.만약 우리가 똑똑히 기억한다면, 블록급 원소는 하나하나 수직으로 배열되어 있다.따라서
p 단락마다 공백이 생성됩니다.margin-bottom 태그에 다음 내용을 추가합니다.p {
/* All other properties remain the same */
margin-bottom: 48px;
}
수직 리듬을 제외하고 텍스트의 가독성을 도울 수 있는 또 다른 기술은 응답식 조판이다.응답식 조판은 우리가 사이트를 개발할 때 심리 상태와 디자인 과정을 바꾸도록 요구한다. 이것이 바로 우리가 응답식 웹 디자인에서 그것을 토론할 이유이다.
너는 우리가 단지 표면에 닿았을 뿐, 웹 페이지의 조판이 우리가 토론한 내용보다 더 많다는 것을 알아야 한다.우리는 최종 프로젝트에서 더 많은 웹 페이지의 조판을 소개할 것이다.
다음은 CSS 애니메이션과 전환입니다.
Reference
이 문제에 관하여(CSS 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ziizium/css-typography-1jnd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
