[CSS] 웹 페이지 디자인 언어

HTML과 별개의 다른 언어입니다.

사용 방법은 크게 두가지

1. Style 태그 이용. (단일~전체 지정)

인라인 어셈 느낌으로, head 태그 안에서

<style> </style> 태그 안에 CSS 코드 작성.

 

▶︎ 구현 방식

selector { property:value;}

selector -> 선택자. 이 웹페이지에 존재하는 ‘무엇’을 지정해줌 (여러개를 콤마로 구분하여 넣어줄 수 있음)

property: value -> 지정해줄 속성과 값

 

selector 위치에 작성한 문자는 기본적으로 태그명으로 인식되고, 선택자는 해당 태그명을 갖는 모든 태그를 선택하는 입장입니다.

이렇게 특정 태그 전체가 아닌, 원하는 부분들만 그룹핑하여 지정하고 싶을 경우에는 class 라는 속성을 사용하면 됩니다.

그룹핑하고 싶은 데이터가 있는 태그에 속성값으로 class=“값” 의 값을 동일하게 지정해서 같은 그룹으로 묶어준 다음에

선택자 부분에 .클래스값을 넣어주면 선택자는 해당 클래스값을 속성으로 갖는 것들만 선택하게 됩니다.

 

ex) a { color:blue;} -> 모든 a태그 부분의 글씨 색을 파란색으로 변경

.x { color:blue;} -> 클래스값을 x로 갖는 것들만 글씨 색을 파란색으로 변경 (클래스값은 태그 안에서 class=“값”으로 지정해줌)

 

그리고 이 클래스에 들어가는 값은 여러개의 값이 들어갈 수 있으며, 공백으로 구분짓습니다.

-> class=“key1 key2” 로 지정하면 .key1에도 들어가고 .key2에도 들어가게 됩니다.

 

이렇게 태그명 선택자, class 선택자 외에도 id 선택자라는 선택자 종류도 있습니다. 기본적으로 태그에는 id를 지정해줄 수 있는데, 그 속성값을 이용하는 것입니다. 마찬가지로 속성에 id=“값”을 지정해준 뒤 이번엔 선택자 부분에 #값 으로 정의해주면 됩니다. 하지만 이 id 값은 웹 페이지 내에서 단 한번만 등장해야 합니다. id라는게 다른 것들과 구분짓기 위한 아주 고유한 값이기 때문이죠. id선택자는 주로 단순히 id에 해당하는 태그의 속성을 지정하고 싶을 때 사용되고, id 선택자의 우선순위가 높다는 특성을 응용하여 사용하기도 하는데, 즉 클래스선택자를 사용하면서도 고유적으로 지정해줘야 하는게 생길 때 사용하게 됩니다. 바로 위의 경우 key1 key2를 클래스 선택자로 모두 지정하는 대신에, 태그에 id값을 지정해준 뒤에 key1 key2중 우선순위가 높았던 정의문을 id선택자로 바꿔주면 기능의 활용이 더욱 뚜렷해지고 코드의 가독성도 좋아집니다.

 

▶︎ 선택자 간의 서열/우선순위 ( 기본적으로 같은 종류의 선택자 끼리는 정의 순서에 따라서 적용이 덮어씌게되는데, 다른 선택자 끼리는 정의 순서에 상관없이 서열이 정해져있다 )

id선택자 > class선택자 > 태그명 선택자

 

선택자 간의 서열은 ‘구체성’을 생각해보면 외우지 않아도 이해할 수 있습니다.

id선택자의 값은 웹 페이지 내에서 오직 한번만 등장하는 아주 구체적인 케이스고

class 선택자는 ‘그룹’ 된 일부 이므로 비교적 구체적이며

태그명 선택자는 해당되는 모든 태그를 뜻하므로 비교적 덜 구체적이다.

 

+ 선택자 부분에 #hello h1을 입력하게 되면, id가 hello인 태그의 자식인 h1태그들을 지정할 수 있습니다. (콤마 = 다수의 선택자를 지정할때, 공백 = 부모와 자식 관계를 표현할 때)

 

 

2. Style 속성을 쓴다. (개별 지정)

기존 태그에서 속성형태로 style에 대해 지정해줌.(태그가 아님)

 

▶︎ 구현 방식

<example style=“property:value;” />

example은 태그 예시

property: value -> 지정해줄 속성과 값

 

적용 우선순위는 1 < 2

 

정리

1, 2번 둘다 효과를 지정할 부분과, 효과의 값에 대한 정보가 필요합니다.

1번의 경우는 지정할 부분을 선택자라는 문법하에 명시적으로 적어주고, 2번의 경우는 style 속성이 위치한 태그에 적용됩니다.

이렇게 style  태그 안이나 style 속성에 대해 지정해준 값은 CSS문법으로 작성하고, 웹브라우저는 이런 부분을 CSS로 읽어줍니다.

 

 

CSS의 장점

▪︎ HTML을 통해 디자인 하는 것 보다 훨씬 효과적이고 유지보수에 좋음.

▪︎ 위 1번의 경우엔 정보부분과 디자인 부분을 완벽히 분리함으로써 코드가 깔끔해지고 효율적임.

 

 

중요한 Tip

▪︎  Property가 동일하게 시작하여 - 로 구분되어 달라지는 것들은 한번에 묶어서 해줄 수 있음.

ex) border-width:5px; border-color:red; border-style:solid;

-> border: 5px red solid

이때 순서는 상관없음.

▪︎ caniuse.com = > 현재 웹브라우저들이 얼마나 해당기능(html/css/javacript etc..의 기능들)을 채택하고 있는지 알 수 있는 사이트.

▪︎ CSS를 설정할 때에는 구글의 개발자 도구의 Styles 기능을 활용하여 검사하면 좋다.

▪︎ CSS 코드를 재사용하기 위해서는 1번의 경우에서 <style> </style> 안에 있는 css 코드내용을 "파일명.css"로 새로 만든 뒤에

적용하고자 하는 html 파일 안에서 style 태그 대신에 <link rel="stylesheet" href="파일명.css"> 를 넣어주면 된다.

-> HTML과 CSS를 완전히 분리시킬 수 있어서 각자 본질에 충실할 수 있고, HTML에서 CSS파일을 참조하는 형식이므로 유지보수에 용이하다. 되도록이면 이렇게 HTML 파일과 CSS 파일을 분리시켜서 관리하는게 좋다.