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

220901 TIL

✔️ CSS Layout오늘은 extends 기능에 대해 알아볼 것 이다.extends 는같은 코드를 중복하고 싶지 않을때 쓰는거다.저번시간에 배운 mixin 은 상황에 따라 다르게 코딩을 하고 싶으면 사용하는 것 이다.extends 는 정확히 다른 코드를 확장(ext

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

220831 TIL

TIL DAY 208 오늘 배운 일 ✔️ CSS Layout ⏰ SCSS [part II] 이어서 다음으로 배울 특징은 mixins 이다.

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

220822 TIL

✔️ CSS Layout이번에는 SCSS 라는 것을 배울 것이다.SCSS 는 기본적으로 CSS preprocessor 이다!시작하기 앞서, 쾌적한 작업환경을 구성할 수 있도록 설치해보자!먼저 git 설치!https://git-scm.com/그리고 NodeJS

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

220820 TIL

TIL DAY 206 오늘 배운 일 ✔️ CSS Layout 👖 Grid [part VIII] 이번 시간에는 minmax 에 대해 알아볼 것 이다. 이 기능은 얼머나 작게 혹은 크게 요소가 될 수 있는지 지정해 준다. 가장 좋은 예로는 요소가 가능한 엄청

2022년 8월 20일
·
0개의 댓글
·
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개의 댓글
·
post-thumbnail

220803 TIL

TIL DAY 198 오늘 배운 일 ✔️ CSS Layout 🎲 IIII) Flexbox 오늘은 flex-grow, flex-shrink 에 대해 배워볼건데... 이 두개의 property 들을 자식 요소에게 줄 수 있다. 예를 보면... index.ht

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

220801 TIL

TIL DAY 197 오늘 배운 일 ✔️ CSS Layout 🔳 III) Flexbox 저번에 이어서 flexbox 세 번째 시간을 가져볼려고 한다. 우선 저번 예제를 보자! index.html style.css 결과물 저번에 말헸듯이, flex-di

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

220731 TIL

✔️ CSS Layout어제 공부한 flexbox 예제를 이어가자면...body 태그 안에 3개의 div 태그들이 존재하는데, 각자 가로 세로 길이가 200px 이다.display flex 를 사용해서 inline-block 같은 효과로 생각할 수 있지만, 각 박스 사

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

220730 TIL

✔️ CSS Layout먼저 flex 에 대해 알아가지 전에...display 의 대표적으로 쓰이는...inline blockinline-block의 차이점을 알아보자!예 )코드index.htmlstyle.css결과...인라인 요소는 가로 세로 길이를 가질 수 없다!그

2022년 7월 30일
·
0개의 댓글
·