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

220811 TIL

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

어제
·
0개의 댓글
·
post-thumbnail

220808 TIL

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

4일 전
·
0개의 댓글
·
post-thumbnail

220807 TIL

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

5일 전
·
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개의 댓글
·
post-thumbnail

01 자바스크립트 첫 시작!

스크립트란? 컴퓨터가 운하는 목적을 달성하도록 만들기 위한 명령어의 모음이다 자바스크립트를 이용하면 웹 브라우저에 나타난 콘텐츠와 마크업에 액세스하여 이를 수정함으로써 웹 페이지를 더욱 인터랙티브하게 만들 수 있다. > 쉽게 설명하자면, HTML 이 작품의 밑그림이

2021년 7월 27일
·
0개의 댓글
·