Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

새로운 시작, GuyV's lIfe sTyle.

Part 10. 웹 - 프런트엔드 (4) - CSS 사용법(분리) 본문

ⓟrogramming/웹프로그래밍 제대로 배우기

Part 10. 웹 - 프런트엔드 (4) - CSS 사용법(분리)

가이브 2020. 2. 16. 12:44

CSS 사용법으로, 태그에 속성 "style"을 지정해서 바로 사용할 수 있지만 이를 완전 분리시키는 방법도 있습니다. 속성으로 주지 않고 한곳에 몰아서 선언을 하는데, 어디에 스타일을 적용 시켜야 되는지 지정을 해야됩니다. 이것을 셀렉터(selector)라고 부릅니다. 앞서 해본 방법은 "태그에 속성을 부여한다"라고 할 수 있고, 이번에는 "속성을 태그에 부여한다"라고 할 수 있겠네요.

 

이번 시간에 해볼 분리시키는 방법은 또 2가지가 있습니다. 하나는 HTML파일에서 바로 쓰는 방법이랑, 아예 파일을 따로 빼는 방법입니다. 어떤게 유리할지 생각해보면, HTML파일에 바로 쓴다 하면, a.html 에서 쓴 스타일 값을 b.html 에 쓰려면 a.html 에서 스타일 코드를 b.html 에 복붙해야겠죠. 만약 파일로 따로 뺀다면 a.html 과 b.html 에서 CSS를 같은 곳을 바라보게 됩니다.

생각해보면, 웬만한 홈페이지는 여러개의 HTML이 있을 수 있고, 이들은 다 같이 똑같은 메뉴를 가지고 있습니다. 그렇다면 CSS 코드를 HTML에 넣는 것 보다 파일로 빼서 모든 HTML이 같은 CSS를 바라보게 하면 후에 바꾸더라도 매우 쉽게 CSS파일만 수정함으로서 자동으로 HTML 파일의 태그들이 적용 되겠습니다. 그럼 두말 할 것도 없이 CSS는 파일로 빼는게 가장 좋겠군요. ^^

 

지금까지의 내용을 정리해봅시다.

1. CSS 부여방법 : (1)태그에 바로, (2)따로 분리

2. 따로분리방법: (1)HTML파일내에, (2)HTML파일밖에 두고 HTML에서 사용할 CSS 파일을 지정.

3. CSS 문법: "key:value" 형식. 두개 이상 부여시는 key:value 사이를 세미콜론(;)으로 구분.

 

이 정도만 숙지하여도 되구요. CSS에서 사용법을 익혀야 되는 것이 바로 셀렉터입니다. CSS 속성이야 레퍼런스를 찾아서 key:value 로 주면 됩니다만, 어떤 홈페이지에서든 원하는 위치에 있는 태그에 CSS를 적용하기 위해서 필수겠죠.

 

앞 시간까지 계속 사용했던 hello.htm  파일을 계속 활용해볼겁니다. CSS속성을 모두 지워봅시다.

<html>

  <head>
  
	<title>가이브의 홈페이지</title>
        
  </head>


  <body>
    
    <h1>인사말</h1>

    <p>안녕하세요.
    가이브는 원숭이섬의 비밀 주인공인 guybrush 이름에서 따왔으며,
    나우누리 한글 아이디 제한이 4자라서 GuyV 로 줄였고,
    한글로는 가이브라고 씁니다.<br>
    오늘도 건강한 하루를 보내시기 바랍니다.</p>
      
    <h1>오늘의 날씨</h1>

    <p>오늘은 날씨가 화창하네요. 오전은 맑고 오후도 맑아요. 내일은 흐릴 예정입니다.</p>
    
    <h1>오늘의 명언</h1>
    
    <p>벼는 익을수록 고개를 숙인다.</p>
    
    <h1>유용한 사이트 모음</h1>
    
    <ul>
        <li>구글 검색엔진 <a href="http://google.com" target="_blank">열기</a></li>        
        <li>페이스북 <a href="http://www.facebook.com" target="_blank">열기</a></li>           
    
    </ul>

    
    <h1>블로그</h1>  
    <p>
        <p>
        첫글입니다~<br>
        오늘도 좋은 하루 보내세요!<br>
        좋은 정보를 얻어가시기를 바래요!
        </p>


    </p>
    


  </body>


</html>

 

<style>태그는 일반적으로 <head>태그 내에 위치합니다. 바로 사용을 해볼까요?

 

<style> .. </style> 코드만 추가한 결과

 

<head></head> 태그 사이에 <style>태그를 주고, CSS코드를 적용하였습니다. 

        /* 코드 영향을 주지 않는 주석입니다 */
        body 
        {    
            color:blue        
        }

 

첫 줄은 주석문입니다. /* 로 시작하여 */로 끝납니다. 여러줄이 가능합니다. 

두번째 줄의 "body"문자가 바로 셀렉터입니다. <style>태그에서 시작은 셀렉터를 지정하고, 중괄호로 묶은 후에 속성값을 줍니다. 태그에서 직접 "style"속성을 주고 "key:value" 형식으로 사용한 것과 동일합니다. 

