[아이티센 부트캠프] 웹 클라이언트 2

이언덕·2026년 4월 7일
CSS

아이티센 부트캠프

목록 보기
39/115
post-thumbnail

1. CSS는 무엇이고 왜 필요한가

개념

CSS는 HTML로 만든 문서에 색상, 글자 모양, 크기, 여백, 위치, 테두리, 배경 같은 화면 표현을 입히는 언어다.
쉽게 말하면 HTML이 내용을 담는 뼈대라면, CSS는 그 내용을 어떻게 보이게 할지 정하는 규칙이다.

CSS가 중요한 이유는 내용과 꾸밈을 분리할 수 있기 때문이다.
내용을 수정하는 일과 화면을 꾸미는 일을 나누면 코드가 덜 복잡해지고, 화면 분위기를 바꿀 때도 문서 구조를 크게 건드리지 않아도 된다. 같은 스타일을 여러 곳에 반복해서 적용하기도 쉬워지고, 수정 범위도 줄어든다.

핵심 특징

CSS는 단순히 색만 바꾸는 기술이 아니다.
글자, 배경, 여백, 배치, 테두리, 그림자, 투명도처럼 화면에 보이는 거의 모든 표현을 담당한다. 그래서 CSS를 이해하면 “왜 이 화면이 이렇게 보이는지”를 설명할 수 있게 된다.

CSS3로 오면서 표현 범위는 더 넓어졌다.
둥근 모서리, 그림자, 그라디언트, 전환 효과처럼 예전에는 이미지나 별도 기술에 의존하던 표현을 CSS만으로 처리할 수 있게 되었다.

헷갈리기 쉬운 부분

CSS는 내용을 만드는 언어가 아니다.
제목, 문단, 링크, 표처럼 무엇을 보여줄지는 HTML이 맡고, 어떻게 보이게 할지는 CSS가 맡는다.

이 역할이 섞이기 시작하면 구조를 바꾸고 싶은데 스타일 코드만 만지거나, 디자인만 바꾸고 싶은데 HTML 구조를 계속 뜯어고치게 된다.
복습할 때는 항상 구조는 HTML, 표현은 CSS로 나누어 생각하는 것이 좋다.



2. CSS는 어떻게 작성하는가

개념

CSS를 작성하는 방식은 크게 세 가지다.

  • inline 방식: 태그 안에 style 속성으로 직접 작성
  • internal 방식: 문서 안의 <style> 태그에 작성
  • external 방식: 별도의 .css 파일을 만들어 연결

세 방식은 문법은 같지만, 스타일을 어디에 두느냐가 다르다.

핵심 특징

inline 방식은 눈앞의 한 요소를 빠르게 바꿀 때는 편하다.
하지만 스타일이 태그마다 흩어져서 요소 수가 많아지면 관리가 어려워진다.

internal 방식은 한 문서 안의 스타일을 한곳에 모아 둘 수 있어서 읽기 쉽다.
external 방식은 여러 문서가 같은 스타일 파일을 함께 쓸 수 있어서 실제 작업에서 가장 많이 쓰인다.

CSS의 기본 문법은 아래처럼 읽으면 된다.

selector {
  property: value;
}

여기서 selector는 누구에게 적용할지, property는 무엇을 바꿀지, value는 어떻게 바꿀지를 뜻한다.

코드 예제

예제: exam1.html

<h2 style="color:green">둘리</h2>
<h2 style="color:red">도우너</h2>
<h2 style="color:#00f;background-color:yellow">고길동</h2>

이 코드는 inline 방식이다.
각 태그에 바로 스타일을 적어서 결과를 빠르게 확인할 수 있다. 대신 같은 스타일이 반복되면 수정할 곳도 같이 늘어난다.

예제: exam2.html

<style>
  #t1 {
    color: green;
  }
  #t2 {
    color: red;
  }
  #t3 {
    color: blue;
    background-color: yellow;
  }
</style>

이 코드는 internal 방식이다.
스타일 규칙을 한곳에 모아 두기 때문에 어떤 대상을 어떻게 바꾸는지 훨씬 읽기 쉽다.

