[CSS기초] 캐스 케이딩과 레이아웃

 

캐스 케이딩

 

하나의 태그에 중첩해서 css 두었을 때 어떤것을 우선순위로 두냐는것

1순위: style 속성

2순위: id 선택자

3순위: 클래스 선택자

4순위 : 태그 선택자 

결론적으로 css의 색깔은 파우더 블루 

 

우선순위가 복잡할때는 !important 쓰면 해당 속성/선택자의 우선순위가 1위로 올라감

 

 

인라인 모델,블록 모델

 

화면전체를 사용하는 태그 => block element

화면의 일부를 차지하는 태그 => inline level element

 

수업내용에 해당하는건 화면전체를 다 사용하는것이기에 block element

미닝에 해당하는 네모는 화면의 일부를 차지하는 것이기에 inline level element

 

인라인과 블럭을 임의로 바꿔주고 싶으면 display:inlie display:block하면 된다

 

display를 통해 둘을 바꾸면

 

만약 인라인,블럭 효과를 color에 주면

 

블록 앨리먼트	인라인 앨리먼트
- 사용 가능한 최대 가로 너비 사용함 (기본 너비값 100%) - 전체를 차지하기 때문에 요소들이 수직으로 쌓임(한줄에 하나씩) -> 세로 배치 - 크기값 가질 수 있음 (가로너비& 세로 길이 지정 가능 - 상하좌우 margin padding 가질 수 있음 - 레이아웃 작업하는 요소로 적합	- 사용 가능한 필요한 만큼의 영역 사용(컨텐츠 너비만큼) -요소들이 수평으로 배치(한 줄에 여러개 배치 가능) -> 가로로 배치됨  - 크기값 가질 수 없음(사이즈 지정 불가능) - 상하 margin 적용 불가능 (좌우 margin과 상하좌우 padding은 가능) - 텍스트 작업하는 요소로 적합

https://velog.io/@aepee/%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%9A%94%EC%86%8C

블록 요소와 인라인 요소

박스모델

 

매우중요!

 

박스모델을 만들기 전에 테두리를 먼저 만들어볼 것이다. 테두리를 만드는 것은 매우 중요한데 이는 박스모델 기준점 선정하기 때문이다. 

 

 

테두리와 p태그의 간격이 너무 가까워서  띄우고 싶으면 padding을 사용하면 된다. 

 

간격이 띄워진것을 확인할 수 있다. 이 아래에 똑같은 p태그를 복붙할 건데 행과 행 사이의 거리도

내 마음대로 조정하고 싶으면 그 때 사용하는게 margin이다! 

 

 

위와 같은 블럭앨리먼트들은 화면 전체를 쓰는 특성이 있는데 그러고 싶지 않으면 width값을 조정할 수 있다. 

 

cf) 인라인과 블록 앨리먼트에 해당하는 태그

https://blog.naver.com/hyoyeol/70130959652

[CSS 강좌] 인라인 엘리먼트와 블록 엘리먼트

https://developer.mozilla.org/ko/docs/Web/HTML/Block-

 

https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

인라인 요소 - HTML: Hypertext Markup Language | MDN

height은 테두리를 이탈할 수 있어서 조정하지 않는 것을 추천. 

 

box - sizing

 

박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다.

두개의 hello는 엄연히 크기가 같다. 단지 border에 의해 width와 height가 달라진 것 처럼 보이는 것이다. 이런일이 왜 일어나는 것이냐면  css 초기에는 앨리먼트의 크기가 margin,paddin,border의 크기가 모두 빠진 컨텐츠 영역을

앨리먼트의 크기로 봤다. 저 사진에서 하얀색 영역을 앨리먼트의 크기로 본 것이다. 

하지만 border로 인해 크기를 예측하기가 힘들다.

 

그래서 생겨난게 box-sizing이다. 컨텐츠의 크기에 맞게 border를 조정해 주면서 크기를 예측가능하게 해준다.

 

box-sizing:border-box를 해주면 border의 크기에 맞게 width와 height 지정을 해준다.

모든 element가  border의 크기를 width와 height의 값으로 사용하고 싶으면

 

*{

  box-sizing:border-box;

}

 

++) box-sizing에서 더 알아보고 싶으면

https://www.codingfactory.net/10630

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

기본적으로 initial(기본),content-box(컨텐츠 영역),boder-box(border기준),inherit(부모의 속성값 상속)으로 구성되어 있다. 

 

마진 겹침 현상

마진겹침현상으로 인해 css 효과가 뜨지 않을 때가 있다. 이럴 때를 대비해 마진 겹침현상이 어떨 때 일어나는지

알아보고자 한다. 

 

- 부모 자식 앨리먼트 마진 겹침 현상 

 

아직 마진 겹침 현상이 일어나지 않았다.

 

하지만 parent 선택자에 border를 빼버리면 child선택자의 위치가 확 올라가게 된다.

 

부모 태그의 경계가 투명해지면 자식값이 부모의 마진과 합쳐지는 현상이 나타나게 된다. 

 

정리하자면 부모 앨리먼트가 투명한 상태일 때 부모의 마진값과 자식의 마진 값 중 더 큰 값이 자식 앨리먼트의

마진값(자식앨리먼트의 위치)으로 사용된다!

 

정리: 어떤 태그의 border같은 시각적인 효과가 없다면 위쪽의 margin값과 아래쪽의 margin값 중 더 큰 값이 margin값이 된다. 

 

 

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해

 

https://aboooks.tistory.com/78

[html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)

https://thrillfighter.tistory.com/479

html/css box-sizing 속성과 마진(margin) 겹침 현상