선택자

속성선택자

HTML 요소에서 src, href, style, type, ...과 같은 속성을 선택자로 지정해서 스타일을 적용

[속성명]{
		CSS 문법
	}

	[src]{
		src 속성요소 선택
	}
	[src='apple.png']{
		src 속성이 'apple.png'인 요소들 선택
	}

[속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택
= "apple" - 값이 "apple"인것
~= "apple" -값이 "apple banana"인 것도 선택

[속성명 *= "속성값"] : 속성 값이 포함된 문자를 가지고 있는 요소를 선택
*= "apple" -값이 "applebanana" 인것도 선택

[속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택

[속성명 |= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택
|= "apple" - "applemango", "apple-mango", ("apple mango" x)

[속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택
^= "apple"-"applemango", "apple-mango", "apple mango"

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        [title="css"]{color: red;}
        [title~="css"]{color: red;} 
        [title*="css"]{color: red;} 
        [title$="css"]{color: red;}
        [title|="css"]{color: red;}
        [title^="css"]{color: red;}
    </style>
    <title>속성 선택자</title>
</head>
<body>
    <h2>속성 선택자 - 2</h2>
    <p title="css">독립적인 단어</p>
    <p title="funny-css">하이픈이 들어간 합성어</p>
    <p title="funny_css">언더바가 들어간 합성어</p>
    <p title="funny css">공백으로 연결된 합성어(접미사)</p>
    <p title="css funny">공백으로 연결된 합성어(접두사)</p>
    <p title="funnycss">공백이 없는 합성어(접미사)</p>
    <p title="cssfunny">공백이 없는 합성어(접두사)</p>
</body>

가상클래스선택자

클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택하여 스타일 지정
li : first-child -> li 요소 중에서 첫번째에 해당하는 요소
li : last-child -> li 요소 중에서 마지막에 해당하는 요소를
li : nth-child(n) -> li 요소 중에서 n번째 해당하는 요소

li : nth-child(odd) -> li 요소 중에서 홀수번째에 해당하는 요소
li : nth-child(2n+1)

li : nth-child(even) -> li 요소 중에서 짝수번째 해당하는 요소
li : nth-child(2n)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .list > li:first-child{color: deeppink; } 김사과
        .list > li:last-child{color:deepskyblue} 차두리
        .list > li:nth-child(2){color: whit;} 반하나
        .list > li:nth-child(odd){background-color: gold;} 김사과, 이체리
        .list > li:nth-child(even){background-color:hotpink;}  반하나, 차두리
    </style>
    <title>가상클래스 선택자</title>
</head>
<body>
    <h2>가상클래스 선택자</h2>
    <ul class="list">
        <li>김사과</li>
        <li>반하나</li>
        <li>이체리</li>
        <li>차두리</li>
    </ul>
</body>

가상요소선택자

::before
글, 이미지, 그라데이션 등을 요소 앞에 삽입
::after
글, 이미지, 그라데이션 등을 요소 뒤에 삽입
:link
하이퍼링크가 연결됬을 때(기본상태)
:visit
특정 하이퍼링크를 방문한 적이 있을 때
:active
마우스 버튼을 클릭하고 있을 때
:hover
마우스가 올라갔을 때

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
       .tx1::before{content: '☆'; color: red;}
       .tx2::after{content: '★';}
       a:visited{
      	text-decoration: none; 
        color: maroon;}
       a:link{
        text-decoration: none; 
        color: mediumvioletred;
       }
       a:hover{
           color: dodgerblue;
           text-decoration: underline;
       }
       a:active{
          color:coral;
       }
    </style>
    <title>가상 요소 선택자</title>
</head>
<body>
    <h2>가상 요소 선택자</h2>
    <p class="tx1">before</p>
    <p class="tx2">after</p>
    <a  href="https://www.naver.com" target="blnak">네이버</a>
    <a  href="http://www.naveffr.com" >여긴어디?</a>
</body>

CSS의 컬러

색상 이름으로 표헌
red, white, black ....

RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
rgba(0~255,0~255,0~255,0~1) (1에 가까울 수록 불투명)

16진수 색상값으로 표현
rgb 색상값을 16진수로 0~f / 00~ff까지 범위를 지정
#0000ff(파랑색) -> #00f

16진수	0	1	2	3	4	5	6	7	8	9	a	b	c	d	e	f

hsl, hsla 표기법
hsl은 차례로 hue(색상), saturation(채도), lightness(밝기)
hsl + a(alpha 값 : 투명정도, 1에 가까울 수 록 불투명)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
            background-color: thistle;
        }
        #color1{
            width: 200px;
            height: 200px;
            padding: 20px;
            /* background-color: rgb(220, 237, 200); */
            background-color: rgba(200, 23, 100, 0.8);
        }
        #color2{
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: #64ffda;
            color: #004d40 ;
        }
    </style>
    <title>CSS 컬러</title>
</head>
<body>
    <h2>CSS 컬라</h2>
    <div id="color1">첫번째 컬러</div>
    <div id="color2">두번째 컬러</div>
</body>

CSS의 텍스트

color
- 텍스트의 색상을 설정(기본색상은 검정색)
letter-spacing
- 텍스트 내에서 글자 사이의 간격을 설정
word-spacing
- 텍스트 내에서 단어 사이의 간격을 설정
text-align
- 텍스트의 수평 방향 정렬을 설정
text-indent
- 단락의 첫 줄의 들여쓰기를 설정
line-height
- 텍스트의 줄 간격(높이)를 설정
text-decoration
- 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
- none, underline, line-thirough, overline
text-transform
- 텍스트에 포함된 영문자에 대한 대소문자를 설정
- uppercase, lowercase, capitalize
font-variant
- 소문자를 작은 대문자로 변경
text-shadow
- 텍스트에 그림자 효과를 설정

     선택자 {
	text-shadow : 가로거리 세로거리 번짐정도 색상;
	}

text-overflow
- 텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정(clip, ellipsis)
white-space
- 스페이스와 탭, 줄바꿈, 자동 줄 바꿈을 어떻게 처리할지 설정
- wrap, wordbreak, nowrap,..
overflow
- 기준선을 벗어나 넘칠 경우 값을 어떻게 처리할지 설정 (hidden, visible)
font-size
- 텍스트의 크기를 설정
- px 스크린의 픽셀을 기준으로 하는 절대 크기 설정
- % 기본크기(16px)를 기준으로 하고 상대 크기 설정 (150% -> 24px)
- em 부모요소의 글자 크기를 기준으로 하고 상대 크기 설정
- rem 부모요소에 상관없이 기본 크기에 대한 상대 크기 설정
font-weight
- 텍스트의 굵기를 설정
- 기본 굵기는 숫자 400
- 숫자는 100~900
font-family
- 글꼴을 설정
- 하나의 글꼴을 설정, 여러개의 글꼴을 등록
- 여러개의 글꼴이 등록되어 있는 경우, 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 적용
- 글꼴 이름에 띄어쓰기가 있는 경우 반드시 따옴표로 감싸주어야 함

CSS의 배경

background-color
- HTML 요소의 배경색을
background-image
- HTML 요소의 배경으로 나타날 배경 이미지를 설정
- 배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남

선택자{
	background-image:url('이미지파일 경로')
	}

background-repeat
- 배경 이미지를 수평이나 수직 방향으로 반복하돌고 설정
- repeat, repeat-x, repeat-y, no-repeat(반복하지 않음.)

Author And Source

이 문제에 관하여(CSS Day-2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@km2535/CSS-Day-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

CSS Day-2

선택자