몽땅뚝딱 개발자

◽ 글자에 관련된 속성 속성 풀이 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는 어떤 조건에 만족하지 않았을..

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

📌 기본용어 태그(tag): 명령어의 형태가 괄호로 되어있는 것 요소(element): 같이 태그의 시작과 끝 마크업(markup): 요소를 사용하여 웹문서를 작성하는 것 속성(attribute): 요소에서 'href' 같은 것 빈 요소(empty element): 한 쌍의 태그가 아닌 하나의 태그로 되어있는 요소로 대표적으로 br, hr img input area meta link 등이 있다. 📌 마크업 작성 시 주의사항 인라인 요소는 블록 요소 안에 포함시키는 것이 좋다. DTD를 transitional(하위버전 호환)로 선언한 경우에는 통과되지만 strict(엄격한 표준 준수)로 선언한 경우 문법적 오류가 발생한다. 웹 표준 문서 작업 시 은 꼭 마크업 해주어야 한다. 보통 회사나 단체의 상호명(로..

◽ 디렉티브란? v-를 prefix로 갖는다. ◽ 디렉티브의 종류 v-text 요구값: string 엘리먼트의 textContent를 업데이트한다. {{ msg }} v-html 요구값: string 일반 html을 삽입하며, vue 템플릿으로 컴파일되지 않는다. 해당 디렉티브를 사용하여 작성하려는 경우 컴포넌트를 사용하는 해결법으로 다시 생각해보라고 한다. 사용자가 제공한 컨텐츠에서는 절대로 사용하지 말아야 한다. v-show 요구값: any true, false 여부로 엘리먼트의 display 속성을 전환한다. v-if / v-else-if / v-else 요구값: any 표현식 값의 true, false에 따라 엘리먼트를 조건부로 렌더링한다. 단, v-else의 경우 표현식이 필요없다. A B C ..

nth-child(n)는 부모안에 모든 요소 중 n번째 요소를 선택하는 선택자이다. 처음에 nth-child를 사용했을 때 자꾸 순서가 밀려서 짜증이 났던 기억이 있다. 같은 선택자를 알아서 선택해주는 줄 알았지만.. 그냥 안에 있는 모든 요소를 처음부터 세는 것이었다. 이렇게 나열된 html의 경우에 세번째 라는 명확한 위치가 주어지면 3번째 div에 적용된다. // html 1 2 3 // css .main:nth-child(3) { background-color: red; } 하지만 갑자기 다른 요소가 중간에 있으면 :nth-child가 읽는 index가 밀리게 되어 의도한 위치에 마크업을 적용할 수 없다. // html 1 갑툭튀 2 3 따라서 이런 경우 [선택자:nth-of-type(num)]을..

◽ 개요 의 id 속성과 의 for 속성의 value를 같은 값으로 연결하면, 클릭 시 체크박스가 "clicked" 상태가 된다. 아래 코드와 같다. 클릭 나의 경우 아래와 같이 이미지를 클릭할 때 해당 이미지의 체크박스가 클릭되도록 만들었다. 그리고 이미지를 클릭하면 태그에 노란색 선을 추가해서 클릭한 효과를 주도록 했다. ◽ 적용 순서 1. v-model로 데이터를 연결하고, 클릭 시 해당 체크박스의 value는 prodArr에 차례대로 들어간다. 2. prodArr을 검사하는 ‘checked’ 메소드를 통해 prodArr에 해당 value가 있는지 검사한다. 3. :class=“checked(item.name)”에서 return 값에 따라 checked 속성이 동적으로 할당된다. 📄 HTML // ..

자바스크립트의 경우 클릭한 값을 찾을 때 for, foreach를 사용하여 엘리먼트를 찾아야한다. Vue는 v-model을 사용하여 클릭 시 data에 바로 값이 바인딩되기 때문에 굉장히 편리하게 찾을 수 있다. 값 할당하기 클릭한 input 엘리먼트의 value가 data()에 선언된 'prodArr'이라는 배열에 삽입된다. ... ... 기본값 설정 v-model을 사용하는 경우 "checked"를 사용할 수 없다. 그래서 기본값을 세팅할 때는 v-model에 연결된 데이터에 input의 value를 미리 넣어두면 체크된 상태가 된다. ◽ radio, select의 경우 음료 커피 주소 티 ◽ checkbox의 경우 케이크 레드벨벳 케이크 당근 케이크 고구마 케이크 참고 폼 입력 바인딩 — Vue.j..

기본값이나 전영역의 컴포넌트, 페이지에서 공통적으로 사용하는 값일 경우 json 파일에서 불러왔다. 예를 들어 상품의 상세페이지 구현 시, 상품유형코드(ex. 'N', 'O')에 따라 단어(ex. '니트', '아우터')만 달리 출력하는 것이다. 당시 lodash도, Vue.js도, ES6 문법도 처음 사용했던 나는 json 파일과 _.filter()를 사용하여 알아서 착착 뿌려지는 값들을 보며 '정말..! 편리하다..! vue...! 정말 개발 친화적이다......!'하고 놀라고 즐거워했던 기억이 난다. 이 방식의 개인적인 장점은 공통파일에 한번에 모아놓으니 한번에 파악하기도 쉽고, 값을 변경할 때도 따로 API를 건드는 일 없이 json만 수정하면 됐기때문에 유지보수하기도 편하다는 것이다. json 파..

다른 페이지를 가거나 뒤로 가기를 했을 때도 입력 정보를 유지하기위해 Local Storage를 사용했다. 항상 쿠키를 사용해서 구현했다가 이번엔 다르게.... ◽ 로컬스토리지와 쿠키의 차이는 뭘까? Cookie Local Storage 용량 쿠키 하나 당 최대 4KB 최대 5MB 저장유형 문자열만 저장 가능 - Primitives Type(원시 타입) ex) Boolean, number, String, null, undefined 등) - Object 만료기준 - 만료기한이 있는 키-값 저장소이다. - 자바스크립트 코드를 통해 삭제해야한다. - 자동으로 삭제되지 않는다. - 캐시를 삭제하는 경우 삭제된다. 저장되는 위치 - 웹브라우저에 따라 다르다. - 내 컴퓨터에 물리적 위치에 저장된다. ex) C:..