👶 자손 선택자와 자식 선택자
어떤 태그 안에 다른 태그가 들어있으면 그 상위 태그를 하위 태그의 '부모'라고 일컫는다. 당연히 하위 태그는 '자식'이 되는 것. 바로 아래에 들어있는 태그는 자식, 그 자식 태그 안에 또 다른 태그들이 들어있으면 그 태그들은 상위 태그의 '자손'이 되는 것이다.
#### 자손 선택자를 가리킬 때는 스페이스바로 구분, 바로 아래 자손 즉 자식 선택자만 가리키려면 <(꺽쇠)로 구분한다.
위의 CSS 코드로 자식과 자손의 속성을 달리 부여한 모습니다. .parent div 스페이스바로 두 div에 모두 파란 border를 주었고, .parent>div div 꺽쇠와 스페이스바를 함께 사용하여 가장 하위 박스에는 노란색 bg를 입혔다. 물론 이 경우는 자손 선택자가 두 개 뿐이므로 꺽쇠만 두 번 사용하여도 같은 모습으로 출력될 것이다. (.parent>div>div)
🔲 border 디자인
border 속성은 borer: 2px(두께) solid(스타일) blue(색) 이렇게 한 번에 적는게 일반적이지만, 사실 하나하나 뜯어보면 border-width: 2px, border-style: solid, border-color: blue 이렇게 새 속성이 하나에 들어가 있는 것이다.
그리고 방향을 선택해주지 않으면 모든 border에 속성이 적용되므로 어느 한 부분의 모서리만 다른 속성을 부여하고 싶다면 border-top(right, left, bottom)를 사용하자.
물론 자주 사용하진 않는다...
🔲 border-radius
디자인 할 때 정말 많이 사용하게 될 border-radius!!! 모서리에 라운드값을 주는 속성이다. 모서리도 각각 따로 값을 달리 줄 수 있다. 변과 달리 각각 따로 작성하면 매우 길어진다.
하나만 기억하자. 시계방향! 뭐든 시작할 때는 왼쪽 위부터! 그리고 시계방향만 떠올리면 된다. 위의 1, 2, 3, 4를 각각 따로 작성하면 border-top-left-radius, border-top-right-radius...(중략)이 된다. 매우 길다! 그리고 아주 귀찮다.
border-radius 에 위의 1, 2, 3, 4 순서로 값을 입력해주기만 하면 된다.
여기서 1과 3, 그리고 2와 4는 짝궁이라는 것을 기억하자. 값이 2개 혹은 3개일 때는 1/3, 2/4 혹은 1, 2/4, 3 이렇게 값이 부여된다. (위의 이미지 참고)
다양한 모양의 박스를 연습해보았다! 원 모양을 만들 때엔 px값도 좋지만 %값이 더 좋을 것 같다.
세 개 값만 들어간 경우도 잘 보이게끔 만들어봤다.
❗ box-sizing : border-box
이 box-sizing: border-box 속성은 꼭 알고 있도록 하자!
어떤 박스에 width나 height 값을 부여했을 때 이는 컨텐츠 영역이고 border나 padding, margin 값을 주면 컨텐츠 영역 외로 계속 면적이 커진다. 이 때 box-sizing: border-box 속성을 부여하면 내가 처음에 설정한 사이즈가 전체 사이즈로 유지된다.
부모
div의 너비가 600px, 자식div의 너비가 200px이니float: left했을 때 한 줄에 세 개가 딱 맞게 들어가야 하는데border두께 때문에 면적이 늘어나 한 줄 밀려난 모습.
box-sizing: border-box속성을 넣어주니 제대로 한 줄을 꽉 채웠다!
Box-shadow, Text-shadow
shadow는 box-shadow, Text-shadow 두 가지 종류가 있다.
box-shadow: inset(유/무) offset-x offset-y blur color
inset을 넣어주면 드롭 섀도가 아니라 내부 섀도로 적용된다. 나머지는 우리가 잘 아는 x축, y축 값, 흐림 정도, 색 순서다.
offset-x와 offset-y 는 필수 값이고, blur는 0, color는 컴포넌트 색상이 기본이다.(값 입력하지 않을 경우)
Text-shadow도 box-shadow와 입력하는 값은 동일하다. 하나 차이점이 있다면 text-shadow는 inset 적용이 안된다!
