38. CSS

hanahana·2022년 8월 4일
CSShtml학원수강
0

HTMLCSS-학원수강

목록 보기
8/18
post-thumbnail

css는 진도를 확확 나가셔서 따라 쓰기도 버거웠다
천천히 복습하면서 기억해 놔야 할것 같다.

스타일 꾸미기

헤드부분에 style태그

혹은 문자앞에 style태그

혹은 스타일시트를 만들어 html의 스타일을 꾸민다.

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>선택자</title>
    <style>
       h1{color: red}
    #p-tag1
    {   background-color: aqua;
    color:  blue}
    #p-tag2 { background-color: bisque;}
    .c-tag1{background-color: aquamarine;}
    </style>
   
</head>
<body>

    <h1>아이디/클래스 선택자</h1>
    <p id="p-tag1">p태그에 있는 텍스트입니다.</p>
    <p id="p-tag2">얘도 p태그에 있는 텍스트입니다.</p>
    <h4 class="c-tag1">얘는 h4태그에 있는 텍스트입니다.</h4>

    <p class="c-tag1">p태그에 있는 텍스트입니다.</p>
    <p>얘도 p태그에 있는 텍스트입니다.</p>
    <h4 class="c-tag1">얘는 h4태그에 있는 텍스트입니다.</h4>

</body>
</html>

헤드안에 style태그를 적용해서 밑 본문에 적용시킨다,

  • .은 클래스
  • #id를 의미한다.

기본속성 선택자

[type=text] {background-color: beige;}
[name=userId] {background-color: blueviolet;}
<input type="text" name="userId" id="">
<input type="text" name="userPwd" id="">
  • 인라인 태그안에 부여되어있는 [속성=속성명]으로 입력하여 스타일을 준다.
  • css안에 type=text는 beige의 백그라운드 색상을 가지게된다
  • 아래에 쓴게 우선하기에 name=userid로 지정된 text칸의 배경색생은 블루바이올렛으로 바뀐다.

CSS파일로 스타일설정

<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">
    <title>선택자</title>
   <link rel="stylesheet" href="./sample.css">
</head>
  • 해드에 링크를 걸고 CSS파일을 작성한다.
  • style태그를 그대로 쓰면된다/
h1{color: red}
#p-tag1
{   background-color: aqua;
    color:  blue}
#p-tag2 { background-color: bisque;}
.c-tag1{background-color: aquamarine;}

[type=text] {background-color: beige;}
[name=userId] {background-color: blueviolet;}

이 그대로 파일을 css로 작성하여 연결하면 html파일에 그대로 적용된다.

특정단어가 포함된 내용의 스타일 전부 변경

[name~=Test] {color:goldenrod}
<p name="Test 1" id="i1" class="class-c1">Test1 글자입니다.</p>
    <p name="Test 2" id="i2" class="c1">
    Test2 글자입니다.</p>
    <p name="Test 3" id="i3" class="c1">Test3 글자입니다.</p>
    <p name="Test 4" id="i4" class="c2">Test4 글자입니다.</p>
    <p name="Test 5" id="i5" class="c2">Test5 글자입니다.</p>
    <p name="Test 6" id="i6" class="class-c2">Test6 글자입니다.</p>

    <p name="Test 1" id="i1" class="p-class c1">Test1 글자입니다.</p>
        <p name="Test 2" id="i2" class="class c1">
        Test2 글자입니다.</p>
        <p name="Test 3" id="i3" class="class c2">Test3 글자입니다.</p>
        <p name="Test 4" id="id4" class="class c2">Test4 글자입니다.</p>
        <p name="Test 5" id="id5" class="class c3">Test5 글자입니다.</p>
        <p name="Test 6" id="id6" class="class-p c3">Test6 글자입니다.</p>
  • ~=을 사용하여 등호 오른쪽 문자가 띄어쓰기로 포함된 모든 내용의 스타일값을 변경한다
  • 이 경우 Test라는 문자가 포함된 전체 값의 글자색상이 변하였다.
  1. 선택자[속성~=속성값]
    1. 띄어쓰기로 구분되어 있는 값 중 특정값을 단어로 포함하는 태그 전부 선택
  2. [속성|=속성값]
    1. 속성값으로 시작하가 ‘-’를 포함하는 태그 선택
  3. [속성^=속성값]
    1. 속성값이 특정밗으로 시작되는 태그 선택
  4. [속성$=속성값]
    1. 속성값이 특정값으로 끝나는 태그 선택
  5. [속성*= 속성값]
    1. 속성값이 포함된 태그 선택

