1. box-sizing
- pading 과 margin, border 의 사이즈 때문에 width와 height 사이즈가 헷갈릴때 사용할 수 있다.
- content-box 가 기본값이며, border-box 로 속성을 설정하면 모든 영역(margin, pading border 전부 싹다!)이 다 포함 되어 진다.
- box-sizing: border-box; 로 사용하면 된다.
2. background 의 다양한 속성
- background-color : 색을 바꾼다.
- background-image : 이미지를 배경으로 사용한다.
- url(경로); 를 사용해서 이미지를 불러오면 된다.
- 이미지가 배경 배경의 크기보다 작을경우 바둑판 식으로 반복해서 나오게 된다. 이는 background-repeat 속성으로 수정하면 된다
- background-repeat : 배경 이미지를 반복시킨다.
- 기본값은 repeat으로 되어 있다. no-repeat으로 바꿔서 반복해서 나오는 이미지를 하나로 만들어서 배경으로 쓸 수 있다.
- background-position : 초기 배경의 위치를 결정한다.
- 기본값은 left top 이다. 그래서 이미를 배경으로 설정해 놓고, repeat을 없에면 좌상단에 배경이 하나 나오는 것을 알 수 있다.
- background-size : 배경 이미지의 사이즈를 설정한다.
- background-size: 넓이 높이 로 사용할 수 있다. 위의 상황처럼 이미지를 배경으로 사용하고 반복을 없엔 후에,
배경이 컨텐츠 사이즈 보다 작을때, 컨탠츠 사이즈 만큼의 크기를 설정해 주면 가득 찬 이미지로 배경을 얻을 수 있다.
- 위의 조건을 간단하게 background-size: cover; 로 이미지를 늘려서 배경을 전부 덮어 줄 수 있다.
- background-size: contain; 을 사용하면, 이미지 자체가 잘리지 않는 한도 내에서 배경의 사이즈를 설정한다.
- background: 세부 속성 : background는 하위 속성들을 정확한 값으로 정의만 해주면 위의 내용을 똑같이 사용할 수 있다.
- Ex) background-color : brue; === background: brue; (이후 다른 세부속성을 계속 적어주면 된다)
3. float 과 clear
- float은 코드를 작성한 순서를 무시하고, float: 원하는 위치; 로 옮긴다.
- clear은 float을 제거하여 코드가 작성된 순서로 다시 위치를 돌린다.
4. position
- 요소의 위치 값을 바꿔준다.
- position: fixed; top: 원하는 높이; left 혹은 right; : 원하는 가로 위치; : 코드의 작성 순서와 상관없이 지정된 위치에 요소를 고정시킨다.
- fixed로 고정을 시켜 놓으면, 스크롤를 아무리 움직여도 브라우저의 정해준 위치에서 벗어나지 않는다.
- position: sticky; : 코드의 작성순서에 따라 일단 배치한 후에, 스크롤이 되는 도중에 정해준 위치에 요소가 오면 붙어서 고정된다.
- Ex) position: sticky; top: 0px => 다른 위치에 있던 요소가 유저가 스크롤을 하다가 브라우저의 최상단에 위치 하게 되면 그대로 붙어서 고정된다!
5. 선택자를 더 다양하게 활용해 보자.
- [원하는 선택자] 그 선택자만 선택해 골라진다.
- Ex) [class=""name] 이후 속성을 적어주면 class 가 name 인 모든 class의 속성을 바꿔주게 될 것이다.
- 연산기호로 더 다양하게 활용 할 수 있다.
- *="문자" => 지정한 문자가 이름에 들어가 있는 선택자만 고른다.
- ^="문자" => 지장힌 문자로 시작하는 이름을 가진 선택자만 고른다.
- $="문자" => 지정한 문자로 끝나는 이름을 가진 선택자만 고른다.
- 자손 결합자 : 선택자의 선택자를 선택한다.
- Ex) body p {CSS 코드} => body안의 모든 p 요소를 선택한다.
- Ex) body > span {CSS 코드} => body 바로 아래의 span 만 선택한다.
- 만약, body안에 p안에 span이 있다면 선택 되지 않는다. 이럴때는 p > span이라고 해 줘야 한다.
- 형제 결합자 : 선택자의 선택자 형제요소들을 선택한다.
- Ex) h1 ~ p {CSS코드} => h1과 같은 위치에 있는 모든 p 들을 선택한다.
- Ex) h1 + p {CSS코드} => h1의 바로 뒤에 있는(첫번째 있는) p를 선택한다.
- 물론 조건만 만족하면 여러개의 요소를 선택도 할 수 있다.
6. 의사클래스
- 선택자에 추가하여, 특정한 상태가 되면 요소를 선택하겠다는 의미 이다.
- 즉, 기본일때 하나의 상태와 의사클래스가 들어가 있는 상태 두개의 상태를 CSS 코드로 작성 해 주어야 한다.
- 자주 사용하는 의사클래스
- hover : 마우스 커서가 올라 갔을때 적용
- box-shadow: 가로, 세로, 색 => 입체감을 살리는 그림자를 만들 수 있다.
- active : 활성화 상태가 되면 적용 (마우스를 누른다거나 하는 상황)
- 선택자:active {transform: scale(0.9);} => 버튼이 눌리는 애니메이션을 간단히 만들 수 있다.
- focus : 그 요소가 선택된 상태일때 적용 (input 에 text를 쓰기 위해 커서가 깜박이는 상태 같은 경우)
- disabled : 요소를 사용불가능으로 만듬 (예를들어 휴대폰 인증 이후에 인증되었습니다. 같은 거 만들어 놓을때 사용하면 될 것 같다)
- nth-child() : 그 요소의 형재들 중에 특정한 번째의 요소를 선택한다.
- ()에는 원하는 번째의 숫자를 넣으면 되고, n을 넣어서 수식으로도 선택이 가능하다.
- nth-child(2n) => 짝수번쨰에 있는 요소만 선택