헷갈리기 쉬운 부분

inline 방식이 틀린 것은 아니다.
다만 복습 기준으로는 직접 쓰는 방식 → 모아서 쓰는 방식 → 파일로 분리하는 방식 순서로 이해하면 흐름이 잘 잡힌다.

실제로 문서가 길어질수록 inline 방식은 금방 지저분해지고, internal이나 external 방식이 훨씬 유리해진다.



3. 선택자는 CSS의 시작이다

개념

선택자는 어느 요소에 스타일을 적용할지 고르는 규칙이다.
CSS를 읽을 때는 속성부터 보기보다, 먼저 선택자가 누구를 가리키는지부터 확인해야 한다. 선택자를 잘못 읽으면 뒤에 있는 모든 속성을 잘못 이해하게 된다.

핵심 특징

선택자는 성격별로 나누어 보면 훨씬 이해가 쉽다.

  • 기본 선택자: 전체, 태그, id, class
  • 관계 선택자: 하위, 자식, 인접 형제, 형제
  • 조건 선택자: 그룹, 속성, 가상 선택자

전체 선택자 *는 페이지 안의 모든 요소를 대상으로 한다.
태그 선택자는 같은 태그 전체를 한 번에 잡을 때 쓰고, id 선택자는 특정 요소 하나를 정확하게 집어 바꿀 때 쓴다. class 선택자는 같은 스타일을 여러 요소에 반복 적용할 때 쓴다. 즉, 초보자 기준에서는 id는 하나를 집는 느낌, class는 여러 곳에 공통 규칙을 주는 느낌으로 잡으면 된다.

하위 선택자와 자식 선택자는 문서 구조를 따라 대상을 고른다.
A B는 A 안에 들어 있는 모든 B를 뜻하고, A > B는 A 바로 아래 자식인 B만 뜻한다.

인접 형제 선택자와 형제 선택자는 형제 관계를 기준으로 대상을 고른다.
A + B는 A 바로 다음에 오는 첫 번째 B를 뜻하고, A ~ B는 A 뒤에 오는 모든 B 형제를 뜻한다.

그룹 선택자는 같은 스타일을 여러 대상에 한 번에 적용할 때 쓴다.
속성 선택자는 태그 이름이 아니라 속성의 존재나 속성값의 형태를 기준으로 대상을 고른다.

가상 선택자는 실제 태그가 더 생기는 것이 아니라, 특정 상태나 특정 위치를 가리키기 위해 쓰는 선택자다.
:hover는 마우스를 올린 상태, :focus는 입력 포커스가 간 상태를 뜻한다.

코드 예제

예제: exam10.html

* {
  border: 1px dotted blue;
}

이 코드는 전체 선택자를 사용한 예제다.
페이지 안의 거의 모든 요소에 점선 테두리를 줘서 문서 구조를 눈으로 확인하기 쉽게 만든다.

예제: exam2.html

<h2 id="t1">둘리</h2>
<h2 id="t2">도우너</h2>
<h2 id="t3">고길동</h2>
#t1 {
  color: green;
}
#t2 {
  color: red;
}
#t3 {
  color: blue;
  background-color: yellow;
}

이 코드는 id로 특정 제목만 골라서 스타일을 적용한 예제다.
태그 전체를 바꾸는 것이 아니라 정확히 집어서 바꾸는 방식이다.

예제: exam4_6.html

<h1><span class="top">블럭</span> 스타일 태그의 <span class="top">스타일 조정</span></h1>
.top {
  color: #cc0099;
}

이 코드는 class 선택자의 전형적인 예다.
같은 색상 규칙을 여러 span에 공통으로 적용할 수 있기 때문에, 반복되는 강조 표현을 관리하기 좋다.

예제: exam8.html

section > h1 {
  color: green;
}

section h1 {
  background-color: pink;
}

section > h1은 section 바로 아래에 있는 제목만 잡는다.
반면 section h1은 그 안쪽에 들어 있는 제목까지 모두 잡는다.

예제: exam8.html

img[src$=gif] {
  border: 1px dotted red;
}

