본문 바로가기

CSS/개념

(14)
float 너란 녀석... (1) (feat. 부모는 집나간 float을 찾을 수 없네..) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 기본 코드 Child Child Child .parent { width: 200px; margin: 0 auto; background-color: #eff2f7; } .child { width: 200px; height: 2..
Selectors (5) - 선택자 우선순위 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 🌲대전제 p{ color:blue; } p{ color:hotpink; } cascading의 의미대로.. 뒤에 선언된 스타일이 앞의 스타일을 덮어버린다. 그럼 여기서 paragraph의 글자색은 hotpink가 된다. Yu..
Selectors (4) - 동적 가상 클래스 선택자 (User Action Psuedo-classes) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 User Action Pseudo-classes : 사용자의 action에 따라 style을 바꾸고 싶을 때 :hover, :active, :focus :hover 마우스 커서를 element위에 가져다 댔을 때, 그 ele..
Selectors (3) - 구조적 가상 클래스 선택자 (Structural Pseudo-classes) (:first-child, :last-child, :nth-child(n) ) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 Pseudo classes(가상 클래스)란? :어떤 상태나 조건을 만족했을 때 적용되는 클래스 heading li:first-child : li이자 first child인 element(즉, 가장 첫 li) li:last-c..
Selectors (2) - 자식, 자손, 형제 선택자(Child, Descendant, Sibling Combinators) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 Child Combinator, Descendant Combinator 자식 선택자 parent > child 자손 선택자 parent descendants (자손에는 당연히 직계 자식도 포함된다!) heading 1 hea..
Selectors (1) - 요소,클래스,ID선택자(Type, class, id selectors) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📝 메모 Selector가 많아서 부담스러워하기 보다는 Selector들을 제대로 배워놓으면 내가 원하는 요소를 마음대로 선택이 가능하다! 라는 긍정적인 마인드를 가지고 ㅋㅋ 시작 Type Selector -HTML 태그 자체를 선택..