220902 멋쟁이사자처럼 FE스쿨 3기 TIL

jhyun_k·2022년 9월 2일
6
post-thumbnail

margin : auto 와 text-align : center 의 차이

margin: 0 auto; / 블록레벨 요소 가운데 정렬해주기 margin:auto는 margin-left: auto 와 margin-right:auto 의 축약이다 /

text-align : center : / 인라인 요소 가운데 정렬해주기 , 이미지도 포함 이미지도 inline element 이다!!! /

상속 여부

모든 프로퍼티가 상속되는 건 아니고 color 나 font-size 같은 속성이 상속됨 width값 같은 건 상속 안됨
상속은 부모의 프로퍼티가 자식에게 그대로 넘어온다는 개념

reset

font-size : 16px 로 초기화 해주는 것은 옳지 않아. font-size는 부모에게 상속이 되는 요소이기 때문에
inherit 이 적절, 부모의 값을 받을겨 b/c 이미 h1의 속성은 user agent stylesheet 에서 정해진 것이니까 ... ? 부모의 값을 상속받기 위해서는 inherit 으로 지정해야 초기화됨....
초기화 해줄 때 어떤 것은 initial로 해주고, 원래 상속 받는 프로퍼티는 inherit으로해준다

display : block / inline / inline-block

block:

  • width height 값 있음, 한 요소가 해당 높이만큼 100% 다 차지
  • display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지
  • 대표적인 block 엘리먼트 = <div>이나 <p>, <h1> 태그
  • block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영

inline

  • width height 값 없음 가로로 , display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치
  • 대표적인 inline 엘리먼트 = <span>이나 <a>, <em> 태그
  • width와 height 속성을 지정해도 무시. b/c 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문
  • margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영x

inline-block:

  • 두 속성 모두 (높이 넓이 있으면서도 한줄로)
  • 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능
  • 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 한다

etc

한 칸 띄어쓰기 하면 하위선택
> 직계 자식 선택자

width: fit-content; 컨텐츠 크기에 맞춰서 width값 조절!!! 첨앎
max-content , min-content 도 있다~~
만약 IE 도 고려해야하면 inline 속성 적용해주기

class 이름 정할때 link1 link2 link3 뭐 이런식으로 하면 안돼 유지보수도 힘들고 정확하지않아

border에 color 지정하지 않으면 current color로 자동으로 지정됨 (글씨 색깔...)

2개의 댓글

comment-user-thumbnail
2022년 9월 4일

ㅎㅎ 지현님만의 언어로 정리하셨네요! 꼼꼼, 깔끔하고 좋아요! 💗 이번 주도 같이 힘내보아요! 파이팅입니당 🔥

답글 달기
comment-user-thumbnail
2022년 9월 5일

완전 깔끔하게 정리하셨네요!! CSS 배운거 다시 한 번 정리하고갑니다! 😎

답글 달기