CSS7 vscode extensions Live Sass Compiler로 sass, scss 자동 compile하기 Live Sass Compiler는 SASS와 SCSS파일을 CSS파일로 실시간 compile, transpile해주는 아주 기특한 친구입니다. 설치방법과 사용법에 대해 포스팅합니다. 설치 방법 1. vscode에서 Extensions로 들어갑니다. 2. 검색창에 Live Sass Compiler를 입력 후 download합니다. 사용 방법 vscode 하단에 위치한 Watch my Sass를 클릭해주세요. Watching... 라고 문구가 바뀝니다. 해당 문구 확인 후 scss 파일을 저장하면 OUTPUT창에 Generated라고 만들어진 css파일 위치가뜹니다. HTML에서 이렇게 만들어진 css파일의 위치를 작성해줍니다. ex) vscode live sass compiler docs github.c.. 2020. 10. 25. nth-child() 선택자로 홀수, 짝수번째 요소 선택하기 Todo 리스트나 표의 Element들에 대해 시각상 잘 구분하기 위해 색을 다르게 지정해주면 간단하지만 가독성이 올라갑니다. 따라해봅시다. ✅ To Do List 쉬기 잠자기 밥먹기 공부하기 일하기 드라이브가기 씻기 요리하기 끝내주게 쉬기 위와 같이 element들이 여러개 나열되어 있다면 .item:nth-child(odd) { background-color: lightcoral; } .item:nth-child(even) { background-color: beige; } 와 같이 odd, even을 사용하여 홀수와 짝수번째에 다른 효과를 줄 수 있습니다. 2020. 5. 24. 화면에 내용이 너무 많아서 css로 하나씩 지정하기 번거로울 때 화면에 보여줄 내용이 너무 많은데 하나하나 css로 적용하기 번거롭지 않나요? 행에 내용이 8개 뿐이었으나 그 이상 추가될 수 있다면? 새로운 행에대해 자동적으로 설정해 주는 속성이 있습니다. grid-auto-flow 인데요. 값에 column, row 두가지를 지정해줄 수 있어요. 열 방향으로 내용을 이어가고 싶다면 .grid { ... /* default setting */ display: grid; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); /* default setting에서 설정한 범위를 벗어날 경우 아래 코드로인해 자동으로 다음에 올 element들이 붙을 방향과 범위를.. 2020. 5. 24. grid-template으로 간편하게 레이아웃 구성하기 grid-template을 사용하면 정말 간단하게 레이아웃 배치할 수 있어요. 먼저 알아야할 것 grid-template에서는 repeat가 적용되지 않는다. grid-template에서 height을 지정하려면 충분한 height공간이 필요하다. .grid { display: grid; gap: 10px; height: 50vh; /* fraction: grid에서 사용 가능한 공간 grid-template에서 repeat는 적용되지 않는다. */ grid-template: "header header header header" 1fr /* header의 height: 1fr*/ "content content content nav" 2fr "footer footer footer footer" 1fr } .. 2020. 5. 24. 이전 1 2 다음 LIST
