Here and Now. ๐งโโ๏ธ
ํ๊ทธ ๋ชฉ๋ก
- ์ ์ฒด๋ณด๊ธฐ(45)
- React(12)
- JavaScript(5)
- Firebase(3)
- CSS(3)
- js(3)
- todo(2)
- JSON Server(2)
- grid(2)
- Fetch(2)
- router(2)
- GET(2)
- POST(2)
- JSDoc(1)
- function(1)
- Event(1)
- ์ ๊ทํํ์(1)
- scss(1)
- ๋ฐฐ์ด(1)
- mui(1)
- Root(1)
- semantic tag(1)
- badge(1)
- Internalization(1)
- promise(1)
- API(1)
- npm(1)
- slide(1)
- ํ์๊ธฐํจ๊ณผ(1)
- ์์ธ์ ๊ณต๊ณต API(1)
- http(1)
- ๋ฆฌ์กํธ(1)
- coords(1)
- vueํ๋ก์ ํธ๊ตฌ์กฐ(1)
- ๋ฐ์ํ(1)
- responsive(1)
- realtime(1)
- yarn(1)
- FE interview(1)
- XMLHTTPRequest(1)
- Regularexpression(1)
- Accordion(1)
- ์๋ฏธ์๋ ํ๊ทธ(1)
- ์คํฌ๋ฆฐ๋ฆฌ๋(1)
- ๋ฆฌ์กํธ ๋ผ์ฐํฐ(1)
- CSS์ ์ฉ์์(1)
- await(1)
- useEffect(1)
- useState(1)
- img(1)
- Fetch API(1)
- redux-toolkit-thunk(1)
- async(1)
- vuecli(1)
- Intl(1)
- method(1)
- layout(1)
- slideNavigation(1)
- ์ค๋ฅํด๊ฒฐ(1)
- mailing(1)
- vuejs(1)
- json(1)
- redux-toolkit(1)
- 64bit(1)
- thunk(1)
- calc()(1)
- put(1)
- delete(1)
- context(1)
- RealtimeDB(1)
- State(1)
- useMemo(1)
- useReducer(1)
- useRef(1)
- this(1)
- CSS์ ์ฉ๋ฐฉ๋ฒ(1)
- ๋ถ๋์์์ (1)
- ์นด์นด์ค ์ง๋ API(1)
- Sass(1)
- html(1)
- useCallback(1)
- ํ์ (1)
- typewriter-effect(1)
- ๊ธฐ๋ณธ๊ตฌ์กฐ์ค๊ณ(1)
- Markdown(1)
- array(1)
- v5(1)
- react typescript(1)
- v6(1)
- vue์คํ๊ตฌ์กฐ(1)
- ๊ฒ์์์ง์ต์ ํ(1)
- seo(1)
- InternalizationAPI(1)
- vanillajs(1)
- Map(1)
- CRUD(1)
- redux(1)
- CallbackHell(1)
- area(1)
- react router(1)
- vscode(1)
- authentication(1)
- git(1)
- typescript(1)
- ์ฃผ์(1)
- Comment(1)
- Auth(1)
์ ์ฒด๋ณด๊ธฐ (45)React(12)JavaScript(5)Firebase(3)CSS(3)js(3)todo(2)JSON Server(2)grid(2)Fetch(2)router(2)GET(2)POST(2)JSDoc(1)function(1)Event(1)์ ๊ทํํ์(1)scss(1)๋ฐฐ์ด(1)mui(1)Root(1)semantic tag(1)badge(1)Internalization(1)promise(1)API(1)npm(1)slide(1)ํ์๊ธฐํจ๊ณผ(1)์์ธ์ ๊ณต๊ณต API(1)http(1)๋ฆฌ์กํธ(1)coords(1)vueํ๋ก์ ํธ๊ตฌ์กฐ(1)๋ฐ์ํ(1)responsive(1)realtime(1)yarn(1)FE interview(1)XMLHTTPRequest(1)Regularexpression(1)Accordion(1)์๋ฏธ์๋ ํ๊ทธ(1)์คํฌ๋ฆฐ๋ฆฌ๋(1)๋ฆฌ์กํธ ๋ผ์ฐํฐ(1)CSS์ ์ฉ์์(1)await(1)useEffect(1)useState(1)img(1)Fetch API(1)redux-toolkit-thunk(1)async(1)vuecli(1)Intl(1)method(1)layout(1)slideNavigation(1)์ค๋ฅํด๊ฒฐ(1)mailing(1)vuejs(1)json(1)redux-toolkit(1)64bit(1)thunk(1)calc()(1)put(1)delete(1)context(1)RealtimeDB(1)State(1)useMemo(1)useReducer(1)useRef(1)this(1)CSS์ ์ฉ๋ฐฉ๋ฒ(1)๋ถ๋์์์ (1)์นด์นด์ค ์ง๋ API(1)Sass(1)html(1)useCallback(1)ํ์
(1)typewriter-effect(1)๊ธฐ๋ณธ๊ตฌ์กฐ์ค๊ณ(1)Markdown(1)array(1)v5(1)react typescript(1)v6(1)vue์คํ๊ตฌ์กฐ(1)๊ฒ์์์ง์ต์ ํ(1)seo(1)InternalizationAPI(1)vanillajs(1)Map(1)CRUD(1)redux(1)CallbackHell(1)area(1)react router(1)vscode(1)authentication(1)git(1)typescript(1)์ฃผ์(1)Comment(1)Auth(1)
[SeSAC Front-end] CSS Grid๋ก ๋ฐ์ํ Layout ๋ง๋ค๊ธฐ
๋ธ๋ผ์ฐ์ ์ฌ์ด์ฆ์ ๋ฐ๋ผ์ ๋ฐ์ํ์ผ๋ก ์น ํ์ด์ง ๋ ์ด์์์ด ๋ณ๊ฒฝ๋๋๋ก ํ๋๊ฒ์ด ์ด๋ฒ ์ฅ์ ๋ชฉํ์ ๋๋ค.flex๋ฅผ ์ด์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ ๋ ์ด์์์ ๋ง๋ค ์ ์์ง๋ง, ์ด๋ฒ์๋ Grid๋ฅผ ์ด์ฉํด๋ณด๊ฒ ์ต๋๋ค.Live Demo ๐ ์ฐ๋ฆฌ๊ฐ ์์ ํ ๋ ์ด์์์ ๋ฏธ๋ฆฌ ํ์ธํ ์ ์์ต๋๋ค.
2022๋
11์ 15์ผ
ยท
0๊ฐ์ ๋๊ธยท
0
[SeSAC Front-end] CSS grid๋ฅผ ์ด์ฉํ ์น ํ์ด์ง ๊ตฌ์กฐ ๋ง๋ค๊ธฐ
์ด๋ฒ ์ฅ์์๋ CSS grid์ ๋ํด์ ๊ฐ๋จํ๊ฒ ์์๋ณด๊ณ , CSS Grid(MDN)๋ฅผ ์ด์ฉํด์ ์๋์ ์น ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ๋ณด๊ฒ ์ต๋๋ค.Grid๋ ๊ฒฉ์, ๋ฐ๋ํ์ ์๋ฏธํฉ๋๋ค.Grid Layout์ด๋ ์น ์ฌ์ดํธ๋ฅผ ์ฌ๋ฌ๊ฐ์ ์ด(column)๋ก ๋๋ ํ ๋ฉ๋ด๋ ๋ณธ๋ฌธ, ์ด๋ฏธ
2022๋
10์ 28์ผ
ยท
0๊ฐ์ ๋๊ธยท
0