Jeden Tag, aufrichtig und lustig.

css 7. grid 본문

CSS

css 7. grid

a-nanas 2022. 3. 26. 00:19

grid

 

단락을 나란히 배치하고 싶다면

그리드를 활용 할 수 있다.

이를 위해선 부모태그로 각 단락을 묶어야 한다.

<head>

<style>

 #grid {

        border : 5px solid pink ;

        display : grid ;

        grid-template-columns : 100px 1fr ;

       }

</head>

부모태그로 묶는 방법

<div>를 활용 할 수 있다.

<div>는 의미가 존재하지 않는 디자인을 위한 태그이다.

 

<body>

  <div id = "grid">

    <div> navigation </div>

    <div> template  </div>

  </div>

</body>

 

** css 선택자 특정하는 법

-> 부모 선택자 이름을 앞에 붙인다.

ex.

<style>

  #grid ol {

           padding-left : 33px;

             }

  #grid #article {

            padding-left : 25px;

              }

</style>

 

=>

1) id가 grid값의 하위태그로 묶여있는 ol태그를 선택한다.

2) id가 grid값의 하위태그로 묶여있는 article id값을 선택한다.

'CSS' 카테고리의 다른 글

css 9. style 시트  (0) 2022.06.17
css 8. 미디어 쿼리  (0) 2022.03.26
css 6. <div>  (0) 2022.03.26
css 5. box model  (0) 2022.03.25
css 4. block level / inline / inline-block  (0) 2022.03.25
'CSS' Related Articles more