LEVEL 17 QUEST
CSS와 이미지 연결하기
외부 CSS 파일을 연결하고, 이미지 경로의 비밀을 마스터해보세요!
LEVEL 17 · LESSON 4
CSS로 웹페이지에
옷을 입히자!
HTML로 만든 뼈대에 CSS라는 옷을 입혀보세요.
외부 파일 연결부터 이미지 경로의 비밀까지, 오늘 모두 마스터합니다!
🎨 CSS가 뭐야?
CSS는 웹페이지의 "디자이너"입니다. HTML이 건물의 뼈대라면 CSS는 인테리어 디자인이에요.
CSS는 Cascading Style Sheets의 약자입니다. 한국어로는 "계단식 스타일 시트"라고 하는데, 솔직히 그냥 "웹페이지 디자인 파일"이라고 생각하시면 훨씬 쉬워요! CSS 없이는 모든 웹페이지가 하얀 배경에 까만 글자만 보이는 무미건조한 문서가 됩니다.
🦴
HTML
뼈대·구조
내용을 담는 그릇
내용을 담는 그릇
👗
CSS
디자인·스타일
색상, 크기, 배치
색상, 크기, 배치
⚡
JavaScript
기능·동작
클릭, 애니메이션
클릭, 애니메이션
아래를 보세요. 같은 HTML 코드인데 CSS 적용 전후가 완전히 다릅니다!
CSS 없음 (Before)
CSS 있음 (After)
나의 블로그
안녕하세요! 오늘의 날씨는 맑음입니다.
더 보기 →
"Cascading(계단식)"이 무슨 뜻이에요?
CSS 규칙이 위에서 아래로 흐르듯 적용된다는 뜻입니다. 부모 요소의 스타일이 자식 요소에 자동으로 전달(상속)되고, 나중에 작성된 규칙이 이전 규칙을 덮어씌웁니다. 마치 물이 폭포처럼 흘러내리는 것과 같아요.
CSS 규칙이 위에서 아래로 흐르듯 적용된다는 뜻입니다. 부모 요소의 스타일이 자식 요소에 자동으로 전달(상속)되고, 나중에 작성된 규칙이 이전 규칙을 덮어씌웁니다. 마치 물이 폭포처럼 흘러내리는 것과 같아요.
🔒
여기까지는 미리보기입니다
CSS와 이미지 연결하기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.
Google로 3초 만에 시작 →🧵 Threads로 시작무료 공개 강의 둘러보기 (Lv.1~3)무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.