나의 개발일지

4. 생활코딩으로 CSS 배우기 (4) - 그리드 본문

CSS/생활코딩

4. 생활코딩으로 CSS 배우기 (4) - 그리드

heew0n 2023. 10. 3. 21:43

 

위의 기획서와 같이 목록과 본문이 나란히 위치하는 레이아웃 디자인하기

 

1. <div> 태그

: 어떤 의미도 없는 태그, 무색무취와 같은 태그

: division의 약자

<body>    
    <div>NAVIGATION</div>
    <div>ARTICLE</div>
</body>

화면 전체를 쓰는 <div>태그는 자동적으로 줄바꿈이 되어 아래와 같이 나타난다.

       (*Block level element)

 

2. <span> 태그

 : <div>태그와 똑같은 목적으로 고안된 태그

: 자기 자신의 콘텐츠만큼 자리를 차지하는 inline element

    --> 줄바꿈이 되지 않는다!

3. 부피감 알아보기 

<style>
     div {
          border:5px solid gray;
        }
</style>

4. 두 개의 <div>태그를 감싸는 부모 태그 추가 후 id 값 설정 

<body>
    <div id="grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </div>
</body>

5. id 값에 테두리 색상 설정 

#grid {
        border-color: pink; 
        }

6. 두 개의 태그를 나란히 배치하기 

#grid {
      border-color: pink; 
      display: grid;
      grid-template-columns: 150px 1fr;
      }

 

grid-template-columns: 150px 1fr;

: 첫 번째 칼럼은 150px의 부피를 갖고, 두 번째 칼럼은 나머지 공간을 다 쓴다는 의미

​

이 상태에서 화면을 늘려보면 ARTICLE 영역은 자동으로 커지고

NAVIGATION 영역은 150px을 고정적으로 차지하게 된다

 

7. 1fr 1fr

1fr 1fr로 설정하면 두 칼럼은 같은 크기가 된다

8. 2fr 1fr

전체 화면을 3fr이라고 했을 때, NAVIGATION 영역은 2만큼,

ARTICLE 영역은 1만큼 화면 전체를 나눠서 쓰게 된다

 

그리드 써먹기

 

1. <div>태그로 <h2> 태그와 <p> 태그 묶기

: 묶어서 하나의 태그로 만들기

<div>
<h2>CSS</h2>
  <p>Media Queries is an enhancement of the @media rules of CSS and the “media” attribute in HTML.
    It adds parameters such as size of display, color depth and aspect ratio. 
    This is because within a class of media (such as TV sets) there can still be important variations.
    It is related to the work on CC/PP, but is a much more light-weight and limited solution. 
  </p>
</div>

2. <div> 태그로 <ol> 태그와 <div> 태그 묶기

 : 1.에서 묶었던 <div>태그를 <ol>태그와 묶는다

  <div>
    <ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html" class="saw" id="active">CSS</a></li>
      <li><a href="3.html">JAVAscript</a></li>
    </ol>

    <div>
      <h2>CSS</h2>
      <p>Media Queries is an enhancement of the @media rules of CSS and the “media” attribute in HTML. It adds
        parameters such as size of display, color depth and aspect ratio. This is because within a class of media (such
        as TV sets) there can still be important variations. It is related to the work on CC/PP, but is a much more
        light-weight and limited solution. </p>
    </div>
  </div>

3. 그리드 설정하기 

 #grid {
      display: grid;
      grid-template-columns: 150px 1fr;
    }


<div id="grid">
    <ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html" class="saw" id="active">CSS</a></li>
      <li><a href="3.html">JAVAscript</a></li>
    </ol>

    <div>
      <h2>CSS</h2>
      <p>Media Queries is an enhancement of the @media rules of CSS and the “media” attribute in HTML. It adds
        parameters such as size of display, color depth and aspect ratio. This is because within a class of media (such
        as TV sets) there can still be important variations. It is related to the work on CC/PP, but is a much more
        light-weight and limited solution. </p>
    </div>
  </div>

4. 스타일 속성 이용하여 간격 설정하기 

<div id="whatiscss">
      <h2>CSS</h2>
      <p>Media Queries is an enhancement of the @media rules of CSS and the “media” attribute in HTML. It adds
        parameters such as size of display, color depth and aspect ratio. This is because within a class of media (such
        as TV sets) there can still be important variations. It is related to the work on CC/PP, but is a much more
        light-weight and limited solution. </p>
    </div>

padding-left를 이용하여 간격을 조정하였다

 

 

'CSS > 생활코딩' 카테고리의 다른 글

3. 생활코딩으로 CSS 배우기 (3) - 박스모델 써먹기  (0) 2023.10.03
2. 생활코딩으로 CSS 배우기 (2) - 박스모델  (0) 2023.10.03
1. 생활코딩으로 CSS 배우기 (1)  (1) 2023.10.03
'CSS/생활코딩' Related Articles more