CSS 면접 대비 정리 1. 기본사항

CSS 박스 모델

CSS Box model - GeeksforGeeks

CSS Box model - GeeksforGeeks

브라우저의 렌더링 엔진은 화면을 렌더링할 때, CSS 박스 모델에 따라 요소를 표현함.

웹 페이지의 디자인 및 레이아웃을 표현하는 방식.

• content : 이 속성은 너비 및 높이 속성을 사용하여 크기를 조정할 수 있는 텍스트, 이미지 등을 표시하는 데 사용됩니다.
• padding : 이 속성은 정의된 테두리 내부의 요소 주위에 공간을 만드는 데 사용됩니다.
• border : 이 속성은 콘텐츠, 패딩 영역을 둘러싼 테두리를 만들며, 스타일, 색상 및 너비를 설정할 수도 있습니다.
• margin aria : 이 속성은 테두리 주변의 빈 공간을 만들며, 다른 요소와의 분리를 위해 사용됩니다.

CSS 박스 모델

CSS box-sizing  : border-box VS content-box

content-box를 적용하면, 컨텐츠 크기가 해당 width, height로 적용되며, padding, border는 컨텐츠 크기에 더해진다.

실제 화면에 보여지는 크기는 border까지 반영이 되기 때문에, 요소 크기 예측을 어렵게 한다. 

content-box를 적용하면, 화면에 보이는 크기는 width-height로 제한된다.

주의할 점은 자식 요소다. 컨텐츠의 width, height를 부모의 padding, border를 고려해서 계산해야 한다.

아래 box element의 dimension은 450px * 200px이다. padding이 부모의 컨텐츠 영역을 줄이기 때문이다.

<style>
  * {
    box-sizing: border-box;
  }
  section {
    width: 500px;
    height: 250px;
    padding: 25px;
  }
  .box {
    width: 100%;
    height: 100%;
    border: 2px solid;
  }
</style>
<section>
  <div class="box"></div>
</section>

 

CSS 속성 적용 방향

1. 일단 12시부터 시계 방향으로 적용.

2. 해당 공간이 비어있으면 대칭 적용

CSS 적용 방향.

CSS 사용하면 좋은 단위

타이포그래피 : rem

박스모델(마진, 보더, 패딩) : px

width/height : 고정은 px, 상대는 %

컬러 : hsl

 

 

명시적 색상 동기화

currentColor는 항상 요소의 명시적으로 설정, 상속된 색상에 대한 참조이며 색상이 사용될 수 있는 모든 곳에서 사용할 수 있습니다.

.box {
  color: hotpink;
  border: 1px solid currentColor;
  box-shadow: 2px 2px 2px currentColor;
}

 

Auto Margin

명시적 너비를 가진 요소의 중앙 정렬을 위해 사용.

수평에서만 적용됨. top,bottom에 auto는 0px과 마찬가지.

블록 요소는 명시적 요소가 없으면 한 줄을 채움.

<style>
.content {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  background: palevioletred;
  padding: 16px;
}

main {
  width: 100%;
  height: 200px;
  border: 3px solid silver;
}

</style>
<main>
  <section class="content">
    Hello World
  </section>
</main>

응용 : 이미지 카드 만들기 (패딩 없애기)

이미지는 일반 dom과 다르게 동작함.

크기를 지정 안해주면 문서 흐름에서 벗어남.

직접 레이아웃과 연관되게 하면 좋지 않음.

wrapper element를 만든다.

그 다음 부모 엘리먼트의 패딩 크기만큼 마진을 당겨준다.

이미지와 paragraph의 패딩이 다른 카드

<div class="card">
  <p>
    Otters have long, slim bodies and relatively short limbs. Their most striking anatomical features are the powerful webbed feet used to swim, and their seal-like abilities holding breath underwater.
  </p>
  <div class="stretched-out">
    <img alt="A cute otter in water" src="/course-materials/otter.jpg" />
  </div>
  <p>
    More importantly, otters are glorious water dogs, playful and curious. The otter, no other, is the best animal.
  </p>
</div>
<style>
body {
  background: #222;
  padding: 32px;
}

.card {
  background-color: white;
  padding: 32px;
  border-radius: 8px;
}

.stretched-out{
  margin-left : -32px;
  margin-right : -32px;
}

img {
  display: block;
  width: 100%;
}

p, img {
  margin-bottom: 16px;
}
</style>

Negative Margin

http://www.quirksmode.org/blog/archives/2020/02/negative_margin.html

Negative margins in CSS - QuirksBlog

 

Flow Layout

css의 다양한 레이아웃 모드 중 디폴트.

인라인, 박스, 인라인 박스 중 하나로 보여줌

display 속성을 사용함.

인라인은 텍스트의 일부분을 강조하기 위해 사용. strong, a

블록은 레이아웃, 텍스트 구역을 만들기 위해 사용. 대부분 블록임.

 

인라인 예외: 해당 요소들은 마진, 보더, 패딩, 컨텐츠 크기 조절 가능

버튼

• img
• video
• canvas