ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Css GridTemplate Ex2
      Search: Html Css JavaScript Html Css JavaScript 2022. 11. 21. 11:55

       

      예제 코드

      cssgridtemplate1.css

      * {
	box-sizing: border-box;
}

body {
	background-color: rgb(238, 255, 205);
	font-size: 16px;
}

#gridtemplateid1 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 1rem;
}

.gridclass1 {
	background-color: rgb(255, 255, 255);
	box-shadow: 3px 3px 5px rgb(0, 0, 0);
}

.gridclass1>header {
	font-size: 1.5rem;
	padding: 0.3rem;
	text-align: center;
}

.gridclass1>p {
	padding: 0.5rem;
	line-height: 1.6em;
}

.gridclass1>img {
	max-width: 90%;
}

       

      cssgridtemplate1.html

      <!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GridTemplate예제</title>
  <link rel="stylesheet" href="cssgridtemplate1.css">
</head>

<body>
  <div id="gridtemplateid1">
    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

    <div class="gridclass1">
      <header>
        <h3>제목11</h3>
      </header>
      <figure>
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </figure>
      <p>설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말.
        새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.</p>
    </div>

  </div>
</body>

</html>

       

       

      실행화면

      소폭

       

      대폭

       

      실행중

      GridTemplate예제

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

      제목11

      설명 : 어떤 일이나 대상의 내용을 상대편이 잘 알 수 있도록 밝혀 말함. 또는 그런 말. 새 기획안에 대한 설명이 끝나자 질문이 쏟아졌다.

       

      'Html Css JavaScript' 카테고리의 다른 글

      Css GridTemplate Gap 간격  (0) 2022.11.21
      Css GridTemplate Row & Column  (0) 2022.11.21
      Css GridTemplate 개요  (0) 2022.11.21
      Css GridTemplate minmax  (0) 2022.11.21
      Css GridTemplate Repeat  (0) 2022.11.21
      Css GridTemplate Fraction  (0) 2022.11.21
      Anchor로 같은 문서에서 화면 이동  (0) 2022.11.20
      박스 모델 기본 구성  (0) 2022.11.20

      관련글 관련글 더보기

      댓글

    티스토리툴바