📚 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 복습 파트를 공부해보았다. 이번주는 토요일에 출근해야 해서 평일에 좀 하려고 했는데 요즘 잠이 점점 많아지는 바람에...
• 첫 번째 프로젝트 얼른 돌입할 수 있게 노력해야겠다,,,