HTML_CSS 3강(display, 단위, 색상)

본문 바로가기

Notice

Recent Posts

Recent Comments

Link

Tags more

Archives

Today

Total

관리 메뉴

최원종의 개발 블로그

HTML_CSS 3강(display, 단위, 색상) 본문

HTML_CSS/HTML_CSS

HTML_CSS 3강(display, 단위, 색상)

chl6698 2026. 4. 20. 17:51

1. display 타입: block vs inline

HTML 태그는 태어날 때부터 두 가지 성격 중 하나를 가짐

구분	block (블록)	inline (인라인)
Java 비유	println() - 한 줄 독차지 후 줄바꿈	print() - 옆으로 이어짐
동작	항상 새 줄에서 시작, 가로 전체 차지	옆으로 이어짐, 내용 크기만큼만
대표 태그	div, h1~h6, p, section, header	span, a, strong, img
width/height	적용됨	적용 안됨

코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- block: 각각 새 줄에서 시작 -->
    <div style="background: skyblue">첫 번째 박스</div>
    <div style="background: pink">두 번째 박스</div>

    <!-- inline: 옆으로 이어짐 -->
    <span style="background: skyblue">첫 번째</span>
    <span style="background: pink">두 번째</span>
  </body>
</html>

결과화면

inline-block: 둘의 장점

display 값	줄바꿈	width/height	사용 예시
block	새 줄 시작	적용됨	div, 카드, 섹션
inline	옆으로 이어짐	적용 안됨	span, 링크, 강조
inline-block	옆으로 이어짐	적용됨	뱃지, 버튼, 아이콘

코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        margin-top: 10px;
        display: inline-block;
        width: 300px;
        height: 300px;
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- block: 각각 새 줄에서 시작 -->
    <div style="background: skyblue">첫 번째 박스</div>
    <div style="background: pink">두 번째 박스</div>

    <!-- inline: 옆으로 이어짐 -->
    <span style="background: skyblue">첫 번째</span>
    <span style="background: pink">두 번째</span>
  </body>
</html>

결과화면

display의 속성에 다른 값들

값	동작	배우는 강의
block	블록 요소 (기본)	-
inline	인라인 요소 (기본)	-
inline-block	인라인 + 크기 지정	-
flex	자식 요소를 자동 정렬 (레이아웃 핵심!)	추후 강의 내용
none	화면에서 완전히 숨김	-

2. CSS 단위: px, %, vh

CSS에서 크기를 지정할 때 숫자 뒤에 붙이는 단위

Java의 int, double처럼 같은 숫자라도 단위에 따라 전혀 다른 크기가 됨

단위	기준	예시	주로 사용하는 곳
px	고정 픽셀	font-size: 16px	글자 크기, 여백, 테두리
%	부모 요소의 크기	width: 50% → 부모의 절반	반응형 너비
vh	화면 높이의 1%	height: 100vh → 화면 전체	히어로 섹션
vw	화면 너비의 1%	width: 100vw → 화면 전체 너비	전폭 배경