결과를 보면 검정색이었던 글자색이 모두 파란색으로 변경되었습니다. 감이 오시는가요? 

셀렉터는 여러가지 형식을 가질 수 있습니다. 위 예제가 그 중 하나입니다.

1. 태그 : 태그명을 그대로 써줍니다. 물론 <, >는 붙이지 않습니다. (예: body, font, h1, ...)

예제에서는 body태그 1개만 지정했는데, 콤마로 셀렉터를 2개 이상 줄 수 있습니다.

        /* 코드 영향을 주지 않는 주석입니다 */
        p, li
        {    
            color:red
        }

 

p태그와 li 태그에 같이 색상을 red로 지정합니다. 물론 CSS속성값도 앞서 해봤듯이 세미콜론으로 구분하여 2개 이상 지정이 가능합니다.

        /* 코드 영향을 주지 않는 주석입니다 */
        p, li
        {    
            color:red;
            font-size:15pt;
        }

 

셀렉터의 앞에 샵("#")문자를 붙이면 특정 태그가 아닌, 문서 내의 모든 태그 중 "id"속성 값을 대상으로 합니다.

 

첫번째 <h1>태그에 "id"속성값을 주고 셀렉터로 지정

 

셀렉터간의 구분자는 없습니다. 다음처럼 되겠죠? 

        h1
        {
            color:red;
        }.hello
        {    
            color:green;
        }

읽기가 힘드니 개행을 해주는 것입니다.

 

위 소스처럼 "#"을 쩜(".")문자로 바꾸면 "class"속성 값을 대상으로 합니다. 

이렇듯, 셀렉터의 종류는 많이 있구요. 이는 여러 잘 정리되어 있는 웹사이트에서 찾아보실 수 있으니 참고하시면 됩니다. 다시 말씀드리지만, 사용법입니다. 그리고 종류를 모두 다 익히지는 않더라도, 한번 읽어보시고 "아, 이런 것들이 있으니 저런 것들이 가능하구나"라고 느끼시면 됩니다. 그리고 다음에 경험이 필요할 때는, "해보지는 않았지만 이런 것들이 있었지"하며 테스트로 간단하게 해본 후, 실제 반영을 하면 되는 것입니다. 

이제 앞으로 어떤 CSS의 셀렉터의 종류가 나오더라도 셀렉터의 레퍼런스를 찾아보시면 해석이 가능하실 것입니다. 이 강좌는 여러분들에게 암기 능력을 논하지 않을 것입니다. 누구에게도 공평하게 스스로 할 수 있는 노력을 하시면 됩니다. 그 방법을 알려드리는 것입니다. 

 

이렇게 <style>태그를 (<head>태그 내에)사용해서 CSS속성을 줄 수 있고, 셀렉터로 원하는 범위를 지정한다라고 생각하시면 됩니다. 개발자 분들은 많이 사용할 일은 없으시겠지만, 나홀로 웹사이트를 만들어야 된다면 알아야 되겠죠. 

 

또 한번, 지금까지의 내용을 정리해봅시다.

1. CSS 부여방법 : (1)태그에 바로, (2)따로 분리

2. 따로분리방법: (1)HTML파일내에, (2)HTML파일밖에 두고 HTML에서 사용할 CSS 파일을 지정.

 - HTML파일의 <head>태그내에 <style>태그에 셀렉터를 이용하여 CSS부여.

3. CSS 문법: "key:value" 형식. 두개 이상 부여시는 key:value 사이를 세미콜론(;)으로 구분.

 

HTML파일 밖에 두고 HTML에서 사용할 CSS파일을 지정하는 방법은 아주 간단합니다. 작성한 <style>태그 내의 속성을 모두 복사하여 파일로 저장합니다. 필자는 hello.css 라고 하겠습니다. 

<style>태그 내의 모든 문자를 떼어내서 파일로 저장합니다.

 

그리고 <style></style>태그가 남았는데, 이제 지워버리구요.

그 자리에 <link>라는 태그로 이제 외부로 빼낸 CSS파일을 지정할 수 있습니다.  

<link rel="stylesheet" href="hello.css">

 

그리고 다시 새로고침을 해보면 htm 파일 내에 있었던 것과 같은 결과를 볼 수 있습니다.

 

hello.zip
0.01MB

 

여기까지 함께 진행한 예제의 최종 소스 파일입니다. 

 

이번 시간은 여기까지입니다. ^^

반응형

'ⓟrogramming > 웹프로그래밍 제대로 배우기' 카테고리의 다른 글

Part 11. 프로그래밍을 공부하며 들이면 좋은 버릇 또는 조언[2]  (0) 2020.02.17
Part 9. 웹 - 프런트엔드 (3) - CSS 사용법  (0) 2020.02.15
Part 8. 웹 - 프런트엔드 (2) - HTML 실습  (0) 2020.02.06
Part 7. 웹 - 프런트엔드 (1) - HTML의 규칙  (0) 2020.02.05
Part 6. 프로그래밍을 시작해봅시다.  (0) 2020.02.04
공유하기 링크
'ⓟrogramming/웹프로그래밍 제대로 배우기' Related Articles more
Comments