이 코드는 src 값이 gif로 끝나는 이미지에만 스타일을 준다.
즉, 태그 이름만이 아니라 속성값의 모양으로도 대상을 고를 수 있다는 뜻이다.

예제: exam3.html

a:hover {
  font-weight: bold;
  background-color: lime;
  color: magenta;
}

이 코드는 링크에 마우스를 올렸을 때만 글자를 굵게 하고, 배경색과 글자색을 바꾼다.
:hover가 어떤 식으로 동작하는지 가장 쉽게 보여 주는 예제다.

헷갈리기 쉬운 부분

nth-child()와 nth-of-type()은 비슷해 보여도 기준이 다르다.

  • nth-child()는 부모 안의 전체 자식 순서를 센다.
  • nth-of-type()은 같은 태그끼리만 따로 세어서 순서를 센다.

예제: exam2_1.html, exam2_2.html

h2:nth-of-type(1) {
  color: green;
}
h2:nth-child(3) {
  color: green;
}

화면에서 h2가 첫 번째처럼 보여도, 그 앞에 h1이나 hr 같은 다른 태그가 있으면 nth-child() 번호는 달라진다.
그래서 보이는 같은 태그 순서만 세기보다, 부모 안의 실제 자식 순서를 먼저 생각해야 한다.



4. 주요 CSS 속성은 범주로 묶어서 이해해야 쉽다

개념

CSS 속성은 종류가 많아 보여도, 처음에는 아래처럼 묶어 이해하면 훨씬 쉽다.

  • 텍스트 관련 속성
  • 글꼴 관련 속성
  • 일반 화면 제어 속성
  • 목록 관련 속성
  • 배치 관련 속성

속성을 하나씩 따로 외우기보다, 이 속성이 글자를 바꾸는지, 배치를 바꾸는지, 보임 상태를 바꾸는지부터 먼저 구분하는 습관이 중요하다.

핵심 특징

텍스트 관련 속성

  • text-align : 가로 정렬
  • text-decoration : 밑줄, 취소선, 장식 제거
  • line-height : 줄 높이
  • letter-spacing : 글자 사이 간격
  • word-spacing : 단어 사이 간격
  • text-indent : 첫 줄 들여쓰기
  • text-transform : 대소문자 변환
  • vertical-align : 특정 상황에서 세로 맞춤

여기서 가장 자주 쓰는 것은 text-align, text-decoration, line-height다.
예를 들어 text-decoration: none;은 링크 밑줄을 없앨 때 자주 쓰고, text-align: center;는 글자나 인라인 요소를 가운데 정렬할 때 많이 쓴다. line-height는 줄 간격 조절에도 쓰이고, 한 줄짜리 문장을 상자 안에서 세로 가운데처럼 보이게 만들 때도 자주 활용된다.

vertical-align은 그냥 “아무 요소나 세로 가운데 정렬하는 속성”으로 이해하면 위험하다.
이 속성은 주로 inline 요소나 table-cell 같은 상황에서 세로 맞춤에 사용된다고 보는 것이 안전하다.

글꼴 관련 속성

  • font-family : 글꼴 지정
  • font-size : 글자 크기
  • font-weight : 글자 굵기
  • font-style : 기울임 등 글꼴 스타일
  • font-variant : 글꼴 변형

제목을 강조할 때는 font-weight, 글자 크기를 키울 때는 font-size, 특정 서체를 적용할 때는 font-family가 핵심이다.
서체 하나만 바뀌어도 화면 분위기가 꽤 달라지기 때문에, 글꼴 관련 속성은 생각보다 영향이 크다.

일반 화면 제어 속성

  • color : 글자색
  • display : 요소가 화면에 배치되는 기본 방식
  • overflow : 상자 크기를 넘친 내용을 어떻게 처리할지 정함
  • visibility : 요소를 숨기되 자리 자체는 남길 수 있음
  • cursor : 마우스를 올렸을 때 커서 모양을 바꿈

display는 특히 중요하다.
요소가 block처럼 동작할지, inline처럼 동작할지, 아예 보이지 않게 할지를 정하는 속성이기 때문이다.