자손 후손 선택자

div>h1 {color : red }
div li{color : blue}
<h1>자손/후손 선택자</h1>
        <div>
            <h1>자손입니다.</h1>
            <h2></h2>
            <ul>
                <li>후손1입니다.</li>
                <li>후손2입니다.</li>
            </ul>
        </div>
  • div의 자손 h1의 스타일을 변경한다 : div>h1
  • div의 후손은 li의 스타일을 변경한다 : div li (공백으로 후손이라고 인식)

동위 선택자

h5+p {color:red}
<h1>동위선택자</h1>
    <div>
        <h4>자손1</h4>
        <h5>자손2</h5>
        <p>자손3</p>
        <p>자손4</p>
        <p>자손5</p>
    </div>
  • h5와 형제관계인 태그중에 바로 다음에 있는 p를 선택하는 CSS태그

가장가까운 p태그인 자손3만이 선택되어 색이 변경되었다.

구조선택자

  • 일반구조선택자
    - 특정한 위치에 있는 태그 선택(위치로 구분)
    1. :first-child
    2. :last-child
    3. :nth-child(2n)
    4. :nth-last-child(수열)
#div-test1>p:first-child {color :red}
#div-test1>p:last-child{color:blue}
#div-test1>p:nth-child(2n){background-color: blanchedalmond;}
<h1>일반 구조 선택자</h1>
    <div>
        <div id="div-test1">
            <p>테스트1-1 입니다.</p>
            <p>테스트1-2 입니다.</p>
            <p>테스트1-3 입니다.</p>
            <p>테스트1-4 입니다.</p>
            <p>테스트1-5 입니다.</p>
        </div>
        <div id="div-test2">
            <p>테스트2-1 입니다.</p>
            <p>테스트2-2 입니다.</p>
            <p>테스트2-3 입니다.</p>
        </div>     
    </div>
    <hr>
    <div id="div-test3">
        <p>테스트1 입니다.</p>
        <p>테스트2 입니다.</p>
        <p>테스트3 입니다.</p>
        <p>테스트4 입니다.</p>
        <p>테스트5 입니다.</p>
        <p>테스트6 입니다.</p>
    </div>
  • div-tes1과 자손관계인 p태그중에 첫 태그
  • div-tes1과 자손관계인 p태그중에 마지막 태그
  • div-test1과 자손관계엔 p태그중에 ()괄호 번째 있는 요소 : 2n은 2의 배수라는 뜻

형태구조 선택자

  • 형태 구조 선택자
    - 태그 별로 구분하여 특정한 위치에 있는 태그 선택
    1. :first-of-type
    2. :last-of-type
    3. nth-of-type(수열)
    4. nth-last-of-type(2n)
#div-test4>p:first-of-type{color:red}
--div-test의 p의 첫번째 태그만 지정됨
#div-tset4>p:last-of-type{color:blueviolet}
--div-tset4의 p의 마지막 태그만 지정됨

</style>
    <h1>형태 구조 선택자</h1>
    <div id="div-test4">
        <p>테스트 1p 입니다.</p>
        <h4>테스트 h1 입니다.</h4>
        <p>테스트 2p 입니다.</p>
        <h4>테스트 h2 입니다.</h4>
        <p>테스트 3p 입니다.</p>
        <h4>테스트 h3 입니다.</h4>
        <p>테스트 4p 입니다.</p>
        <h4>테스트 h4 입니다.</h4>
    </div>

반응 선택자

  1. :active, 사용자 클릭한 태그 선택
  2. :hover, 사용자의 마우스가 올라가 있는 태그 선택

11. 상태 선택자

  1. :checked, 체크 상태의 input 태그를 선택
  2. :focus, 초점이 맞춰진 input 태그를 선택

12. 속성 선택자(selectbox의 option 태그)

  1. option:enabled
  2. option:disabled

13. 링크 선택자(a 태그)

  1. :link, 방문 전
  2. :visited, 방문 후

14. 부정선택자

  • 선택자에 대해 반대로 작용하는 선택자
  1. 태그:not(선택자) : 선택자를 제외한 나머지

출력결과

출력결과 : https://hana78786.github.io/Study_hana/2022_06_dev/frontworkspace/FRONT_HTML_CSS/WebContent/css/0.css%EC%84%A0%ED%83%9D%EC%9E%90.html

profile
hanahana
hello world
이전 포스트

35. 폼태그

다음 포스트

38. CSS를 이용하여 레이아웃 만들기

0개의 댓글