'코린이 개념잡기/CSS' 카테고리의 글 목록

"Cascading"이라는 용어는 여러 분야에서 사용되지만, 일반적으로 "연속적으로 일어나는" 또는 "연쇄적인" 의미이다.

알아볼 cascading은 스타일 시트 언어, CSS(Cascading Style Sheet)에 들어가는 cascading이다.

여기서 Cascading이란 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것을 의미한다. 즉, 웹 문서의 요소에 스타일을 적용할 때 우선순위를 두고 적용된다는 의미이다.

그 우선순위엔 결정하는데엔 판단기준이 있다.

중요도
명시도
코드의 순서
상속

중요도 importance

중요도는 스타일이 선언된 사람(위치)에 따라서 우선순위를 메기는 것이다. 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘는데

작성자(author) 스타일 시트
사용자(user) 스타일 시트
사용자도구(user agent) 스타일 시트

순서로 작성자 스타일시트가 제일 우선순위가 높다.

1. !important : 최우선 순위로 적용되는 스타일, 명시도와 무관하지만, 명시도에 직접 영향을 미치고 다른 선언보다 우선한다.
2. 인라인 스타일 : 특정 태그 안에 'style' 속성을 이용해 부여된 스타일, 
   인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 높은 명시도를 갖는다.

**!important 는 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)
**인라인 스타일 정의도 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)

명시도 specificity

만약 중요도가 같을 경우 스타일은 적용범위의 영향을 받게 된다. 스타일의 적용범위가 좁을수록 우선순위는 높다.

인라인 스타일 : HTML요소의 style 속성을 통해 직접 지정된 스타일. 가장 높은 명시도를 갖는다.
ID 선택자: #id 형식으로 정의된 선택자는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 : .class 형식으로 정의된 선택자는 ID 선택자보다 낮은 명시도를 갖는다.
태그 선택자, 가상((psuedo)) 요소: div, p 등과 같은 태그 선택자로 문서 내 모든 태그를 가리키기 때문에 범위가 제일 넓고, 가장 낮은 명시도를 갖는다.

명시도는 점수화해서 계산을 할 수 있는데, 각 선택자 유형에 따라 점수로 계산된다.

인라인 스타일: 1,0,0,0
ID 선택자: 0,1,0,0
클래스 선택자: 0,0,1,0
태그 선택자: 0,0,0,1

명시도는 id 개수, class 개수, tag 개수로 결정되며, (id 개수, class 개수, tag 개수) 형태로 표시되는데, 앞에 있는 숫자가 클수록 명시도 점수가 높고 cascading 우선순위가 높다.

코드의 순서

같은 명시도를 가진 여러 스타일 규칙이 있을 경우, 나중에 선언된 스타일이 우선 적용된다. 즉, CSS 파일 내에서 아래쪽에 위치한 스타일이 위쪽에 위치한 스타일보다 우선적으로 적용된다.

상속

상속은 부모 요소의 특정 CSS 속성이 자식 요소에 전달되는 것이다. 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.

부모 요소에 설정된 글꼴이나 텍스트 색상은 자식 요소에 자동으로 적용되는데 모든 CSS 속성이 상속되는 것은 아니고, 일부 속성만 상속된다.

상속되는 속성

폰트 관련 속성: font-family, font-size, font-style, font-weight, line-height
텍스트 관련 속성: color, text-align, text-indent, text-transform
리스트 스타일: list-style, list-style-type, list-style-position

상속되지 않는 속성

margin, padding, border, width, height 등

저작자표시 비영리 변경금지

'코린이 개념잡기 > CSS' 카테고리의 다른 글

grid (0)	2024.12.03
position 속성 (0)	2024.12.03
flex box (0)	2024.12.02
BOX Model (0)	2024.12.01
전체 선택자 (0)	2024.11.29

CSS의 box 모델이란 무엇이고 각 요소의 역할은 무엇인가?

css 박스 모델은 모든 HTML요소가 박스 형태로 렌더링 된다고 생각하면 됩니다.

렌더링(Rendering) : 웹 브라우저에서 웹 페이지를 실시간으로 그려내는 과정

박스모델은 요소의 크기와 배치, 여백을 이해하는데 중요합니다.
박스 모델은 네가지의 구성 요소로 이루어져 있는데

content (내용)
padding (패딩, 내부여백)
border (테두리)
magin (마진, 외부여백)

으로 이루어져 있습니다.

