이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수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 지정한 요소의 첫 번째 글자에 스타일을 적용한..

1. 사용자 동작에 반응하는 가상 클래스 :link 가상 클래스 선택자 사용자가 아직 방문하지 않은 링크 (즉, 클릭한 적 없는 하이퍼링크)에 스타일을 적용한다. 기본적으로 파란색 글자와 밑줄로 표시되는데, 이 스타일을 :link로 바꿀 수 있다. (내가 만든) 예시 1. MDN ↓ :visited 가상 클래스 선택자 :link와는 반대로, 한 번 이상 방문한 링크에 스타일을 적용한다. 한 번 이상 방문한 링크는 보라색으로 바뀌는 것이 기본값인데, 그 스타일을 바꾸거나, 방문했든 안 했든 스타일이 달라지지 않게 할 때 :visited로 스타일을 지정한다. (내가 만든) 예시 2. Github ↓ :hover 가상 클래스 선택자 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용한다. ex 1, 이미..

요약은 포스팅 맨 아래에 표로 정리했다. 1. [속성] - 특정 속성이 있는 요소를 선택 특정 요소 중에서 찾으려고 하는 속성 이름이 있는 요소를 선택할 때. ex, 요소 중에서 href 속성이 있는 요소 선택 a[href] { ...... } 예제 1. 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 ↓ 2. [속성 = 속성값] - 특정 속성값이 있는 요소를 선택 주어진 속성과 속성값이 일치하는 요소에만 스타일을 적용할 때. ex, target 속성의 속성값이 _blank인 요소 선택 a[target = _blank] { ...... } 예제 2. HTML CSS Selector Level 4 미디어쿼리 ↓ 3. [속성 ~= 값] - 여러 값 중 특정 속성값이 포함된 속성 요소를 선택 여러 속성값 중..

연결 선택자 = 조합 선택자 = 콤비네이션 선택자 = 콤비네이션 셀렉터combination selector : 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 것. 1. 하위 요소에 스타일 적용 하위 요소: 특정 요소 기준으로 그 안에 포함된 요소 자식 요소: 현재 요소 기준으로 바로 한 단계 아래 요소 손자 요소: 자식 요소의 한 단계 아래 요소 1) 하위 선택자descendant selector = 자손 선택자. 부모 요소에 포함된 하위 요소를 모두 선택한다. 그러니까, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다는 뜻. 상위요소✔하위요소 처럼 공백으로 구분한다. 마치, 아래 코드처럼. 예제 1. 예약 방법 & 사용 요금 아직 온라인 ..