본문 바로가기

분류 전체보기

 (596)
[ HTML/CSS ] CSS 쓸만한 기본 공식 1. 이미지 가운데 정렬 공식 { display: block; margin-left: auto; margin-right: auto; } 2. z-index 공중에 떠있는 애들 중 누가 앞에 나올지 결정 z-index가 높을수록 앞에 옴 3. width는 padding의 영향을 안받음. width는 content 영역만 다루기 때문. padding은 content 외곽 영역임. padding, border 포함한 width를 지정하고 싶으면 box-sizing: border-box; 속성을 추가해주어야 함. 기본값은 box-sizing: content-box; 4. 좀 편하게 CSS 작업하려면 처음부터 div { box-sizing: border-box; } body { margin: 0px; } // 추..
[ HTML/CSS ] HTML 기본 코딩 상식 1. 글만 적지 말고 태그 등으로 감싸라 태그 이외에도 각자의 내용에 맞는 태그를 사용해라. HTML 문서의 목적은 내용의 "구조"를 표현하기 위함이니까. 요런걸 잘 지키는 걸 "웹 표준을 잘 지킨다"라고 말함. 2. HTML 꾸밀 때는 태그의 style 속성을 사용함 style 내용이 길어지면 css 파일로 따로 빼는 게 좋음. css 파일에 클래스 생성하고 css 파일 불러올 땐 아래처럼 링크 걸면 됨. // css 파일 .content { text-align: center; } 3. 안에서도 글씨 그냥 쓰지 말고 태그로 감싸는 게 좋음 4. body 태그 기본 마진이 있음 없애려면
[ HTML/CSS ] HTML 개발 시 쓸만한 Extension 1. VSCode 사용할 때 LiveServer Extension 설치해두면 HTML 미리보기가 되서 개발하기 편함
[ HTML/CSS ] HTML 기본 템플릿 2. 모든 HTML 파일은 아래의 기본 템플릿을 써놓고 시작해야 함
[ HTML/CSS ] HTML이란? 1. HTML은 "자료들이 어떻게 생겼나 구조를 표현하기 위한 언어" 임
Vue.js Composition API 1. Composition API 관련된 코드들을 찢어놓지 않고 개발하는 방법 지금까지 했던 문법은 Options API 2. Composition API 쓰면 관련있는 코드를 한 곳에 모을 수 있음 3. 컴포넌트마다 Options API, Composition API 선택 가능. 적절히 쓰면 됨 4. Composition API 사용법 setup()은 created() hook과 비슷한 역할 // 시작 import { ref } from 'vue'; export default { setup() { let follower = ref([]); onMounted(() => { axios.get("/follower.json").then((payload) => { follower.value = payload.d..
Vue.js 크롬 extension 1. vue-devtools 크롬 Extension을 설치하면 디버깅 좀 편해짐 https://chrome.google.com/webstore/search/vue-devtools 가장 최근 버전으로 다운받아야 함 근데 vue cli4 에서 vue3 로 create app 한 경우 2021.11.25 기준 vue-devtools beta 버전을 사용해야 동작함
Vue.js 웹앱 - PWA (Progressive Web App) 1. PWA (Progressive Web App) 웹사이트를 그대로 앱으로 사용할 순 없을까? 에서 시작 PWA 앱처럼 보이지만 실은 웹사이트임 2. PWA가 되려면 필요한 2가지 1) manifest.json 2) service-worker.js 3. PWA 기능을 제공하는 라이브러리 -> pwa vue add pwa npm run build -> .vue 파일을 html파일로 바꿈, 그래야 브라우저에서 도니까. 4. manifest.json 파일은 웹사이트에 대한 정보를 알려줌 5. service-worker.js 파일은 실제 인터넷이 없을 때에도 앱을 사용 가능하도록 해주는 파일임 1) 웹페이지 구동에 필요한 html css js img를 하드에 저장해놓음 2) 앱 구동시 local에 이미 파일이..

티스토리툴바