CSS
CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)
: HTML로 만들어진 문서의 (컬러, 폰트 스타일, 레이아웃, 반응형 특징 등의) 스타일을 지정하는 방식을 규정하는 유명한 스타일 시트 언어 다. CSS는 웹사이트를 시각적으로 보다 매력적으로 만드는 기능을 제공한다.
다음 html 문법을 보면서 생각해보자!
<body>
<h1><a href="index.html" target="_blank">WEB</a></h1>
<h2 style="background-color:coral;color:powderblue">JavaScript</H2>html 의 태그 중에서 <h2> 태그에 style 속성을 주고 있다.
이 때 "background-color:coral;color:powderblue" 를 css 라고 한다.
선택자
만약 특정 태그 에 대해 css 를 적용시키려면 어떻게 해야할까? css 문법 중 선택자를 이용하면 된다. 선택자를 설명하기에 앞서, 특정 글자에 태그를 추가하고 싶다면 아무의미가 없는 <span> 태그로 감싸면 된다.
<span style="color:blue"> Javascript </span>
<div> Javascript </div> // 개행이 된다!span태그를 이용해style속성으로 꾸밀 수 있다.- 만약 특정
태그로 감싸진 모든 단어에게css를 적용하고 싶다면?
<head>
<style>
.js{ // .js는 클래스값이 js인 모든...
font-weight:bol;
color:red;
}
#first{ // #first는 id값이 first인 모든...
color:green;
}
span{ // span 태그로 감싸진 모든...
color:blue;
}
</style>
</head>
<body>
<span class="js"> JavaScript
</span>
<span id="first" class="js"> Javascript
</span>class="js" 의 속성으로 감싸진 모든 단어에게 위의 값을 적용시킨다!!
id=first 인 id값을 가진 모든 단어들은 green 으로 색이 변경된다.
<span> 태그로 감싸진 모든 단어에게 위의 값을 적용시킨다.
id > class > tag 순으로 특수한 것이라고 볼 수 있다.
개발자 지망생