코딩공부를 하면서 정말 여러가지 강의를 접했다.... 그중 CSS학습에 도움이 될만한 좋은 사이트가 있어 블로그에 공유한다. 이 사이트는 유튜버 드림코딩의 엘리님의 강의를 듣고 알게된 사이트이다. CSS익히기 CSS Dinner, FLEXBOX FROGGY 게임은 총 2가지! 그 중 첫번째 게임은 CSS Dinner 게임방법은 가운데 움직이고 있는 요소가 있는데, 오른쪽 HTML을 참고하여 왼쪽 CSS창에 움직이는 요소를 선택하여 입력하는 것이다. 총 32 단계까지 있으며, CSS의 기본선택자 부터 복합선택자, 가상선택자까지 골고루 나온다. 오른쪽에는 힌트도 있으니 참고하여 풀면된다. 알면 재밌고, 몰라도 쉽고 재밌게 공부할 수 있는 좋은 컨텐츠 인것 같다! CSS Dinner 바로가기 두번째 게임은 F..

CSS기초 CSS 복합 선택자 -일치 선택자 ABCXYZ : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 // (태그+클래스) span.orange { color: red; } 오렌지 -자식 선택자 ABC > XYZ : 선택자 ABC의 자식 요소 XYZ ul > .orange { color: red; } 오렌지----O 오렌지--X -하위(후손)선택자 ABC XYZ : 선택자 ABC의 하위요소 XYZ 선택. '띄어쓰기'가 선택자의 기호! div .orange { color: red; } 오렌지----O 오렌지--O 오렌지--X -인접 형제 선택자 ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 선택자 li 중 orange class를 가지고 있는 요소의 다음 형제 요소 하..

CSS기초 CSS 기본 선택자 - 전체선택자 * : 모든 요소를 선택 * { color: red; } html의 모든 요소의 색을 빨간색으로 - 태그선택자 ABC : 태그 이름이 ABC인 요소 선택 li { color: red; } 입력된 태그만 적용 - 클래스 선택자 .ABC : HTML class 속성의 값이 ABC인 요소 선택 .orange { color: red; } 오렌지 오렌지 orange클래스의 글자색을 빨간색으로 변환 - 아이디선택자 #ABC : HTML id속성의 값이 ABC인 요소 선택 #orange { color: red; } id="orange" class="orange">오렌지 id가 orange인 요소의 글자색을 빨간색으로 변환