CSS

css를 적용하는 법

1. <style>태그 안에 지정하기
2. link 태그를 사용해서 css파일 연결하기
   • ex. <link rel="stylesheet" href="styles.css" />

css cascading

• css는 위에서 아래로 적용이 된다.

display: block inline

• display: 속성에서 block 과 inline요소를 바꿀 수 있다.

• block
  • 높이와 넓이가 있다.
  • block옆에는 올 수 없다.
• inline
  • inline은 높이와 넓이가 없다.
  • inline 옆에는 요소가 올 수 있다.

padding margin border

• margin
  • 박스의 바깥 쪽
• padding
  • 박스의 안 쪽
• border
  • 박스의 경계선

flex

• display: flex는 부모에 적용해야지 자식들 요소를 조종할 수 있다.
• justify-content는 주축의 방향을 정렬한다.
• align-items는 교차 축의 방향을 정렬한다.
• flex-direction으로 주축의 방향을 바꿀 수 있다.

css 단위

css 단위 정리 글

position

• position:fixed옵션으로 요소를 고정 시킬 수 있다.
• 부모에 posion:relative를 주고 자식태그에 position:absolute를 주고 자식의 위치를 설정하면 부모를 기준으로 위치가 설정된다.

css selector

• .은 class #은 id 를 선택한다.
• :nth-child()로 같은요소중에 번호로 찝어낼 수 있다.
• div span: div 태그의 자식 span을 선택한다.
• div > span: div 태그의 바로 밑 자식 span을 선택한다.
• div + span: div태그의 바로 옆 형제 태그를 선택한다.
• input['type=text']: inpput 태그의 type속성이 text인 요소를 선택한다.