1. Internal CSS 알아보기
Internal CSS는 내가 만든 스타일을 다른 곳에도 적용시키고 싶을 때 사용하는 방법이며 선택자를 사용한다.
<style> </style> 태그를 사용해서 적용하며 HTML 문서에 여러번 올 수 있다,
단 <style> 태그 내부에 <style> 태그를 하나 더 만드는 것은 안된다.
주의할 점!
웹페이지는 html 문법도, CSS 문법도, Javascript 문법도 사용된다.
CSS의 스타일을 적용한다고 다른 프로그램의 문법에 CSS문법을 사용하면 안되기 때문에 주의하자.
또 이 스타일 태그는 html의 head 안에 들어가있어야 한다.
1) 선택자 Selector
- 스타일을 적용하기 위한 대상을 뜻하며, HTML 요소를 사용할 수도 있고 ID나 Class 형태로 정의할 수도 있다.
- 선택자의 형태 : 선택자 {속성1:값1; 속성2:값2; 속성3:값3; ~~}
- 하나의 속성을 주석하고 싶을 땐 ' -- ' 를 쓴다.
2) 선택자의 유형
- 태그 : HTML요소명을 선택자로 사용가능. div, h1, input, body등등
- #선택자 이름: 본문에 적용할 때 id="선택자이름", 본문에 선택자이름을 한번만 적용할 수 있다.
- 선택자이름 : 본문에 적용할 때 class="선택자이름", 본문에 선택자이름을 여러번 적용할 수 있다
2. Internal CSS 실습해보기
1) 태그로 Internal CSS 사용하기
본격적으로 <style> 태그를 사용해보자.
먼저 아래와 같이 코드를 작성해보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>03_internalCSS.html</title>
<style>
h1 {background-color: yellow; color: red;}
h2 {background-color: hotpink;}
</style>
</head>
<body>
<h3>2)Internal CSS</h3>
<h1>서울특별시</h1>
<h2>종로구</h2>
<h2>강남구</h2>
<h1>경기도</h1>
<h2>수원시</h2>
<h2>성남시</h2>
</body>
</html>
위에서 말했듯 <style> 태그는 html 문서의 <head> 부분에 들어간다.
이제 <h1>, <h2> 라는 이름을 가진 코드들을 선택자로 삼아서 코드 자체에 대한 속성을 부여해보자.
6행의 코드가 h1을 선택자로 삼아서 속성을 부여한 것이다.
기존의 html 문서였다면 글자 크기만 변환되었을탠데 이렇게 부여를 한 뒤 적용을 하면!
h1으로 묶인 모든 텍스트는 노란 배경에 빨간 글씨로 출력된다.
h2도 마찬가지이다.
input {border: 1px solid blue;}위와 같은 코드는 어떤 의미일까?
html에서 input으로 사용하는 모든 코드에 테두리를 넣겠다는 의미이다.
border 뒤에는 선의 굵기(1px), 선의 종류(직선), 선의 색상(파란색)을 넣었다.
border에 해당되는 값들은 굳이 구분하지 않고 한 줄로 나열해서 써도 모두 적용된다.
2) #선택자 이름으로 Internal CSS 사용하기
id는 식별자이다.
<div id="mydiv">무궁화 꽃이 피었습니다</div>위의 코드를 보면 블럭을 하나 나누어 '무궁화 꽃이 피었습니다' 라는 글자를 출력하는 코드이다.
이 나누어진 블럭은 mydiv 라는 이름을 갖고 있다.
이 블럭에 스타일을 적용하고 싶을 때!
우린 스타일에서 #mydiv를 식별자로 사용할 수 있는 것이다.
* #는 id를 뜻하는 문자이다.
그런데 만약에 같은 이름으로 두 코드를 작성하면 어떻게 될까?
내 이름과 같은 사람이 이 세상에? 존재한다.
이처럼 이름이 같은 코드도? 있을 수 있다.
다만 개발자인 내가 햇갈리는 거다(그래 컴퓨터는 햇갈리지 않을거야..)
그래서 왠만하면 이름은 구분해서 짓는다.
만약 속성값이 중복이 된다면 배열의 인덱스(순서)로 접근한다.
* 여기서 순서는 맨 위에 있는 것부터 0번으로 시작한다
3) .선택자 이름으로 Internal CSS 사용하기
#은 id와 연결되었었다.
그러면 .은 어디와 연결될까?
class와 연결된다.
아래의 코드를 보면서 잘 이해해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>03_internalCSS.html</title>
<style>
.intro{background-color: wheat;}
</style>
</head>
<body>
<p class="intro">대한민국</p>
<p>오 필승 코리아</p>
<span>제주도</span>
<div>강남구 역삼동</div>
</body>
</html>
위의 스타일에서 .intro로 intro라는 class의 속성을 부여해놓았다.
그리고 아래 <body>행에서 4가지의 텍스트 블록 중 대한민국이란 블록에게 intro 라는 class가 부여되어있다.
이렇게 2번째 경우의 class를 정해주고 스타일을 지정하는 방법도 internal CSS에서 사용하는 방법이다.
id는 딱 한 코드의 이름을 정하는 것인데 class는 필요할 때마다 적용시킬 수 있어서 용도가 다르다.
3. Internal CSS의 한계점
하지만 한계도 분명 존재한다.
바로 이 코드 안에서만 스타일 적용이 제대로 이루어진다는 점!
그렇다면 다른 파일에도 같은 방식으로 스타일을 적용하고 싶을 땐 어떻게 해야할까.
그것이 바로 다음 우리가 함께 알아볼 External CSS이다.
'⁂ CSS > : 기본 익히기' 카테고리의 다른 글
| [CSS] #2-3 Reset(리셋) (0) | 2022.08.01 |
|---|---|
| [CSS] #2-2 고급 선별자 사용해보기 (0) | 2022.08.01 |
| [CSS] #2-1 다양한 선별자, 부모-자식 관계 (0) | 2022.07.29 |
| [CSS] #1-3 External CSS (0) | 2022.07.29 |
| [CSS] #1-1 CSS 이해하기 그리고 Inline CSS (0) | 2022.07.29 |