overflow는 상자보다 내용이 커졌을 때 잘라 낼지, 그대로 보이게 할지, 스크롤을 줄지 같은 처리 방식과 연결된다.
visibility는 요소를 안 보이게 만들 수 있지만, 자리를 완전히 없애는 것과는 다르게 생각해야 한다. cursor는 사용자가 마우스를 올렸을 때 클릭 가능성이나 동작 성격을 시각적으로 전달하는 데 도움을 준다.

목록 관련 속성

  • list-style-type : 목록 기호 모양
  • list-style-position : 목록 기호 위치
  • list-style-image : 목록 기호를 이미지로 바꾸기

목록도 기본 점 모양 그대로 두는 것이 아니라, 기호 모양과 위치를 CSS로 바꿀 수 있다.
즉, ul, ol도 충분히 스타일링 대상이 된다.

배치 관련 속성

  • position : 요소의 배치 방식
  • top, left : 위치값
  • float : 요소를 왼쪽이나 오른쪽으로 띄워 배치
  • clear : float의 영향을 끊음
  • z-index : 요소가 겹쳤을 때 앞뒤 순서 결정

position은 이름만 외우기보다 동작 이미지로 이해해야 한다.

  • static : 기본 상태, 문서 흐름대로 놓임
  • relative : 원래 자기 자리를 기준으로 조금 이동
  • absolute : 원래 흐름에서 빠져서 따로 놓임

z-index는 요소가 겹쳤을 때 누가 위에 올라올지 정하는 속성이다.
float는 요소를 왼쪽이나 오른쪽으로 띄워서 주변 내용이 감싸듯 배치되게 하고, clear는 그 띄움의 영향을 끊어 다음 요소가 밀려 올라오지 않게 만드는 데 쓴다.

코드 예제

예제: exam3.html

a {
  text-decoration: none;
}

h1 {
  background-color: pink;
  width: 40%;
}

text-decoration: none;은 링크의 기본 밑줄을 없앨 때 자주 쓰는 속성이다.
background-color와 width는 제목이 차지하는 영역과 배경색을 함께 바꾸는 예제다.

예제: exam5_1.html

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ul.c {
  list-style-image: url('../images/pink.gif');
}
ol.d {
  list-style-type: upper-roman;
}
ol.e {
  list-style-type: lower-alpha;
}

이 코드는 목록도 단순한 텍스트 나열이 아니라, 기호 종류와 모양까지 스타일링할 수 있다는 점을 보여 준다.

예제: exam9.html

th {
  background-color: lime;
}

td {
  border-bottom: 1px dotted black;
}

tr:hover {
  background-color: pink;
}

이 코드는 표에서도 CSS가 자연스럽게 쓰인다는 점을 보여 준다.
머리글 배경, 셀 테두리, 행 hover 효과까지 모두 CSS로 제어할 수 있다.

헷갈리기 쉬운 부분

속성을 읽을 때 이름만 외우면 금방 헷갈린다.
대신 텍스트용인지, 글꼴용인지, 보임 상태용인지, 배치용인지 먼저 구분해 두면 처음 보는 속성도 훨씬 덜 낯설다.

예를 들어 overflow는 크기를 넘친 내용을 처리하는 속성이고, visibility는 보이기 상태를 조절하는 속성이고, cursor는 사용자와의 시각적 상호작용을 돕는 속성이다.



5. display, block, inline은 같이 이해해야 한다

개념

화면에서 요소가 어떻게 배치되는지를 이해하려면 display를 중심으로 봐야 한다.
display는 요소가 화면에서 어떤 방식으로 자리 잡을지를 결정하는 속성이다.

핵심 특징

div는 기본적으로 display: block이다.
그래서 한 줄 전체를 차지하려는 성질이 강하고, 자연스럽게 줄이 나뉜다.

span은 기본적으로 display: inline이다.
그래서 글자처럼 한 줄 안에 흐르며 배치된다.

즉, div와 span이 다르게 보이는 이유는 태그 이름 자체보다, 기본 display 방식이 다르기 때문이라고 이해하는 것이 정확하다.

