CSS 는 뭘까? 

CSS = Cascading Style Sheet

CSS 는 HTML 요소의 style을 정의하는 데 사용됩니다.

  • HTML 외부에서 CSS 파일 로드하는 방법 ( 가장 권장 )
    • `<link rel="stylesheet" href="css/style.css">`
  • HTML 내부에서 Embedding style로 CSS 적용하는 방법
    • `<head>`
    •    `<style> ~~~ </style>`
    • `</head>`
  • Inline style 로 CSS 적용하는 방법
    • ` <h1 style="color: red">Hello World</h1>`

 

Reset CSS

모든 웹 브라우저마다 각자만의 디폴트 스타일을 가지고 있어서 css가 없어도 작동함.

But. 각자만의 스타일이라는 말은 브라우저마다 같은 태그라도 보이는 스타일이 다른다는 걸 의미.

 

그럴 때 사용되는 것이 `Reset CSS` 

 

👉🏻https://meyerweb.com/eric/tools/css/reset/ 이거 복사해서 사용하면, CSS를 초기화하는 용도로 사용함. 

 

  • `*` : 전체 셀렉터(HTML 문서 내 모든 요소 선택)
    • `* { color : red; }` : 모든 요소 다 red 로...
  • `tag` : 태그 셀렉터(지정된 태그명을 가지는 요소 선택)
    • `p { color : red; }` : 모든 p 태그 요소를 선택
  • `#id` : ID 셀렉터 (#id 로 지정한 값과 일치하는 요소 선택)
    • `id` 는 중복될 수 없는 유일한 값
    • `#p1 { color: red; }
      • `<p id="p1">여기가 변경됨 </p>
  • `.class` : 클래스 셀렉터 (.class 로 지정한 값과 일치하는 요소 선택)
    • `class`는 중복될 수 있다.
    • `.container { color: red; }
      • < div class="container" >
  • `후손 셀렉터` : 자신보다 아래에 있는 모든 요소들 중 일치하는 요소 전부 선택.
    • `div p { color: red; }`
  • `자손 셀렉터 : 자신보다 1레벨 (바로 아래) 하위 속하는 요소 중 일치하는 요소 전부 선택
    • `div > p { color: red; } `
  • `:가상 클래스 셀렉터` : 요소의 `특정 상태` 에 따라 스타일 정의
    • ex: 버튼에 마우스가 올라갔을 때 (hover), 링크를 방문했을 때, 방문하지 않았을 때, 포커스가 들어왔을 때.
    • `a:hover { font-weight: bold; }` : a 요소에 마우스가 올라와 있을 때,
    • `a:link { color: orange; }` : a 요소가 방문하지 않은 링크일 때,
    • `input [ type=password ]:focus { color: red; }` : password input 요소에 포커스가 들어와 있을 때
  • `::가상 요소 셀렉터` : 요소의 `특정 부분` 에 스타일을 적용하기 위해 사용됨
    • 요소 콘텐츠의 첫 글자 또는 첫 줄, 요소의 앞 또는 뒤.

 

CSS 프로퍼티 값의 단위

크기 단위 : px., em, %, rem

  • `px` : 픽셀 단위 ( 1px 화소 1개 크기 )
  • `em` : 배수 단위로 상대 단위, 요소에 지정된 사이즈에 상대적 사이즈 설정 ( 중첩요소로 인해 잘 사용 안함 )

예시 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-size: 14px;
      text-align: center;
    }
    div {
      font-size: 1.2em; /* 14px * 1.2 = 16.8px */
      font-weight: bold;
      padding: 2em;     /* 16.8px * 2 = 33.6px */
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>
</head>
<body>
  <div>Font size: 1.2em → 14px * 1.2 = 16.8px</div>
</body>
</html>

 

  • `rem` : 최상위 요소의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미함.
  • `%` :백분율 단위의 상대 단위, 요소에 지정된 사이즈에 상대적인 사이즈 설정.
// % 코드 예시
.box {
	width: 500px;
}

.box > .inner-box {
	width: 100%; // 500px로 설정될거에요.
}

 

  • viewport : vh, vm  (브라우저 넓의의 따라)

CSS 속성

Box model

명칭 설명
Content 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 프로퍼티를 갖는다.
Padding 테두리(Border) 안쪽에 위치하는 `요소의 내부 여백 영역`이다. padding 프로퍼티 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.
Border 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.
Margin 테두리(Border) 바깥에 위치하는 `요소의 외부 여백 영역`이다. margin 프로퍼티 값은 마진 영역의 두께를 의미한다. 기본적으로 투명(transparent)하며 배경색을 지정할 수 없다.

 

 

display

프로퍼티값 키워드 설명
block block 특성을 가지는 요소(block 레벨 요소)로 지정
inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 , with, height 속성 무시함. margin,padding 좌 우만 반영됨
inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정
none 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다)
flex  

 

 

