[DAY3] CSS 기초

유진·2023년 7월 8일
CSS강의정리
post-thumbnail

CSS 기초

여러 Selector가 같은 Element를 가리킬 때

⇒ 모든 Selector 내 Property가 적용된다.

같은 property가 충돌할 때

.author{
	font-style: italic;
	font-size: 18px;
}

#author-text{
	font-size: 20px;
}

p,li{
	font-family: sans-serif;
	color: #444444;
	font-size: 22px;
}
  1. !important로 선언할 때 가장 높은 우선 순위를 가진다.
  2. inline style (HTML attribute로 작성하는)가 그 다음 우선 순위를 가진다.
  3. id selector가 그 다음 우선 순위를 가진다.
  4. class (.) 나 pseudo-class (:) 가 그 다음 우선 순위를 가진다.
  5. element selector (p, div, li, …)가 그 다음 우선 순위를 가진다.
  6. universal selector(*)가 가장 낮은 우선순위를 가진다.

⇒같은 우선 순위의 selector들로만 구성될 때 같은 property에 대해서는 마지막에 있는 selector가 적용된다.

⇒ id나 class 이름이 똑같아도 상관 없다.

  • 아래와 같을 때 p element에 적용되는 color는?
<footer id="copyright" class="copyright text">
      <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
</footer>
#copyright{color: red;}

.copyright{color: blue;}

.text{color: yellow;}

footer p{color: green;}

⇒ id selector의 우선순위가 가장 높으므로 빨간색으로 표시된다.

⇒ VSC에서 selector에 마우스를 hover하면 selector specificty를 볼 수 있다.


⇒ 개발자 도구에서 #copyright 의 color를 체크 해제하면

그 다음 우선순위인 yellow가 된다.

.text의 color를 해제하면 blue가,

.copyright의 color를 해제하면 green이 된다.

  • (important keyword) 아래와 같을 때 p element에 적용되는 color는?
#copyright{color: red;}

.copyright{color: blue;}

.text{color: yellow;}

footer p{color: green !important;}

⇒ important keyword !가 다른 모든 selector보다 더 높은 우선순위로 만들어주기 때문에 초록색으로 표시된다.

⇒ 이는 보통 사용하지 않는 키워드이다.

💡 CSS 작성 팁

Selector를 최대한 간단하게 작성한다.
하나의 Element에 너무 많은 중첩이나 id, class를 추가하지 않는다.
important keyword같은 해킹을 일반적으로는 사용하지 않는다.

상속

상속이란 부모 요소에게서 값을 물려받는 속성이다.

  • body Selector

body는 보통 모든 요소들의 부모 요소이므로 이를 활용할 수 있다.

자식 요소에서의 속성은 부모 요소에서의 같은 속성보다 우세하기(override) 때문에 자식 요소의 속성이 나타난다. 상속된 속성의 우선순위가 가장 낮다고 할 수도 있다.

그러나 body 요소의 모든 속성이 자식 요소에 상속되는 것은 아니다.

일반적으로 CSS 속성은 부모 요소에서 자식 요소로 상속되지만, 몇 가지 속성은 상속되지 않거나, 상속되지만 일부 제한이 있을 수 있다. 이는 속성의 특성에 따라 다르다.

CSS에서는 명시적으로 inherit 값을 사용하여 특정 속성을 상속하도록 지정할 수 있다. 그러나 기본적으로 대부분의 속성은 상속되지 않거나 명시적으로 상속을 설정하지 않는 한 상속되지 않는다.

예를 들어, 보통 text와 관련된 color, font-size, font-family와 같은 일부 속성은 일반적으로 상속된다. 이 경우, body 요소에 적용된 속성이 자식 요소에 상속되어 자식 요소에서도 동일한 스타일이 적용될 수 있다.

하지만 width, height, margin, padding과 같은 박스 모델 속성은 일반적으로 상속되지 않는다. 이러한 속성은 각 요소에 개별적으로 적용되며, 부모 요소의 속성과는 독립적으로 계산된다.

