CSS (48) 썸네일형 리스트형 float 너란 녀석... (4) (feat. float을 이용해서 한 번 더 layout을 붕괴해보자!) 이 포스트는 김버그님의 김버그의 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 Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus vero numquam autem, sit accusam.. float 너란 녀석... (3) (feat. float을 이용해서 layout을 붕괴해보자!) 이 포스트는 김버그님의 김버그의 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: 400px; margin: 0 auto; background-color: #eff2f7; } .child { width: 200px; height.. float 너란 녀석... (2) (feat. 붕뜨더니 신분상승했네..) 이 포스트는 김버그님의 김버그의 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 📝 메모 #2. float을 먹은 요소, display:block으로 신분 상승 이번에는 child element를 div에서 span으로 바꿔보자 (참고로 div는 대표적인 block element이고 span은 inline ele.. 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.. input 눌렀을 때 아름답지 않은 파란 선 없애기 {outline:none, box-shadow:none} & active, focus 됐을 때 border input 눌렀을 때 생기는 기본 파란선 없애고 싶을 때, input{ outline:none; box-shadow:none; } input창을 클릭하는 그 찰나에 색 바꾸고 싶을 때 input:active{ border-color: ; } focus 됐을 때 border 색 바꾸고 싶을 때 input:focus{ bordr-color:#fff; } 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.. 이전 1 2 3 4 5 6 다음
