box,display,선택자,important!,pseudo (유데미 강의, CSS 완벽 가이드, 맥스 선생님)

박스 이해하기

html 요소들은 박스(요소 컨텐츠와 border로 구성)의 형태를 띄고 있는데

border(테두리) 와 요소 컨텐츠 사이의 공간을 padding이라고 한다

border밖 공간을 margin이라고 하며 margin은 요소에 포함되지 않는다

(이때까지 명확하게 이해가 안갔는데 이 강의듣고 1방에 이해했다 갓맥스 ㄷㄷ)
 

마진 상쇄(margin collapsing)

두 요소의 margin이 겹치는 부분이 있으면 마진이 큰쪽이 그 공간을 차지한다(덮어씌운다)

css에서 자동으로 상쇄하는 것이기에 의도하지 않았다면 margin-top 혹은 margin-bottom을 쓰도록 하자

 

프로퍼티 축약

border: a b c 처럼 한 줄로 작성하는 것

 

%의 의미

width, height를 %로 지정할 경우 해당 요소의 부모 요소가 차지하는 크기를 100%로 잡고 해당 %만큼 차지하게 된다

하지만 부모 요소가 body 같은 경우에는 부모 요소가 차지하는 크기가 자식 요소들이 차지하는 크기만큼이기 때문에 자식요소에 어떤 %를 줘도 변화가 없다, 변화를 주고 싶다면 body에 수치적인 값 (ex. 1000px)을 넣거나 body, 그리고 그 부모요소인 html 둘다 100%를 주면 변화를 줄 수 있다

 

그리고 width, height는 요소의 컨테츠의 크기만을 의미하므로 여기에 padding,border,margin 크기가 붙으면 전체 크기가 된다 (height를 500px로 설정했어도 padding 10px, border 5px, margin 10px을 주면 요소가 차지하는 height가 550px이 된다는 의미)

이에 대한 프로퍼티가 존재하는데 바로 box-sizing이다

기본값은 'content-box'이고 이를 'border-box'로 설정할 경우 width,height가 border까지를 포함한 크기가 된다 (이럴 경우 컨텐츠의 크기는 width에서 border,padding을 뺀 값이 된다)

많은 경우 border-box로 세팅하고 하는데 이를 편하게 하려면 *{}에 border-box를 설정하면 된다 (상속은 블록요소에 통하지 않는다)

 

 

display 특성

none: 표시되는 문서에서 사라짐 (DOM 에는 존재)

block: 보통 요소들의 기본사항 (a태그와 같은 특정 태그는 inline이 기본), block은 한줄 전체를 차지

inline: 인라인 요소에서는 padding,margin 설정 불가능, 필요한 부분까지만 차지

inline-block: 인라인 요소처럼 필요한 부분까지만 공간을 차지하지만, 블록 요소처럼 padding,margin 가능 (보통 nav에 사용)

 

block: <div> , <section> , <article> , <nav>

,

<h1> , <h2>  , <p>

inline: <a> , <span> , <img> 

 

display:none vs visibility: hidden 차이점

none: DOM의 일부, 공간차지 X

hidden: DOM의 일부, 공간차지 O

 

 

inline-block 주의할 점!

편집기에서 보기 좋게 하기 위해 들여쓰기,줄넘김 등 요소 사이에 공백이 생기는데 놀랍게도 이 공백이 DOM에 공간으로 포함된다 (이번에 처음 알았다 ㄷㄷ 갓 맥스)

그래서 분명 길이를 체크해서 정확하게 빼줬는데도 요소(inlineblock)가 그 다음줄로 출력된다면 편집기에서의 공백이 별도의 공간을 차지하고 있기 때문이다 (개발자 도구에서도 표시되지 않아서 차지하는 공간의 길이를 알 방법이 없다)

물론 요즘에는 flex,grid 이런것들이 있어서 상관없을 수도 있지만 알아두는 것이 정말 좋을 것 같다

 

pseudo

class: 요소 상태에 따른 스타일 지정 (:) ex. hover,active

element: 요소 특정 부분에 대한 스타일 지정 (::) ex. first-letter, after

 

class 와 id 선택자의 구분

대부분의 경우 class 선택자로 하는 것이 현명함, 일반 선택도 권장되지 않음 (추후에 수정할때 귀찮아짐)

id 선택자의 경우 css외의 목적(ex. 인덱싱을 통해 위치 이동)이 있을 경우 사용해야함 (css만을 위해서 id를 쓰는 것은 좋지 않음)

 

요약: 그냥 클래스만 주구장창 쓰자

 

 

!important 구문

모든 명시도를 무시하고 항상 적용되는 프로퍼티에 사용

단, 절대 절대 쓰지 말 것을 권장함 (그냥 없는 기능이라고 생각하자, js를 통한 일시적인 변경이나 css 라이브러리를 가져와서 수정할때만 사용함)

 

not 은 꼭 필요한 상황에서만 사용하자

 

 outline 과 border는 다르다, margin과 border 사이의 얇은선이 outline이라고 생각하자

 

css를 연결하는 link 요소의 순서에 따라 덮어쓰기가 가능하다 (위에서부터 연결하므로 밑에 배치하면 그 위에 내용을 덮어씌울 수 있다, 그래서 보통 공통으로 들어가는 css를 위에 배치하고 각 페이지별로 바뀌는 css를 그 아래에 배치한다)

 

text-align 특성은 inline 요소에서만 적용 가능하다 (텍스트에만 적용되는 것은 아니다)

 

float 특성: 현재는 flex의 등장으로 자주 사용되지 않음, 이미지를 텍스트 안에 배치할때 유용, inline 요소에게는 공간을 차지하는 것처럼 작용하지만 block 요소에게는 공간을 차지 하지 않는 것처럼 작용함 (그래서 block요소 위에 떠(float) 있는것처럼 보임), float을 써서 오른쪽에 붙게 만들고 싶고 그러면서 공간을 차지하고 싶다면 해당 요소 바로 뒤에 div를 넣고 clear: both 속성을 css로 넣어주면 가능함 (근데 이런 용도라면 그냥 flex를 쓰자)

float 요약: 이미지를 텍스트안에 배치할때만 사용하자 

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/