위 결과를 보면 별도의 태그 지정없이 모든 태그들에게 color:red;(글씨색을 빨간색으로 지정) 이 적용된것을 볼 수 있다.
태그 선택자란?
태그 선택자는 태그이름을 작성하여 선택한 태그에만 CSS 적용시키는 선택자이다. 사용방법은 아래와 같다.
/* 사용 양식 */
태그{
css 코드
}
/* 사용예시는 아래와 같다 */
p,div{
color: red;
}
-------------------------------
<p>p 태그</p>
<div>div 태그</div>
<span>span 태그</span>
결과
태그 선택자는 ,(쉼표) 를 사용하여 여러개의 태그를 동시에 지정할 수도 있고 하나의 태그만 지정할 수도 있다. 위 코드에선 ,(쉼표)를 사용하여 p 태그와 div 태그를 동시에 지정해주었기 때문에 글자 색이 빨간색으로 변경된 모습을 볼 수 있다. 반면에 지정이 안된 span 태그는 default 값인 검은 글씨가 출력되는 걸 볼 수 있다.
id 선택자란?
id 선택자는 # 을 이용하여 태그안에 id 값을 지정하여 해당 id 값을 가지고 있는 태그만 CSS를 적용시키는 선택자이다. 사용방법은 아래와 같다.
id 선택자는 같은 id가 부여된 태그들한테 css를 적용시키는 태그이다. 태그에 id를 지정하는 방식은 시작태그 안에 id="임의의값" 을 입력하여 지정할 수 있고 CSS에서 이를 #(지정한 id) 를 입력함으로써 id 선택자를 사용할 수 있다. 위 코드에선 p 태그에 "selected" 라는 이름의 id를 부여하였고 #selected 선택자를 이용하여 글씨를 빨간색으로 변경해 주었다. id 값이 지정이 안되어있거나 다른 id 값이 부여된 태그한테는 css가 적용되지 않는다.
id 선택자의 중복사용
id 선택자와 class 선택자의 차이점 중 하나는 중복사용의 가능 여부이다. 즉, id 선택자는 하나의 id값만 가지고 중복사용이 불가능하다. 하지만 아래의 예제를 봐보자.
#idSelector{
color:red;
}
--------------------------
<div id="idSelector"> id 선택자1 </div>
<div id="idSelectro"> id 선택자2 </div>
결과
결과를 보면 분명 id 선택자는 중복사용이 불가능하다 했는데 두 div 태그 모두 글씨가 빨간색으로 출력되고 있다. id의 중복사용으로 발생하는 문제점은 css가 아닌 자바스크립트에서 발생한다. 즉, id 선택자를 중복사용해도 괜찮은것처럼 보일지몰라도 나중에 자바스크립트를 반영하여 웹페이지를 만들고자 할때 큰결함으로 다가올 수 있다. 다시한번 강조하면 HTML 규정상 id 선택자의 중복사용은 불가능하다. 대신 중복사용이 가능한 class 선택자가 있으니 안심하자.
class 선택자란?
class 선택자는 .(점) 을 활용하여 선택한 class 값을 가지고 있는 태그들한테 css 를 적용시키는 선택자이다. 사용방식은 id 선택자와 비슷하고 예시는 아래와 같다.
/* 사용 방법 */
.id {
css 코드
}
/* 사용 예시 */
.selected{
color:red;
}
-----------------------
<p class="selected">p 태그</p>
<div class="selected">div 태그</div>
<span>span 태그</span>
결과
class 선택자는 기본적으로 id 선택자와 사용법이 동일하다. 다른점은 # 대신 . 을 사용하고 중복 사용이 가능하다는 것이다. 위 코드에선 selected 라는 이름의 class 를 p 태그와 div 태그에 지정하였고 해당 태그들의 글씨가 빨간색으로 출력된것을 볼 수 있다. 추가적으로 이 선택자는 class 태그는 중복사용이 가능하므로 다수의 태그에게 css 적용이 가능하다.
id,class 선택자에 대한 추가 설명
id, class 선택자의 사용방법이 비슷하기 때문에 이 둘의 차별점에대해 헷갈릴것이다. 결론부터 말하면 id 선택자는 class 선택자보다 우선 적용되기 때문에 보통 class 선택자로 큰틀을 만든 다음 id 선택자로 세부사항을 적용한다. 이론보단 예시와 결과로 알아보자.
#idSelector1{
color:blue;
}
#idSelector2{
color:blue;
}
.classSelector{
color:red;
}
---------------------------------------
<div id="idSelector1"> id 선택자 </div>
<div class="classSelector"> class 선택자 </div>
<div id="idSelector2" class="classSelector"> id, class 선택자 </div>
결과
위 코드에선 3개의 div 태그를 만들었고 각각 id,class 그리고 두값을 모두 가지는 방식으로 차별점을 두었다. 그리고 css를 활용하여 id 선택자는 글씨색을 파란색으로, class 선택자는 글씨색을 빨간색으로 출력되도록 지정했다. 그 결과 첫번째,두번째 div는 본인이 가지고 있는 선택자에 따라 파란색,빨간색 글씨가 출력되었다. 반면에 id,class 선택자를 모두 가지고 있는 3번째 div 에서는 빨간색이 아닌 파란색이 출력되었다. 이를 통해 우리는 class 선택자보다 id 선택자가 우선 적용된다는 사실을 알 수 있다.
CSS는 Cascading Style Sheet 의 약자로 html과 함께 사용되며 웹페이지의 디자인을 담당한다. CSS를 통해 여러 요소들의 크기,색상,배경,위치등을 변경할 수 있으며 이를 통해 개발자는 자신이 원하는 디자인의 웹페이지를 만들 수 있다. 오늘 포스팅에서는 CSS를 html에 적용하는 3가지 방법에대해 알아보고자 한다.
1. 인라인 방식
인라인 방식이란 html로 작성한 태그 안에 바로 CSS 문법을 기입하는 방식이다. 사용 방법은 아래와 같다.
<p> CSS 연습 </p>
<p style="color:red"> CSS 연습 </p>
결과
인라인 방식의 CSS는 태그 안에 style="" 형식으로 사용하며 괄호 안에 자신이 원하는 변경 내용을 작성하여 사용한다. 위 코드에서 사용한 color:red 라는 코드는 위 사진과 같이 글자의 색을 빨간색으로 변경하는 코드이다. 위 방식의 장점은 자신이 원하는 태그에 직접적으로 사용할 수 있다는 장점이 있지만 내가 내용을 수정하고자 할때 해당 CSS가 적용된 태그를 일일히 다 찾아 수정해줘야된다는 큰 단점이 있다. 따라서 유지보수에 매우 불리하므로 가급적 사용을 자제하는 것이 좋다.
2.내부스타일시트 방식
내부스타일시트 방식은 한 html 파일 안에서 <style> 태그를 활용하여 CSS를 적용시키는 방법이다. 사용방법은 아래와 같다.
내부 스타일시트 방식은 주로 웹페이지의 정보를 담고 있는 <head> 태그 안에 <style> 태그를 만들어 CSS를 적용시키는 방식이다. 위 방식은 <style> 안에 CSS 작성하는 법은 "선택자 { css 내용 }" 으로 구성되어 있다. 해당 작성방식은 다음 시간에 자세히 설명하도록 하겠다. 이러한 방식은 한 파일안에서 html 과 css 모두 작성할 수 있다는 장점이 있지만 동일한 CSS를 다른 파일에 적용하고 싶을떄 복붙을 해야된다는 아쉬운 점이 있다. 따라서 보통 코딩을 할때 1,2번째 방식보다 3번째 방식이 많이 선호되는데 이제 마지막 3번째 방식에 대해 알아보자.
3.외부스타일시트 방식
외부스타일시트 방식은 외부에 작성된 css 파일을 <link> 태그를 사용하여 html 파일로 가져오는 방식이다. 사용방식은 아래와 같다.
위처럼 외부스타일시트 방식은 외부에서 작성된 .css 파일을 <link> 태그를 활용하여 html파일로 가져오는것이다. <link> 태그의 사용방법은 <link href="css파일 주소" rel="stylesheet"> 이다. href에는 파일의 주소를 적어주어야하고 rel은 파일의 관계를 작성해주어야한다. 지금 불러오고자 하는 파일은 css 파일이므로 rel="stylesheet" 로 작성한 것이다. 외부 css 파일에서 css작성방식은 내부 css 방식과 동일하다. 이처럼 외부스타일시트는 하나의 css 파일로 여러개의 html에 적용할 수 있다는 장점과 유지보수가 용이하다는 장점을 가지고 있어 현재 가장 많이 사용되는 css 적용 방식이다.
