CSS 강의 1편 - css 설명, id, class, selectors(선택자)
안녕하세요. 캐나다에서 웹 계발자로 일하고 있는 Roy 입니다. 웹에 기초는 CSS 아니겠습니까? CSS가 프로그래밍 랭귀지도 아니고 그냥 사용하면서 배워야지 라고 생각하는 사람도 많이 있습니다. 물론 그렇게 배워도 되지만 시작할 때 기초적인 부분을 안배우고 넘어가면 잘못 사용하거나 간단한걸 더 어렵게 하는 경우가 많이 생깁니다. 그래서 저도 CSS 걔념을 다시 정리하는 김에 강의를 시작하려고 합니다. 공부 할 때 가장 좋은 방법이 누구를 가르치는 것이라고 하잖아요.
CSS는 무엇인가?
CSS는 Cascade Style Sheet에 줄임 말입니다. CSS를 통해서 HTML로 만들어진 웹사이트에 뼈대를 스타일링 해주는 것입니다. 예를들면 CSS를 통해서 색깔, 위치, 크기등을 바꿀 수 있습니다.
CSS를 사용하려면 먼저 id 와 class를 알아야 합니다.
CSS id
영어권에서는 ID 하면 신분증을 의미합니다. 도플갱어가 없다면 신분 자체는 세상에서 유일 해야 합니다. CSS에서도 id는 유니크 한 존재이기 때문에 같은 이름에 id가 여러게 있어서는 안됩니다.
아이디는 css에서 사용할 때 #id-이름 형식으로 사용해야 합니다.
index.html
<div id="home-container" />
index.css
#home-container {
background: black;
}위와 같이 home-container라고 div에 id를 줬을 때 css에서 home-container라는 id를 선택해서 스타일을 입히고 싶을 때 앞에 샵(#)을 붙이고 id를 쓰면 home-container에만 스타일이 적용되는 것입니다.
CSS class
클래스는 id와는 다르게 같은 클래스를 여러군대 사용할 수 있습니다. 클래스는 id가 #으로 시작하는 것에 반에 .(마침표)로 시작합니다.
index.html
<div class="container" />
index.css
.home-container {
width: 100%;
background: black;
}html 바로 선택해서 스타일
css를 사용할 때 id나 class로만 선택해서 스타일을 줄 수 있는게 아닙니다. html을 바로 선택도 가능합니다. 아래 뿐만이 아니라 div, ul을 사용 할 수 있습니다. 주의해야 할 점은 아래 처럼 사용하면 모든 html에 스타일이 적용됩니다. 그래서 나중에 스타일이 겹쳐서 예상했던 것과 다른 결과를 볼 수도 있습니다.
body {
padding: 2em;
}
main {
padding-top: 60px;
}
h1 {
font-size: 32px;
}CSS 작성 방법
css를 여러가지 방법으로 작성이 가능합니다. Inline, internal, external로 나눠 볼 수 있습니다.
inline css
css를 html에 바로 적는 것입니다. 아래와 같이 스타일을 class나 id 없이 바로 쓰는 것 입니다.
<div style="color: red; width: 100%;" /> Inline css는 특별한 경우가 아니면 쓰지 않는 것이 좋습니다. 나중에 코드를 관리하기가 어려워지고 재사용 또한 불가능 하기 때문입니다.
Internal css
css를 style이라는 html 안에 적는 것입니다. style은 보통 html 태그중 head에 주로 씁니다. internal로 쓰는 css도 아주 작은 프로젝트나 데모용으로만 사용하는 것이 좋습니다.
<html>
<head>
<style>
#site-header {
background: #C1C1C1;
}
body {
padding: 2em;
}
</style>
</head>
<body>
<header id="site-header">
<div />
</header>
</body>
</html>external css
이 방법은 css를 다른 파일에 적고 그 파일을 불러오는 것입니다. 이 방법이 가장 많이 사용되며 나중에 css관리 하기도 더 편합니다. 사용하는 방법은 아래와 같습니다. 만약 styles.css라는 파일이 html과 같은 디렉토리에 들어 있다면 아래와 같이 사용할 수 있습니다.
rel은 relationtion에 줄임말로 stylesheet 말고도 icon, prefetch, preload 등 등 여러가지 사용 가능합니다.
href에는 링크하고 싶은 문서에 주소(URL)을 쓰면 됩니다. 만약에 css 파일이 CDN에 있다면 이런 식으로 될 수도 있습니다. https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css(bootstrap css)
styles.css
#site-header {
padding: 12px;
}
index.html
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="site-header">
<div />
</header>
</body>
</html>
selector(선택자)
위에서 어떻게 아이디, 클래스, html 태그를 사용해서 특정 엘리먼트를 선택하는지 알아보았습니다. 위에 방법 말고도 여러 방법으로 html을 선택해서 스타일을 할 수 있습니다.
아래와 같은 html이 있을 때
<button>버튼</button>
<ul id="일이삼">
<li>일</li>
<li>이</li>
<li>삼</li>
</ul>
<ul id="사오육">
<li>사</li>
<li>오</li>
<li>육</li>
</ul>+ selector
button + ul {
background: red;
}
button 바로 다음에 있는 ul만 선택 해라. 즉, id가 일이삼인 ul에 빨간색이 적용되고 사오육 ul은 적용되지 않습니다.
~ selector
button ~ ul {
background: blue;
}
button 다음에 오는 모든 ul를 선택해라. 즉, 일이삼, 사오육 ul둘다 배경색이 파란색이 되는 겁니다.
> selector
아래와 같이 html이 있을 때
#부모 > div {}를 사용하면 어떤 div가 선택 될까요?
<div id="부모">
<div class="1세대">
<div class="2세대">
</div>
</div>
<div class="1세대">
</div>
</div>바로 1세대만 선택이 됩니다. #부모 > div {}을 풀어서 설명하면 div에 바로 윗단계가 #부모인 div를 선택해라. 다르게 말하면 #부모에 바로 아래 단계 div만 선택해라 입니다.
,(닷)
<h1>
<div>
<div class="section">
<span class="section">section</span>
</div>
</div>
</h1>h1, .section { background: red; }
,는 and 입니다. h1 과 .section 둘다 background: red를 적용해라. 그리고 위와 같이 썼을 때는 모든 h1 과 .section을 선택하는 것입니다.
.(마침표)
<div>
일
</div>
<div class="two">
이
</div>위와 같이 있을 때 div.two라고 쓰면 두번째 two라는 클래스를 가진 div만 선택 되어 집니다.
풀어서 말하면 div중에 two라는 클래스를 가지고 있는 div만 선택해.
이상으로 기본적인 css 설명과 여러가지 selector(선택자)를 공부해 봤습니다. 이 선택자들 말고도 hover 했을 때 사용되거나 attribute이 특정한 값을 가질 때 선택하는 선택자들도 많이 있지만 나머지들은 css를 배워가면서 천천히 알아보도록 하겠습니다.
이해가 안되는 점이나 부족한 점이 있다면 언제나 댓글로 남겨주세요.