예시 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box-px {
        width: 300px;
        background: #3b82f6;
        color: white;
        padding: 10px;
        margin: 5px;
      }
      .box-percent {
        width: 50%;
        background: #8b5cf6;
        color: white;
        padding: 10px;
        margin: 5px;
      }
      .box-vh {
        height: 30vh;
        background: #10b981;
        color: white;
        padding: 10px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="box-px">width: 300px (고정! 창 줄여도 안 변함)</div>
    <div class="box-percent">width: 50% (창 줄이면 같이 줄어듦)</div>
    <div class="box-vh">height: 30vh (화면 높이의 30%)</div>
  </body>
</html>

결과화면

calc() 함수

calc() 함수: 단위를 섞어서 계산함

/* 3등분인데 간격(gap) 만큼 빼기 */
width: calc(33.333% - 20px);

/* 화면 전체에서 헤더 높이 빼기 */
height: calc(100vh - 60px);

예제 코드( calc()로 3등분 + 헤더 빼기)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      header {
        height: 60px;
        background-color: rgb(11, 11, 199);
        text-align: center;
        color: white;
        padding: 15px;
      }
      .main {
        height: 100vh;
        display: flex;
        background-color: #f1f5f9;
      }
      .card {
        background-color: rgb(57, 172, 230);
        color: white;
        width: calc(33.333% - 7px);
        margin-left: 3.5px;
        margin-right: 3.5px;
      }
    </style>
  </head>
  <body>
    <header class="header">헤더 (60px 고정)</header>
    <main class="main">
      <div class="card">calc(33.33% -7px)</div>
      <div class="card">calc(33.33% -7px)</div>
      <div class="card">calc(33.33% -7px)</div>
    </main>
  </body>
</html>

결과화면

3. 색상 표현법: HEX, rgb, rgba

표현법	형식	예시	특징
이름	color: 이름;	red, blue, white	간단하지만 색상 제한적
HEX(헥스)	#RRGGBB	#FF0000 (빨강), #FEE500 (카톡 노란색)	가장 많이 사용
rgb()	rgb(R, G, B)	rgb(255, 0, 0)	0~255 숫자로 조합
rgba()	rgba(R, G, B, A)	rgba(0, 0, 0, 0.5)	투명도(A) 추가!

HEX와 rgb는 같은 색을 다르게 표현한 것일 뿐

- #FF0000 = rgb(255, 0, 0) = 빨강
- #000000 = rgb(0, 0, 0) = 검정

핵심: 투명도가 필요하면 rgba

/* HEX: 디자인 시안에서 가장 많이 보는 형태 */
color: #333333;         /* 진한 회색 (글자) */
background: #F5F5F5;    /* 연한 회색 (배경) */
background: #FEE500;    /* 카카오 노란색 */

/* rgba: 투명도가 필요할 때! (네비게이션 배경, 오버레이 등) */
background: rgba(0, 0, 0, 0.5);    /* 50% 투명 검정 */
background: rgba(0, 0, 0, 0.8);    /* 80% 불투명 검정 */
background: rgba(255, 255, 255, 0.9);  /* 거의 불투명 흰색 */

투명도(A) 값: 0 = 완전 투명, 0.5 = 반투명, 1 = 완전 불투명

실습 코드( HEX vs rgba 눈으로 비교)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        color: black;
      }

      .hex-1 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: #ff0000;
      }
      .hex-2 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: #3b82f6;
      }
      .hex-3 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: #fee500;
      }
      .hex-4 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgb(255, 0, 0);
      }
      .hex-5 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgb(59, 130 246);
      }
      .hex-6 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgb(254, 229, 0);
      }
      .hex-7 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgba(0, 0, 0, 1);
      }
      .hex-8 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .hex-9 {
        color: white;
        padding: 12px 10px;
        margin: 5px;
        background-color: rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>색상 표현법 실습</h1>
    <main>
      <h2>1. HEX 색상</h2>
      <div class="hex-1">#FF000 빨강</div>
      <div class="hex-2">#3B82F6 파랑</div>
      <div class="hex-3">#FEE500 카카오노랑</div>

      <h2>2.rgb 색상(위와똑같은색)</h2>
      <div class="hex-4">rgb(255,0,0) 빨강</div>
      <div class="hex-5">rgb(59, 130, 246) 파랑</div>
      <div class="hex-6">rgb(254,229,0) 카카오노랑</div>

      <h2>3.rgba 투명도(같은 검정,A값만 다름)</h2>
      <div class="hex-7">rgba(0,0,0,1.0) 완전불투명</div>
      <div class="hex-8">rgba(0, 0, 0,0.5) 반투명</div>
      <div class="hex-9">rgba(0,0,0,0.1) 거의투명</div>
    </main>
  </body>
</html>

결과화면

'HTML_CSS > HTML_CSS' 카테고리의 다른 글

HTML_CSS 6강 (Flexbox & 배경) (0)	2026.04.22
HTML_CSS 5강 (핵심 개념 - CSS 5단계 설계 순서) (0)	2026.04.21
HTML_CSS 4강(CSS 선택자 & 박스모델) (1)	2026.04.21
HTML_CSS 2강 (인스타그램 프로필 만들기) (0)	2026.04.20
HTML_CSS 1강 (모든 요소는 박스) (0)	2026.04.20

'HTML_CSS/HTML_CSS' Related Articles

more

티스토리툴바