따라서 모든 CSS 속성이 자동으로 body 요소의 자식 요소에 상속되지는 않는다. 각 속성은 상속 여부를 속성 자체의 특성과 명시적인 상속 설정에 따라 결정된다.

  • 반면, universal selector (*) 은 페이지의 모든 요소가 선택되어 적용한다(상속이 존재하는 게 아님). 상속되지 않는 특정 속성에 대해 모든 요소에 적용해주고 싶을 때 유용하다.
    *{
	border-top: 10px solid #1098ad;
}

Box Model

박스 모델은 웹페이지의 요소들이 어떻게 표시될지 정한다. width와 height를 가진다. 박스 모델의 (background-color 들을 적용하는 부분이면 padding)

  • content : text, image, table, video, … 등
  • border : border은 기본적으로 해당 element 안에 있다.
  • padding : content를 감싸는 공간. element 안에 있다. 즉, 요소 내부 공간. content 와 border 사이에 놓인다.
    • content, border, padding : element의 보여지는 부분 (visible part)
  • margin : element 밖에 있는 공간. element 간 공간을 두고 싶을 때 사용한다.
  • fill area : content 뿐만 아니라 padding과 border를 포함한 영역. 예를 들어 background-color나 background-image를 설정하면 채워지는 영역.

→ background-color 등을 적용하고 싶으면 padding, 요소 간의 간격을 주고 싶으면 margin을 사용하면 된다.

Element의 높이와 너비

  • Final element height = top border + top padding +height + bottom padding + bottom border
  • Final element width = left border + left padding +
    width + right padding + right border
  • margin은 element의 높이와 너비 계산에 포함되지 않는다. element의 주변 공간이기 때문이다.

Margin과 Padding

padding: 20px; /* 네 면에 20px의 패딩 */

/* shorthand */
padding: 10px 40px; /* 상하 좌우 */

padding: 10px 40px 20px 30px; /* 상 우 하 좌 (시계방향) */

List items

list에 margin을 넣을 때 보통 마지막 항목에는 공간이 없어야 한다. list item들 간 공간은 원하지만 item의 끝에 공간을 넣는 건 원치 않기 때문이다. 이 때 아래와 같이 할 수 있다.

li{
  font-size: 20px;
  margin-bottom: 10px;
}

li:last-child{
  margin-bottom: 0; /* 0은 unit을 입력하지 않아도 된다. */
}

Global reset

element에 margin과 padding을 스타일링 하기 전에 글로벌 초기화를 해주어야 한다.
새 프로젝트를 할 때마다 해주어야 할 과정이다.

*{
	margin: 0;
	padding: 0;
}

global reset을 해주면 ul이나 ol에 대해서 왼쪽 공간이 사라져서 bullet-point나 숫자가 보이지 않는다. 이 때 padding-left나 margin-left를 주면 된다.

💡 수직적인 공간을 주고 싶을 때 margin-top이나 margin-bottom 둘 중 하나만 사용하는 것이 추천된다. 둘을 섞어 사용하는 것은 비추천. (개인적인 선호로 margin-bottom을 사용하는 것을 추천함)

Collapsing margins

같은 공간을 차지하는 margin이 2개일 때 둘 중 하나만 페이지에 보인다. 보통 둘 중 더 큰 쪽이 보인다.

  • 예시

p와 h3이 위아래에 위치하고 있다.

❗ p에 margin-bottom을 15px로 주고, h3에 margin-top을 40px로 줬을 때 p와 h3 간의 간격은 55px이 아닌 40px이 된다 
<p>You can learn more at MDN Web Docs</p>

<h3>Why should you learn HTML?</h3>
p{
  margin-bottom: 15px;
}
h3{
  margin-bottom: 20px;
  margin-top: 40px;
}

Element에 크기를 추가하기 (width, height)

%(퍼센트)로 크기