font / text

부모 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표(...)를 표시하는 법

.truncate {
  width: 150px;             /* width가 지정되어 있어야 한다. */
  white-space: nowrap;      /* 자동 줄바꿈을 방지 */
  overflow: hidden;         /* 반드시 "visible" 이외의 값이 지정되어 있어야 한다. */
  text-overflow: ellipsis;  /* ellipsis or clip */
}

 

 

 

 

마진 상쇄란? 

공식문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing

 

여백 상쇄 정복 - CSS: Cascading Style Sheets | MDN

여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 여백 상쇄라고 부릅니다. 단, 플로팅 요소와 절대 위

developer.mozilla.org

마진 상쇄는 `마진 겹침` 현상이다.

 

여러 블록 요소의 상하 마진이 겹칠 때 제일 큰 여백의 크기를 가진 단일 여백으로 합쳐지는 브라우저 나름의 렌더링 규칙.

 

마진 상쇄가 일어나는 상황

 

1. 인접 형제 박스 간 상하 마진이 겹칠 때

 -> 겹처진 두 마진 값 중 더 큰 마진 값으로 상쇄해 렌더링하고, 두 값이 동일한 경우 중복을 상쇄.

박스 간 상하 마진이 겹칠 때.

 

2. 빈 요소의 상하 마진이 겹칠 때 ( height가 0인 상태의 블록 요소 )

-> 빈 요소가 위 아래를 가르는 경계가 없으므로 자신의 상단, 하단의 마진 값을 비교해 더 큰 값으로 상쇄하고, 두 값이 동일한 경우 중복을 상쇄

그래서 보통 빈요소에는 margin을 넣지 않는다

 

3. 부모 박스와 첫 번째 자식 상단 마진 혹은 부모 박스와 마지막 자식 하단 마진이 겹칠 때 (하단도 동일)

상단 마진이 겹칠 때

 

마진 상쇄가 일어나는 상황은 

1. 인접한 두 박스가 온전한 block-level 요소일 경우에만.

2. 마진값이 0이더라도 상쇄 규칙은 적용된다는 점.

3. 좌우 마진은 겹쳐도 상쇄되지 않지만, 상하 마진만 상쇄 규칙이 적용됨.

 

이를 방지하기 위해서.

1. 부모 상단 혹은 하단에 padding 혹은 border 값으로 일종의 벽을 만드는게 안전.

2. 박스가 `position: absolute` or `float: left/right` 상태일 때 ( 상쇄 규칙 적용 예외처리됨 )

3. 박스가 `display: flex;` or `display: grid;` 일 때 내부 item ( 상쇄 규칙 적용 예외처리됨 )

 

 CSS에는 상속과 우선순위가 존재 ( cascading )

cascading : CSS 적용 우선순위

-> 요소가 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 필요한 것이 CSS 적용 우선순위입니다.

 

중요도 : CSS 가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

  1. head 요소 내의 style 요소
  2. head 요소 내의 style 요소 내의 @import 문
  3. <link> 로 연결된 css 파일
  4. <link> 로 연결된 css 파일 내의 @import 문
  5. 브라우저 디폴트 스타일 시트

명시도 : 대상을 명확하게 특정 할수록 명시도가 높아지고, 우선순위가 높아짐

`!important` > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상속

 

선언순서 : 선언된 순서에 따라 우선순위 적용된다. !! 나중에 선언된 스타일 우선 적용 !!

 

Interactive UI ( 애플페이지 들어가면 스크롤 될 때 마다 핸드폰 빙글빙글 돌아가는 그런 거 )

 

transition : CSS 프로퍼티 값 변화할 때, 프로퍼티 값 변화가 일정 시간에 걸쳐 일어나도록 하는 것.

`hover 됐을 때 + 풀릴 때` 프로퍼티 값 변경을 부드럽게 조절.

예를 들면.. `transition: all 2s;`

 

animation : CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시키는 것.

? animation css 를 쓸까요, javascript를 사용할까요? (알아서 잘 하십쇼) 

  • 비교적 작은 효과나 CSS만으로 효과를 볼 수 있는 것은 CSS
  • 세밀한 제어는 자바스크립트.

'프로그래밍 언어 > 퍼블리싱 ( HTML, CSS )' 카테고리의 다른 글

개발자가 꼭 알아야 할 이슈 트래커와 협업 도구 총정리  (0) 2025.03.28
[ CSS ] 레이아웃  (0) 2025.03.07
[HTML / CSS] 개념 다지기 1.  (0) 2025.03.05
[html] 자주 사용하는 태그의 종류들,,  (0) 2025.01.24
[html] HyperText Markup Language  (0) 2025.01.21

티스토리툴바