melius

1. 선택자 #id-name ... id명이 id-name인 요소 .class-name ... class명이 class-name인 요소 div.class-name ... div 요소이면서, class명이 class-name인 요소 (붙혀쓰기) div .class-name ... div 요소의 자손이면서, class명이 class-name인 요소 (빈칸) div>.class-name ... div 요소의 자식이면서, class명이 class-name인 요소 (Greater-than sign) CSS Combinator .parent p ... 모든 자손 p요소 .parent>p ... 모든 자식 p요소 .sibling+p ... 첫번째 동생 p요소 .sibling~p ... 모든 동생 p요소 CSS Att..

HTML/CSS는 대/소문자 구분이 없으나, 소문자만 사용한다. HTML/CSS 설계시, 각 HTML 요소(Element)의 배치를 확인하기 위해서 테두리를 표시하는 것이 유용하다. 모든 요소 마진, 패딩 초기화도 함께 적용한다. * { border: 1px solid red; margin: 0; padding: 0; } HTML 요소는 크게 블록레벨(Block-level) 요소와 인라인(Inline) 요소로 구분된다. https://melius.tistory.com/12 1. Block-level Element hn, p, hr, blockquote, pre ... 블록레벨 요소를 자식으로 가질 수 없다. th, td ... margin이 없고, padding만 있다. tr ... border와 bac..

1. online code editor https://codepen.io/ https://jsfiddle.net/ 2. HTML Entity List https://dev.w3.org/html5/html-author/charref 3. 웹개발 학습 사이트 https://www.w3schools.com/ 4. HTML 검사기 http://validator.w3.org/ 5. 브라우저 HTML5 기능확인 사이트 https://html5test.com/ https://caniuse.com/

highlight.js https://highlightjs.org/ https://aossuper8.tistory.com/121 styles폴더에서 원하는 css 파일(your_style.css)을 선택 스킨 편집 > html 편집 > 파일업로드에서 highlight.pack.js 파일과 your_style.css 파일을 업로드 HTML head 태그에 추가 let num = 1; console.log(num); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ` class="${cls}"`; } catch (e) { /* handle..

1. UX 사용자가 서비스를 이용하는 과정에서 겪게 되는 경험을 말하다. 서비스 이용시에 사용자는 쉽게 느껴야 하며, 더 나아가 즐거워야 한다. 사용방법이 어려우면 불쾌함을 줄 수도 있다. 같은 서비스라도 사용자의 특성에 따라 다른 경험을 하게 된다. 서비스 설계에 있어서 사용자 특성을 파악하는 것이 매우 중요하다. 2. UI 사용자와 서비스사이에서 의사소통이 이루어지도록 하는 매개체이다. 3. Double Diamond (design process model) Discover > Define > Develop > Deliver 3.1 문제발견 1) 시장분석 관련분야를 중심으로 범위 최소화 철저히 신뢰성있는 데이터와 통계기법 기반 2) 경쟁서비스 분석 경쟁서비스의 공통기능과 차별화 기능 식별 및 개선점 ..