[2주차] 2022 여름방학 HTML & CSS 세미나 정리

✏️ Negative margins

→ 문서 내의 정상적인 흐름을 건들이지 않는다

→ 요소를 이동하려고 음수 마진을 사용하면 그 뒤에 오는 모든 요소들도 같이 이동

→ 음수 패딩 사용 시 테두리가 내용으로 축소, 내용 영역이 내용보다 작아지기 때문에 의미 없음

 

 

 

✏️: active

→ 사용자가 활성화한 요소를 나타낸다

→ 버튼을 누르는 순간부터 떼는 시점까지

→ link→ visited → hover → active 순서로 디자인하기

 

 

 

✏️ @import

→ 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓴다

@import url("bluish.css") speech;
@import url("chrome://communicator/skin/");

 

 

 

✏️ display: inline;

→ 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다

→ width, height 적용 불가(태그의 내부 요소 부피에 맞춰짐)

→ 인라인 태그끼리 연속 사용 시 좌우 약 5px의 margin이 자동 발생

→ 부모 요소의 너비를 초기화하면 새 행으로 자동 줄바꿈

→ inline 태그 : <span>, <a>, <img>, <i>, <strong>

 

 

 

✏️ display : block;

→ 새로운 줄에서 시작, 사용 가능한 최대 가로 너비를 사용함(기본 너비값은 100%)

→ 전체를 차지하기 때문에 각 요소들이 수직으로 쌓인다(한 줄에 한 개씩만)

→ width, height 적용 가능

→ 레이아웃을 작업하는 요소로 적합

→ block 태그 : <div>, <h1>, <p>, <li>, <section>

 

 

 

✏️ display: inline-block;

→ width, height 적용 가능

→ block 요소인데 inline 태그처럼 쓰고 싶을 때 사용

→ inline-block 태그 : <button>, <input>, <textarea>

 

 

 

✏️ Viewport Width | Height

→ viewport : 현재 창에서 볼 수 있는 부분, viewport 바깥의 콘텐츠는 스크롤 하기 전에 안 보임

→ 상대길이 단위[em, rem, lh, vw, vh], 절대길이 단위[px, cm, mm]

→ vw : viewport 너비의 1% : ex) 너비가 1280px, 1vw = 1280의 1% = 12.8px

→ vh : viewport 높이의 1% : ex) 높이가 900px, 1vh = 900의 1% = 9px

 

 

 

✏️ vw, vh vs. 100%

→ vw&vh : 부모의 영향을 받지 않고 뷰포트를 기준으로 어떠한 기기에서도 전체 화면을 꽉 채우는 width&height 값

→ 100% : 부모의 영향을 받기 때문에 상위 요소의 크기에 따라 크기가 결정된다