본문 바로가기

Web.d

[React] O.D.C(One Dance Club) Hompage https://friendly-snyder-4bece3.netlify.app/#/ O.D.C friendly-snyder-4bece3.netlify.app https://github.com/joohaem/one-dance-club-react GitHub - joohaem/one-dance-club-react: O.D.C Hompage UI with React O.D.C Hompage UI with React. Contribute to joohaem/one-dance-club-react development by creating an account on GitHub. github.com HMTL 시멘틱 태그 Flexbox / Grid 레이아웃 Image Change Button Toggle Arrow Ic.. 더보기
[Chrome][CSS] 작업하는데 PC에서 CSS 수정이 안 먹혀요 반응형 레이아웃을 작업하면서 도저히 원하는 대로 되지 않아 애꿎은 css만 패고 있었다 허나, 변경사항이 모바일에서는 적용되는 것을 알게 되었다 결국 알게 된 방법은 강력 새로고침 이다 이렇게 쓰게 된 적은 처음이다 새로 인식된 파일, 즉 변환하여 적용된 파일은 캐시파일로 바로 인식되지 않을 수 있다 따라서 저장되어 있던 캐시파일때문에 적용된 뷰를 볼 수 없게 된다 이같은 캐시파일을 초기화하여 새로고침하는 강력 새로고침을 하였더니 (Ctrl + Shift + F5 / Ctrl + F5 // Ctrl Command) 바로 적용되어 나타났다 더보기
[CSS][SCSS] SCSS의 기본 개념 https://github.com/joohaem/prt-scss GitHub - joohaem/prt-scss: what is SCSS (nomad coders/boostcourse) what is SCSS (nomad coders/boostcourse). Contribute to joohaem/prt-scss development by creating an account on GitHub. github.com CSS Preprocessor란? 별도의 컴파일과정을 통해 CSS의 기능을 확장하고, 반복적인 작업을 자동화 하게 도와 주는 툴 SASS ( Syntactically Awesome Stylesheets ) CSS 호환성 / 다양한 프레임워크 / 많은 실무 사용 사례 문법 // scss, Sassy.. 더보기
[CSS] Grid의 속성 정리 (Grid Garden) https://snupi.tistory.com/148 [CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY) 부모 박스 display: flex; display: `flex`; flex-direction: `row-reverse`, `column`, ... 중심축 수평, 수직축 정하기 flex-wrap: `wrap`, ... 줄바꿈 >>> flex-flow: 단축 속성 justify-content: `center`, `f.. snupi.tistory.com 길이 조정하기 부모 태그에 display: grid; grid-template-rows: {row1의 높이} {row2의 높이} {...} ... grid-template-columns: {column1의 너비} {column2의 너비} .. 더보기
[CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY) https://snupi.tistory.com/154 [CSS] Grid의 속성 정리 (Grid Garden) https://snupi.tistory.com/148 >> flex-flow: 단축 속성 justify-content: `center`, `f.." data-og-host="snupi.tistory.com" data-og-source-url="https://snupi.tistory.com/148" data-og-url="https://snupi... snupi.tistory.com 부모 박스 display: flex; display: `flex`; flex-direction: `row-reverse`, `column`, ... 중심축 수평, 수직축 정하기 flex-wrap: `wrap`, ..... 더보기