📚 edwith 부스트코스 : 웹 프로그래밍
FE - CSS
선언 방법
- 인라인 방식: HTML 태그 내에 적용하는 방식, 우선순위가 가장 높음
- Internal 방식: HTML head 태그 내에 style 태그로 지정
구조와 스타일이 섞이게 되므로 유지보수가 어려움
서버에 CSS파일을 부르기 위해 별도의 요청 필요 X
- External 방식: 외부 파일로 지정(link 태그로 추가)
CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현
- Internal 방식과 External 방식의 우선순위는 동등
상속과 우선순위 결정
- padding, border 등과 같은 box-model의 속성, 혹은 배치와 관련된 속성들은 상속되지 않는다.
- cascading 규칙
- 동일한 대상에 대해 선언한 경우 나중에 선언된 게 우선
- 구체성에 대해서는 전에 공부했던 것 참고
200831_TIL : 구체성
- 혹은 구글에 specificity 검색
CSS Selector
- element에 스타일을 지정하기 위해 3가지 기본 선택자 사용 가능
-> tag, id, class
- id는 한 HTML document에 하나만 쓰는 것이 좋다(identifier)
- 부모요소 > nth-child(n) : 부모 태그 안의 모든 요소 중 n번째 요소 선택
- 부모요소 > nth-of-type(n) : 부모 태그 안의 A라는 요소 중 n번째 요소 선택
- 다양한 선택자들에 대한 내용은 전에 공부했던 것 참고
200831_TIL : 선택자
CSS Layout
- display 속성
200912_TIL : display
- position 속성
200912_TIL : position & offset
- float 속성과 clear 속성
200912_TIL : float, clear
- margin으로 간격 주기
200905_TIL : margin
- box-shadow 속성으로 입체감을 주기도 함
- box-sizing 속성
- border-box: element 크기는 그대로 유지하고 padding 값만 변화
- 기본값으로 설정하면 padding을 늘렸을 때 전체 block 요소의 크기도 영향을 받을 수 있음
- 이외에도 css-grid, flex 속성 등이 있음!!
- 전체적인 layout 구현 방법?
- 전체 레이아웃은 float로 2,3단 컬럼 배치 구분
- 특별한 배치를 위해서는 absolute 속성값 사용, 기준점은 relative
- nav와 같은 element는 block 요소이지만 inline-block 요소로 변경해 가로로 배치하기도 함
- element 내의 텍스트나 다른 element 간의 간격은 padding과 margin 속성을 적절하게 이용
float 기반 샘플 화면 레이아웃 구성
오늘 공부하면서 느낀 점
- css 복습 파트를 공부해보았다. 이번주는 토요일에 출근해야 해서 평일에 좀 하려고 했는데 요즘 잠이 점점 많아지는 바람에...
- 첫 번째 프로젝트 얼른 돌입할 수 있게 노력해야겠다,,,