CSS

웹 프로젝트를 하면서 codeboilerplate없이 한번 만들어봤는데, 정말 어려웠다.....예쁘고 가지런하게 만드는게 어려운것 같다.가로로 정렬하는 것도 잘 안되고, 원하는 위치에 원하는 사이즈로 정렬하는 것도 어렵고..display와 position이 가장 중요하

1 2 3 4 5

flexbox를 자유롭게 활용할 수 있도록 익히고 싶었는데, flexbox froggy라는 게임이 도움이 되었다. 헷갈리는 개념도 함께 체크해 정리해보려고 한다. Align-self 이렇게, 한 가지만 위치를 변경하고 싶을 때는 개별 클래스에 align-self로

지그재그 화면을 따라 만들어보면서, 팝업창 닫기를 클릭하면 팝업창이 사라지도록 만들고 싶었다. 이 때 사용한 프로퍼티를 다시한번 복습겸 정리해두고, 각 차이점을 이해해야겠다.프로퍼티값 키워드 설명해당 요소를 보이게 한다 (기본값)해당 요소를 보이지 않게 한다. none

CSS 색깔 일괄지정 여기서만 변경하면 전체 적용된다. :root{ --color-black: } 이런 방식으로 사용한다. body{ background-color: var(--color-black); } 윈도우의 100%,전체로 바디 길이를 지정한다. body{

colspan : 열합치기

transition은 4가지 속성의 축약속성으로, 이 4가지를 모두 포함하고 있다.transition-propertytransition-durationtransition-timing-functiontransition-delay헷갈렸던 부분이라 정리하고 넘어가자.tran

transform-origin: x-axis y-axis;rotate으로 회전을 시키면 가운데 축으로 돌아가게 된다. transform-origin: 100%;을 주면 아래와 같이 지정한 축을 중심으로 돌아가게 된다.출처: https://mjmjmj9

수평정렬만 가능하고, 수직 정렬은 불가능하다.예를 들어 div는 블록 레벨인데,margin이 오른쪽으로 기본적용되어있는 것을양쪽이 동일한 간격으로 자동으로 margin을 맞춰주는 것이기 때문이다.text외 다른 요소들을 가운데 정렬할 때도 쓰인다.div같은 경우는 블록

background-image: url("../../media/examples/lizard.png");url을 두 개 쓰면 이미지가 겹쳐지는데, 위에 적은 순으로 위에 배치된다.배경 이미지의 반복 방법을 설정한다. (이미지로 보는 것이 이해가 빠르다 .)모든 방향으로

css 속성을 작성하는 순서도 있다는 것을 알고 있었고, 어느정도 이에 맞게 작성하려고 노력하고 있었는데...확실하게 알고 정확하게 적용하지는 못했어서, 새로 프로젝트를 진행하는 김에 커밋 메시지 컨벤션, 네이밍 컨벤션, css 순서 컨벤션을 최대한 정확하게 지켜 코드

A functionally independent page component that can be reused블럭을 구성하는 단위속한 블럭 내에서만 의미를 가지기 때문에 블럭 내에서 떼어다 다른 곳에 사용할 수 없다.(아래 이미지 참고)블럭 혹은 엘리먼트의 속성생김새나

CSS Preprocessor Sass, Less, Stylus와 같은 것들은 CSS 전처리기라고 한다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서 CSS 가 동작하는 것은 동일하지만 개발과정에서 이러한 전처리기를 사용해 CSS의 단저을 보완할 수 있다. 작성한

지금까지 사용해보았던 CSS, SASS, SCSS, Styled-components 외에 새로운 CSS를 프로젝트에 도입해보기로 했다.tailwindcss는 utility-first를 개념으로 만들어진 CSS Framework이다.utility-first클래스에 유틸리

최신 css 속성들로 여러 문제를 해결하기 위해 사용했던 기존 속성들을, 간결한 한 줄로 대체할 수 있는 방법에 대해 간략히 정리했습니다.원문 : https://moderncss.dev/12-modern-css-one-line-upgrades/동영상 임베드에