HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
프론트엔드 스쿨 교안(1기)/
📝
CSS/
🎿
3. CSS
🎿

3. CSS

HTML를 예쁘게, 보기 좋게 꾸며주는 CSS를 적용하는 방법은 크게 4가지가 있습니다.
 
외부 CSS 파일 로드하기
 
HTML안에 CSS 작성하기
 
인라인 스타일
 
CSS 파일 안에 CSS 포함하기
 
에릭 마이어의 reset CSS https://meyerweb.com/eric/tools/css/reset/
Normalize.css https://necolas.github.io/normalize.css/
각 브라우저들에 자체적으로 적용되어 있는 기본 스타일(여백 등)을 초기화 시켜서 원하는 디자인을 적용하기 쉽게 만들어 줍니다. 위의 두가지 방법을 일반적으로 많이 사용하며, 프로젝트에 맞게 직접 만들어 쓰기도 합니다.
 
▲ body의 background-color를 red로 설정
 
▲ header에 포함되어 있는 a의 display를 inline-block으로 설정
 
아래의 내용 외에도 많은 선택자들이 있지만, 공부를 처음 시작할 떄 우선 알면 좋은 것들 위주로 추려보았습니다.
 
  • * : 문서 내의 모든 엘리먼트를 선택.
  • body, header, h1, section 등 해당 이름을 가진 html 엘리먼트를 선택.
  • #foo id 선택자 : <div id="foo">의 형태로, id는 중복이 불가능한 유일한 값.
  • .foo class 선택자 : <div class="foo">의 형태로, 중복이 가능. class로 자주 쓰는 스타일을 정의해두고 재사용.
  • input[type="text"] : input 엘리먼트 중 type 속성의 값이 text인 엘리먼트를 선택.
 
.foo > p : class="foo"인 엘리먼트의 직계 자식 엘리먼트 중 p를 선택. 문서 내의 모든 엘리먼트를 선택.
 
.foo > p 설명 예시 code
 
.foot:first-child/.foo:last-child/.foo-nth-child(n) 설명 예시 code
.foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택
.foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택
.foo:nth-child(n) class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택
 
notion image
box-sizing: content-box (기본값)
width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;
 
 
notion image
 
box-sizing: border-box (border까지 width에 포함)
width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;
 
 
CSS에 대해 좀 더 상세한 내용을 알고 싶다면, 아래 링크를 참고하세요. 역시 무료책이며, 중급자로 도약하기 위한 상새한 내용이 담겨있습니다. 리디북스에 무료책으로도 공개가 되어있지만, 아래 Notion Page에서 보시는 것을 추천해드립니다.
 
🕵
Web Animation 1부 css Animation
🚪
Web Animation 2부 js Animation
 
WEB Animation With 냥이집사
이 책은 HTML, CSS, JS를 이용하여 동적인 페이지를 만들려고 하시는 분에게 추천해드립니다. 또한 단순 마크업에서 좀 더 실력을 키우고 싶으신 분이나, 홈페이지 구축이나 리뉴얼에 있어 인터랙티브한 웹으로 방향성을 설정한 기업과 학문적 호기심을 가진 개인에게도 추천해 드립니다.-우리는 우리가 배운 지식을 나누고, 정리하며 성장하기 위해 이 프로젝트를 ...
WEB Animation With 냥이집사
https://ridibooks.com/books/2773000026
WEB Animation With 냥이집사
 
<head>
	<link rel="stylesheet" href="css/foo.css">
</head>
<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>
<body style="font-size: 14px;">
@import "foo.css";
/* 선택자 */
body {
	background-color: red;
			/* 속성 */  /* 값 */
}
/* 선택자 */
header a {
	display: inline-block;
 /* 속성 */   /* 값 */
}
<section class="foo">
	<header>
		<h1>집에서 맛있는 피자 만들기</h1>
		<p>주위에서 쉽게 구할 수 있는 재료를 중심으로</p>
	</header>
	<p>AAAAA</p> <-.foo>p
</section>
<ul>
	<li class="foo">1</li>    <!-- .foo:first-child -->
	<li class="foo">2</li>    
	<li class="foo">3</li>    <!-- .foo:nth-child(3) -->
	<li class="foo">4</li>
	<li class="foo">5</li>    <!-- .foo:last-child -->
</ul>
.box {
	box-sizing: content-box;
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}
.box {
	box-sizing: border-box
	/* border까지 width에 포함 */
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}