[css] CSS(Cascading Style Sheet) 기초

CSS(Cascading Style Sheet) 기초


1. 어떻게 CSS와 HTML를 합칠까?



2. CSS의 규칙들

  1. CSS가 하는 일은 HTML 태그를 가르키는 일이다.

    • 가리키는 것 자체를 selector 라고 한다.

    • selector 안에 있는 코드를 속성(Property) 이라 한다.
    • 속성을 쓴 줄의 마지막에 새미콜론(';') 을 붙여야한다.
    • 예시
      h1 {
        color: blue;
        font-size: 20px;
      }
      




3. Cascading의 뜻

CSS의 맨 앞에 있을 정도로 매우 중요한 개념인데, 브라우저가 CSS코드를 읽을 때 위에 있는 코드부터 차례차레로 읽힌다는 뜻이다.



4. Block vs Inline


</br>

4. margin, border, padding

margin


collapsing margins 현상

여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 margin 으로 결합(상쇄)되곤 합니다. 이런 현상을 collapsing margin 현상이라고 한다.

서로다른 box의 border이 같을 때 이런 현상이 일어납니다.

위/아래 쪽만 이런 현상이 일어납니다.


padding


border


Useful Tip


5. Id 와 Class



6. display 태그

inline의 속성을 가지되 block으로 인식하게 하여 높이와, 너비 그리고 사방에 마진을 가질 수 있다. 하지만 old하고 많은 문제가 있어 별로 추천하지는 않는다.




7. Flexbox

위의 display의 단점을 개선하고 좀더 편리하게 box들을 디자인하고자 만든 것이 flexbox이다.



- `justify-content` 의 property(속성)은 main axis(주축)위에서 움직인다. - `align-items` 라고 불리는 property(속성)는 cross axis(교차축)에 적용 된다. - 하지만 `main axis` 와 `cross axis`는 바꿀 수 있다. - `flex-direction`의 옵션을 default인 `row`에서 `column`으로 바꾸면 된다. - 예시 ```css body { flex-direction: column; } ```
### flex-wrap - `flex-wrap: nowrap;` - 모든 요소를 같은 줄에 있게 만들어준다. - flexbox의 width의 사이즈는 초기 설정값으로면 인식하고 같은 줄에 하기위해 사이즈를 바꾼다.

## 8. Position 태그 ### `position: fixed;` - 스크롤을 내려도 위치가 변함이 없다. - `top, right, bottom, left` : 절대 좌표로서 위치를 지정한다.
### `position: relative;` - element가 처음 위치한 곳을 기준으로 수정한다. - `top, right, bottom, left` : 상대 좌표로서 위치를 지정한다.
### `position: absolute;` - absolute는 가장 가까운 relative 부모를 기준으로 이동시켜준다. - `top, right, bottom, left` : 가까운 relative 부모를 기준으로 위치를 이동

## 9. Pseudo Selectors 세부적으로 엘리먼트를 선택해주는 것을 **Pseudo Selector** 라고 한다.
### 예시 - 첫번째 div : `div:first-child` - 마지막 div : `div:last-child` or `div:last-of-type` - 원하는 순서의 div : `div:nth-child(숫자)` - 숫자에 방정식을 넣어도됨 ex) `div:nth-child(2n + 3)` : 3번째부터 짝수 인것들 지정 - input태그의 required 인지 아닌지 여부에 따라 지정 - `input:required {}` or `input:optional {}`
### Combinators - `태그` `태그` : 태그안에 태그를 지정 - `span p {}` : `span` 안에 있는 `p`태그 - 부모태그 `>` 자식태그 : 부모태그 바로밑에있는 자식태그를 지정 - `div > span` : `div` 태그 바로 밑에 있는 `span` 태그 - 태그형제 `+` 태그 : 형제태그 옆에있는 태그를 지정 - `div` + `span` : `div`태그 바로 옆 `span`태그 지정 - 태그 `~` 태그 : 바로 옆에있지는 않은 이웃 형제태그를 지정 - ```html