웹(56)
-
CSS - 가상클래스 선택자 - first-child, last-child, nth-child
FIRST-CHILD E 가 형제 요소 중 첫번재 요소라면 선택 .fruits li.first-child { color : red; } 딸기 사과 오렌지 망고 설명 fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 첫번재 요소만 선택 ※ 띄어쓰기 : 후손선택자 LAST-CHILD E 가 형제 요소 중 마지막 요소라면 선택 .fruits li.last-child { color : red; } 딸기 사과 오렌지 망고 설명 fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 마지막 요소 선택 NTH-CHILD E 가 형제 요소 중 n 번째 요소라면 선택(n 키워드 사용시 0 부터 해석(Zero-base)) 예제 1) .fruits li.nth-child(2) { color :..
2019.12.11 -
CSS - 가상클래스 선택자(Pseudo-Classes Selectors) - hover, active, focus
가상 클래스 선택자(Pseudo-Classes Selectors) hover, active, focus ‘:’ 가 선택자 기호 HOVER E(기본선택자) 에 마우스(포인터)가 올라가 있는 동안에만 E 선택 a:hover { font-weight : bold; font-size : 20px; } .box { width : 100px; height : 100px; background : tomato; transition : 0.4s; } .box:hover { width : 200px; } Google! ACTIVCE E 를 마우스로 클릭하는 동안에만 E 선택 .box { width : 100px; height : 100px; background : tomato; transition : 0.4s; } .bo..
2019.12.11 -
CSS - 복합 선택자(Combinator)
일치 선택자(Basic Combinator) E 와 F 를 동시에 만족하는 요소 선택 span.orange { color : red; } 사과 배 오렌지 당근 토마토 오렌지 설명 태그 선택자 span을 찾아 클래스 선택자를 선택. 태그를 사용하면서 클래스를 사용한 선택자 자식 선택자(Child Combinator) E 의 자식 요소 F 를 선택 ‘>' 가 선택자의 기호 ul > .orange { color : red; } 사과 배 오렌지 당근 토마토 오렌지 설명 태그 선택자 ul을 찾아 자식인 클래스 선택자 선택. 부모를 기준으로해서 자식을 찾음 후손(하위) 선택자(Descendant Combinator) E 의 후손(하위) 요소 F 를 선택 '띄어쓰기' 가 선택자의 기호 div .orange { col..
2019.12.11 -
HTML - 컨텐츠 부문 HEADER / FOOTER / H1~H6 / MAIN
태그 소개나 탐색을 돕는 그룹 일반적으로 로고 / 메뉴 / 검색바 / 로그인 버튼/ 로그아웃 버튼 / 회원가입 버튼 컨텐츠가 포함 header 태그 내 header / footer 사용 X 속성 전역 속성만 포함 태그 가장 가까운 구획화 콘텐츠나 구획화 루트의 푸터를 나타냄 일반적으로 작성자 구획 / 저작권 데이터 / 관련된 문서의 링크에 대한 정보 포함 footer 태그 내 footer/ header 사용 X 속성 전역 속성만 포함 ~ 태그 6단계의 문서 제목을 구현 h1이 가장 높고 h6이 가장 낮음 화면의 글자의 크기를 지정할 때 쓰는 태그 X, 의미상 대주제 부터 소주제로 6단계 구분할 때 사용하는 태그 속성 전역 속성만 포함 ※ 권장사항 브라우저 마다 h1 ~ h6은 폰트의 크기가 다름 제목 폰..
2019.12.11 -
HTML - 요소 전역 속성
전역 속성(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..
2019.11.24 -
메타데이터 - LINK / STYLE / MIME Type / BASE
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이 브..
2019.11.24