온풀투데이

input { box-sizing: border-box; border: 1px solid rgb(212, 212, 212); border-radius: 2px; display: block; width: 100%; height: 48px; padding: 0px 14px; font-size: 14px; font-weight: 500; color: rgb(26, 26, 26); outline: none; } input 박스에서, padding 적용 시 부모 요소에서, padding 크기만큼 벗어나는 이슈가 있다. 이럴 땐, box-sizing: border-box; 이 속성을 추가하면 의도한 대로, padding 값이 적용되며 부모 요소 안으로 들어오게 된다.

연결 선택자 1. 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용하기 section p { color: blue; } section 요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정함 2. 자식 선택자 : 자식 요소에만 스타일 적용하기 section > p {color: blue; } section 요소 안에 포함된 p 요소 중 자식 p 요소에만 파란(blue) 글자 색을 적용함 하위 선택자와 달리 손자 요소에는 스타일이 적용되지 않음 3. 인접 형제 선택자 : 가장 가까운 형제 요소에 스타일 적용하기 h1 + p { text-decoration: underline; } 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됨 4. 형제 선택자 : 형제 요소에 스..