핵심 키워드 🎯

- CSS

Cascading Style Sheets의 약자로,
HTML, XHTML, XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.

- html과 css

HTML로 문서의 뼈대를 만들면,
CSS는 비유적으로 이 문서의 화장, 꾸밈 역할을 한다.

- CSS선택자

전체 선택자

모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.

유형 선택자

주어진 노드 이름을 가진 모든 요소를 선택합니다.

클래스 선택자

주어진 class 특성을 가진 모든 요소를 선택합니다.

ID 선택자

id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.

특성 선택자

주어진 특성을 가진 모든 요소를 선택합니다.

그룹 선택자

선택자 목록
,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.

• CSS 속성

  • border
    CSS border 단축 속성은 요소의 테두리를 설정합니다. border-width, border-style, border-color의 값을 설정합니다.
    ex)border : solid;
    

  • padding,margin : padding은 아래의 그림에서 content와 border 선 사이의 공간을 말합니다. margin도 아래 그림에 해당합니다.
    각각 상하좌우 전체설정, 부분설정이 가능합니다.
    

  • grid와 flex의 차이점 :
    레이아웃하면 가장 많이 사용되어지는 것이 Flex,Grid입니다.

둘의 차이는 Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.

- [ ] absolute, static, fixed, relative의 차이점
해당 내용들은 css의 position인데, position이란 이름처럼 태그들의 위치를 결정하는 CSS입니다.
static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

논의해보면 좋은 것들 🔥

• 한 사이트에서 html과 CSS가 어떻게 maping되는지 알아보기 (브라우저의 개발자 도구 사용)
• position의 값들(absolute, inherit, relative)를 직접 html에 적용해보고 익히기