기본 콘텐츠로 건너뛰기

CSS 태그 선택자, 클래스 선택자, ID 선택자, 하위 선택자

CSS는 선택자를 이용하여 HTML 엘리멘트를 선택해서 꾸미는 것.

CSS를 자세히 보다 보면 *, . , #들로 시작한다.

태그 선택자
선택자를 작성하는 규칙

1
H1 { font-size : 10px ; color : red ; }
cs

이 것이 의미하는 것은 

H1은 선택자의 이름이 된다

H1 라는 선택자를 {}로 묶어줌으로써 정의를 한다

font-Size는 속성 이름이 되고 10px는 속석 값이 된다

속성 이름과 속성값은 :로 구분을 지어준다

또한 각각의 속성을 세미콜론(;)을 통해 구분을 지어줌으로써 여러개의 속성을 줄수 있다.

선택자의 이름을 지정할 때 HTML 태그 중 하나가 될 수도 있고, 직접 이름을 지어줄 수 있다.

클래스 선택자 (.)

클래스 선택자를 지정하는 법

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
<!DOCTYPE>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html ; charset=utf-8' />
    <title>Jquery 세상에 오신것을 환영 합니다.</title>
   
   <link rel="stylesheet" type="text/css" herf="stylesheet/style1.css"/>
   
    <style type ='text/css'>
        .align_center {
            color: #0094ff;
            font-size: 40px;
        }
  </style>
</head>
<body>
    <p class="align_center">  hello!!   </p>
    
</body>
</html>
cs



1
  <p class="align_center">  hello!!   </p>
cs
<p>태그에 클래스를 부여 해주었다.


1
2
3
4
5
6
    <style type ='text/css'>
        .align_center {
            color: #0094ff;
            font-size: 40px;
        }
   </style>
cs
클래스를 이용하여 <p>태그가 아닌 align_center클래스 명을 가진 부분만 효과를 준다

클래스를 선택할 때 마침표(.)를 찍어서 표시를 해준다.

클래스 선택자의 특징.
 1. 클래스를 만들어 서로 다른 엘리먼트에 여러 번 적용해서 사용
 2. 클래스 이름은 반드시 영문으로 시작
 3. 원하는 엘리먼트 정밀 제어 가능
 
아이디 선택자 (#)
페이지 안에서 하나밖에 없는 고유한 엘리먼트를 나타내기 위해 사용
ID 선택자는 중복해서 사용할 수 없다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html ; charset=utf-8' />
    <title>Jquery 세상에 오신것을 환영 합니다.</title>
   
   <link rel="stylesheet" type="text/css" herf="stylesheet/style1.css"/>
   
    <style type ='text/css'>
        #align_center {
            color: #0094ff;
            font-size: 40px;
            text-align:center;
        }
  </style>
</head>
<body>
    <p id="align_center">  hello!!   </p>
    
</body>
</html>
cs
id선택자는 샾(#)을 이용한다.

<style type ='text/css'>
        #align_center {
            color: #0094ff;
            font-size: 40px;
            text-align:center;
        }
  </style>


하위 선택자

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
31
32
33
<!DOCTYPE>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html ; charset=utf-8' />
    <title>Jquery 세상에 오신것을 환영 합니다.</title>
   
   <link rel="stylesheet" type="text/css" herf="stylesheet/style1.css"/>
   
    <style type ='text/css'>
        .style_div {
            background-color : green;
        }
        p{
           color:blue;
           text-align : center;
         }
</style>
        
</head>
<body>
    <p>p태그로 파랑색, 가운데 정렬되었습니다.</p>
    <div class='style_div'>
        <h1>이 h1태그는 하위 선택자의 영향을 받지 않습니다.</h1>
        <p>이 p태그는 하위 선택자에 의해 흰색으로 스타일 됩니다.</p>
    </div>
</body>
</html>
cs
cs
이렇게 코드를 작성하면

 
1
2
3
4
5
6
7
8
9
10
11
12
<style type ='text/css'>
        .style_div {
            background-color : green;
        }
        p{
           color:blue;
           text-align : center;
         }
        .style_div p {
            color:white;
        }
 </style>
