profile
하루를 의미있게 살자!
post-thumbnail

220817 TIL

✔️ CSS Layout시작하기 앞서, 먼저 연습할 코드를 보여주자면...전에랑 비슷한 형태로 돌아가서...저번과 마찬가지로, cell 들의 방향을 stretch, center, bottom 바꾸는 것에 대해서 알아볼 것 이다.그런데 다른점은 개별적으로 움직이는 것에

2022년 8월 17일
·
0개의 댓글
·
post-thumbnail

220814 TIL

✔️ CSS Layout시작하기 앞서, 전의 코드를 수정해서 4x4 모양으로 다시 만들어보자!이번에 배울게 될 것은 justify-items 와 align-items 이다!이 프로퍼티들은 부모 요소에 쓰인다. (grid container)justify-items 의 기

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

220811 TIL

✔️ CSS Layout그럼 이번에 fr 이란걸 알아볼 것 이다.fr 의 뜻은 fraction(부분)이다.(pixel 이나 %와 같은 것이다. 정확히는 측정 단위다.)그럼 fraction 이 어떻게 작동하는지 알아보자!우리 코드를 보면...화면을 보면...크기는 가로

2022년 8월 11일
·
0개의 댓글
·
post-thumbnail

220808 TIL

✔️ CSS Layout이번에 알아볼 것은 개발 환경에서 쓸 수 있는 기능에 대해 알아보겠다!그건 바로 line 에 이름을 붙이는 것이다.저번 코드를 수정해본다면...전에는 grid-template-colums 값을 repeat(4, 100px) 로 지정해두었지만, 이

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

220807 TIL

✔️ CSS Layout저번에 이어서 하자면, 필요없는 template-areas 부분들은 다 지워준다.전에 배웠던걸 생각해보면, header 가 맨 위에 있고 content 와 nav 가 중간에 그리고 footer 가 맨 마지막에 자리잡았었다.grid area 를 사

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

220805 TIL

✔️ CSS Layout저번에 grid 를 입문하고 오늘은 grid-template-areas 에 대해 알아보겠다.우선 새롭게 코드를 작성해봤는데...결과는...이렇게 가로 길이 200px 과 세로 길이 300px 를 가지고 있는 색 다른 박스들을 볼 수 있다.colu

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

220804 TIL

✔️ CSS LayoutGrid 는 flex 와 동일하게 부모 요소한테 써주면 된다.예 )grid 는 flexbox 와 거의 비슷한 규칙을 가지고 있다.대부분의 시간을 부모 요소에 대해 얘기할 것 이다.flexbox 처럼 자식 요소에 대해 얘기할 것이지만, grid d

2022년 8월 4일
·
0개의 댓글
·