⁂ CSS/: 기본 익히기

[CSS] #1-2 Internal CSS

김갱환 2022. 7. 29. 15:05

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이다.

저작자표시 비영리 동일조건 (새창열림)