우리 처음부터 포석을 세웁시다

23670 단어 webdevcssuihtml
오늘 우리는 HTML, CSS, flexbox, 격자 레이아웃 등을 사용하여 처음부터 전체 사이트의 레이아웃을 구축할 것이다.
전체 텍스트 읽기 또는 Youtube에서 내 코드 보기

결실


https://github.com/crayon-code/website-cloud-service

빈 HTML5 문서


빈 HTML5 문서를 시작합니다.이것은 우리의 출발점이다. 우리는 다음 장에서 조금씩 연장할 것이다.

Did you know that typing an exclamation mark (!) and hitting tab in VS CODE generates a blank HTML5 Document?


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEAMCLOUD</title>
  </head>
  <body>
    <!-- content will go here -->
  </body>
</html>

스타일 및 외부 글꼴 사용


파일<head>에 세 개의 외부 리소스를 포함해야 합니다.
  • 우리만의 스타일시트styles.css.
  • 페이지의 기본 글꼴로 Nunito 글꼴을 사용합니다.따라서 구글 글꼴을 통해 불러온다.글꼴 가중치가 200, 400, 700입니다.특히 200은 상당히 우아해 보이는 텍스트(예를 들어 제목).
  • 글씨가 참 좋네요.주의cdnjs.com 속성은 매우 좋은 안전 특성이기 때문이다.만약 사용자 에이전트가 다운로드한 파일의 SHA 검사와 integrity 속성에서 제시한 SHA 검사와 다르면 브라우저는 다운로드한 내용이 왜곡되었다는 것을 알고 거부된다.하위 자원 무결성에 대한 자세한 내용은 this MDN Article를 참조하십시오.
    • <head>
  ....

  <!-- or own styles -->
  <link rel="stylesheet" 
    href="styles.css"
    type="text/css" />

  <!-- "Nunito" font via google fonts -->
  <link rel="preconnect" 
    href="https://fonts.gstatic.com" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap" >

  <!-- Font Awesome via CDNJS  -->
  <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" 
    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" 
    crossorigin="anonymous" />
  </head>

    변수 및 기본 스타일


    이제 integrity 파일에서 몇 가지 기본적인 내용부터 시작합시다.예를 들어, 변수입니다.사용자 정의에 있어 변수와 흔히 볼 수 있는 중복성 설정에서 색을 사용하는 것은 매우 유용하다. 예를 들어 과도 설정이다.
    :root {
  --bg-start: #2c35a2;
  --bg-end: #0f133b;

  --highlight-fg: #161c49;
  --highlight-primary: #73fff5;
  --highlight-secondary: #cf0389;

  --fg-color: rgba(255, 255, 255, 0.9);

  --transition: 250ms ease-out;
}
    이 블록은 모든 요소를 리셋styles.css,padding,margin하기 때문에 브라우저와 요소에 대한 대량의 일치성을 가져왔다.
    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
    루트box-sizing 요소에서 기본 텍스트 색상과 기본 글꼴을 정의했습니다. 글꼴 크기를 포함합니다.이 점은 매우 중요하다. 왜냐하면 우리는 매우 많은 <html> 값을 사용할 것이다. 이것은 항상 루트 rem 요소에 설정된 글꼴 크기에 상대적이기 때문이다.
    html {
  color: var(--fg-color);

  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 18px;
}
    <html>는 flex 용기로서 수평적으로 내용을 중심에 집중하고 내용을 맨 위에 놓는다.<body> 바디에 전체 페이지의 그래디언트를 뛰어넘는 최소한 전체 뷰포트 높이가 있어야 합니다.
    body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 2rem;
  min-height: 100vh;


  background: linear-gradient(
    45deg,
    var(--bg-start), 
    var(--bg-end)
  );
}

    표식


    첫 번째 실제 내용 요소는 로고다.이것은 min-height: 100vh 표시에 삽입되어 있으며, 단지 header 표시일 뿐이며, 그 중에서 div 표시는 SVG 이미지와 로고 텍스트를 인용한다.
    <body>
  <header>
    <div class="logo">
      <img src="logo.svg">
      beamcloud
    </div>
  </header>
</body>
    이 스타일은 flex 용기이기 때문에 이미지와 로고 텍스트를 함께 놓고 수직으로 가운데에 놓을 수 있다.또한 이미지의 높이는 글꼴 크기와 일치하도록 설정됩니다.
    .logo {
  display: flex;
  align-items: center;

  text-transform: uppercase;
  font-size: 2rem;
}

