본문 바로가기

Knowledge Wiki

(169)
[ HTML/CSS ] display: block 1. display: block; 속성은 "가로행을 전부 차지하게 해주셈"을 뜻함
[ HTML/CSS ] CSS 선택자 (selector) 1. css 파일에서 사용할 수 있는 선택자(Selector)는 3개 1) class 2) id 3) tag 2. 스타일이 중복될 경우 적용 우선 순위 : 태그에 직접 입력 > id > class > tag
[ 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..