본문 바로가기

전체 글330

CSS - 가상클래스 선택자 HOVER E:hover / E 에 마우스(포인터)가 올라가 있는 동안에만 E 선택. ACTIVE E:active / E 를 마우스로 클릭하는 동안에만 E 선택. FOCUS E:focus / E 가 포커스 된 동안에만 E 선택.(대화형 컨텐츠만 가능) - FIRST CHILD E:first-child / E 가 형제 요소 중 첫번째 요소라면 선택. LAST CHILD E:last-child / E 가 형제 요소 중 마지막 요소라면 선택. /* fruits 후손들 중에 첫번째 li를 찾는다 */ .fruits li:first-child { color: red; } /* fruits 후손들 중에 마지막 li를 찾는다 */ .fruits li:last-child { color: red; } cs 사과 딸기 오.. 2021. 3. 31.
CSS - 복합 선택자 [복합 선택자] 일치 선택자(Basic Combinator) ; EF / E 와 F 를 동시에 만족하는 요소 선택. /* span 중에 orange 클래스를 가진 요소를 찾는다 */ span.orange { color: red; } Colored by Color Scripter cs 사과 딸기 오렌지 당근 토마토 오렌지 Colored by Color Scripter cs 자식 선택자(Child Combinator) ; E(>)F / E 의 자식 요소 F 를 선택. /* ul 의 자식 요소 중에 orange 클래스를 가진 요소를 찾는다 */ ul > .orange { color: red; } Colored by Color Scripter cs 사과 딸기 오렌지 당근 토마토 오렌지 Colored by Col.. 2021. 3. 31.
CSS - 기본 선택자 [기본 선택자] 전체 선택자(Universal Selector) ; (*) / (요소 내부의) 모든 요소를 선택. 태그 선택자(Type Selector) ; (E) / 태그 이름이 Element인 요소를 선택. 클래스 선택자(Class Selector) ; (.) / HTML class 속성의 값이 Element인 요소를 선택. 아이디 선택자(ID Selector) ; (#) / HTML id 속성의 값이 Element인 요소를 선택. /* 전체 선택자(Universal Selector) */ * { color: red; } /* 태그 선택자(Type Selector) */ li { color: red; } /* 클래스 선택자(Class Selector) */ .orange { color: red; } .. 2021. 3. 31.
CSS - 기본 문법, 선언 방식 [기본 문법] 선택자 { 속성: 값; 속성: 값; } div { width: 100px; height: 100px; background: red; } cs [선언 방식] 인라인(in-line) 방식 ; HTML요소(태그)의 style 속성에 직접 작성하는 방식. Inline cs 내장(embedded) 방식 ; HTML 안에 작성하는 방식. div { width: 100px; color: red; } Embedded cs 링크(link) 방식 ; HTML 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. Link Colored by Color Scripter cs @import 방식 ; CSS @import 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. 동기화 형태로 로딩됨(직렬). I.. 2021. 3. 30.
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.

티스토리툴바