CSS/개념 (14) 썸네일형 리스트형 white-space 👩💻 개요 개행문자, 스페이스, 탭, 자동 줄바꿈, 줄 끝의 공백과 같은 공백 문자들을 어떻게 처리할 지 지정하고 싶을 때 사용하는 속성. 👩💻 문법 white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; (initial: 기본값으로 설정. inherit: 부모 요소의 값을 상속받음.) 👩💻 동작 정리 개행문자 스페이스, 탭 자동 줄 바꿈 줄 끝의 공백 normal 병합 병합 예 제거 nowrap 병합 병합 아니오 제거 pre 유지 유지 아니오 유지 pre-wrap 유지 유지 예 넘침 pre-line 유지 병합 예 제거.. Transition 보호되어 있는 글입니다. transform 보호되어 있는 글입니다. float 너란 녀석... (6) (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 📝 메모 1. 가로배치를 원하는 요소(들)에 float:left를 준다. 2.그 요소(들)의 parent 요소에 가상 요소를 만들어 준다. .parent::after{ content:""; display:block; clear:lef.. float 너란 녀석... (5) (feat. parent::after) 이 포스트는 김버그님의 김버그의 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 📝 메모 그래서 망가진 layout을 구원하는 방법에는 어떤 것들이 있는가? 1. .parent{ overflow:hidden; } 부모 요소에 overflow:hidden;을 준다. 2. .parent::after{ content:.. 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.. 이전 1 2 다음
