1.
09 장에서 style 속성 이라는 HTML 문법을 이용해서,
CSS를 웹 페이지에 삽입했다.
하지만, 이렇게 하는 방법보다, 더 효율적인 방법이 존재 한다.
선택자 라는 개념 이다.
2.
<div> 태그 란?
어떠한 기능이나 의미가 없는 태그 이며,
CSS를 통해서 또는 자바스크립트를 통해서,
어떤 정보를 제어하고 싶을 때 감싸주는 역할을 하는,
무색무취의 태그 이다.
이런식으로 그냥 감싸서 사용 하면 된다.
3.
<div> 태그의 특징 ?
<div> 태그는 화면 전체를 사용 하기 때문에, 해당 태그를 사용 하면 자동 줄바꿈이 된다.
그런데, 줄바꿈이 되지 않는 무색무취의 태그가 필요 하면 무슨 태그를 사용 하면 될까 ?
4.
<span> 태그
<span> 태그는 줄바꿈이 되지 않는, 무색무취의 태그 이다.
이미지와 같이, 5개의 span 태그로 둘러쌓인 코드를 작성 해보았다.
JavaScript 라는 텍스트를 진하게 표시하고 싶다면 ?
이렇게 style 속성으로 font-weight 를 주면 된다.
그런데, 텍스트를 진하게 표시 하기 위해서, 현재 5개만 수정을 했는데,
만약에, JavaScript 라는 텍스트가 5개가 아니라,
1억개 라면 어떻게 해야할까 ?
1억번을 수정 해야 할까 ?
이렇게 할 수가 없다.
그래서, CSS 에는 반복을 피하기 위한 기능이 존재 한다.
바로 <style> 태그를 사용 하는 것이다.
5.
<style> 태그
<style> 태그는,
해당 태그 내부에서 작성하는 모든 코드가 CSS 코드 라는 것을 알려준다.
우선, 아래의 이미지와 같이, span 태그의 class 속성값을 js 라고 부여 해주자.
그런 다음에, <head> 태그 내부에 <style> 태그를 작성 한다.
그러면 어떻게 될까 ?
클래스 속성값이 js인 모든 태그에 텍스트가 굵게 적용 되게 된다.
근데 위의 이미지를 보면 적용이 되지 않은 상황인 것을 볼 수 있다.
왜 그러는것일까 ?
6.
class 선택자
현재 span 태그 내부에 속성은 class 인것을 확인 할 수 있다.
이렇게 속성이 class 이라면, 아래와 같이 표현 해야 한다.
바로 . (마침표) 을 붙혀 주는 것이다.
이렇게 표현 해주는것은 약속 되어 있는 문법이고, 이것을 class 선택자 라고 한다.
잘 적용된 모습을 볼 수 있다.
7.
이렇게 <style> 태그를 사용하면, 코드의 유지보수가 용이해지는 장점을 가진다.
가령, 다른 효과를 새롭게 부여 한다고 하면 ?
이렇게 <style> 태그 내부의, 해당하는 선택자 내부의 코드만 수정 하면 된다.
'생활코딩 HTML + CSS + 자바스크립트 > 자바스크립트 이론' 카테고리의 다른 글
| 11 CSS 기초 : 선택자 (0) | 2023.07.11 |
|---|---|
| 09 CSS 기초 : style 속성 (0) | 2023.07.11 |
| 08 웹 브라우저 제어 (0) | 2023.07.10 |
| 07 변수와 대입 연산자 (0) | 2023.07.10 |
| 06 데이터 타입 - 문자열과 숫자 (0) | 2023.07.10 |