Tailwind CSS 설치 방법 1 ~ 환경 구축 편 ~
를 프로젝트에서 이용할 기회가 늘어나서 프로젝트에 도입할 때의 순서를 정리했습니다. 먼저 node를 넣자. 적절한 프로젝트를 만들고 package.json을 만듭니다. Tailwind CSS를 소개합니다. 에 써 있는 대로 가고 싶습니다. 다양한 설치 방법이 있지만 TailwindCSS를 PostCSS 플러그인으로 설치하는 방법이 문서에서 권장되므로 PostCSS 플러그인으로 설치합니다. 위...
tailwindcss소개초보자설치CSS2022-10 last update
9 minutes reading
Jade로 만드는 맞춤 태그 입문
예를 들어, 아래와 같이 표시되는 rating 태그를 만들고 싶은 경우. HTML에는 <input type="rating" /> 도 <ratings /> 태그도 없기 때문에, 로 자작합니다. 와 같이 작성하면 컴파일 후에 다음과 같은 HTML이 나옵니다. HTMLimg 태그와 같은 빈 요소의 경우는 이렇게 씁니다. 실제로 이런 일도 할 수 있습니다. 앞에 +를 붙이면 함수 (mixin)를 호...
자바스크립트CSSWebComponentsgruntJade2022-10 last update
7 minutes reading
[Angular] Angular Material 사용을 위한 SCSS 입문
Angular Material에서 테마를 만들고 싶었습니다. SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다. 공식 사이트 SCSS의 문법은 CSS를 확장한 형태로 되어 있다. CSS 그대로도 SCSS로 해석됩니다. SCSS에서는 변수를 선언하고 참조할 수 있습니다. 선언과 참조 방법 머리에 $를 붙여 값과 :로 구분하십시오. 변수의 범위는 선언을 포함하는 {} 내부로 제한...
CSSAngularscssMaterialDesign2022-10 last update
7 minutes reading
PostCSS 입문
PostCSS 자체는 CSS 파서의 기능 만 제공합니다 플러그인을 사용하여 CSS를 처리하거나 구문 검사를 수행합니다. 가장 유명한 PostCSS 플러그인. 지정된 브라우저 대응에 필요한 벤더 프리픽스의 부여를 자동적으로 행할 수 있다. Flex Box의 기술 방법에 따라서는, 브라우저의 버그에 의해 잘 반영되지 않는 경우가 있기 때문에, 브라우저 버그를 방지하는 설명으로 변환 CSS를 압축...
CSSpostcssAutoprefixer프런트 엔드2022-10 last update
6 minutes reading
Tailwind CSS 입문해 보았다 for Vue.js
이 기사는? 만나서 반가워요! 에비스에서 엔지니어를하고있는 Zak입니다. 최근 자주 Tailwind CSS를 듣게 되었습니다! 아무래도 CSS를 쓰는 양이 줄어들어 꽤 편해지는 걸까 🤔 개인적으로 CSS를 쓰는 것은 하고 싶지 않은 것 랭킹 3위에 들어갈 정도로 싫어서 흥미 본위로 사용해 보았습니다! 간단하게 셋업할 수 있었으므로 이번은 Vue3계에서 Tailwind CSS를 이용할 때까지의...
CSSVue.jstailwindcss2022-10 last update
14 minutes reading
아직 CSS를 사용하고 있습니까? SCSS(Sass)를 사용해 보자! 【입문편】
HTML이나 CSS를 조금이라도 걸린 분이라면 알겠다고 생각합니다만, CSS를 쓰고 있을 때 중첩으로 쓸 수 있을까? 변경시 여러 부분을 변경하는 것이 번거롭습니다 ... 사용하고 싶은 곳이있다 코멘트를/**/로 둘러싸는 것이 귀찮은 ... 이런 생각을 한 적이 없습니까? 실은 이것들이 Sass(SCSS)로 간단하게 해결하는 것입니다! Sass는 Syntactically Awesome Sty...
SassCSSscss2022-10 last update
5 minutes reading
javascript를 사용하여 간단한 계산기를 만드는 part3 입문자 용
지난번 만든 사칙연산에 더해 실제로 있는 것 같은 계산기를 만들고 싶어졌다. part2의 「향후의 구상」은, 일단 잊어 계산기의 외형을 만든다 0~9까지의 숫자 버튼으로 텍스트 입력을 할 수 있도록 한다 사칙 연산을 할 수 있도록 한다. (미 구현) 위의 텍스트 입력란에 숫자 버튼으로 입력하는 곳까지 할 수 있었다. HTML caluculate.html CSS caluculate.css 자바...
HTMLCSS자바스크립트프로그래밍2022-10 last update
14 minutes reading
javascript를 사용하여 간단한 계산기를 만드는 part2 입문자 용
전회의 기사로 만든 덧셈만의 계산기에 뺄셈 기능도 붙이고 싶었기 때문에. 마지막 덧셈과 비슷한 프로그램으로 빼기 기능 만들기 덧셈·뺄셈을 바꿀 수 있는 버튼을 배치 (이 버튼을 만드는데 꽤 시행착오해버렸다) 각각이 active중에만 각각의 계산을 실시할 수 있는 기능(미실장) 더하기 버튼이 active 뺄셈 버튼이 활성 caluculate.html caluculate.css caluculat...
HTMLCSS자바스크립트프로그래밍2022-10 last update
16 minutes reading
Flask 입문 2: 데이터 프레임을 스타일시트로 멋지게 표시
Mac, 로컬 왜? 이 스타일 시트가 상정하는 구조 (예 : 아래 그림) pd.DataFrame.to_html()에서 내뿜는 구조와 다르기 때문 매우 알기 쉬운 것이 있었다. 진짜로 여기에 모두 써 있기 때문에 코드 게재 등은 할애 덧붙여서 스타일 시트를 변경했는데 반영되지 않지? 라고 생각하면 127.0.0.1:5000/static/style.css 변경 사항을 확인할 수 있을 때까지 여러...
FlaskHTMLpandas파이썬CSS2022-10 last update
10 minutes reading
【초보자 필견】Firebase의 설치 방법과 사이트 공개(MacOS편)
Firebase는 GOOGLE이 제공하는 빠르고 고품질의 모바일 앱을 개발할 수 있는 플랫폼으로 개발에 도움이 되는 수많은 기능이 준비되어 있다. 원래 Firebase라는 기업이 시작한 서비스였지만 천하의 Google에 인수되어 GCP에 가입한 것 같습니다. 적절한 파일 (Html.css 등) Google 계정 Node.JS (Ver.12.2.0) Npm (Ver.6.9.0) 적용 가능한 파...
CSSFirebaseHTML자바스크립트2022-10 last update
7 minutes reading
도트 인스톨씨의 동영상을 몇개인가 시청해, 오리지날로 만들어 보았던 「라스트 바바 빼기」
나는 이번 여름 휴가이기 때문에 많은 시간을 확보 할 수있는 상황에 있습니다. 그래서 HTML, CSS, JavaScript를 제대로 공부하려고 생각했습니다. 제가 공부하는 교재로 이용한 것이 입니다. 그리고 이번에 어느 정도 이해할 수 있고 오리지널로 게임을 만들 수 있었기 때문에 기사로했습니다. 오랜만의 투고가 됩니다만, 잘 부탁드립니다. [구판] 처음 HTML [구판] 처음 CSS 【구...
HTML도트 설치자바스크립트HTML5CSS2022-10 last update
18 minutes reading
비프런트엔드 엔지니어를 위한 CSS 설계 입문(OOCSS)
CSS를 쓰고 있어, 설계 방침을 모르는, 파탄해!important를 붙일 수밖에 없게 되어 버리는 일이 있었기 때문에, CSS 설계의 1개의 사고방식인 OOCSS에 대해서 정리해 보았습니다. 이 기사에서는 객체 지향 CSS 상세도 에 대해서는 설명하지 않습니다. 객체 지향 CSS입니다. 같은 코드를 두 번 쓰지 않는다 어디에 써도 같은 행동을 한다 주변을 목적으로 한 CSS의 설계 개념입니...
CSSOOCSSCSS3CSS 설계HTML2022-10 last update
6 minutes reading
30대부터의 프로그래밍 공부 4일째【HTML/CSS입문편】
수정 요청과 지적 댓글을 주셔서 감사합니다. 솔직히 「아무도 보고 있지 않아!」라고 하는 노리로 자신용 복습 메모 겸 학습 의욕 계속을 위한 루틴으로서 시작한 것이었기 때문에 놀랐습니다. 원래 쓰는 법을 별로 알 수 없기 때문에 보기 흉하게 되어 버리는 일도 많이 있을까는 생각합니다만, 신경이 쓰이는 점이 있으면 지도 받을 수 있으면 다행입니다. 계속 Udemy 강좌입니다. 더 많은 시간을 ...
비망록CSSHTML2022-10 last update
6 minutes reading