200924_TIL

hyeojung·2020년 9월 24일
0

TIL

목록 보기
35/62
post-thumbnail
post-custom-banner

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

0개의 댓글