cs

cs

css부분을 이렇게 해주면
.style_div p  이 의마하는 것은 style_div라는 클래스 안에있는 p라는 놈을 의미한다.

 

태그

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[git] pull을 하여 최신코드를 내려받자

보면 먼가 로고가 다르게 뜨는것을 확인을 할 수가있다. C:\Users\mung\Desktop\etc\study\python-gene>git checkout remotes/origin/master Note: checking out 'remotes/origin/master'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout. If you want to create a new branch to retain commits you create, you may do so (now or later) by using -b with the checkout command again. Example:   git checkout -b HEAD is now at 29e282a... fetch test C:\Users\mung\Desktop\etc\study\python-gene>git branch * (HEAD detached at origin/master)   master   test1   test2 깃이 잘 쓰면 참 좋은놈인데 어지간히 쓰기가 까다롭다. 처음에 깃을 푸시 성공하는데만 한달정도 걸렸던걸로 기억이 난다.. ㅋㅋㅋ 여담으로  깃 프로필을 가면 아래사진 처럼 보인다. 기여도에 따라서 초록색으로 작은 박스가 채워지는데 저걸 잔디라고 표현을 한다고 합니다 ㅎ 저 사진은 제 깃 기여도 사진입니당 ㅋㅋㅋㅋ 다시 본론으로 돌아와서 ㅋㅋ pull을 하면...
댓글 쓰기
자세한 내용 보기

[kali linux] sqlmap - post요청 injection 시도

아래 내용은 직접 테스트 서버를 구축하여 테스트 함을 알립니다.  실 서버에 사용하여 얻는 불이익에는 책임을 지지 않음을 알립니다. sqlmap을 이용하여 get요청이 아닌 post요청에 대해서 injection공격을 시도하자. 뚀한 다양한 플래그를 이용하여 DB 취약점 테스트를 진행을 해보려고 한다. 서버  OS : windows 7 64bit Web server : X Server engine : node.js Framework : expresss Use modules : mysql Address : 172.30.1.30 Open port : 6000번 공격자 OS : kali linux 64bit use tools : sqlmap Address : 172.30.1.57 우선 서버측 부터  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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 var  express  =  require( 'express' ); var  app  =  express(); var  mysql  =  require( 'mysql' ); var  ccc  =  mysql.createConnection({     host: '127.0.0.1' ,     user: 'root' ,     pos...
댓글 쓰기
자세한 내용 보기

[node.js] 파일 리더기 만들기 - 사용 모듈 정리, pdf 구조, hwp 구조

pdf -> html 변환 가장 무난하다. 기본적으로 pdf는 htm와 비슷한 형태의 구조를 가지고 있다. 크게 header , body , xref table , trailer 의 구조로 되어있다. pdf는 환경에 상관없이 표현을 하기 위한 목적을 가지고 있는 파일이다. 이런 이유 때문에 무난히 진행이 된 것 같다. pdf2htmlex와 pdftohtmljs라는 모듈을 이용을 했다. var pdftohtml = require ( 'pdftohtmljs' ) ; var converter = new pdftohtml ( 'test.pdf' , "sample.html" ) ; converter . convert ( 'ipad' ) . then ( function ( ) { console . log ( "Success" ) ; } ) . catch ( function ( err ) { console . error ( "Conversion error: " + err ) ; } ) ; 이미지나, text같은 것들이 거의 100%로 변환이 된다. docx -> html 변환 docx파일을 html파일로 변환을 할 때는 style 적용과 한글이 깨지는 문제가 있다. 텍스트들을 전부 잘 읽기는 하는데 스타일 정보를 제대로 가져오지 못하기 때문에 좀 애매하다 - Headings. - Lists. - Customisable mapping from your own docx styles to HTML. For instance, you could convert WarningHeading to h1.warning by providing an appropriate style ...
댓글 쓰기
자세한 내용 보기