나에게는 오지 않을 것만 같았던 코로나에 1주일을 꼬박 앓느라 코딩 공부고 뭐고 다 뒷전이었다....ㅂㄷㅂㄷ... 처음에 목 간질거리기만 하고 아주 약~간 미열만 있을 때는 그저 "아싸! 격리 때문에 일 쉬는 김에 코딩 공부 더 해야지!!"했지만.. 하핳.... 아무리 3년간 변이를 거치며 약해졌대도 코로나는 코로나였다.. 약하긴 🐶뿔.. 목아파 ㄷㅈ는줄 알았다...ㅠㅠㅠ 아무튼, 각설하고, 오랜만에 돌아와 공부를 다시 시작해 본다. 이전까지는 CSS로 html 파일에 시각적인 효과를 줬다면, 오늘 하는 부분부터는 CSS로 할 수 있는 '애니메이션 동작'을 할 수 있는 기능이다. 읭? 애니메이션, 동적 기능 이런 건 Javascript 아니야? 라고 묻는다면, 결론은 CSS로도 일부 할 수 있다. 가 답..

06. 색상 시스템: RGB와 알려진 색상 색상은 배경 색, 테두리, 그림자 등등 많은 곳에 쓰이는 속성이기 때문에, 굉장히 자주 등장한다. 알려진 색상 이름으로 작성하는 방법 시중의 모든 브라우저는 색상 이름 143가지를 인식한다. https://htmlcolorcodes.com/color-names/ Color Names — HTML Color Codes HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values. htmlcolorcodes.com 위의 링크에 알려진 색상 이름이 나열되어 있다. (140가지라고 ..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 CSS란? What is CSS? 4' 55" 필수 02 방대한 CSS에 당황하지 않기 CSS is Huge, Don't Panic! 4' 03" 필수 03 스타일을 올바르게 담기 Introducing Styles Correctly 6' 15" 필수 04 색 및 배경색 속성 Color & Background-Color Properties 5' 15" 필수 05 코딩 연습 7: Our First CSS Exercise Coding Practi..

CSS 고급 선택자를 다루었던 이번 단원 마무리 문제 2가지. 문제 1. 위 코드로 만들어진 html 문서에 있는 이미지 중 첫 번째 이미지의 테두리 스타일을 수정하는 것이 미션이다. 안에 내가 쓴 답은 img:first-of-type { border: 2px solid #f00; } 결과는 성공ㅎㅎ 문제 2. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 위의 코드로 된 html 문서에 ① 메뉴6의 오른쪽 테두리 삭제 ② 메뉴 전체 너비 610px에서 605px로 줄이기 ③ 메뉴1~5에 마우스 포인터 올리면 배경색 #555, 글자색 #fff로 바뀌도록 만들기 ④ 메뉴6에 마우스 포인터 올리면 배경색 #b30000, 글자색 #fff로 바뀌도록 만들기 네 개의 조건을 적용하는 것이 미션이다. ① ~ ④에 대해..

☃ 가상 요소 웹 문서 안의 특정 부분에 스타일을 지정하려고 가상으로 요소를 만들어 추가하는 방법이다. cf, 가상 클래스: 웹 문서의 여러 요소 중에서 원하는 요소를 선택하는 방법 가상 요소를 쓰는 이유? → 특별히 화면에 보이는 부분을 꾸밀 때, 불필요한 태그를 사용하지 않도록 하기 위함! ::first-line 요소 & ::first-letter 요소 ::first-line 지정한 요소의 첫 번째 줄에 스타일을 적용한다. (내가 만든) 예시 1. 내가 좋아하는 노래 가사 climax 부분 이젠 알아요 너무 깊은 사랑은 외려 슬픈 마지막을 가져온다는 걸~♬ 그대여 빌게요 다음 번의 사랑은 우리 같지 않길 부디 아픔이 없이~♬ ↓ ::first-letter 지정한 요소의 첫 번째 글자에 스타일을 적용한..