본문 바로가기

::public/HTML & CSS(SCSS)40

CSS - 환경 설정 CSS Reset 브라우저의 css 환경을 초기화 한다. www.jsdelivr.com/package/npm/reset-css reset-css (5.0.1), /npm/reset-css@5.0.1/reset.min.css 의 해당 코드를 복사한다. reset-css의 위치는 직접 작성한 main.css 위에 붙여넣기 해야한다. Codepen https://codepen.io/ 웹 상에서 HTML, CSS, Javascript를 사용해 볼 수 있다. Emmet https://emmet.io/ 복잡한 문법을 손쉽게 사용할 수 있게 해준다. 2021. 3. 30.
HTML - 전역 속성 class 공백으로 구분한 요소 클래스의 목록. css나 javascript 에서 (.)으로 접근해서 사용. id 문서 전체에서 유일한 고유식별자를 정의. (#)으로 접근해서 사용. style 요소에 적용할 css를 선언. title 요소의 정보(설명)을 지정. 일종의 툴팁(?). lang 요소의 언어를 지정. *ko(한글), en(영어).. data-* 사용자 정의 데이터 속성을 지정. HTML에 javascript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용. wook const me = document.getElementById('me'); console.log(me.dataset.myName); // wook console.log(me.dataset.myAge); // 031 Colo.. 2021. 3. 30.
HTML - 요소((양식) form, input, label, button, textarea, fieldset, legend, progress) 웹 서버에 정보를 제출하기 위한 양식 범위를 정의한다. *이 다른 을 자식 요소로 포함할 수 없다. action : 전송한 정보를 처리할 웹페이지의 URL. autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 구분. (on, off) method : 서버로 전송할 HTTP(Hypertext Transfer Protocol) 방식. (GET, POST) name : 고유한 양식의 이름. novalidate : 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 설정. target : 서버로 전송 후 응답받을 방식을 지정. (_self, _blank) 사용자에게 입력 받을 데이터 양식. autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 .. 2021. 3. 30.
HTML - 요소((표 컨텐츠) table, tr, th, td, caption, col, colgroup, thead, tbody, tfoot) 행과 열로 이루어진 데이터 표를 생성한다. 표의 행(줄)을 생성한다. 표의 '머리글' 열(칸)을 생성한다. abbr: 열에 대한 간단한 설명. headers : 관련된 하나 이상의 다른 머리글 칸 "id" 속성 값. colspan : 확장(병합)하려는 열의 수. 기본값=1. rowspan : 확장(병합)하려는 행의 수. 기본값=1. scope : 자신이 누구의 '머리글 칸'인지 명시. *col: 자신의 열, colgroup: 모든 열, row: 자신의 행, rowgroup: 모든 행, auto 표의 '일반' 열(칸)을 생성한다. headers : 관련된 하나 이상의 다른 머리글 칸 "id" 속성 값. colspan : 확장(병합)하려는 열의 수. 기본값=1. rowspan : 확장(병합)하려는 행의 수... 2021. 3. 29.
HTML - 요소(iframe, canvas) name : 프레임의 이름. src : 포함할 문서의 경로. url width : 프레임의 가로 사이즈. height : 프레임의 세로 사이즈. allowfullscreen: 전체화면 모드 사용을 지정한다. (true, false) frameborder : 프레임 테두리를 사용한다. (px로 표시. 0~n) sandbox : 보안을 위한 읽기 전용으로 삽입한다. *(true, false) or allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능, allow-same-origin: 같은 도메인의 리소스 사용 가능. cs width : 캔버스의 가로 사이즈. height : 캔버스의 세로 사이즈. cs [doc] developer.mozilla.org/ko/docs/Web/.. 2021. 3. 25.
HTML - 요소(img, audio, video) src : (필수)이미지 경로의 기본 속성. srcset 을 사용할 수 없는 환경에서 동작한다. alt : (필수)이미지의 대체 텍스트. width : 이미지의 가로 사이즈. srcset 을 사용할 경우 사이즈가 고정된다. height : 이미지의 세로 사이즈. srcset : 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정한다. *원본 크기는 x와 w 디스크립터를 필요에 맞게 사용하기(x=픽셀 비율, w=사이즈) sizes : 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정한다. *srcset과 sizes는 IE를 지원하지 않음. cs [출처] heropy.blog/2019/06/16/html-img-srcset-and-sizes/ autoplay : 준비되면 바로 재생한.. 2021. 3. 24.