☃ 가상 요소 웹 문서 안의 특정 부분에 스타일을 지정하려고 가상으로 요소를 만들어 추가하는 방법이다. 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. 예약 방법 & 사용 요금 아직 온라인 ..

06. 폼(Form) 요소 기초 폼 요소form element란? 그 자체로는 눈에 그렇게 띄지 않지만, 텍스트 입력란, 비밀번호 입력란, 버튼 및 체크박스 등의 개별적인 form control을 품는 컨테이너container로, 아래 그림의 굵은 빨간색 테두리 부분이 폼form이라고 보면 된다. 그리고 위 그림의 분홍색 테두리 부분들은 개별적인 컨트롤control 또는 개별 입력란을 나타낸다. 그러니까 폼은, 한데 그룹화된 모든 입력란을 포함한 상자인 것이다. 또한, "작성된 폼 내용을 그룹화해서 작은 배송 레이블을 붙인 다음에 내 서버로 보내줘"와 같은 구체적인 지시까지 내릴 수 있는 요소이다. 여러 다른 입력란, 즉 폼은 요소가 감싸고 있는데, 여기서 데이터를 어떻게, 어디로 전송할지 결정하게 된다..