block 요소는 보통 한 줄을 차지하고, width, height 조절이 비교적 자연스럽다.
반면 inline 요소는 글자처럼 흐르기 때문에 width, height가 블록 요소처럼 바로 느껴지지 않을 수 있다. 이 차이를 모르고 같은 속성을 줬다가 “왜 하나는 되고 하나는 이상하지?” 하고 헷갈리기 쉽다.

display: none도 같이 기억해 둘 만하다.
이 값은 요소를 화면에서 아예 보이지 않게 만들고, 보통은 자리도 차지하지 않게 만든다. 나중에 visibility, opacity와 비교할 때 중요한 기준이 된다.

코드 예제

예제: exam4_1.html

<div>가나다라마바사아</div>
<div>0123456789</div>
<div>abcdefghij</div>

<span>가나다라마바사아</span>
<span>0123456789</span>
<span>abcdefghij</span>
div, span {
  background-color: lime;
  margin: 20px;
  width: 300px;
  height: 200px;
  font-size: 1.5em;
}

이 예제는 같은 스타일을 줘도 div와 span이 다르게 보인다는 점을 보여 준다.
div는 블록 요소라 줄이 나뉘고, span은 인라인 요소라 한 줄 안에 이어지려는 성질이 강하다.

예제: exam4_4.html

div {
  text-align: center;
}

이 코드는 부모 div에 text-align: center;를 주어 안의 인라인 요소들을 가운데로 모은 예제다.
인라인 요소는 부모의 텍스트 정렬 영향을 크게 받는다는 점을 보여 준다.

헷갈리기 쉬운 부분

inline 요소는 기본적으로 width, height가 블록 요소처럼 직접적으로 작동하지 않는다.
그래서 span에 크기를 줘도 기대한 박스처럼 보이지 않을 수 있다.

또 text-align: center;는 상자 자체를 가운데로 보내는 속성이 아니다.
상자 안의 텍스트나 인라인 요소를 정렬하는 속성이다.

반면 블록 요소 자체를 가운데로 보내고 싶다면 margin-left: auto; margin-right: auto; 같은 방식을 자주 쓴다.
이때는 보통 width가 정해져 있어야 가운데 정렬 효과가 눈에 잘 보인다.

예제: exam3_3.html

