낭고의 개발노트

《 position 》 ❑ 태그 종류: relative / absolute / fixed / sticky ⇨ 기본값: static ⇨ 각각의 기준으로 배치: left, right, top, bottom ⇨ 기준을 정할 때 사용하는 태그: relative ⇨ 억지로 움직여야 할 때 사용하는 태그: absolute ⇨ 기준 위치에서 안쪽으로 이동하면 양수 ⇨ 기준 위치에서 바깥쪽으로 이동하면 음수 # relative ❑ 기준이 자기 자신 (= 원래 위치) ⇨ 기준을 정할 때 설정! ❑ 가상으로 이동 (= 실체 이동X) ❑ left / right / top / bottom에서 민다고 생각하기 .relative{ position: relative; top: 50px; /* top: -100px; */ /* ma..

❑ 왼쪽/오른쪽 가로 배치 ❑ 지정방향으로 이동 ⇨ left / right / none ❑ 플롯에 크기는 내용의 크기와 똑같이 자동 인식 ⇨ 크기(=너비)가 없는 인라인 요소도 float:위치를 주면 크기가 잡힘 ⇨ display:block과는 같이 쓸 필요가 없음 ⇨ 플롯이 적용된 요소안의 clear은 적용할 필요가 없음 # clear ❑ 달려드는 속성 해지: 뒤따라 오는 요소들이 플롯에 걸린 요소를 향해 달려듬 .class:after{ content:''; clear:left; display: block; } ➡ clear:left / right / both (=왼쪽 or 오른쪽 둘 다 해지) ➡ content:' '으로 공백을 줌 ➡ clear는 block요소만 적용 (=displ..

"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 (= 상업용 폰트, 추가용 폰트) ⇨ 클..