몽땅뚝딱 개발자

cli2랑 cli3의 설정이 이렇게 다를 수가 있을까..? 문법 하나 테스트해본다고 프로젝트 생성하는데 cli3로 시작하니 많은 문제에 직면하였다. 다음엔 실수가 없도록 문제가 되었던 main.js와 router.js를 이 곳에 기록한다....😑 📄 main.js import { createApp } from 'vue'; import App from "./App.vue"; import router from "./router/index.js"; createApp(App).use(router).mount('#app') 📄 router.js import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", name..

◽ 경로 설정하기 아래와 같이 설정하여 파일 import 시 @로 쉽게 경로를 찾을 수 있다. // jsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 조건 주석문 IE 브라우저에서만 다른 CSS 파일을 적용하고자 할 때 쓰는 일종의 문법적인 구문이다. 아래와 같이 사용할 수 있다. 💡 왜 이렇게 사용할까? 크롬에서는 svg 포맷의 이미지는 확대를 하더라도 깨끗하게 나타나지만 IE에서 svg 이미지는 보이지 않아 gif나 jpg로 바꿔주어야 한다. 그리고 IE6과 IE7에서 체크박스의 여백이 서로 다르게 나타나기도 한다. 이처럼 달리 적용해야하는 조건들이 있을 때 이렇게 조건 주석문을 사용하여 CSS를 가져온다. 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Sass에 대한 간단한 소개와 문법은 이 글에서 볼 수 있다. [CSS] Sass(SCSS)란 ◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나이다. - CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다. - CSS 문법과 유사하지만 선택자의 중첩이나 조.. be-a-weapon.tistory.com ◽ Sass 설치 npm i sass npm i sass-loader@10 ◽ Sass 사용하기 아래와 같이 변수를 선언하고 사용할 수 있다. ◽ 변수 분리하기 변수가 많아지는 경우 변수를 따로 모아놓는 파일을 만든다. 📄 src/assets/_variabled.scss /* _variabled.scss */..

◽ 내부 스타일시트 ◽ 외부 스타일시트: ◽ 외부 스타일시트: @import ◽ 인라인 스타일시트 예제 출처 김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ CSS3란? 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. ◽ CSS3의 사용 CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤더 프리픽스(CSS3 Vendor Prefix)를 붙여서 사용한다. .example { background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#f0f)); background: -o-linear-gradient(top, #06f, #f0f); -moz-border-image:url(images/border.png) 27 repeat stretch; } ◽ Prefix의 종류 webkit- 웹킷 방식 브라우저용으로..

◽ 글자에 관련된 속성 속성 풀이 font-family 글꼴 font-size 사이즈 (px, %, *em 등) * 1em은 100%와 같은 뜻으로 부모박스에서 설정한 크기와 같은 크기이다. font-weight 두께 (bold, normal 등) font-style 기울임 font-variant 작은 대문자 표현 (small-caps) line-height 줄 간격 조정 font 위의 속성들을 한 줄로 기술하는 선택자 ◽ 한번에 쓰기 font를 통해 한번에 작성할 수 있으며 순서를 반드시 지켜야하며 글자 크기와 글꼴은 절대 생략할 수 없다. font: [font-weight, font-style, font-variant] [font-size/line-height] [font-family] /* 작성 예..

속성 설명 required ​ 태그안에서 빈값으로 전송(submit) 버튼을 눌렀을 때 경고창을 띄운다. placeholder input 박스안에 미리 입력형식에 대한 힌트를 제공한다. autocomplete value는 on/off 2가지이며, 자동완성 기능 사용여부를 결정한다. list ... 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이 자동완성 기능처럼 나타난다. list 속성의 value와 의 id 속성의 value를 같은 값으로 설정하면 된다. autofocus 페이지 로드 시, 입력필드에 자동으로 커서가 이동된다. disabled, readonly 둘 다 input 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만든다. disabled는 어떤 조건에 만족하지 않았을..

매번 필요해서 고민하던 Tip 작성칸을 그냥 직접 만들었다. 티스토리에서 제공해주는 인용이 가장 비슷한 모양이지만 내가 원하는 모양과 다르기에.. 글 쓸 때 여러모로 활용할 수 있을 것 같다. 문제는 css를 인라인으로 넣어서 나중에 분리해야 할 것 같다. 그리고 설명칸 안에서 엔터를 누르면 태그가 복제되어 줄간격이 맞지않다. HTML모드로 직접 들어가 로 줄바꿈을 해줘야하는 상태라 개선이 필요하다. 쓰다가 줄간격 조정이 많이 불편하면 로 변경해서 적용해봐야겠다. 💡 Tip 여기가 바로 설명란 💡 Tip 설명설명 설명설명 PC에서 봤을 때는 이렇고, 모바일에서 봤을 때는 이렇다.

내가 아는 것보다 더 많이.... HTML5에서 input의 타입을 다양하게 제공해주고 있었다. 내가 CSS로 구현하려 했던 요소들도 이미 구현이 되어있었다. 예를 들어 검색하는 input 맨 뒤에 검색어를 초기화해주는 x 버튼이나 이메일 검사 로직 등...! (미리 알았더라면..🤦🏻) 물론 지원하지않는 브라우저도 있어서 제약이 있지만 유용하게 쓰일 수 있으니 알아두면 좋을 듯 하다. ※ 설명에 이미지는 '크롬'에서 지원하여 동작이 되는 경우에만 넣었습니다. input 타입 설명 search email 파이어폭스에서는 정확한 이메일 형식이 아니면 경고문구를 띄워준다. 아이폰에서는 입력하기 편리한 키패드로 변한다. url 파이어폭스에서는 정확한 url 형식이 아니면 경고문구를 띄워준다. 아이폰에서는 입력하..