본문 바로가기

css4

CSS로 요소 정중앙에 배치하는 4가지 방법 요소 정중앙 배치하는 방법은 생각보다 다양하다. 나는 주로 display :flex를 많이 쓴다. 정중앙 뿐만아니라 정렬도 할 수 있어서 편한 것도 있고 처음 flex를 배울땐 너무 어려워서 계속 반복하면서 더 써보려고 하다보니 이제는 오히려 더 찾게 되는 것 같다. 그래서 오늘은 요소를 정중앙에 배치하는 방법을 알아보려고 한다. 상황에 따라 원하는 것을 골라 쓰면 될 듯 하다. display: flex; justify-content: center align-items: center; height: 100vh; display: grid; place-items: center; height: 100vh; position: relative; height: 100vh; margin: 0 auto; 2023. 6. 22.
CSS 파일 import 순서 알아보기 1. reset.css 브라우저에 기본적으로 적용되어있는 css를 reset해주는 내용은 구글에 검색해보면 나오는 내용을 복붙해주면 된다. 기본적으로 적용되어 있는 p 태그의 margin 등을 지워줘 내가 원하는 스타일을 적용했을 때 문제 없이 적용된다. 이때 문제라는 것은 내가 상상하던 스타일대로 만들어져야하는데 기본 css로 다르게 구현되는 것을 말한다. 나는 보통 이 사이트에서 많이 긁어오는 편이다. 귀찮을까봐 가져왔다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .. 2023. 6. 22.
CSS를 SASS의 한 종류인 Sass로 바꿔보기 기존에는 css로 레이아웃을 짜주었는데 css는 문법이 어려워 여러기능을 사용할 때 어려움이 있어 scss라는 문법이 나왔고 이 문법을 바꿔주기 위해 scss라는 파일 전처리기를 이용해 브라우저에게 css로 변환하여 보여준다. 이번에는 기존에 작업하던것에 scss를 적용해보려고 한다. [과제 2] 기존의 css 파일을 scss로 변경하고 그에 맞게 수정하기 variables.scss 파일과 mixin.scss 파일을 생성해주세요 variables.scss에 black, red, green의 색을 담는 변수를 만들어주세요 mixin.scss에는 두 개의 mixin을 만들어주세요 (flexCenter : 가운데 정렬, textStyle : font의 size와 weight를 인자로 넣으면 적용) Assign.. 2023. 6. 15.
Console.dir이 뭘까? https://developer.mozilla.org/en-US/docs/Web/API/console/dir console: dir() method - Web APIs | MDN The method console.dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. developer.mozilla.org 먼저 공식문서를 첨부했다. 그 이후는 내가 이해한 내용을 쉽게 풀어내려고 한다... 2023. 6. 14.

티스토리툴바