4. CSS

HTML를 예쁘게, 보기 좋게 꾸며주는 CSS를 적용하는 방법은 크게 4가지가 있습니다.

외부 CSS 파일 로드하기


<head>
	<link rel="stylesheet" href="css/foo.css">
</head>

HTML안에 CSS 작성하기


<head>
	<style>
		body {font-size: 14px;}
	</style>
</head>

인라인 스타일


<body style="font-size: 14px;">

CSS 파일 안에 CSS 포함하기


@import "foo.css";

에릭 마이어의 reset CSS https://meyerweb.com/eric/tools/css/reset/

Normalize.css https://necolas.github.io/normalize.css/

각 브라우저들에 자체적으로 적용되어 있는 기본 스타일(여백 등)을 초기화 시켜서 원하는 디자인을 적용하기 쉽게 만들어 줍니다. 위의 두가지 방법을 일반적으로 많이 사용하며, 프로젝트에 맞게 직접 만들어 쓰기도 합니다.


/* 선택자 */
body {
	background-color: red;
			/* 속성 */  /* 값 */
}

▲ body의 background-color를 red로 설정


/* 선택자 */
header a {
	display: inline-block;
 /* 속성 */   /* 값 */
}

▲ 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


<section class="foo">
	<header>
		<h1>집에서 맛있는 피자 만들기</h1>
		<p>주위에서 쉽게 구할 수 있는 재료를 중심으로</p>
	</header>
	<p>AAAAA</p> <-.foo>p
</section>

.foot:first-child/.foo:last-child/.foo-nth-child(n) 설명 예시 code


<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>

.foo:first-child : class="foo"인 엘리먼트 중 첫번째 자식인 엘리먼트를 선택

.foo:last-child : class="foo"인 엘리먼트 중 마지막 자식인 엘리먼트를 선택

.foo:nth-child(n) class="foo"인 엘리먼트 중 n번째 자식인 엘리먼트를 선택

box-sizing: content-box (기본값)

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;


.box {
	box-sizing: content-box;
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: border-box (border까지 width에 포함)

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;


.box {
	box-sizing: border-box
	/* border까지 width에 포함 */
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

CSS에 대해 좀 더 상세한 내용을 알고 싶다면, 아래 링크를 참고하세요. 역시 무료책이며, 중급자로 도약하기 위한 상새한 내용이 담겨있습니다. 리디북스에 무료책으로도 공개가 되어있지만, 아래 Notion Page에서 보시는 것을 추천해드립니다.

🕵

Web Animation 1부 css Animation

🚪

Web Animation 2부 js Animation

WEB Animation With 냥이집사

이 책은 HTML, CSS, JS를 이용하여 동적인 페이지를 만들려고 하시는 분에게 추천해드립니다. 또한 단순 마크업에서 좀 더 실력을 키우고 싶으신 분이나, 홈페이지 구축이나 리뉴얼에 있어 인터랙티브한 웹으로 방향성을 설정한 기업과 학문적 호기심을 가진 개인에게도 추천해 드립니다.-우리는 우리가 배운 지식을 나누고, 정리하며 성장하기 위해 이 프로젝트를 ...

https://ridibooks.com/books/2773000026