EverGiver

기타 CSS 속성 본문

Front-End (웹)/CSS

기타 CSS 속성

친절한개발초보자 2021. 8. 9. 21:51
728x90
  1.  기타 정보 #1
    - 선택자 ~ 선택자
      : 앞에 있는 선택자 바로 뒤에 오는 모든 선택자를 골라주는 선택자
    - 선택자 + 선택자
      : 앞에 있는 선택자 바로 뒤에 오는 선택자를 골라주는 것
    - first-child
      : 대상 선택자 중에 가장 먼저 오는 선택자를 골라주는 것
    - last-child
      : 대상 선택자 중에 가장 마지막 선택자를 골라주는 것
     
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>기타정보#1</title>
    <style>
    
        h1~h2{color:red;}
        /*선택자 ~ 선택자 = 앞에 있는 선택자 바로 뒤에 오는 모든 선택자를 골라주는 선택자*/
        
        h1+h2{color:orange;}
        
        /*선택자 + 선택자 = 앞에 있는 선택자 바로 뒤에오는 선택자를 골라주는 것*/
        
        ul li:first-child{color:green;font-size:30px;}
        /*first-child << 대상 선택자 중에 가장 먼저오는 선택자를 골라주는 것*/
        
        ul li:last-child{color:red;font-size:35px;}
        
        /*last-child << 대상 선택자 중에 가장 마지막 선택자를 골라주는 것*/
        
    </style>
</head>
<body>
    
    <h1>안녕하세요</h1>
    
    <h2>h2태그입니다</h2>
    <h3>h3태그입니다</h3>
    <h2>h2태그입니다</h2>
    <h3>h3태그입니다.</h3>
    <h2>h2태그입니다</h2>

    <h3>h3태그입니다</h3>
    
    <ul>
        <li>첫번째 li</li>
        <li>두번째 li</li>
        <li>세번째 li</li>
    </ul>
</body>
</html>
  2.  기타 정보 #2
     - background-color:red
      : 색상명을 단어로 적어서 표현
     - background-color:#987654 ★
      : hex코드를 넣어주는 방식 #과 함께 사용 필수
     - background-color:rgb(57,143,192)
      : rgb코드값을 이용한 방식
     - background-color:rgba(121,192,57,0.3)
      : rgb코드값 + opacity
      → opacity 값이 불투명도를 뜻하며 0.1 = 10% / 1 = 100% 만큼의 불투명도를 가진다.
     - background-color:hsl(3,65%,67%)
      : hsl = hue 색상 / saturation 채도 / lightness 명도
     - background-color:hsla(3,65%,67%,0.5)
      : hsl + opacity
      → opacity 값이 불투명도를 뜻하며 0.1 = 10% / 1 = 100% 만큼의 불투명도를 가진다.
     
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>기타정보 #2</title>
    <style>
        *{margin:0;padding:0;}
        div{width:300px;height:300px;
            margin-top:20px}
        
        #a1{background-color:red;} /*1번 색상명을 단어로 적어서 표현*/
        
        #a2{background-color:#987654;} /*★2번 hex코드를 넣어주는 방식 #과 함께 사용필수*/
        
        #a3{background-color:rgb(57,143,192)} /*3번 rgb코드값을 이용한 방식*/
        
        #a4{background-color:rgba(121,192,57,0.3)} /*4번 rgb코드값 + opacity*/ 
        /*맨 끝에 값이 불투명도를 뜻하며 0.1 = 10% / 1 = 100% 만큼의 불투면도를 가진다*/
        
        #a5{background-color:hsl(3,65%,67%)} 5번 /*hsl = hue 색상 saturation 채도 lightness 명도*/
        
        #a6{background-color:hsla(3,65%,67%,0.5)} 6번 /*hsl + opacity*/
    </style>
</head>
<body>
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
    <div id="a4"></div>
    <div id="a5"></div>
    <div id="a6"></div>
