목록CSS (43)

Enjoy Programming

CSS MASTER challenge 5

이번 과제 완성작이다. 이것도 반응형이고~~~ 역시 grid와 flex-box를 활용해서 만들었다. 주요한건 바디에서 grid-templat-columns, rows를 이용해서 3X4그리드를 만들었고 최소는 max-content, column은 1fr row는 33%씩주고 빨간 부분은 span2를 주고 리스트 부분은 grid-row: span3을 줘서 할당했다. 특별히 많이 활용한건 grid-column과 grid-row를 많이 활용했다. 코드를 보자~ 이렇게 보니 복잡하긴 하다.. 근데 나름 layout에 대한 느낌을 더 많이 생각하게된? 계기였다 참고로 챌린지서 처음으로 내 작품이 올라왔다 ㅋ 기분이 좋았다 ㅋㅋㅋ 나이가 먹어도 이런건 기분이 좋다.
CSS 2021. 4. 30. 01:37
CSS MASTER challenge 4

4번쨰 css 레이아웃 챌린지는 이렇게 레이아웃을 잡는 챌린지였다. 짧게나마 코드 리뷰를 해야지.. 중점은 반응형으로 며개의 칼럼이 생기더라도 아래로 계속 이어 나갈수 있게 만드는 ? 암튼 반응형 페이지 만드는것 전체적으로 grid를 활용했다. html 코드는 반복반복이다 어짜피 같은 그리드가 계속 반복되니까 css 코드를 보면 챌린지 당시에는 이렇게 줬다는게... 멍청했다... 그냥 바디에 그리드 주고 auto-fit주면 되는건데... auto-fill과 auto-fit을 잘 이해하지 못했었다. 다시 짠다면 바디에 grid-template-columns를 repeat(auto-fit, minmax(Xxxpx, 1fr)요렇게 주고 로우는 필요한만큼 주고 auto-rows를 다시 주면 되고 헤더는 grid..
CSS 2021. 4. 30. 01:27
SCSS - css preprocessors and set up

Sass(syntactically awesome stylesheets)는 css 의 pre-processor로 css의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 css를 생성하기 위한 css의 확장판이다. css자체로 사용하여도 무리는 없지만 프로젝트의 규모가 커지고 수정이 빈번함에 따라 유지보수가 어려워 지는 단점이 있다 이런 css의 한계를 보완하기 위해 sass는 다음과 같은 추가 기능과 도구를 제공한다. 변수의 사용, 조건문과 반복문, import, nesting, mixin, extend/inheritance 등이 있다. 쉽게말해 궁극적인 목표는 css의 결함을 보정하는 것이다. 단지 css의 부족한 부분만 돕기를 원한다. SCSS Sass는 처음에 들여쓰기의 감지를 그..
CSS 2021. 4. 25. 08:55
Grid - min content, max content

min-content와 max-content를 알아보자 예를들어 텍스트가 적힌 태그가 있다고 하자 이상태에서 첫번째 칼럼은 min-content를 두번째 칼럼은 max-content를 주면 이렇게 ! 바뀐다. 태그안에 컨텐츠가 어떻게 보여야 하는지 나타내 줄때 매우 용이하다 두번째 처럼 안에 제목같은 텍스트가 반응형에서 움직이지 않아야 할때 그리고 문장이 최소 단위로만 표기되기만 하면 될때 이 두가지를 잘 섞어 사용하면 된다. 그리고 이것을 minmax & repeat과 함께 사용할 수 잇는데 예를 들어 보자 서로 다른 길이의 문장들이 있다. grid-template-columns: repeat(6, minmax(max-content, 1fr)); css에 이렇게 스타일을 줘보겠다 6개의 칼럼이 반복되고..
CSS 2021. 4. 23. 21:23
Grid - minmax

이번에는 minmax속성을 알아보자 minmax는 그리드가 얼마나 작게 혹은 큰 요소가 될 수 있을지 지정하도록 해준다. 음 쉽다. 이런식으로 지정해주면 된다. 화면사이즈가 아무리 줄어도 최소 100px은 유지되고, 화면이 커지면 그냥 화면상 10개의 칼럼이 최대한 나눠 갖는다. 또는 minmax(50px, 150px)이라면 최소 50px은 유지되고 브라우저가 커지면 150px까지만 커지게 되는 것이다. gif를 못만들어서 코드만 사진 올린다...
CSS 2021. 4. 23. 20:42
Grid - Auto Columns and Rows

앞서 다룬 포스트에서는 그리드 전체를 움직이거나 또는 그리드 셀안에서 움직임을 전체로 다루었다. 이번에는 자식요소인 그리드셀 하나씩 다루는 것을 알아보자 먼저 align-self이다. grid-container에 두는 속성이 아닌 각 그리드마다 주는 속성이다. 한번 헤더에 align-self:end;를 줘보겠다. 이렇게 헤더박스셀 하나만 영역을 지정했다 . 다시한번 보면 align-items는 그리드 컨테이너에 속성을 줌으로써 각 그리드 셀을 모두 영역을 주지만 self는 grid박스 자체에 속성을 주고 그 박스 하나만 영역을 다룬다. justify-self도 마찬가지~~~~ 이것도 두가지를 한번에 다룰 수 있는 place-self가 있다. 그리고 자동으로 칼럼과 로우를 지정해 줄 수 있는 grid-au..
CSS 2021. 4. 23. 20:27
이전 Prev 1 2 3 4 5 ··· 8 Next 다음