웹 페이지 스타일로 빠르게 플레이

예를 들어 웹사이트에서 제품이나 포트폴리오를 공유하고 싶거나 영감. 온라인에 게시하기 전에 매력적이고 전문적으로 보이거나 적어도 그렇게 보이길 원합니다. 그러면 다음에는 무엇을 해야 할까요?

텍스트

디자인의 목적은 적용되는 콘텐츠의 표현을 향상시키는 것입니다. 당연한 이야기처럼 보일 수도 있지만 콘텐츠는 웹사이트의 주요 요소이므로 출시 후 조정하는 것을 나중에 고려해서는 안 됩니다.

　 작성된 콘텐츠, 기사 당신이 현재 읽고 있는 것과 같은 것이 웹의 90% 이상을 차지합니다. 이 텍스트 콘텐츠에 스타일을 추가하면 큰 도움이 됩니다.

이제 게시하려는 콘텐츠를 완료하고 빈 style.css 파일을 만들었으니 작성할 수 있는 첫 번째 규칙은 무엇입니까?

가운데 맞춤

긴 텍스트는 구문 분석하기 어렵고 따라서 읽기도 어렵습니다. 줄당 글자 수 제한을 설정하면 많은 양의 텍스트에 대한 가독성과 매력을 크게 향상시킬 수 있습니다.

body {
  margin: 0 auto;
  max-width: 50em;
}

텍스트 컨테이너에 스타일을 추가한 후 텍스트 자체에도 스타일을 추가해 보는 것은 어떨까요?

글꼴

　브라우저의 기본 글꼴은 Times입니다. Unattractive(주로 "스타일이 지정되지 않은" 글꼴이기 때문에)처럼 보입니다. Helvetica 또는 Arial과 같은 산세리프 글꼴로 전환하면 웹 페이지의 가독성을 크게 향상시킬 수 있습니다.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

굳이 세리프 글꼴을 사용하고 싶다면 Georgia를 사용해 보세요.

텍스트를 더 매력적으로 만들려면 텍스트를 더 읽기 쉽게 만들어야 합니다.

간격

사용자가 페이지가 깨졌다고 느끼는 경우는 일반적으로 간격 문제입니다. 텍스트 주위와 텍스트 내에 적절한 간격을 제공하면 페이지의 매력을 높일 수 있습니다.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

지금까지 레이아웃이 크게 개선되었지만 몇 가지 세부 사항을 더 추가해 보겠습니다.

　 색상 및 대비

흰색 배경에 검정색 텍스트가 더 눈길을 끌 것입니다. 페이지를 더 쉽게 읽을 수 있도록 텍스트에 더 부드러운 검정색을 선택하십시오.

body {
  color: #555;
}

좋은 대비를 유지하려면 중요한 텍스트에 더 어두운 그림자를 선택하겠습니다.

h1,
h2,
strong {
  color: #333;
}

대부분의 페이지가 시각적으로 개선되었음에도 불구하고 코드 조각과 같은 일부 요소는 여전히 어색해 보입니다.

균형

페이지 균형을 맞추려면 몇 가지 추가 조정이 필요합니다.

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

이 시점에서 페이지를 눈에 띄게 만들고 싶을 수도 있습니다. 더 개성을 가지세요.

색조

대부분의 브랜드에는 시각적 톤 역할을 하는 메인 컬러가 있습니다. 웹페이지에서 이 주요 색상은 링크와 같은 대화형 요소를 강조하는 데 사용될 수 있습니다.

a {
  color: #e81c4f;
}

　그러나 균형/조화를 유지하기 위해서는 추가적인 색상도 필요합니다.

보조 색상

기본 색상에 좀 더 은은한 색상을 추가하여 테두리, 배경, 본문 텍스트에도 사용할 수 있습니다.

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

색상 톤을 변경했는데 모양/글꼴도 변경해 보시는 건 어떨까요...

　　自定义字体

　　由于文本是网页的主要内容，使用自定义字体能使页面更加引人注目。

　　当你可以嵌入自己的网页字体或使用类似Typekit的在线服务时，让我们使用免费谷歌字体Roboto：

　　@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

　　在通过自定义字体凸显你的个性后，增加一千个单词又怎么办呢?

　　图形和图标既可用来作为支持你的内容的装饰品，还可以在你想要传达的信息中担当积极部分。

　　让我们从Unsplash挑选一张漂亮的背景图片来美化header。

  header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

　　添加logo

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

　　让我们借这个机会，来提高文本风格。

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

　　按照网页设计的基本原则，我们在短短几分钟内设计了一个像样的页面。只剩下最后一件事啦...