</body>
</html>
  3. 기타 정보 #3
    - text-transform:capitalize
      : 영어 한정으로 단어의 첫 번째 알파벳을 대문자로 바꿔주는 css속성
    - text-transform:uppercase
      : 영어 한정 모든 알파벳을 전부 대문자로 바꿔준다.
    - text-transform:lowercase
      : 영어 한정 모든 알파벳을 전부 소문자로 바꿔준다.
    - #a{color:red}
      : 글자와 관련된 css속성은 원래 당사자가 아니라 당사자를 감싸고 있는 태그한테 줘도 그 하위에 있는 태그한테 영향을 끼친다.
     
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>기타정보 #4</title>
    <style>
        h1{text-transform:capitalize}
        /*영어한정으로 단어의 첫번째 알파벳을 대문자로 바꿔주는 css속성*/
        h2{text-transform:uppercase}
        /*영어한정 모든 알파벳을 전부 대문자로 바꿔준다*/
        h3{text-transform:lowercase}
        /*영어한정 모든 알파벳을 전부 소문자로 바꿔준다*/
        
        #a{color:red;}
        /*글자와 관련된 css속성은 원래 당사자가 아니라 당사자를 감싸고 있는 태그한테줘도 그 하위에 있는 태그한테 영향을 끼친다*/
        
        a{text-decoration:none;color:inherit;}
        /*color:inherit = 대상에 글자색을 정해두지 않고 대상을 감싸고 있는 부모태그에 글자색을 알아서 상속을 받아서 적용시키겠다라는 상속형 색갈 태그 / 기본적으로 글자를 검은색으로 만들어준다.*/
        
    </style>
</head>
<body>
    <h1>hello good moring</h1>
    <h2>hello good moring</h2>
    <h3>Hello good moring</h3>
    
    <div id="a">
        <a href="#">hello good moring</a>
    </div>
</body>
</html>
  4. 기타 정보 #4
    - a{text-decoration:none;color:inherit}
      : color:black → color:inherit
    - img{width:100%}
      : 하나만 작성해주면 이제는 img태그는 별도로 가로길이를 수정할 필요 없이 img태그를 감싸주는 태그에 맞춰서 항상 크기가 유동적으로 할 수 있다.
    - #a{width:80%;height:300px;background-color:#123456;margin:0 auto}
      ▷ px = 고정값 절대로 이 값은 바뀌지 않는다.
      ▷ % = 유동 값 대상 태그의 가로에 % 값을 넣어주면 웹사이트의 가로길이에 맞춰서 값이 그때그때 유동적으로 바뀐다.
          (태그들끼리도 영향을 끼친다)
    - % 단위일 때 여백 계산법
      ▷ 총길이 - 여백 개수 * 임의의 여백 사이즈 / 내용물
          (100%  -     3       *    1~3%(보통 1%)    / 내용물)
     
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>기타정보#5</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style:none;}
        a{text-decoration:none;color:inherit;}
        img{width:100%;} -> /*하나만 작성해주면 이제는 img태그는 별도로 가로길이를 수정할 필요 없이 img태그를 감싸주는 태그에 맞춰서 항상 크기가 유동적으로 할 수 있다*/
        .clearfix:after{content:"";display:block;clear:both;}
        #a{width:80%;height:300px;
            background-color:#123456;
            margin:0 auto;}
        /*px = 고정값 절대로 이 값은 바뀌지 않는다*/
        
        /*% = 유동값 대상태그의 가로에 %값을 넣어주면 웹사이트의 가로길이에 맞춰서 값이 그때그때 유동적으로 바뀐다 (태그들 끼리도 영향을끼친다)*/
        
        #b{width:500px;border:2px solid red;}
        
        #c{width:700px;border:2px solid blue;}
        
        #d{width:50px;border:2px solid black;}
        
        img{width:100%}
        
        ul{width:70%;margin:0 auto;height:300px;
            background-color:#123456;}
        li{width:24.25%;margin-left:1%;
            height:300px;background-color:#987654;
            float:left;}
        li:nth-child(1){margin-left:0px;}
        
        /*%단위일때 여백계산법
        
        총길이 - 여백갯수 * 임의의 여백사이즈 / 내용물
        100%         3 *  1~3%(1%)*/
        
    </style>
</head>
<body>
    <!--<div id="a"></div>
    
    <div id="b">
        <img src="1.gif" alt="">
    </div>
    
    <div id="c">
        <img src="2.gif" alt="">
    </div>
    
    <div id="d">
        <img src="3.gif" alt="">
    </div>-->
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
728x90
저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

슬라이드 쇼  (0) 2021.08.25
cursor 속성  (0) 2021.08.19
여백 계산법  (0) 2021.07.28
float 속성  (0) 2021.07.28
background 속성  (0) 2021.07.26
'Front-End (웹)/CSS' Related Articles more
Comments