content : 요소의 실제 콘텐츠가 위치하는 영역, 너비와 높이를 지정할 수 있다.
padding : 콘텐츠와 테두리(border) 사이의 공간으로 콘텐츠와 테두리 간의 거리를 조정 가능
border : 요소의 경계, 콘텐츠와 패딩을 감싸는 선
margin : 요소의 외부 여백으로 다른 요소와의 간격 조정 가능

박스 모델이 중요한 이유?

요소의 레이아웃을 더 잘 조정할 수 있기 때문입니다. 레이아웃을 효과적으로 구성하고 의도한 대로 사용자 경험을 개선할 수 있기 때문에 css의 핵심 개념이라고 볼 수 있습니다.

여담

box--sizing : border-box를 하면 박스모델의 어디를 기준으로 크기를 정하게 되는지 알고 있나요?
border를 기준으로 크기를 정합니다. margin을 제외한 박스모델 전체를 너비와 높이의 대상 영역으로 지정할 수 있습니다.
border-box를 지정하지 않으면 기본값은 content-box을 갖는데, 이 때는 border와 padding을 제외한 content 영역만 너비, 높이를 적용시킬 수 있습니다.

저작자표시 비영리 변경금지

'코린이 개념잡기 > CSS' 카테고리의 다른 글

position 속성 (0)	2024.12.03
flex box (0)	2024.12.02
전체 선택자 (0)	2024.11.29
마진 상쇄(margin collapsing) (1)	2024.11.29
미디어 쿼리(media query) (0)	2024.02.09

코드잇 스프린트의 css강의를 듣던 평화로운 어느날..

문제가 발생했다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>로그인</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form>
      <h1>로그인</h1>
      <label>아이디</label>
      <input
        name="username"
        type="text"
        placeholder="Email 또는 전화번호"
      />
      <label>비밀번호</label>
      <input
        name="password"
        type="password"
        placeholder="비밀번호"
      />
      <div>
        <a href="#" class="forget">비밀번호를 잊으셨나요?</a>
      </div>
      <button>로그인</button>
      <div class="join">
        회원이 아니신가요?
        <a href="#">가입하기</a>
      </div>
    </form>
  </body>
</html>

html {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
}

form{
  width: 360px;
  text-align: center;
  margin: 0 auto;
}

label {
  display: block;
  margin: 16px 0 8px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  color: #2c2c2c;
}

input {
  display: block;
  width: 100%;
  padding: 16px 24px;
  margin: 0 auto;
  border: 1px solid #d1d1d1;
  box-sizing: border-box;
}

이하 생략

코드의 css부분을 보면 html에 box-sizing: border-box;와 input 부분에 box-sizing: border-box;이 적혀있다.

나는 처음에 코드를 작성할 때 전체를 감싸고 있는 html 태그가 css의 첫번째 코드에 와 있길래 (html부분 내가 작성한것 아님) "전체를 뜻하는 태그이구나..!"라는 생각에 box-sizing: border-box를 주었는데 자꾸 input부분이 지정해준 너비 밖으로 삐져나왔다.

너비 값을 100%도 줘보고, 정해진 px로도 줘봤지만 input의 너비는 줄어들지 않았고 overflow : hidden까지 들먹여가며 머리를 싸맸던 나는 input 값에 box-sizing: border-box;를 재부여하고 나서야 해결을 할수 있었다.

왜 html 태그에 작성한 box-sizing: border-box;은 적용되지 않았던걸까? box-sizing의 작동 방식은 이렇다.

기본 적용: box-sizing: border-box;를 html 태그에 적용하면, 모든 요소가 기본적으로 border-box 모델로 계산되도록 설정해야하지만 이 설정이 모든 요소에 자동으로 적용되지 않거나, 특정 요소에 대해 다른 스타일이 정의되어 있을 경우, 이러한 스타일이 우선시될 수 있다.
상속: CSS 속성은 기본적으로 상속되지 않는다. box-sizing은 상속되는 속성이 아니기 때문에, 각 요소에 대해 명시적으로 설정해주지 않으면 기본값인 content-box가 적용될 수 있다.
스타일 우선순위: 만약 어떤 요소에 대해 box-sizing을 따로 설정한 경우, 그 설정이 우선적으로 적용된다. 그래서 각 요소에 대해 box-sizing: border-box;를 명시적으로 설정해주면, 그 요소에 대해서는 border-box 모델이 적용되는 것.

1. *선택자 :

*는 모든 요소를 선택하는 와일드카드 선택자이다. 즉, 문서 내의 모든 HTML 요소에 적용할 스타일을 정의할 수 있다.
예를 들어, * { margin: 0; }는 모든 요소의 마진을 0으로 설정한다.

2. html 선택자 :

