2019. 11. 4. 17:52ㆍ프로그래밍/web
css란 ?
html 요소들이 미디어에서 어떻게 보이는 지를 정의하는데 사용되는 style sheet 언어.
html파일에서 분리해서 사용하는 것도 가능합니다. 다른 언어에서 header파일 include하는 것과 비슷합니다.
이런 속성으로 웹 사이트 일관성을 유지시켜주고, 유지보수 역시 쉬워집니다.
css 문법 형태
선택자 { 속성명 : 속성값 ; 속성명 : 속성값; 속성명 : 속성값 ...}
h1{ color:teal; text-decoration:underline ; }위 코드에서 h1은 스타일을 적용할 HTML요소를 가리키는데 사용됩니다.
예를 들어, h1이라는 이름을 가지는 html요소의 글자색을 변경한다고 하면, 브라우저에게
h1의 설정을 변경할 것 임을 알려주어야 합니다. 이때 사용하는 것이 선택자입니다.
선택자의 종류
1. html 요소 선택자
해당 css를 적용할 대상으로 html요소의 이름을 사용하여 선택하는 방법입니다.
위에서 예로 들었던, h1, h2, div 등의 html의 요소가 해당됩니다.
그냥 넘어가기 아쉬우니 예시만 간단히 들고 넘어갑시다^^
h1{ color:teal; text-decoration:underline ; }2. 아이디 선택자
아이디 선택자는 아이디 값을 사용해서 특정 요소를 선택할 때 사용됩니다.
게임에서 비유한다면, 플레이어의 닉네임만 파랗게 보이도록 하고 싶을 수도 있겠죠.
이럴 때 사용하게 되는 것이 아이디 선택자 입니다.
#player{ color:blue; text-decoration:line-through;}id값을 선택자로 지정할때는 id앞에 #을 붙여야하는 걸 잊지말도록 합시다.
3. 클래스 선택자
클래스 선택자는 class값을 이용해서 특정 요소를 선택할 때 사용됩니다.
늘상 처럼 게임의 예를 든다면, 같은 길드?인 사람들의 닉네임만 빨간색으로 보이게 하고 싶을때 활용될 수 있겠죠?
이럴 때 유용하게 사용하게 되는 선택자가 클래스 선택자 입니다.
.friends{color:red ; text-decoration:overline;}class 값을 선택자로 지정할 때는 class 명 앞에 .를 꼭 붙여야 합니다.
4. 그룹 선택자
그룹 선택자는 여러가지 선택자를 같이 사용할때 유용하게 사용됩니다.
p요소에 해당하는 head에만 속성 값을 주고 싶을 때 특히 유용하게 사용될 수 있겠죠.
p, head{color : navy;}여러개의 선택자 값을 지정해 줄때는 ,로 구분 한다는 것을 잊지맙시다.
css를 적용시키자.
css적용은 크게 3가지 방법이 있습니다.
가장 많이 사용하고 유지보수에 유용한 방법이 외부 스타일 시트 방식임을 상기하며 하나씩 알아봅시다.
1. 인라인 스타일 시트
<h1 style="color:green ;">테그 뒤에 style을 넣어 css를 지정하는 방식을 말합니다.
재활용이 불가능하고. 유지보수에 어려움이 있기때문에 정말 필요한 경우를 제외하고는 사용하지 말아야겠습니다.
2. 내부 스타일 시트
<head>
</head>
<style>
friend{ color : "red" ;}
</style>
<html>
</html>html파일에 따로 style테그를 만들어서 head 밑에 기재하는 것을 말합니다.
html파일이 단 한개라면 고려해볼만 하지만, html파일이 많고 css요소들의 재활용이 빈번하게 일어날 소지가 다분하다면 사용하는 것을 추천드리지 않는 방법입니다.
3. 외부 스타일 시트
우리가 지향해야 할 방법입니다.
따로 css파일을 만들어서 사용하는 방법입니다.
재활용이 매우 용이하고, 유지보수가 쉽다는 장점이 있습니다.
css강의 1강이 마무리 되었습니다!
css 강의 2강에서 봐요!
'프로그래밍 > web' 카테고리의 다른 글
| [Spring] Spring MVC framework를 사용한 웹은 어떻게 작동할까? (0) | 2021.07.19 |
|---|---|
| [Spring Boot] 댜양한 의존 관계 주입 DI 방법 (0) | 2021.07.01 |
| [Spring boot] 싱글톤 패턴의 쓰래드 문제 (0) | 2021.06.05 |
| REST API의 규칙 (0) | 2021.05.13 |
| [Spring boot]DataSource, Repository, Service, Domain, Controller, bean 이란? (0) | 2021.05.02 |