CSS6 tailwind 설치~빌드 까지 심심풀이로 퍼블리싱을 할 때 tailwind 를 사용해 보고 싶어서 알아봄 https://tailwindcss.com/docs/installation Installation: Tailwind CLI - Tailwind CSS Documentation for the Tailwind CSS framework. tailwindcss.com 1. npm install tailwindcss => npm 을 이용하여 tailwindcss를 설치한다. 2. npm tailwindcss init => npx를 이용하여 custom을 위한 tailwind.config.js를 생선한다. 3. tailwind는 한번 bulid 하여 라이브러리 css를 생성했다고 해서 모든 소스가 있는 것이 아니다. 참조할 html파일을 t.. 2022. 3. 26. scss 문법 1. 선택자 중첩시의 모습 기존 css 문법 #a { color: red; } #a #b { color: blue; } #a #b #c { color: green; } scss 문법 #a { color:red; #b { color:blue; #c { color:green; } } } 선택자를 여러번 쓸 필요 없이 블록안에 넣어버린다. 2. 변수사용 $red-color:red; #red { color:$red-color; } 자주쓰는 값을 변수에 담아 관리할 수 있다. 3. 상속받기 .main_font{ font-size:10px; color:red; } div { @extend .main_font; width: 10px; } main_font라는 css 속성을 만들고 div에 @extend를 통해 상속받.. 2022. 1. 24. css display,position display block : 한줄에 하나씩 배치 inline : 해당 엘리먼트 내부에 있는 컨텐츠 크기 만큼만 위치 inline-block : 해당 엘리먼트의 크기만큼 위치 flex flex박스 단계의 속성 - flex-direction : 요소들의 방향을 정해줌 [ row(기본값) / row-reverse(오른쪽>왼쪽) / column(위>아래) column-reverse(아래>위) ] - flex-wrap : 요소들이 많아질시 요소들의 처리 [ nowrap(기본값) : 요소들이 많아질시 요소들을 작게 만들어 빼곡하게 처리 / wrap : 요소들이 많아질시 지정된 크기를 바꾸지 않고 다음 줄로 넘어감 / wrap-reverse : wrap의 반대방향으로 ] - flex-flow : 위 directio.. 2022. 1. 14. visual studio code 필수 확장프로그램 제가 사용하는 확장프로그램들 입니다. Material Theme : vscode의 테마를 설정 Material Icon Theme : 파일등 아이콘들의 테마가 변경 Bracket Pair Colorizer : 괄호 중첩등의 상황에서 구별을 쉽게 해줌 Auto Rename Tag : 앞에 태그를 바꿀 시 뒤의 태그를 자동으로 바꿔줌 Auto Close Tag : 앞에 태그를 생성 시 자동으로 닫는 태그 생성 Css Peek : html파일에서 css파일을 금방 찾게해줌 (컨트롤키를 누른 상태로 html요소를 클릭시 정의된 css파일로 이동) html css support : html에서 자동적으로 css관련 태그를 완성시켜줌 Live Server : 새로고침 없이 자동으로 브라우저화면을 업데이트 Color.. 2022. 1. 14. sass(scss) 세팅 평범하게 사용할 수 없었던 아래의 css 문법들을 평범한 css로 바꿔주는 전처리기가 sass입니다. .a { margin:0px; .b { padding:0px; } } $main-font: 18px; nav : $main-font; https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드를 설치후, 터미널에서 npm install sass -g 를 입력해 sass를 설치한다. 설치 끝 ※참고 vscode에선 live sass compiler라고 저장시 즉각적으로 컴파일해 화면에서 확인할 수 있습니다. 2022. 1. 14. css selector 게임 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 2022. 1. 14. 이전 1 다음