h1 {
  background-color: pink;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

이 코드는 제목 상자 자체를 가운데로 보내는 방식이다.
그래서 text-align과 margin: auto는 비슷해 보여도 역할이 다르다.

추가로 아래 차이도 함께 기억해 두면 좋다.

  • display: none : 요소가 화면에서 빠지고 자리도 거의 남지 않음
  • visibility: hidden : 안 보이지만 자리는 남음
  • opacity: 0 : 투명하지만 요소 자체는 그대로 있음

셋 다 “안 보이는 것처럼” 느껴지지만 실제 동작은 다르다.



6. box model은 CSS 배치의 기본이다

개념

CSS에서 요소는 보통 하나의 상자로 생각한다.
이 상자는 바깥에서부터 margin - border - padding - content 구조로 이해하면 된다.

  • content : 실제 내용이 들어가는 영역
  • padding : 내용과 테두리 사이의 안쪽 여백
  • border : 경계선
  • margin : 다른 요소와의 바깥 거리

이 구조를 알아야 상자가 왜 커졌는지, 왜 다른 요소와 간격이 생겼는지 설명할 수 있다.

핵심 특징

width와 height는 내용 영역의 크기를 잡는 데 쓰인다.
padding을 주면 상자 안쪽 공간이 넓어지고, margin을 주면 상자 바깥 간격이 벌어진다.

border는 상자의 경계를 눈에 보이게 만드는 역할도 한다.
그래서 연습할 때는 오히려 테두리를 넣어 두는 편이 구조를 이해하기 쉽다.

테두리 관련 속성도 같이 묶어 보면 이해하기 좋다.

  • border-width : 테두리 두께
  • border-style : 실선, 점선, 파선 같은 모양
  • border-color : 테두리 색상

즉, border는 단순히 선 하나가 아니라 경계의 두께, 모양, 색상을 한꺼번에 다루는 영역이라고 보면 된다.

코드 예제

예제: exam4_2.html

div, span {
  background-color: lime;
  margin: 30px;
  width: 300px;
  height: 200px;
  font-size: 1.5em;
  padding: 20px;
}

이 코드는 크기, 바깥 여백, 안쪽 여백을 한 번에 보여 준다.
margin은 요소 바깥 공간을 벌리고, padding은 상자 안쪽 공간을 넓힌다.

예제: exam6.html

div:nth-of-type(1) {
  background-color: yellow;
  border: 2px solid red;
}

div:nth-of-type(2) {
  background-color: lightgreen;
  border: 2px dotted magenta;
}

div:nth-of-type(3) {
  background-color: #000000;
  border: 5px dashed #ffffff;
}

이 코드는 같은 상자라도 테두리 두께, 색상, 모양을 다르게 줄 수 있다는 점을 보여 준다.

헷갈리기 쉬운 부분

margin과 padding은 둘 다 공간을 만든다는 점에서 헷갈리기 쉽다.
하지만 margin은 상자 밖의 거리, padding은 상자 안의 거리라는 차이를 꼭 구분해야 한다.

또 background-color는 상자 안쪽 영역을 채우는 속성이고, border는 그 상자의 경계를 보여 주는 속성이다.
둘은 함께 자주 쓰이지만 역할은 다르다.



7. CSS3는 화면 표현 범위를 크게 넓혀 준다

개념

CSS3의 핵심은 단순히 색상과 크기만 바꾸는 수준을 넘어서, 둥근 모서리, 그림자, 그라디언트, 투명도, 변형, 전환 효과처럼 시각적인 표현 범위를 크게 넓혔다는 점이다.
그래서 예전에는 이미지를 따로 만들어 넣어야 하던 효과 일부를 CSS만으로 처리할 수 있게 되었다.

핵심 특징

이번 범위에서 특히 중요한 CSS3 속성은 아래와 같다.

  • border-radius
  • box-shadow
  • text-shadow
  • linear-gradient()
  • opacity

border-radius는 모서리를 둥글게 만든다.
값이 하나면 네 모서리가 같은 둥글기로 처리되고, 값이 여러 개면 모서리마다 다르게 줄 수 있다.

box-shadow는 상자 전체 뒤에 그림자를 준다.
보통 가로 이동, 세로 이동, 번짐 정도, 색상을 함께 생각하면 된다.

  • 가로 이동값이 양수면 오른쪽, 음수면 왼쪽
  • 세로 이동값이 양수면 아래, 음수면 위
  • 번짐 값이 클수록 그림자가 퍼진다
  • 마지막 값은 그림자 색상이다

text-shadow는 글자에 그림자를 준다.
즉, box-shadow는 상자 전체에 적용되고, text-shadow는 글자에 적용된다는 점이 가장 큰 차이다.

linear-gradient()는 한 색에서 다른 색으로 자연스럽게 이어지는 배경을 만든다.
방향을 to bottom, to top, to left, to right처럼 줄 수도 있고, 각도로 줄 수도 있다. 같은 색 조합이라도 방향이 바뀌면 화면 느낌이 꽤 달라진다.

opacity는 요소 전체의 투명도를 조절한다.
값은 0.0부터 1.0까지 쓰며, 0에 가까울수록 더 투명하고 1에 가까울수록 더 선명하게 보인다. 다만 배경만 흐려지는 것이 아니라 그 요소 안의 내용까지 함께 투명해진다는 점을 꼭 기억해야 한다.

코드 예제

예제: exam6.html - border-radius

div:nth-of-type(1) {
  border-radius: 30px;
}

div:nth-of-type(2) {
  border-radius: 20px 40px 60px 80px;
}

값이 하나면 네 모서리가 같은 둥글기로 처리된다.
값이 여러 개면 모서리마다 둥근 정도를 다르게 줄 수 있다.

예제: box-shadow

a img:hover {
  box-shadow: 0 5px 10px rgba(0,0,0,0.6);
}

이 코드는 이미지에 마우스를 올렸을 때 상자 전체 뒤로 그림자를 준다.
그래서 평면적인 박스가 살짝 떠 있는 것처럼 보이게 만들 수 있다.

예제: exam4_5.html - text-shadow

h1 {
  text-shadow: 2px 2px 5px green, 4px 4px 5px red;
}

이 코드는 글자 뒤에 그림자를 한 겹이 아니라 두 겹 주어서 제목을 더 눈에 띄게 만든다.

예제: exam7.html - gradient

#jbGrad01 {
  background-image: linear-gradient(to bottom, yellow, green);
}
#jbGrad03 {
  background-image: linear-gradient(to right, yellow, white, green);
}
#jbGrad05 {
  background-image: linear-gradient(45deg, yellow, white, green);
}