html 선택자는 <html> 태그에만 적용된다. 따라서 html에 설정한 스타일은 오직 <html> 요소에만 영향을 미친다.
예를 들어, html { font-size: 16px; }는 문서의 루트 요소인 <html>에만 적용되고, 다른 요소에는 직접적인 영향을 주지 않는다.

html 태그에 box-sizing: border-box;를 설정했어도, 그 설정이 모든 요소에 영향을 주지 않거나, 다른 스타일이 우선시될 경우 원하는 효과를 얻지 못할 수 있다. 그래서 모든 요소에 대해 * 선택자를 사용하여 적용하는 것이 일반적인 방법이다.

*이해를 위해 도움 주신 팀원 ㅇㄱ님과 chatGPT 고맙습니다.

'코린이 개념잡기 > CSS' 카테고리의 다른 글

flex box (0)	2024.12.02
BOX Model (0)	2024.12.01
마진 상쇄(margin collapsing) (1)	2024.11.29
미디어 쿼리(media query) (0)	2024.02.09
inset과 gap (0)	2023.03.17

마진상쇄 : 마진 상쇄는 인접한 블록 요소의 마진이 서로 겹칠 때, 두 마진 중 큰 값이 적용되고 작은 값은 무시되는 현상. 예를 들어, 두 개의 요소가 서로 인접해 있을 때, 아래의 규칙이 적용된다.

인접한 블록 요소의 수직 마진이 겹칠 때: 두 요소의 마진이 서로 겹치면, 더 큰 마진값만 적용되고 작은 마진은 사라진다. 이 경우, 두 요소의 마진은 서로 합쳐지지 않고, 그 중 큰 값만 사용된다.
부모 요소와 자식 요소의 마진 상쇄: 만약 자식 요소가 마진을 가지고 있고, 그 자식 요소의 마진과 부모 요소의 마진이 겹친다면, 자식 요소의 마진이 부모의 마진과 합쳐지지 않고, 부모 요소의 마진만 적용될 수 있다. 이는 자식 요소가 화면의 상단이나 하단과 접촉할 때 발생한다. (중요! 세로로만 마진 상쇄가 일어난다.)

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent {
  margin: 20px; /* 부모의 마진 */
}

.child1 {
  margin: 30px; /* 첫 번째 자식의 마진 */
}

.child2 {
  margin: 40px; /* 두 번째 자식의 마진 */
}

예를 들어 이런 HTML과 CSS 코드를 작성했다고 생각해보자.

하나씩 풀어서 생각해보면,

부모요소 : .parent의 마진은 20px이다.
자식요소 : 자식1의 마진은 30px, 자식2의 마진은 40px이다.

마진 상쇄 과정

자식1과 자식2의 마진 : 자식 1의 하단 마진 30px과 자식2의 상단 마진 40px이 겹쳐져서 더 큰 마진인 자식2의 마진인 40px만 적용되고 자식1의 하단 마진은 무시된다.
부모 자식의 마진 : 자식2의 하단 마진 40px과 부모요소의 하단 마진 20px이 겹쳐질 때 자식 2의 마진이 더 크기 때문에 최종적으로 자식 2의 마진 40px이 적용된다. 이와 마찬가지로 자식1의 상단 마진 30px과 부모요소의 상단 마진 20px이 겹쳐질 때 자식 1의 마진이 더 크기 때문에 최종적으로 자식 1의 마진 30px이 적용된다.

그리고, 마진 상쇄에는 여러 규칙이 있다.

다음의 경우엔 자식 요소의 마진이 부모요소의 바깥으로 전파가 된다.

border가 없을 경우
padding이 없을 경우
overflow가 없을 경우

여기 두 가지의 문제가 있다. 질문은 같으나 답은 다르다.

Q1. 아래 코드에서 #a와 #b 사이의 세로 마진은 몇 px일까요?

<div id="a">
  a
  <div id="c">
    c
  </div>
</div>
<div id="b">
  b
</div>

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

정답 : 40px

Q2. 아래 코드에서 #a와 #b 사이의 세로 마진은 몇 px일까요?

<div id="a">
  a
  <div id="c">
    c
  </div>
</div>
<div id="b">
  b
</div>

#a {
  padding: 10px;
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

정답 : 30px

두 문제의 차이는 #a에 padding : 10px이라는 코드의 유무밖에 차이가 없는데 왜 정답에서 차이가 있는걸까?

그림으로 풀어보자면 이렇다.

