CSS를 사용하여 웹 사이트에서 특별 견적 상자를 만드는 방법(6절)

CSS를 사용하여 웹 사이트에서 특별 견적 상자를 만드는 방법(6절)

2022-06-01 last update

7 minutes reading CSS Spin Up

소개


이 강좌에서는 CSS를 사용하여 웹 사이트에 특별 견적을 추가합니다. demonstration website 의 여섯 번째 부분과 같습니다.이 부분에서 가장 좋아하는 인용, 당신의 업무에 대한 증언, 또는 사이트 방문자에게 정보를 제공할 수 있습니다.원한다면, 이 견적을 다른 웹 페이지에 연결할 수도 있습니다.여기에서 사용하는 방법은 다른 CSS/HTML 웹 사이트 항목에 적용될 수 있습니다.

선결 조건


본 강좌를 배우려면 본 시리즈의 이전 강좌How To Set Up You CSS and HTML Practice Project의 설명에 따라 필요한 파일과 폴더가 설정되어 있는지 확인하십시오.

특별 견적 섹션에 대한 스타일 규칙 만들기


특색 있는 견적 부분을 만들려면 용기 스타일을 설정하는 클래스와 특색 있는 텍스트 스타일을 설정하는 클래스를 만듭니다.styles.css 파일에 다음 코드 세그먼트를 추가합니다.
스타일css
. . .

/* Section 6: Featured Quote  */

.column-quote {
  width: 90%;
  height: 475px;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:100px;
  margin:auto;
  margin-bottom:150px;
  border: 20px solid #FEDE00;
}

.quote {
  font-size:80px;
  font-weight:bold;
  line-height: 1;
  text-align: center;
}
이 코드 세션에서 CSS 코드의 이 부분을 표시하기 위해 CSS 주석/* Section 6: Featured Quote */을 추가했습니다.그런 다음 클래스column-quote를 정의하고 이 클래스를 사용하여 견적 상자의 스타일을 설정하고 용기의 크기, 채우기, 여백 및 테두리를 지정합니다.
여백을 auto 로 설정하면 용기가 페이지 중간에 수평으로 놓이게 됩니다.또한 페이지 하단에 공간을 남기기 위해 아래쪽 여백을 200픽셀로 설정합니다.기타 설명에 대한 자세한 내용을 보려면 이 강좌 시리즈의 설정content, padding, bordersmargins 크기에 대한 앞부분을 보십시오.
또한 quote 클래스를 만들었습니다. 이 클래스를 사용하여 특색 있는 견적 텍스트의 스타일을 설정합니다.line-height 속성을 1 로 설정하면 기본 설정인 1.6에서 텍스트 행 사이의 간격이 줄어듭니다.이 값을 변경하여 원하는 행 간격을 확인하십시오.styles.css 파일을 저장합니다.

특별 견적 섹션 추가

index.html 파일을 반환합니다.마지막 closing</div> 태그 다음에 다음 코드 세그먼트를 추가합니다.
지수html
. . .

<!--Section 6: Featured Quote-->

<div class="section-break"> </div>
<div class="column-quote">
  <p class="quote">There are many fish in the sea, but only one Sammy!</p>
</div>
계속하기 전에 각 줄의 코드를 검사하는 것을 잠시 멈추겠습니다.
  • HTML 주석<!--Section 6: Featured Quote-->index.html 파일에 이 코드 세그먼트를 표시하고 브라우저에서 이 코드 세그먼트를 표시하지 않습니다.
  • <div class="section-break"> </div> 요소는 previous tutorial에서 정의한 클래스를 사용하여 섹션을 만듭니다.이 강좌를 따르지 않으면 CSS 규칙 .section-break {margin:50px; height:500px;}styles.css 파일에 추가하여 클래스를 추가할 수 있습니다.이 요소는 이전 절의 내용과 특색 있는 견적 부분 사이에 공간을 만듭니다.
  • , <div class="column-quote"> 표시 및 종료 표시 </div>column-quote 파일에서 styles.css 클래스에 대한 성명의 스타일 규칙을 사용하여 특색 있는 견적을 위한 용기를 만듭니다.
  • <p class="quote">There are many fish in the sea, but only one Sammy! </p> 텍스트 내용을 이전 줄에서 열린 <div> 용기에 삽입하고 quote 파일에서 styles.css 클래스 선택기 선언에 대한 규칙에 따라 스타일을 설정합니다.텍스트 내용의 길이를 변경하려면 이 절의 클래스를 수정해서 글꼴 크기나 용기 크기를 변경해야 텍스트가 여전히 적합한지 확인해야 할 수도 있습니다.
  • 파일을 저장하고 브라우저에 다시 로드합니다.웹 페이지는 현재 투명한 용기에 큰 특색 있는 견적을 표시하고 튼튼한 배경을 가지고 있어야 합니다.

    결론


    본 강좌에서 귀하는 사이트에 특색 있는 텍스트 상자를 만들고 서로 다른 사이트 레이아웃에 대해 스타일을 수정했습니다.견적을 새 사이트 페이지로 하이퍼링크하려면 저희 강좌How To Create and Link To Additional Website Pages With HTML를 방문하십시오.
    이 강좌 시리즈의 다음이자 마지막 강좌에서는 방문자가 페이지를 아래로 스크롤할 때 뷰포트 밑에 고정된 위치에 붙는 정적 페이지를 만들 것입니다.