본문 바로가기

전체 글83

캐스케이딩이란? (적용 우선순위) 및 실습 CSS - Cascading Style Sheet의 약자 - 웹브라우저와 사용자, 저자 모두가 조화를 이루어져햐 하는 철학을 구현하기 위한 방법으로 CSS를 탄생시킴 - 하지만 조화를 위해서는 대가가 필요, 대가가 바로 우선순위이다. - 동시에 같은 디자인을 적용하면 저자 > 사용자 > 웹브라우저 우선순위가 적용한다. 실습 - 더 구체적인 것이 우선순위를 가진다. - 다만 id 선택자보단 태그 안의 style 속성이 우선순위를 가진다. - 더 포괄적인 것이 우선순위가 낮다. 제일 낮은 우선 순위인 li 선택자를 최상위 우선순위로 올리려면 !important를 사용해 우선순위를 높힐 수 있다. 다만 가급적 사용하지 않는 것이 좋다. DOCTYPE html> li { color: red; } #idsel {.. 2023. 11. 20.
상속 상속 (Inheritance) - 어떤 엘리먼트에 프로퍼티를 줘서 값을 주면 그 하위 요소가 성질을 물려받는 것 상속의 이유? - 생산성, 적은 코드로 많은 일을 할 수 있다. 상속의 특징 - 모두 상속되는 것이 아니라 어떤 것은 상속되는 것이 유리하고 어떤 것은 상속이 안되는 것이 유리하기 때문에 다 다르다. - color 속성은 상속이 가능하지만 border 속성은 상속이 불가능하다. DOCTYPE html> html { color: red; } #select { color: black; } body { border: 1px solid red; } 수업내용 html css javascript 2023. 11. 20.
가상 클래스 선택자 pseudo :가상, 가짜의 , 모조의 가상 클래스 : 클래스처럼 동작하며 각각의 엘리먼트의 상태에 따라서 선택자가 선택되기도 하고 안되기도함 : 태그 옆에 :를 붙인 후 사용한다. : 밑에 있는 가상클래스가 우선순위를 가진다. 종류 1. link: 링크를 방문하지 않았을 때 동작하는 가상 클래스 /* 방문하지 않았을 때 */ a:link { color: black; } 2. visited: 링크를 방문했을 때 동작하는 가상 클래스 a:visited { color: red; } 3. active: 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 /* 모든 a태그 중 active되어있는 a 태그를 선택 */ /* active: 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 .. 2023. 11. 20.
반응형 웹 Who Am I 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 About Image 저는 0년차 소프트웨어 개발자입니다. 유튜브 깡꾸꾸를 운영하고 있습니다. Skills Html, CSS, JavaScript, TypeScript, React... Image Image Image 프로젝트 1 2021년 2월 Image 이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을 프론트엔드 개발자였습니다. 프로젝트 2 2021년 2월 Image 이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을 프론트엔드 개발자였습니다. 프로젝트 3 2021년 2월 Image 이 프로젝트는 어떤 어떤 프로젝트입니다. 이 프로젝트에서 제 역할을 프론트엔드 개발자였습니다. 프로젝트 4 2021년 2월 Image .. 2023. 11. 18.

티스토리툴바