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

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로 자동으로 지정됨 (글씨 색깔...)