요약은 포스팅 맨 아래에 표로 정리했다. 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 또는 개별 입력란을 나타낸다. 그러니까 폼은, 한데 그룹화된 모든 입력란을 포함한 상자인 것이다. 또한, "작성된 폼 내용을 그룹화해서 작은 배송 레이블을 붙인 다음에 내 서버로 보내줘"와 같은 구체적인 지시까지 내릴 수 있는 요소이다. 여러 다른 입력란, 즉 폼은 요소가 감싸고 있는데, 여기서 데이터를 어떻게, 어디로 전송할지 결정하게 된다..

배경 색을 다루었던 이번 단원 마무리 문제 3가지. 문제 1. 위의 주어진 코드에 글씨 부분은 회색 배경을, 그 아래로는 주어진 배경이미지를 넣으라는 주문이었다. 웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. ↓ 이미지를 가로로 반복! repeat-x 유념하자! 사실 틀림ㅠㅠㅋㅋㅋ 문제 2. 위의 주어진 코드에 영역의 스타일을 변경하라는 주문이었다. 단, 스타일을 변경할 때 사용할 색상 표기법은 rgb! 웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를..

1. 선형 그러데이션: linear-gradient 선형 그러데이션 = 색상이 수직으로, 수평으로, 대각선 방향으로 일정하게 변하는 것. □ linear: 선으로 된, 직선 모양의 □ gradient: 경사진, 차츰 상승[하강]하는 색상이 어느 방향으로, 어떤 색상으로 바뀌는지 알려주어야 한다. 방향은 to ~~~~로 써 주며, 수평 방향은 left, right로, 수직 방향은 top, bottom으로 써 준다. 각도로도 쓸 수 있다. (방향을 오른쪽 아래, 왼쪽 위와 같이 2개를 써주면 대각선으로도 가능하다. 이 때 2개의 방향은 공백으로 구분하여 작성하되, 순서는 상관 없다.) linear-gradient(to 방향, 중지 색상1, 중지 색상2, 중지 색상3,...); 또는 linear-gradien..