코딩 노트

정리 반응형 웹이란 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다. body 태그 아래에 script를 작성하는 것을 레이지로딩이라고 한다. 로딩 시간을 줄이는 방법이다. 비주얼스튜디오에서 f1을 누르고 format document를 누르면 자동 정렬이 된다. 07.layout.html 생성 //전체적인 테마 색깔 KH정보교육원 //왼쪽 상단에 나오는 로고 //이 버튼을 누르면 메뉴를 아래로 떨어트려라 //margin 왼쪽을 auto로 //실제메뉴 Home //active는 활성화 클래스이다.(어디위치인지 보여주는) (current) Features Pricing About //드롭다운 메뉴 Dropdown Action Another ..

responsive.html 파일 생성 DOCTYPE html> 반응형 CSS 디자인 body { height:1000px; background-color: #ffcccc; } h1 { font-size: 32px; } /* 폭을 이용한 조건부 디자인 */ @media screen and (max-width:860px) { body { background-color: #ea8685; } h1 { font-size: 24px; } } @media screen and (max-width:660px) { body { background-color: #f7d794; } h1 { font-size: 24px; } } KH 정보교육원 풀스택 개발자 양성과정 디자인 수업자료 00.template.html 생성 doc..

리셋: 원래 태그를 개조하는 작업 시맨틱 태그를 저장하기 위해 reset.css 생성 /* 시맨틱 태그*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,..

float는 내부항목에 하는 것, flex는 영역에 하는 것(자기 자신) 31.flex.html DOCTYPE html> flex 배치 /* flexible 레이아웃 스타일 - 영역은 display가 flex 이거나 inline-flex 여야 한다 - 영역에 flex-direction을 설정하면 내용의 정렬 방식을 정할 수 있다 - 영역에 flex-wrap을 설정하면 내용의 줄 바꿈 허용을 정할 수 있다 - 영역에 justify-content를 설정하면 내용의 좌우 정렬을 정할 수 있다 - 영역에 align-items를 설정하면 내용의 상하 정렬을 정할 수 있다 - 영역 내부에 flex-grow를 설정하면 비어있는 공간의 점유비율을 정할 수 있다 */ .flex-container { display: fl..

28.toggle.html DOCTYPE html> 토글 디자인 input[name=agree] + label { color: red; transition: color 0.1s linear; } input[name=agree]:checked + label { color: blue; } #ckbox { /* 체크박스를 가리기 */ display: none; } /* 사이드바 디자인 */ .sidebar { position: fixed; top:0; bottom:0; width:200px; z-index:99999; background-color: #ffeaa7; /* transition 속성으로 특정 항목의 변화를 원하는 형태로 구현할 수 있다. - 사용법 transition : 항목 시간 타이밍함수; *..

리스트를 활용한 메뉴 구현 2차메뉴 구현 27.menu-2.html DOCTYPE html> 메뉴 만들기 /* 메뉴는 계층형 구조를 가지는 가장 대표적인 도구 list tag를 이용하여 구현(ol, ul, li) 1차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 1차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 - 3차메뉴 - 3차메뉴 - 3차메뉴 - 2차메뉴 ul.menu - li - a - ul - li - a - li - a - li - a - li - a - ul - li - a - li - a - li - a */ /* 디자인 초기화 */ ul.menu, ul.menu ul { list-style: none; margin: 0p..

CDN 사용하기 21.icon DOCTYPE html> 아이콘 사용하기 /* 글자 색상과 관련된 클래스 - 아이콘에도 사용 가능 */ .red { color: #d63031; } .blue { color:#0984e3; } .yellow { color:#fdcb6e; } .green { color:#00b894; } .gray { color:#b2bec3; } .black { color:#2d3436; } .white { color:#FFF; } 아이콘 예제 원래 용도는 italic 글자체 작성 22.font DOCTYPE html> 폰트 설정 .f1 { /* 그냥 글꼴을 설정하면 글꼴이 존재하는 PC에서만 정상 출력 */ font-family: 빙그레 메로나체, sans-serif; } /* 웹 폰트(..

, 글자가 아무런 태그 없이 쓰이면 좋지 않다. 선택이 안 돼서 디자인을 할 수 없기 때문이다. 은 입력창에 사용을 하고, 은 일반적일 때 사용 한다. 에는 for속성을 이용하여 특정 대상을 연결시킬 수 있다. for = "대상 태그의 ID" 체크박스 등도 선택하게 만들 수 있다(디자인적으로 활용) 티 안나게 글자들을 가두는 역할을 한다. 16.join.html 회원가입 .important { font-weight: bold; color: #d63031;; } .btn.btn-positive { border-color: #00a8ff; background-color: #0984e3; color: white; } .btn.btn-negative { border-color: #e17055; backgroun..