본문 바로가기

전체 글104

CSS 스타일의 상속과 선택자 우선순위 스타일의 상속 - 해당 요소의 스타일이 자식/하위 요소에 적용이 상속되는 것 - 대부분 글자/문자 관련 속성들이 상속 됨. CSS의 스타일 상속 Rien Hello .parent { font-size: 50px; font-weight: bold; color: red; } parent 요소에만 스타일을 적용했지만 자식 요소와 하위 요소까지 스타일이 적용되는 모습을 볼 수 있다. 스타일의 강제 상속 - 상속되지 않는 속성을 부모 요소로부터 상속받도록 만드는 것. - 속성 값 : inherit 적용 .parent { width: 300px; height: 300px; background-color: royalblue; } .child { width: 150px; height: inherit; backgroun.. 2022. 11. 15.
CSS 선택자 - 가상 요소 선택자 & 속성 선택자 가상 요소 선택자 BEFORE - 선택자 요소의 내부 앞에 내용을 삽입. - content: "내용"; => 필수 속성! - 콜론 두 개( :: ) 사용 AFTER - 선택자 요소의 내부 뒤에 내용을 삽입. => before & after 둘 다 삽입된 내용은 인라인 요소로 인식됨. Box .box::before { content: "앞!"; } .box::after { content: "뒤!" } 속성 선택자 ATTR - 속성을 포함한 요소 선택 - 대괄호로 표현 ATTR = VALUE - 속성을 포함하고 값도 일치하는 요소 선택 [disabled] { color: red; } [type="password"] { color: red; } 추가 응용 1 before & after 선택자는 content .. 2022. 11. 14.
CSS 선택자 - 가상 클래스 선택자 가상 클래스 선택자 - 선택자 뒤에 콜론 ( : )을 붙이고 사용 HOVER - 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 .box:hover { background-color: orange; } => .box 요소에 마우스를 올리면 배경 색상이 오렌지 색상으로 변경 ACTIVE - 선택자 요소에 마우스를 클릭하고 있는 동안 선택 .box:active { background-color: red; } => .box 요소를 클릭하고 있는 동안 배경 색상이 빨간색으로 변경 FOCUS - 선택자 요소가 포커스 되면 선택 - input 태그와 같이 포커스가 가능한 요소에 적용 가능. input:focus { background-color: red; } => input 요소에 포커스가 되면 배경 색상이 빨.. 2022. 11. 13.
CSS 선택자 - 기본 선택자와 복합 선택자 CSS 선택자 전체 선택자 - ( * ) 사용 - 모든 요소 선택 * { font-size: 24px; color: #ccc; } 태그 선택자 - html 태그 이름으로 요소 선택 div { width: 200px; height: 100px; background-color: #333; } 클래스 선택자 - html 클래스 속성 값으로 요소 선택 - 앞에 마침표 ( . )를 붙여 클래스 선택자임을 표시 .box { background-color: #fff; margin: 20px; } 아이디 선택자 - html 아이디 속성 값으로 요소 선택 - 앞에 해시 ( # )를 붙여 클래스 선택자임을 표시 #box { display: flex; } 일치 선택자 - 선택자 두 개.. 2022. 11. 13.
CSS 기본 문법과 선언 방식 css 기본 문법 선택자 { 속성: 값; 속성: 값; } css는 스타일을 적용할 선택자를 작성하고 중괄호를 열고 닫아 그 사이에서 속성과 값을 입력하여 작성한다. 이때 속성 뒤에는 콜론( : )을 값 뒤에는 세미콜론 ( ; )을 작성한다. css의 선언 방식 css를 적용 하는 방식은 4가지 방법이 있다. 내장 방식 - html 문서의 head 태그 안에 태그를 사용하여 작성하는 방법. - 유지 보수 측면에서 추천되지 않음. 인라인 방식 - html 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음) - 우선 순위가 너무 높아서 추후에 유지 보수가 어려움. 2022. 11. 13.
HTML 기본 요소 정리 블록(상자) 요소 Division - 특별한 의미가 없는 구분을 위한 요소 Heading - 제목을 의미하는 요소 - (h1~h6) 숫자가 작을수록 더 중요한 제목을 정의 Paragaph - 문장을 의미하는 요소 Unordered List - 순서가 필요 없는 목록의 집합 Ordered List - 순서가 있는 목록의 집합 List Item - 목록 내 각 항목 => 사용법 인라인(글자) 요소 Span - 특별한 의미가 없는 구분을 위한 요소 - 이미지를 삽입하는 요소 - src / alt 는 필수 속성 Anchor - 다른 / 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 - target="_blank" : 새탭으로 페이지 이동 속성 - 화면 출력시 밑줄과 파란 글자로 표시 됨 Break - 줄바꿈.. 2022. 11. 13.

티스토리툴바