CSS기초: block과 inline, inline-block의 차이, border-box, postion

💡 핵심 요약 (TL;DR)

'CSS기초: block과 inline, inline-block의 차이, border-box, postion'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 동작 원리와 장단점을 비교 파악하여 프로젝트 개발 상황에 적합한 방식을 선택할 수 있다.

비전공자가 IT개발자로, 커리어전환기9

CSS기초: block과 inline, inline-block의 차이, border-box, postion

1. block과 inline, inline-block의 차이

• block은 <div>태그처럼 한 줄을 다 차지하는 요소
• inline과 inline-block은 <span>태그처럼 딱 콘텐츠 공간만을 차지하는 요소
• 그 중 inline은 높이height를 가질 수 없다.
• inline-block은 높이height를 가질 수 있다.

그림이 이해가 쉬우니까 구글링해보았다

2. CSS box-sizing : border-box로 꼭!

CSS 시작 전에 box-sizing : border-box로 지정해두면 편하다.
지정하는 방법은 2가지

1. 지정하고픈 id나 class에 각각 지정

#id, .class {
  box-sizing : border-box;
}

2. style sheet 시작시에 바로 기재

*{
  box-sizing : border-box;
}

#id {
  //write your code
}

3. 어렵고도 어려운 postion

항상 어려운 게 포지셔닝이다.
대학시절 마케팅때고 포지셔닝이 어려웠는데 여기서 또 만날 줄이야?!(물론 다른 학문으로)

속성	설명
static	기본값
relative	기본값+상대적인위치
fixed	브라우저 화면의 좌상단을 기준으로 절대적인 위치
absolute	부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치
sticky	기본적으로 relative처럼 작동하나, 스크롤 영역을 벗어나면 fixed처럼 작동. ex)스크롤내리면 따라다니는 팝업광고창

#TILHTML&CSS