전역 속성(Global Attributes) 모든 HTML 요소에서 공통적으로 사용 가능한 속성 class 공백으로 구분된 요소의 별칭을 지정 CSS / Javascript 의 요소 선택기를 통해서 요소 선택하거나 접근 id 문서에서 고유한 식별자를 정의 CSS / Javascript 의 요소 선택기를 통해서 요소 선택하거나 접근 style 요소에 적용할 CSS 선언 title 요소의 정보를 지정 마우스 오버시 툴팁 출력 lang 요소의 언어(ISO 639-1)를 지정 data-* 사용자 정의 데이터 속성을 지정 HTML에 Javascript에서 이용할 수 있는 데이터를 저장하는 용도 TEST const test = document.getElementById("test"); console.log(test..

LINK 태그 외부에서 HTML 문서에 CSS 파일 등을 가지고 와서 사용하는 태그 속성 rel relationship의 약자 외부에서 가져올 문서와 현재 문서와의 관계 지정 필수 속성 값은 LINK TYPES 지정(stylesheet, icon 등) href 링크된 리소스의 URL 지정 절대적 / 상대적 지정 hreflang 링크된 리소스의 언어 지정 순수히 조언, 굳이 명시하지 않아도 HTML 최상의 상단에 lang 따름 ※ LINK 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/link STYLE 태그 문서나 문서 일부에 대한 스타일 정보를 포함하는 태그 기본적으로 head 태그 내에 작성, body 태그 내에 작성 가능하나 HTML이 브..

META 웹 페이지 정보, HTML 문서(웹페이지)에 관한 정보(표시 방식, 제작자(소유자), 내용, 키워드 등)를 검색엔진이나 브라우저에 제공 속성 의미 값 charset 문자인코딩 방식 UTF-8, EUC-KR 등 name 검색엔진 등 제공하기 위한 정보의 종류(메타 데이터) Author, description, keywords, viewport 등 content name 이나 http-equip 속성의 값을 제공 ※ META 태그 문서 HTML 요소 레퍼런스 MDN : https://developer.mozilla.org/ko/docs/Web/HTML/Element 속성 charset 문자 인코딩 방식 UTF-8 : 조합형(ㅈ ㅏ ㅂ ㅏ ㅅ ㅡ ㅋ ㅡ ㄹ ㅣ ㅂ ㅌ ㅡ) EUC-KR : 완성형(자 ..

블록(Block), 인라인(Inline) 블록 요소 DIV, H1, P 등 사용 가능한 최대 가로 너비를 사용 크기 지정 가능 (width: 100%; height: 0; 으로 시작하도록 동작) 수직으로 쌓임 margin, padding 위, 아래, 좌, 우 사용 가능 레이아웃을 위한 용도로 사용 default 속성 : display: block; 인라인 요소 SPAN, IMG 등 필요한 너비 만큼만 사용(자신에게 포함된 내용 만큼만 가로 너비로 사용) 크기 지정 할 수 없다. (width:0;height:0; 으로 시작하도록 동작, 내용에 의해 너비/높이 만큼 지정) 수평으로 쌓임 margin, padding 위, 아래 사용 불가능 텍스트를 작업하는 용도로 사용 default 속성 : display: ..

선택자 HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인 전체 선택자(Universal Selector) (요소 내부의) 모든 요소를 선택 제목 본문 태그 선택자(Type Selector) 태그 이름이 E인 요소 선택 제목 본문 클래스 선택자(Class Selector) HTML class 속성의 값이 E인 요소 선택 제목1 본문 아이디 선택자(ID Selector) HTML id 속성의 값이 E인 요소 선택 제목1 본문 출처 : heropy.org

인라인 선언 방식 태그에 직접 스타일 작성 태그에 직접 작성 HTML 내장방식 안에 포함 선택자 필요 HTML에 포함1 HTML에 포함2 HTML 외부에서 불러오는 방식 CSS 코드를 분리하여 관리 분리된 하나의 CSS파일을 여러 HTML 파일에 불러와 사용 가능 HTML 외부에서 불러오기1 HTML 외부에서 불러오기2 div { color : red; } @import 방식 CSS @import 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식(@ ‘엣' 이라고 부름) HELLO @import url("./main2.css"); div { color : red; font-size : 20px; font-weight: bold; } ※ link 태그와 @import 차이점 link 태그는 html에..