🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Step 4 : grid 자식에게 줄 수 있는 속성들 ( grid cell ) Grid Line -grid-column-start , grid-column-end column을 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; } -grid-row-start , grid-row-end row를 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; grid-row-start : 1; grid-row-end : 3; } 단축형 .item2{ grid-column : 2 / 4; grid-row : 1 / 3; } ..

Step 1 : Grid vs Flexbox CSS Layout 을 배치할 수 있는 도구로는 Flexbox와 grid 두 가지가 있다. Flexbox의 경우 가로를 기준으로, 세로를 기준으로 1차원적으로 CSS 레이아웃을 배치할 수 있다. 가로로 묶거나 세로로 묶거나 Grid의 경우 가로축과 세로축을 기준으로 2차원적으로 CSS 레이아웃을 배치할 수 있다. Step 2 : Grid Grid는 container(부모)에 주는 속성과 grid cell(자식)에 주는 속성으로 나뉜다. container 에 꾸며줄 수 있는 속성들 - display - grid-template-columns - grid-template-rows - grid-template-areas - grid-gap grid cell에 꾸며줄..

Step 4: Flexbox 자식에게 줄 수 있는 속성들 (item) HTML 문서 작성 1 2 3 CSS 작성 .container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); } .item2 { background-color: rgb(250, 134, 153); } .item3 { background-color: rgb(165, 100, 250); } - order default 값 : 0; 순서 임의로 지정하기 .co..

%와 px 비교 px은 parent에 상관없이 항상 같은 공간을 차지한다. %는 parent의 넓이를 기준(padding 값 제외)으로 적용되기 때문에 parent의 크기에 영향을 받는다(relative). index.html 50% 100px 50% 100px 선을 기준으로 위쪽의 %는 기준이 html 전체 크기가 되고, 아래의 %는 parent 태그의 크기가 기준이 된다. em와 rem 비교 em은 상위 요소(가장 가까운 parent) 폰트 사이즈의 몇 배인가를 나타낸다. 만약 상위 요소의 폰트 사이즈가 20px 이라면, 1em = 20px 이 되고 20em = (20 * 20) px 이 된다. rem은 최상위(root) 폰트사이즈가 기준이다. index.html 1rem 1em 2rem 2em 1r..

Step 1: Background flexbox가 있기 전에는 float, position, table을 사용해서 하나하나 배치를 해주었다. 예를 들어 float의 경우는 본문과 사진을 함께 배치할 때 사진의 위치를 left , center, right 으로 조정해주었다. 그리고 본문을 다시 또 나눠서 하나는 오른쪽에 나머지 하나도 float을 사용해 아래에 배치해주었다. .img { float : left } float 의 원래 목적은 텍스트와 이미지를 배치하는 것이었지만, 원래 목적에서 벗어나게 되었고, 코드도 복잡해졌다. flexbox가 등장하게 되면서 float은 원래 목적으로만 사용할 수 있게 되었다. Step 2 : Flexbox Flexbox layout 모듈(Flexbox)은 박스와 아이템..

CSS (Cascading Style Sheets) CSS는 Cascading Style Sheets의 약자이다. html이 웹페이지의 content를 담당하고, javascript가 웹페이지의 동적인 요소들을 담당한다면, css는 웹페이지를 아름답게 만들어주는 역할을 담당한다. 웹페이지가 스타일링 될 때는 아래 3가지를 참고한다. 1. Author style : 내가 작성한 style sheets. (.css파일) 2. User Style : 사용자가 스타일하는 것(다크모드, 글자 크기 설정 등) 3. Browser : 브라우저 상에서 기본적으로 지정된 스타일. 그리고 우선순위를 가지는데 기본적으로 내가 작성한 style sheets인 author style이 1순위, user style이 2순위, 마..