낭고의 개발노트

"display" ❑ inline: 크기가 없고 글씨 공간을 차지 ⇨ 컨텐츠의 크기 만큼만 차지 ⇨ 줄바꿈 없이 한 줄에 다른 요소들과 나란치 배치 ⇨ width, height 값을 지정해도 무시됨 ⇨ margin, padding 값은 좌우 간격만 반영되고 상하 간격은 무시됨 ❑ block: 한 줄의 너비를 전체 차지 ⇨ 혼자 한 줄을 다 차지하고 있어 다른 요소들을 다음 줄로 밀어냄 ⇨ width, height, margin, padding 속성 모두 반영됨 ❑ inline-block: ⇨ inline(한 줄에 다른 요소들과 나란히 배치) + block(width, height, margin, padding 속성 반영) ⇨ 여러 요소들을 한 줄에 원하는 너비만큼 배치 (= 레이아웃 활용) ❑ visib..

❑ 동일한 선택자는 나중(최근)에 생성된 선택자의 우선순위가 더 높음 ⇨ .main-content 태그명{ }의 경우 우선 순위가 더 높아짐 (= 구체적으로 선택) ❑ *(= 모든 선택자) > tag > class > id > inline style > ! improtant ⇨ ! improtant는 억지로 바꾸는 것이기 때문에 되도록 쓰지 않는 것이 좋음 ❑ HTML에 색상을 적용하지 말고 CSS 스타일에 꼭 작성할 것 ⇨ ex) (X) ❑ 웹폰트 ⇨ 나눔고딕에서 noto sans kr로 바뀌는 추세 ⇨ 웹 사이트에 최대 3개 이하로 쓰는 것이 좋음 ⇨ 폰트에 두께를 적용할수록 용량이 늘어남 ❑ system font (= 상업용 폰트, 추가용 폰트) ⇨ 클..

❑ class ⇨ 클래스명을 지정할 때 앞에 .을 찍고 시작 ❑ id ⇨ id를 지정할 때 앞에 #을 붙임 CSS 기본문법 cascade style sheet 스타일을 지정한다. heading ❑ hex code ⇨ 두 자리씩 같을 때 한 개로 합치기 ⇨ #ffffff는 #fff로 합치기 ❑ rgba color (= RGB+투명도) ⇨ 0~1 ⇨ 용량을 줄이기 위해 간략하게 쓸수록 좋음 ex) 0.5 = .5 = 50% ⇨ 배경과 글자색은 태그된 부분만 투명도가 적용됨 ❑ hsl color (= h:색조 / s:채도 / l:밝기) ❑ opacity ⇨ 태그 안이 아닌 단독으로 opacity 속성을 주면 전체적으로 적용됨 ⇨ 배경색 / 글씨색 둘 다 투명도..