linear-gradient()는 한 색에서 다른 색으로 자연스럽게 이어지는 배경을 만든다.
방향값을 바꾸면 같은 색 조합이라도 느낌이 꽤 달라진다.

예제: exam3.html - opacity

img {
  width: 30%;
  opacity: 0.3;
}

img:hover {
  opacity: 1.0;
  width: 40%;
  transition: width 4s;
}

평소에는 이미지를 흐리게 보여 주다가, 마우스를 올리면 더 선명하고 더 크게 보이게 만든 예제다.
여기서는 opacity만 바뀌는 것이 아니라 width도 같이 바뀌어서 변화가 더 크게 느껴진다.

헷갈리기 쉬운 부분

text-shadow는 글자에 적용되고, box-shadow는 상자 전체에 적용된다.
둘 다 그림자라는 점은 같지만 적용 대상이 다르다.

linear-gradient()는 단순히 색 하나를 넣는 것이 아니라, 색이 이어지는 방향과 흐름까지 함께 정하는 기능이다.

opacity는 배경만 투명하게 만드는 속성이 아니다.
그 요소 안의 글자, 이미지, 내용까지 함께 투명해진다.

참고

CSS3의 새 기능들은 예전에는 브라우저마다 지원 시기가 달라서 접두어를 붙여 쓰는 경우도 있었다.
그래서 CSS3는 표현 범위를 넓혀 준 기술이지만, 브라우저 지원 차이도 함께 생각해야 한다.



8. CSS 코드는 이런 순서로 읽으면 이해가 빠르다

개념

CSS 코드는 겉으로 보기에는 속성이 먼저 눈에 들어오지만, 실제로는 선택자부터 읽는 습관이 중요하다.
누구에게 적용되는지부터 알아야 뒤에 있는 속성의 의미가 제대로 보인다.

코드 보는 순서

  1. 선택자를 본다.
    누구에게 적용되는지 먼저 확인한다.

  2. 상태 변화가 있는지 본다.
    :hover, :focus처럼 특정 순간에만 적용되는지 본다.

  3. 속성을 본다.
    색, 크기, 정렬, 여백, 테두리, 투명도처럼 무엇이 바뀌는지 본다.

  4. 결과를 머릿속으로 그린다.
    글자만 바뀌는지, 상자가 커지는지, 배경까지 달라지는지 연결해 본다.

이렇게 읽으면 CSS가 “누구를, 언제, 어떻게 보이게 할 것인가”를 적는 언어라는 점이 훨씬 잘 보인다.

코드 예제

예제: exam3.html

a:hover {
  font-weight: bold;
  background-color: lime;
  color: magenta;
}

이 코드는 이렇게 읽으면 된다.

  • a:hover → 링크에 마우스를 올렸을 때
  • font-weight: bold → 글자를 굵게
  • background-color: lime → 배경색 변경
  • color: magenta → 글자색 변경

이렇게 읽으면 CSS가 문장처럼 풀린다.

헷갈리기 쉬운 부분

스타일이 적용되지 않을 때는 속성부터 의심하기보다 먼저 선택자가 맞는지를 확인하는 습관이 중요하다.
실제로는 속성이 틀린 경우보다, 대상을 잘못 골랐거나 순서를 잘못 세어서 적용이 안 되는 경우가 더 많다.

profile
이언덕
이전 포스트

[아이티센 부트캠프] 웹 클라이언트 1

다음 포스트

[아이티센 부트캠프] 웹 클라이언트 3

0개의 댓글