컴굥일지

ch3.0 : CSS Preprocessors and Set Up SCSS란 CSS Preprocessor다. preprocessor에는 SCSS 말고도 다른 종류도 있다. (ex- stylus) SCSS는 css를 programming language처럼 만든다. SCSS는 compile 또는 build하는 과정이 필요하다. gulf는 compile하거나 transform 해주는 nodeJS 패키지이다. 새로운 코드를 오래된 코드로 바꾸거나, SCSS를 평범한 css로 바꿔준다. ch3.1 : Variable and Nesting const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", //여기서 일어나는 모든 일은 css로 c..

ch2.9 : Place Content justify-content는 grid 자체를 움직이는 것 justify-items는 cell의 배치를 논하는 것 align-content(수직) / justify-content(수평)을 한번에 쓸 수도 있다. place-content: end center; /*수직 수평*/ ch2.10 : Auto Columns and Rows .header { background-color: #2ecc71; align-self:end; /*child에 적용되는 property*/ justify-self:center; place-self: end center; /*위에 두개 한번에 적는 경우*/ } .grid { color: white; display: grid; gap: 5px..

ch2.5 : Shortcuts grid-row-start: 2; grid-row-end: 4; 위 코드는 grid-row : 2/4로 바꿀 수 있다. grid-row : 1/5는 grid-row : 1/-1로 바꿔 쓸 수 있다. 끝에서부터 -1, -2, -3 ... 으로 쓸 수 있다. 위의 방법처럼 시작과 끝을 적는 대신에 span을 쓸 수 있다. 얼마나 많은 cell을 가지고 있는지를 적으면 된다. 시작점이 필요할 때는 grid-row: 2 / span 2 처럼 적어도 된다. ch2.6 : Line Naming /*line에 이름 붙이기*/ .grid { display: grid; gap: 10px; grid-template-columns: [first-line] 100px [second-line] ..

ch2.1 : Life Before Grid flex box로는 grid 형태를 만들기 어렵다. ch2.2 : CSS Grid Basic Concepts .father { display: grid; /*grid 화면 생성 - father에서 해야함*/ grid-template-columns: 250px 250px 250px; /*3개 열 생성*/ grid-template-rows: 100px 50px 300px; /*3개 행 생성*/ column-gap: 5px; /*열 사이 간격*/ row-gap: 10px; /*행 사이 간격*/ } 행과 열의 간격이 동일하면 gap:10px로 적어도 된다. ch2.3 : Grid Template Areas grid-template-columns: 250px 250px..

ch1.4 : align-self and order align-items과 비슷한 일을 한다.(cross axis) 다만, 한 box에만 해당한다. .father { display: flex; flex-direction: row; /*default: row*/ /*Main Axis*/ justify-content: space-around; height: 100vh; } .child { width: 200px; height: 200px; background: peru; color: white; } .child:nth-child(2) { align-self: center; } .child:nth-child(3) { align-self: flex-end; } 위와 같이 코드를 쓰면 아래와 같은 결과가 나온다...

ch1.0 : Life Before Flexbox display: block; block은 element이고, block옆에는 어떠한 element도 올 수 없다. display: inline-block; block 속성을 유지하면서, 옆에 element가 올 수 있다. But, 가로로 block이 나열될 때, 옆에 이상한 공백이 생기게 된다. display: inline; inline은 box가 아니다. 유동적이기 때문에, width와 height가 없다. ex) text ch1.1 : First Rule of Flexbox flexbox에서는 children과 이야기 하지 않는다. flexbox에서 뭔가를 움직이고 싶을 땐, flexbox container를 만들어서 사용한다. flexbox cont..

졸업 프로젝트를 진행하면서 내가 진짜 아무것도 모른다는 것을 느꼈다. 그래서 뭐라도 해봐야겠다는 생각에서 강의를 듣기 시작했다. 어떤 것을 먼저 공부할까 고민하다가, 항상 프로젝트를 할 때 가장 곤란했던 CSS 레이아웃을 선택했다. 개인적으로 토이 프로젝트를 하려고 해도, css가 어려워서 항상 머리가 아팠다. 뭔가 코딩을 해서 쨘! 하고 돌렸을 때 결과가 예쁘게 잘 나와야 계속하고 싶은 마음이 드는데, CSS 조절이 잘 안 돼서 항상 보기가 불편했다. 반응형 web을 좀 제대로 구현해보고 싶은 마음도 있었다. 그래서 노마드코더에서 CSS Layout 강의를 구매해서 들어보기로 했다.