문제1은 a의 자식 요소인 c가 a의 마진 30px 보다 큰 40px이라 상쇄가 일어났다. 하지만 문제2의 경우는 부모요소인 a가 패딩값을 10px 주었다. 때문에 자식 요소인 c가 패딩 값을 뚫고 마진을 행사 할 수 없기 때문에 문제 2에서 a와 b 사이의 마진 값은 b의 마진 값보다 큰 a의 마진값 30px이 된다. padding 뿐만 아니라 border나 overflow로 자식요소의 마진이 부모요소의 마진에 영향을 끼치지 못하게 할 수 있다.

위의 문제 외에도 마진 상쇄에는 다양한 경우들이 있는데 다음의 경우엔 마진 상쇄가 일어나지 않는다.

요소가 position : absolute 일 때
요소가 float : left / right 일 때
dipaly : flex 일 때
display : grid 일 때

참고자료 : Kimaramy님 블로그, 코드잇 스프린트 CSS 핵심개념 강의 中 "마진 상쇄"

'코린이 개념잡기 > CSS' 카테고리의 다른 글

BOX Model (0)	2024.12.01
전체 선택자 (0)	2024.11.29
미디어 쿼리(media query) (0)	2024.02.09
inset과 gap (0)	2023.03.17
flex 2 (0)	2023.03.16

웹 사이트에 접속할 때 다양한 디바이스를 통해 접속을 할 수 있다. (휴대폰, 태블릿, 데스크탑, 노트북, 스마트 워치 등)

각 디바이스마다 화면의 크기가 다른데 이렇게 다양한 크기를 가진 모든 디바이스를 모두 같은 UI로 웹사이트를 표현한다면 굉장히 비효율적일 것이다.

그래서 반응형 웹 디자인은 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일을 적용해 주어야 하는데 CSS의 미디어 쿼리를 이용해 각 디바이스의 크기에 맞는 최적의 UI들을 따로 설정 해 줄 수 있다. (다양한 화면 사이즈에서도 똑같은 유저 경험을 제공해야하기 때문에 중요)

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

@media (max-width : 600px) {
// 화면 너비가 600px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

@media (min-width : 600px) and (max-width : 992px) {
// 화면 너비가 600px 이상, 992px 이하인 경우에만 적용되는 스타일 
	.cellphone{
    	color : red;
    }
}

뷰포트가 가로사이즈가 길 때와 세로사이즈가 더 길 때의 브라우저 결과 창

기존 화면 > 인쇄를 눌렀을 경우 > 인쇄창에서 보이는 미디어쿼리 적용된 모습

변경하는 기준점을 모르겠을 땐 구글링으로 검색해 보는 방법도 있다.

'코린이 개념잡기 > CSS' 카테고리의 다른 글

전체 선택자 (0)	2024.11.29
마진 상쇄(margin collapsing) (1)	2024.11.29
inset과 gap (0)	2023.03.17
flex 2 (0)	2023.03.16
Flex (0)	2023.03.15

inset과 gap

▶최근 CSS에서 자주 사용하는 코딩

▶top: 100px;

left: 100px;

right: 100px;

bottom: 100px;

=

inset: 100px;

▶마진은 부모와 자식요소 사이에 거리를 주지만 gab은 요소와 요소 사이의 거리만 계산한다.

▶margin은 자식요소에 코딩, gap은 부모요소에 코딩

▶gap은 내부의 자식요소들이 일정한 간격으로 떨어져 위치 할 수 있도록 사용하는 스타일 속성이다.

▶margin과의 차이점은 gap의 경우 요소들의 사이에만 공간을 만든다는 점이다.

▶margin의 경우 주변에 요소들의 유무에 상관 없이 스타일이 적용(사이에는 중첩이 된다.)

▶EX) margin:10px;의 경우 중간에 겹쳐져 20px의 간격이 된다.

▶하지만 gap은 인접요소가 없다면 불필요한 공간을 만들지 않고 정확하게 간격을 10px만 만든다.

▶gap은 flex 이후부터 필요성이 생겨서 만들어진 속성이다. 불필요한 공간을 만들지 않아서 더욱 정렬된 상태의 레이아웃을 구현할 수 있기 때문에 사용하기 시작했다.

▶margin 전방향;

margin 상하, 좌우;

margin 상 좌우 하;

margin 상 우 하 좌;

gap 전체값;

gap 상하 좌우;

3,4개의 사용법이 없다.

'코린이 개념잡기 > CSS' 카테고리의 다른 글

마진 상쇄(margin collapsing) (1)	2024.11.29
미디어 쿼리(media query) (0)	2024.02.09
flex 2 (0)	2023.03.16
Flex (0)	2023.03.15
그림자 효과 (0)	2023.03.14