CSS 썸네일형 리스트형 반응형 웹 구현하기 전에 알아야할것! 반응형이란 반응형 웹이란 크롬창을 줄이거나 늘릴 때 웹 페이지가 반응해서 사용자의 화면에 맞춰 크기가 변하는 것을 말한다. 미디어쿼리 미디어 쿼리는 사용자 화면의 크기에 맞춰 css를 보여주는데 조건문과 비슷하다. 조건문 같은 부분에는 max-width와 min-width를 쓰는데 max는 내가 설정한 것 이하일 때, min은 이상일 때 적용된다. 그렇기 때문에 주로 max는 데스크탑이 주요할 때 쓰고 min은 모바일이 주요할 때 사용한다. // max-width 에서 모바일 화면 구현할때 @media only screen and (max-width: 425px) { // 화면이 425px 이하인것에 이 css를 적용시킨다. .box{ display: flex; flex-direction: column;.. 더보기 HTML과 CSS 완 드디어 다 만들었다! 최근 1주일동안 개인적으로 일어난 일들이 많아서 예상보다 3일이나 늦어졌다! (빨리 취업하고 싶은 이유중 하나) 하지만 앞으로가 중요하니 열심히 임하자! 작업 방식은 전과 같이 구조를 먼저 짜고 css를 입혔다. 하다보니 아래 이미지의 사이드바를 컴포넌트로 빼지 않았어서 구조를 바꿨어야 했는데 확실히 수월했다! (역시 사람은 배워야해,,) 앞으로 기능 넣을것이 너무 기대된다! 히히 더보기 HTML로 구조를 만들고 CSS로 옷을 입히자! HTML로 먼저 구조를 짜고 CSS로 옷을 입혔다! 처음에는 디자인을 보면서 구조를 짰다. 그 후 className과 id를 넣고 display 나 flex-direction 속성을 넣으며 디자인에 맞는 위치에 글이나 박스를 배치했고 배경색과 폰트사이즈, 마진 값을 줬다! 이런식으로 하니 나중에 css를 수정할때 속성이 꼬이지 않아 수월했고 무엇보다 더 재밌었다. 그 후 완성됐다! 이 페이지의 소요시간은 약 1시간 30분? 정도나 걸렸다! (화장실 가는 시간 빼면 더 줄지도,,) 저기 은행 마크 아래 최고연 이라는 글씨나 상세한 CSS 조정에 시간이 소요됐다. 더보기 프로젝트 디자인을 HTML과 CSS로 이틀간 하루에 3페이지씩 만들었다. 이제 4~5 페이지만 만들면 HTML은 끝이다! 처음 홈 화면 만들때보다 나중 갈수록 속도가 더 빨라지는게 느껴져 기분이 좋다. 더보기 [React] Custom Component 2 Styled Components 란 ? CSS in JS 개념(컴포넌트 단위에 캡슐화)이 대두되면서 나온 라이브러리이다. CSS in JS 를 사용하면 CSS도 Js 안에 넣어줄 수 있기 때문에 HTML , JS , CSS를 묶어서 하나의 JS파일안에 컴포넌트 단위로 개발할수 있게 된다! (개쩌러) CSS in JS 중에서도 다른 라이브러리도 있지만 가장 인기있다고 하는 Styled Components의 사용법에 대해 알아보자. Styled Components 사용법! npm install --save styled-components 로 설치를 해준다. 그리고 Styled Componets는 package.json에 { "resolutions": { "styled-components": "^5" } } .. 더보기 이전 1 다음
