html,css8 그라디언트 예시 background: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1);https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient conic-gradient() - CSS: Cascading Style Sheets | MDNThe conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example .. 2024. 11. 1. 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. html 시멘틱 태그 시멘틱 태그를 쓰는 이유는 를 남발하는 것보단 그 레이아웃의 기능에 따라 등으로 작성을하면 코드를 볼 때 훨씬 직관적으로 보이게 됨 다만 저의 주관적 생각으론 밑의 주소에 있는 태그중 생소한 것들은 저뿐만 아니라, 다른 개발자들에게 오히려 불편함을 줄 것이라 생각해 생소한것들은 사용여부를 한번 생각해봐야 할 필요는 있음 https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org 2022. 1. 14. 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. 이전 1 2 다음
