CSS기초
- CSS의 기본적인 셀렉터
#와.의 차이를 이해하고 있는가?
=> #은 id에 접근, .은 class에 접근할때
- 절대단위와 상대단위를 구분할 수 있는가?
-> px만 생각이 난다.
- CSS박스 모델에 대해 이해하고 있는가?
=> border, margin, 정도만 알고 있다.
- 박스 측정 기준 (content-box, border-box) 두 가지의 차이를 알고 있는가?
=> 알고있지 않다.
CSS중급
- 다양한 CSS 셀럭터 규칙을 알아야 한다
- 후손 셀렉터와 자식 셀렉터의 차이는 무조건 알아야한다.
- 레이아웃을 위한 HTML을 만들 수 있어야한다
- Flexbox를 이용해 레이아웃을 만들 수 있어야 한다. (아래 속성에 대한 이해필요)
- 방향 - flex-direction
- 얼마나 늘릴 것 인가? - flex-grow
- 얼마만큼의 크기를 갖는가? - flex-basis
- 수평 정렬 - justify-content
- 수직 정렬 - align-items
HTML 구성하기
대부분 콘텐츠는 좌에서 우로 , 위에서 아래로 흐른다.
CSS로 화면을 구분할 때는 수직분할(align-items)?, 수평분할(justify-content)? 을 차례대로 적용해서 콘텐츠의 흐름을 따라 작업을 진행해야 한다.
1. [수직분할] 화면을 수직으로 구분해서 콘텐츠가 가로로 배치될 수 있도록 요소를 배치한다.
2. [수평분할] 분할된 각각의 요소를 수평으로 구분해서 내부 콘텐츠가 서로로 배치 될 수 있도록 요소를 배치한다.
- 수평으로 구분된 요소에 height 속성을 추가하면 수평분할을 보다 직관적으로 할 수 있다.
레이아웃 리셋
HTML 문서는 기본적인 스타일을 갖고있다. 이 기본 스타일이 레이아웃을 잡는데 방해가 될 떄가 있다.
ex)
- 박스의 시작을 정확히 (0, 0)의 위치에서 시작하고 싶은데 ,
<body>태그가 가진 기본 스타일에 약간의 여백이 있다.
- width, height 계산이 여백을 포함하지 않아 계싼에 어려움이 있다.
- 브라우저마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다
해결할 수 있는 몇 줄의 코드
* { box-sizing: border-box; } body { margin: 0; padding:0; } 기본스타일링을 제거하는 코드
블록체인 개발자의 꿈을 위하여