.logo > img {
  height: 2rem;
  margin-right: 1rem;
}

    탐색 모음


    네비게이션 표시줄은 제목의 두 번째 요소로 무질서한 목록 img 을 사용하여 ul 에 삽입된 네비게이션 항목을 표시합니다. 이 목록은 표시 단계의 의미를 제공합니다.
    <body>
  <header>
    ...
    <nav>
      <ul>
        <li class="active">
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Reviews</a>
        </li>
        <li>
          <a href="#">Pricing</a>
        </li>
        <li class="highlight">
          <a href="#">Sign In</a>
        </li>
      </ul>
    </nav>
  </header>
</body>
    로고와 내비게이션 항목을 서로 인접시키기 위해 nav 요소를 flex 용기로 설정하고 header 이 두 항목을 맨 왼쪽/오른쪽으로 밀어냄
    header {
  display: flex;

  justify-content: space-between;
}
    왜냐하면 (거의?)모든 브라우저는 하이라이트 색상과 밑줄로 링크를 보여줍니다. 색을 변수로 설정하고 다양한 텍스트 장식을 취소함으로써 이 스타일을 취소합니다.
    a {
  color: var(--fg-color);

  text-decoration: none;
}
    마지막으로 내비게이션 항목 자체에 대해 우리는 하나의 격자 레이아웃을 사용할 것이다. 이 레이아웃은 모든 항목을 각자의 열로 자동으로 흐르도록 설정될 것이다.justify-content: space-between.를 사용하면 모든 칸이 내비게이션 항목을 둘러싸고 있고 포함된 텍스트를 줄을 바꿀 필요가 없다.
    nav > ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0.5rem;

  list-style-type: none;
}

nav > ul a {
  padding: 0.25rem 1.25rem;

  text-transform: uppercase;

  transition: color var(--transition),
    background-color var(--transition);
}

    주요 내용


    페이지의 주요 내용에 대해 우리는 grid-auto-columns: max-content의 의미인 HTML 표기를 사용했다.안에는 한 장의 라벨이 있는데, 제목과 한 단락, 그리고 아름다운 작은 예술품이 포함되어 있으며, 우리는 그것을 옆에 놓을 것이다.
    <body>
  ...
  <main>
    <section>
      <div class="content">
        <h1>Scale well, sleep well.</h1>
        <p>
          Get the most out of your apps and websites with our highly available and scalable cloud infrastructure. All you need, directly at your fingertips.
        </p>
        <a href="#" class="button">
          Learn More
        </a>
      </div>
      <div class="artwork">
        <img src="artwork.svg" >
      </div>
    </section>
  </main>
</body>
    main 자체도 하나의 격자 레이아웃이 될 것이지만 이번에는 딱 두 열로 명확하게 설정되었고 왼쪽 열은 사용 가능한 공간의 한 점수(section, 오른쪽 열은 두 개의 점수1fr를 주었다.
    main {
  max-width: 50rem;
  padding: 2rem;
}

section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content artwork";
  place-content: center;
}

section > .content {
  grid-area: content;
  place-self: center stretch;
}

section > .artwork {
  grid-area: artwork;
  place-self: stretch;
}

h1 {
  margin-bottom: 1rem;

  color: var(--highlight-primary);

  font-size: 2.5rem;
  font-weight: 200;
}

p {
  margin-bottom: 1rem;

  font-size: 1.25rem;
  font-weight: 200;
}

    바닥글


    마지막으로 우리는 페이지의 밑에 도착했다. a2fr였다.우리는 그것을 사용하여 일련의 소셜 미디어 아이콘을 놓을 것이다. 이것이 바로 우리가 처음부터 글씨체를 정말 잘 넣었기 때문이다.
    <body>
  ...
  <footer>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
    <a href="#"><i class="fab fa-github"></i></a>
    <a href="#"><i class="fab fa-linkedin-in"></i></a>
  </footer>
</body>
    바닥글도 각 요소를 자동으로 자신의 열로 흐르도록 구성하고 각 요소 사이의 간격은 footer이다.
    footer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: 1rem;
  justify-content: center;

  margin-top: 4rem;
  padding-top: 1rem;
  width: 80%;
}
    제목의 재미를 조금 높이기 위해 우리는'정상'테두리를 사용하지 않고 점차적인 변화를 사용한다.따라서 1rem 위조류는 페이지 맨 위에 요소를 배치하여 점차적으로 배경으로 할 수 있도록 합니다.이렇게!
    footer {
  position: relative;
  ...
}

footer::before {
  content: '';

  position: absolute;
  top: 0%;
  left: 0%;
  right: 0%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--highlight-secondary),
    transparent
  );
}
    [three.js] GLTF loader가 읽으려는 모델이 투명합니다.
    Hide Delegate(위임 관계 숨기기)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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