<header class="post-header">
  <img
    src="img/post-img.jpg"
    alt="HTML code on a screen"
    width="500"
    height="200"
    class="post-img"
  />
</header>
.post-img{
  width: 100%;
  height: auto;
}

보통 %는 부모 요소 컨테이너의 너비의 %를 말한다.

여기서 post-header의 너비가 웹페이지의 가로 길이라서 post-img의 width를 100%로 했을 때 웹페이지의 크기를 따라간다.

이는 스크린의 크기가 변하는 반응형 웹에서 중요한 개념이다.

브라우저 안에서 중앙 맞추기

  1. body 안의 모든 요소를 컨테이너 안에 넣는다.
<body>
	<div class="container">
		...
		...
		...
	</div>
</body>
  1. 해당 컨테이너에서 width를 주고 좌우 margin에 auto를 넣는다.
.container{
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

⇒ margin 왼쪽 오른쪽 값이 똑같아지고, 이는 반응형 웹에서 중요하다.

Box의 유형

CSS에는 다양한 유형의 박스가 있다.

대부분의 요소는 좌우 공간을 전부 차지고 있다. — block-level box, block-level element

몇몇 요소는 콘텐츠가 있는 공간만 차지한다. — inline box, inline element

  • CSS에서 display: block, display: inline를 이용해 박스를 바꿀 수 있다.

Block-Level Elements

  • 부모 요소의 너비의 공간을 끝까지 차지한다.
  • line-break가 있어 나란히 있을 수 없고 수직으로 쌓을 수 있다.

Inline Elements ⭐

  • 콘텐츠에 필요한 공간만 차지한다.
  • line-break 없이 요소 뒤나 앞에 줄 바꿈을 일으키지 않는다.
  • height와 width가 적용되지 않는다.
  • padding과 margin은 수평으로만 적용된다. (좌우)
    • 예시: img, strong, a, button, etc.
⭐ block box와 inline box의 차이점에 대해 잘 숙지해야 한다. (초보자들이 여기서 실수를 많이 하기 때문)
  • inline box 에서 magin과 padding의 적용 예시

nav a:link{
  background-color: orangered;
}

nav a:link{
  background-color: orangered;
  margin: 20px;
}
nav a:link{
  background-color: orangered;
  padding: 20px;
}

padding의 경우, 상하에도 잘 적용된 것처럼 보일 수 있으나 이는 오직 element 내부에서만 그렇게 보일 뿐이다.

block 요소였다면 element끼리 수평을 있을 수 없고, 상하로 20px씩 내려갔을 것이다.

Inline-Block Box

display: inline-block

외부에서는 inline box처럼 작동하지만 내부에서는 block 수준의 요소처럼 작동하는 box이다.

즉, inline box 컨텐츠를 위해 필요한 공간만을 차지하는 block box인 것이다. 그래서 줄 바꿈을 일으키지 않는다.

하지만 여전히 margin과 padding을 사용할 수 있다.

→ inline과 block의 장점만을 결합한 것.

nav a:link{
  background-color: orangered;
  margin: 20px;
  padding: 20px;
  display: inline-block;
}
  • 참고

위에서 List Item과 마찬가지로 여러 항목에 margin을 넣을 때 보통 마지막 항목에 공간이 없어야 한다. 여기서는 오른쪽에 margin을 준다고 했을 때, 마지막 요소에서는 오른쪽 margin을 아래와 같이 없앨 수 있다.

nav a:link{
  background-color: orangered;
  margin-top: 10px;
  margin-right: 20px;
  display: inline-block;
}
nav a:link:last-child{
  margin-right: 0;
}
💡 보통의 경우 디폴트 box type을 사용하지만, 필요한 경우 우리가 임의로 block, inline, inline-block 등으로 바꿔 사용할 수 있다.
profile
유진
이전 포스트

[DAY2] CSS 기초

다음 포스트

[DAY4] CSS 기초, CSS 레이아웃

0개의 댓글