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값을 선택한다.