[Webデザイン]TheKiller Webサイトプロジェクト学習まとめ6

[The Killer Website Project] Section 5. Killer Webサイトプロジェクトの学習内容を整理する
#49 - 50 Building the customer testimonials section

#49 Building the customer testimonials section - Part 1

<blockquote>タグと<cite>タグの使用

blockquote:ラベル内のテキストが長い引用文であることを示す.
cite:作品のソースをマークするには、タイトル(テキストの内部コンテンツ)を含める必要があります.
[ HTML ]<blockquote> <cite> </cite> </blockquote>

//Ex.
/*html*/
<blockquote>
    Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking, so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
    <cite><img src="Resources/images/customer-1.jpg"/>Alberto Duncan</cite>
</blockquote>

				output ⬇️

#50 Building the customer testimonials section - Part 2

背景画像の設定

背景画像を設定する方法は次のとおりです.
[ CSS ]
クラス名{
      background-image:url(画像パス);
      background-size: cover;
}

//Ex.
/*html*/
<section class="section-testimonials"> ⭐️⭐️⭐️
      <div class="row">
        <h2>Our customers can't live without us</h2>
      </div>
      <div class="row">
        <div class="col span-1-of-3">
              .
              .
              .
              //내용생략
              .
              .
              .
    </section>
/*css*/
.section-testimonials {
  background-image: url(images/back-customers.jpg); ⭐️⭐️⭐️
  background-size: cover; ⭐️⭐️⭐️
}

				설정 전 ⬇️

				설정 후 ⬇️

固定背景画像(background-attach:fixed)

CSSの素晴らしい点は、スクロールすることでバックグラウンド画像を固定できることです!
[ CSS ]
background-attachment: fixed;

//Ex.
/*css*/
.section-testimonials {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url(images/back-customers.jpg); /*백그라운드 검정으로 깔기*/
  background-size: cover;
  color: #fff; /*font 컬러*/
  background-attachment: fixed; ⭐️⭐️⭐️/*백그라운드 이미지 고정하기-스크롤해도 상관없이!*/
}

1行のコードでこの効果を享受できます...これはかっこいいですね(🤭🤭🤭)一つの機能ではないはずがない.

かっこいいものはもう一回.👌

Italic fontの適用

Googleフォントで斜体フォントが選択され、HTMLの上部にリンクが追加されている場合は、CSSにコードを1行追加するだけで、CSSセレクタに必要な要素に斜体を適用できます.
[ CSS ]
font-style: italic;

//Ex.
/*html*/
//구글 폰트에서 원하는 폰트 선택 후 링크를 복사해서 가져오기
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet"/>
/*css*/
blockquote {
  padding: 2%;
  font-style: italic; ⭐️⭐️⭐️/*html webfont(구글폰트링크)에 italic을 이미 추가해두었기 때문에 이렇게 쓸 수 있음 */
  line-height: 145%;
}

				적용 후 ⬇️

垂直方向中央揃え(垂直方向中央揃え:中央揃え)

[ CSS ]
vertical-align: middle;

//Ex.
/*html*/
 <cite>
   <img src="Resources/images/customer-1.jpg" />Alberto Duncan
 </cite>
/*css*/
cite img {
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle; ⭐️⭐️⭐️/*사진을 이름의 좌측, 중간 높이에 위치하도록 정렬한다.*/
}

¥¥¥¥¥¥

				설정 전 ⬇️

				설정 후 ⬇️

CSSへのテキストの追加のみ

[ CSS ]
ラベル名(またはクラス名):before(またはafter){
内容:テキスト;
}

//Ex.
/*css*/
blockquote:before {
  /*css만을 이용해서 text 추가하기*/
  content: "\201C"; ⭐️⭐️⭐️
  font-size: 400%;
}

🤓 CSSテクニックコードの入力方法🤓

ISO Special Characters CSS-tricksに接続し、目的の特殊文字を選択します.

およびその特殊文字のISOコードを以下のようにコピーします.

でコピーしたコードをフォーマットに従ってCSSに入力し、特殊文字テキストを追加できます.

				결과 ⬇️

Customer Testimonials Sectionの完了

Reference

*この投稿には、Udemyの「HTML 5とCS 3を含む応答リアルワールドWebサイトの作成」コースが含まれています.
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/
https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote
https://developer.mozilla.org/ko/docs/Web/HTML/Element/cite
https://fonts.google.com/
https://css-tricks.com/snippets/html/glyphs/