본문 바로가기

CSS

week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점) # week1 위클리 페이퍼 (CSS 에 대해 설명 (position, display: flex and grid), 시맨틱 (Semantic) 태그를 사용하면 좋은 점)## TOC## CSS (Cascading Style Sheets) 의 Cascading에 대해 설명해 주세요.Cascading: 폭포처럼 떨어지는...폭포가 계단형식으로 떨어지는 것처럼 CSS Selector 가 가장 specific (구체적: id, class, tag or postfix (e.g. :hover, :focus, :visited, :nth-child(3), :first-child, ::before, ::after, ::placeholder) 순으로 금은동 메기듯 더 상위 level) 스타일부터 적용시켜 나가면서 덜 spe.. 더보기
React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css) # React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css)## PH2024-09-12 : First posting.## TOC## React Router### Install (npm install react-router-dom)```npm install react-router-dom```/과 같은 명령어로 우선 package 를 깔자.### 사용방법```import { BrowserRouter, Route, Routes } from 'react-router-dom';import ReactDOM from 'react-dom/client';import './root.css';import.. 더보기
Rotating circles using CSS (Spinner, @keyframes, @-moz-keyframes, @-webkit-keyframes) # Rotating circles using CSS (Spinner, @keyframes, @-moz-keyframes, @-webkit-keyframes)로딩 오래걸릴때 로딩중 알려주는 rotating circles 구현해 봅시다.## PH2023-09-10 : First posting.## TOC## Rotating circles```[.linenums.lang-html]```/## RRAcodepen.io :: Rotate Circle using CSS 더보기
코드잇 풀스택 2기 - Week 2 # 코드잇 풀스택 2기 - Week 2스케쥴표: Obsidian.md: ## PH2024-07-29 : First posting.## TOC## CSS 레이아웃 (Layout)코드잇: ### Color list```[.scrollable.lang-css]:root { /* Black */ --black-0: #000000; --black-1: #1a1a1a; --black-2: #333333; --black-3: #4d4d4d; --black-4: #666666; --black-5: #808080; --black-6: #a6a6a6; --black-7: #cccccc; --black-8: #e6e6e6; --black-9: #ffffff; /* Dark Red */ --dark-r.. 더보기
Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 # Helper div with display: flex; margin, padding 으로 가로 너비 설정/맞추는 법 정리 Responsive width with finitely filling the parent, and I wanna use display: flex; to align elements. 위와 같이 가로폭은 적당한 길이만큼만 확장되고, 나머지 안의 것들은 display: flex; 로 정렬하고 싶은데, 코딩을 해보면서 꽤 헤맸던 부분이라 정리할 겸 포스팅.## PH2024-07-30## TOC## HTML code```[.lang-html] 로그인 ```/와 같이 배치했음. 보면 helper div 로 이 추가된 걸 볼 수 있는데... CSS 는 다음과 같음.`.. 더보기
Vertical center align by CSS in HTML # Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle.. 더보기
HTML CSS composes, and pseudo-element :after, :active:after, and transition # HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions .. 더보기

티스토리툴바