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. DNS란? 우리는 보통 네이버에 들어갈때 - www.naver.com - naver.com 등을 입력하여 들어갑니다. 우리가 쉽게 기억하고 접근하는 위의 주소들이 '도메인' 임 네이버도 실은 1763.6x3.x2 같은 ip주소를 이용하지만 도메인이란 걸 이용해 www.naver.com 으로 바꿔 쉽게 기억하고 사용함 이와 같은 일이 가능한게 바로 DNS 덕분 DNS(domain name server) 서버의 종류 - Root DNS Server : ICANN 이 직접 관리하는 최상위 서버이며 TLD DNS Server의 정보를 가지고 있음 (com,org,kr) - TLD DNS Server : 각 국가코드 등 최상위 도메인의 정보를 가지고 있음 (google, naver) 네이버로 예시를 든 DNS 동작순서 1... 2022. 1. 24. [vue] provide / inject 컴포넌트 계층 구조가 굵어 여러 단계를 거쳐 props를 해야 하는 경우 매우 귀찮고 복잡해 질 수 있다. 그럴 때 provide / inject 를 사용 export default { name: 'Home', components: { About }, provide () { return { provideDate: [1, 2, 3, 4, 5] } } } provide로 데이터를 뿌리고 export default { name: 'Children', inject: ['provideDate'] } inject로 받아온다. 다만 위와 같이 사용했을 시 어느 부모컴퍼넌트에서 받아온 값인지 찾기 힘들 수 있다. 그래서 inject의 형태를 변경해 조금 더 상세한 설정이 가능함 //부모 //자식 {{ injectDat.. 2022. 1. 19. [vue] v-slot 컴포넌트의 디자인을 바로 아래에 있는 컴퍼넌트에 전달해 재활용할 수 있는 기능이다. 부모 컴퍼넌트에 v-slot (#title) 로 정의 후 제목입니다 export default { name: 'Home', components: { About }, } 자식 컴퍼넌트에 를 이용해여 재활용한다 about 이라는 자식컴퍼넌트에선 로 감싸진 화면을 손쉽게 재활용 가능 동적으로 slot 할당하기 slotNum 데이터를 이용해 slot id를 동적으로 부여했다. 버튼을 클릭할때마다 slot id가 1,2를 왕복하며 움직인다. //부모 컴퍼넌트 {{slotNum}} //자식컴퍼넌트 1번쨰 슬롯 슬롯바깥 slotNum이 1일때에는 "슬롯바깥"이 출력되고 slotNum이 2일때에는 "1번째 슬롯"과 "슬롯바깥"이 출력된.. 2022. 1. 19. [vue] props props는 부모컴퍼넌트에서 자식 컴퍼넌트로 값을 전달할떄 사용함 단순 값 전달뿐 아니라 아래의 옵션 설정도 가능하다. props 각종 옵션들 - required 필수여부 - default 기본 값 - validator 유효성 검사 함수 #type props: { title: { type: [String,Number] //여러가지 타입 허용 } } #required props: { title: { type: [String,Number], //여러가지 타입 허용 required: true //필수로 전달 받아야함 } } #default props: { title: { type: [String,Number], //여러가지 타입 허용 default: 100 //부모 컴퍼넌트에서 보내주는 값이 없을시 기본값으로.. 2022. 1. 19. [vue] vue 키 이벤트 1차적으로 up, down, press를 입력한 후 추가로 enter, left, right, esc 등 조합하여 사용할 수 있다 data () { return { name: '' } }, methods: { printEvent (val) { console.log(val) } } 2022. 1. 19. 이전 1 ··· 9 10 11 12 13 14 15 다음
