분류 전체보기(67)
-
CSS - 가상클래스 선택자 - NTH OF TYPE, NOT
NTH OF TYPE E 의 타입(태그이름)과 동일한 타입인 형제 요소 중 E 가 n 번재 요소라면 선택(n 키워드 사용 시 0 부터 해석(Zero-base)) 예제 1) .fruits { font-size : 40px; } .fruits p:nth-of-type(1) { color : red; } 딸기 사과 망고 오렌지 설명 클래스 선택자 fruits 찾아 태그 중에서 첫번째 요소 선택 예제 2) .fruits { font-size : 40px; } .fruits .red:nth-of-type(1) { color : red; } 오렌지 딸기 망고 사과 설명 red 라는 클래스를 가진 요소의 태그 이름은 li 태그 red라는 클래스를 먼저 검색 이후 타입을 li 반환 li 태그 중에 첫번째 요소 반환(오..
2019.12.11 -
CSS - 가상 요소 선택자(Pseudo-Elements Selectors)
가상 요소 선택자(Pseudo-Elements Selectors) '::’ 가 기호 BEFORE E 요소 내부의 앞에 내용(Content)을 삽입 content 속성(property) 필수 ul li::before { content : “숫자”; Font-weight : bold; } 1 => 숫자1 2 => 숫자2 3 => 숫자3 4 => 숫자4 5 => 숫자5 6 => 숫자6 AFTER E 요소 내부 뒤에 내용(Content)을 삽입 content 속성(property) 필수 ul li::after { content : “.0”; } 1 => 1.0 2 => 2.0 3 => 3.0 4 => 4.0 5 => 5.0 6 => 6.0 ※ 추가사항 이미지 삽입 가능 출처 : heropy.org
2019.12.11 -
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