CSS (48) 썸네일형 리스트형 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 태그 자체를 선택.. CSS Grid 수업 필기(5) Media Queries & The Grid Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam animi soluta aspernatur corrupti ratione. Heading Lorem ipsum, dolor sit amet co.. CSS Grid 수업필기 (4) - Grid Template Areas My Website Welcome To My Site Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus eos et mollitia velit vel molestias sint dolore at doloremque neque minima optio ad tempore quisquam perferendis esse non. Aliquam illum doloremque architecto! Rem voluptas at sunt sed enim eius laborum dolores quaerat? Contac.. CSS Grid 수업 필기(2) Spanning Columns and Rows Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 .grid { display: grid; grid-template-columns: repeat(4, 1fr); } 우선 4개의 columns에 1fr씩. .item:first-child { grid-column-start: 1; grid-column-end: 4; } item1을 span하고 싶을 때. item1의 왼쪽 border을 1번이라고 생각해서, 1번 줄에서 시작해서 4번째 줄까지 아이템을 늘여줌. (칸으로 따지면 3칸) (아래 그림이 적용된 모습) .item:first-child { grid-col.. CSS Grid 수업 필기(1) grid-template-columns, grid-template-rows grid-template-columns 기본 셋팅 .item { padding: 3rem; background: #f4f4f4; border: #ccc 1px solid; text-align: center; font-weight: bold; font-size: 1.4rem; } Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 .grid{ display:grid; grid-template-columns: 300px 300px 300px; } 우선 컨테이너에 display:grid; 선언 (display:flex와 다르게 아무 변화 없음) grid-template-columns에 만들고 싶은 column의 갯수와 너비를 설정. 저렇게 하면 한 줄에 3개의 아이템이 배치되고 각각 .. CSS Transitions CSS Transtions를 사용하면 주어진 duration동안 property values가 스무스~~하게 변한다. (* duration을 안정해주면 default 값으로 0초가 설정되기 때문에 아무런 변화가 일어나지 않는다!) div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } Change Several Property Values The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and .. CSS Animations What are CSS Animations? CSS Animation을 사용하면 element를 변신시킬 수 있다!! (멋져멋져) Animation을 사용하기 위해서는 먼저 animation을 위한 keyframe 구체적으로 명시해야 한다. 이 Keyframes에는 특정한 시점에 도달했을 때, element가 어떤 스타일로 변신하게 될 지에 대한 정보가 담겨있다. @keyframes에 담은 css styles가 작동하려면 element와 애니메이션을 연결해줘야 한다. /* The animation code */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } /* The element to apply t.. 이전 1 2 3 4 5 6 다음
