Chap1 CSS

113726 단어 CSShtmlCSS

CSS

  • CSS(선택자)
    • 구조화된 HTML을 만들기 위한 언어
    • HTML문서에 CSS를 적용하는 방법은 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 3가지 종류가 존재
      • 내부 스타일 시트 : 문서의 표현을 위한 명령들을 head 태그 안에 style 지정
      • 외부 스타일 시트 : 문서의 표현을 따로 CSS파일로 저장
      • 인라인 스타일 시트 : 태그 안에 직접 스타일을 하는 방식
    • Selector(선택자)

      • CSS로 UI를 디자인할 때 “어디에 어떻게 꾸며줄까?” 에서 “어디”에 해당하는 부분

  • HTML과 CSS
    • 내부, 외부, 인라인 선택자
      <!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>Document</title>

    <!-- 내부 스타일 -->
    <style>
        h1{
            font-size: 50px;
            font-style: italic;
        }
        div, span{
            font-size: 20px;
            font-style: italic;
        }
        p {
            font-size : 20px;
        }
    </style>

    <!-- 외부 스타일  -->
    <!-- 링크를 걸어서 css와 연동 -->
    <!-- <link rel="stylesheet" href="/Java_Web/Front_end/CSS/1_BasicCSS/Chap1_index.html"> 절대경로-->
    <link rel="stylesheet" href="main.css">
    <!-- 외부 파일인 main.css에서 지정한 스타일을 가져와서 적용됨 -->
</head>
<body>
    <h1>친구들 모여라 언제나 즐거운 뽀로뽀로뽀로뽀로 뽀로로~</h1>
    <div>Hello!</div>
    
    <!-- 인라인 스타일 (권장하지 않음) -->
    <span style="color: blue;">스폰지밥</span>

    <p>KODAK</p>
</body>
</html>
  • CSS
    • css파일을 생성하여 외부에서 스타일을 import 할 수 있음 
         @import "side.css";
   /* 2개 이상의 css소스를 가져와서 사용하고 싶을때 @import 사용하여 가져올 수 있음  */
   /* index.html에서 main을 불러왔고 main에서는 side를 @import를 통해서 불러옴 */
   h1, p{
       color: red;
       background : orange;
   }
   /* h1과 p에 대해서 스타일을 지정해줌 */
   /* 링크를 지정해야 연결이 됨 */

Selector

  • Total Selector
    • 자주 사용하지 않음
      <!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>Total selector</title>
    <!-- 전체 선택자(내부스타일) 
         *을 통해서 전체 태그에 대해 스타일을 지정할 수 있음
         즉, 전체 문서에 대해서 스타일을 한꺼번에 지정하기 위해 사용-->
    <style>
        *{
            font-size: 50px;
            font-weight: bold;
            color: blue;
        }

        div *{
            font-size: 30px;
            color : steelblue;
            font-style: italic;
        }
        /* div안에 있는 모든 것에 대한 스타일 */
        /* div 당근은 div안(자손)에 있는 것이 아니라서 변하지 않음 */
    </style>
</head>
<body>
    <h1>졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->

    <div>
        <ul>
            <li>사과</li>
            <li>오렌지</li>
            <li>딸기</li>
        </ul>
    </div>
    
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</body>
</html>

  • Tag Selector

    • 동일한 모든 태그에 다 적용되어서 많이 사용되지 않음

    • 태그이름{}

      <!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>TagSelector</title>
    <!-- 태그 선택자
         태그를 지정해서 스타일을 지정하는 것  -->
    <style>
        h1 {
            background-color: aqua;
            font-size: 50px;
        }

        li {
            color : green;
        }

    </style>
</head>
<body>
    <h1>졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div>
        <ul>
            <li>사과</li>
            <li>오렌지</li>
            <li>딸기</li>
        </ul>
    </div>
    
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
</body>
</html>

  • Class Selector

    • class는 1개 이상 중복으로 가능함으로 많이 사용

    • .클래스이름{}

      <!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>Class Selector</title>

    <style>
        .red-color{
            font-size: 30px;
            color : red;
        }
        .blue-color{
            color : blue;
        }
        .green-color{
            color:green;
            font-size : 25px
        }

    </style>
    <!-- 클래스를 지목하는 기호는 "." 으로 작성 -->
</head>
<body>
    <h1 class="blue-color">졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div class="green-color">
        <ul>
            <li>사과</li>
            <li>오렌지</li>
            <li class="red-color">딸기</li>
        </ul>
    </div>
    
    <div>당근</div>
    <p class="red-color">토마토</p>
    <span>오렌지</span>
    <!-- class는 어떤 태그에 들어가도 상관없고 여러개 사용해도 괜찮음 
         즉 특정 태그에 동일한 스타일을 지정하기 위해 사용 -->
    
</body>
</html>

  • Id Selector

    • id를 지목하여 스타일을 지정해주는 것

    • id는 고유하기 때문에 하나만 가능

    • #id이름{}

      <!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>Document</title>
    <style>
        #orange{
            font-size: 30px;
            color:orange;

        }
        #blue{
            font-size:20px;
            color : blue;
        }
    </style>
    <!-- id를 지목하는 방법은 # -->
</head>
<body>
    <h1>졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div>
        <ul id = "blue">
            <li>사과</li>
            <li id = "orange">오렌지</li>
            <li>딸기</li>
        </ul>
    </div>
    <!-- id는 고유하기 때문에 하나의 태그에서만 사용가능  -->
    
    <div>당근</div>
    <p>토마토</p>
    <span>오렌지</span>
    
</body>
</html>

  • Basic Combinator(일치 선택자)

    • 선택자가 2개 이상이며 모든 조건이 일치해야만 스타일을 적용할 수 있는 선택자

    • 태그이름.클래스이름 {}

      <!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>
        span.orange{
            font-size: 1.2em;
            color : orange;
        }
    </style>
    <!-- span과 orange 두개의 선택자가 있고 span.orange는 span의 class가 orange인 것에 대해서만 스타일 적용 -->
</head>
<body>
    <h1>졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div>
        <ul>
            <li>사과</li>
            <li class="orange">오렌지</li>
            <li>딸기</li>
        </ul>
    </div>
    
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
</body>
</html>

  • Child Combinator(자식 선택자)

    • 태그 내부에 있는 요소를 선택하여 디자인 적용하고 싶을 때 사용

    • 태그이름 > 자식태그의 클래스이름 | 태그이름 > 자식 태그이름

      <!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>Document</title>

    <style>

        ul >.orange{
            color: orange;
        }

        div > ul > li {
            font-weight: bold;
        }
        /* div 안에 있는 ul의 안에도 있는 li에 대해서 굵은 글씨체로 바꿔라 */
        div > ul > li > ol{
            color : yellowgreen;
        }
        /* 1,2,3번째 글에 대해서만 색을 바꾸는 것 */
        li>ol{
            color : yellowgreen;
        }
        /* 이것도 가능  */
        div > h1{
            font-size: 13px;   
        }
        /* 메롱메롱을 나타내는 h1의 크기만 줄여줌 */
    </style>
    <!-- ul태그 안에 있는 것 중 class가 .orange인것들만 디자인 적용
         ul >.orange는 ul태그 바로 밑에 있어야하고 더 안쪽에 있으면 안됨 
         즉, >가 있으면 바로 직속에 있는 것을 뜻함. -->

</head>
<body>
    <h1>졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div>
        <h1>메롱메롱</h1>
        <ul>
            <li>사과

                <ol>
                    <li>1번째</li>
                    <li>2번째</li>
                    <li>3번째</li>
                </ol>
            </li>
            

            <li class="orange">오렌지</li>

            <li>딸기
                <ol>
                    <li>1번째</li>
                    <li>2번째</li>
                    <li>3번째</li>
                </ol>
            </li>
            
        </ul>
    </div>
    
    <div>당근</div>
    <p>토마토</p>
    <span class="orange">오렌지</span>
</body>
</html>

    • 부모와 자식 태그에 대해서 경로를 세부적으로 적용하여 특정 값만 스타일을 적용

  • Descendant Combinator(후손 선택자)

    • 특정 태그 안에 있는 모든 후손에서 특정 조건을 만족하는 것들만 스타일을 적용할 수 있음

      <!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>
        div .red-color{
            color : red;
            font-size: 30px;
        }
        /* div 안에 있는 모든 자손 중 클래스 이름이 red-color인 값만 스타일을 바꿔라 */
        /* 클래스 이름이 같은것 중 특정 값만 딸기만 색이 바뀌는 것을 확인 */

        p.red-color{
            color : fuchsia;
            font-size : 20px;
        }
    </style>
</head>
<body>
    <h1 class="blue-color">졸리다 졸려~</h1>
    <!-- div>ul>li*3 -->
    <div class="green-color">
        <ul>
            <li>사과</li>
            <li>오렌지</li>
            <li class="red-color">딸기</li>
        </ul>
    </div>
    
    <div>당근</div>
    <p class="red-color">토마토</p>
    <span>오렌지</span>
</body>
</html>

  • Adjacent Sibling Combinator(인접 형제 선택자)
    • +를 통해서 인접 형제 선택을 할 수 있음 
      <!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>Document</title>

    <style>

        .grape + li {
            color : violet;
        }
        li + li {
            font-size: 24px;
        }
    </style>
</head>
<body>

    <ul>
        <li>사과</li>
        <li>수박</li>
        <li class="grape">포도</li>
        <li>참외</li>
        <li>딸기</li>
    </ul>

</body>
</html>

  • General Sibling Combinator(일반 형제 선택자)
    • Tag ~ Tag 
      <!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>Document</title>

    <style>
        .grape ~ li {
            color:aqua;
        }
        /* class이름이 grape인 것 이후의 모든 li에 대한 적용, 참외와 딸기가 모두 색깔이 바뀐 것을 확인 */
    </style>
</head>
<body>
    <ul>
        <li>사과</li>
        <li>수박</li>
        <li class="grape">포도</li>
        <li>참외</li>
        <li>딸기</li>
    </ul>

</body>
</html>

  • Attribute Selectors(속성 선택자)

    • 태그의 속성을 이용하여 특정 대상에 대해 스타일 지정 가능

      <!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>Document</title>
    
    <style>
        *{
            font-size: 39px;
        }
        input[disabled] {
            opacity: 0.2;
        }
        /* input tag에 disable가 있는 것은 투명도를 0.2로 지정 */

        input[type=password]{
            width: 100px;
            color:red;
        }
        /* 이렇게 input태그의 속성을 통해서 스타일 변경 가능 */
        button[class^="btn-"]{
            font-weight:bold;
            border-radius: 20px;
        }
        /* class^="btn-" : button태그에서 class이름이 "btn-"으로 시작한다면 ~ 스타일 변경 */
        button[class$="success"]{
            background: green;
        }
        /* class$="success" : button태그에서 class 이름이 "success"로 끝난다면 ~ 스타일 변경 */
    </style>
</head>
<body>
    <input type="text" value="Hello">
    <input type="password" value="1234">
    <input type="text" value="disable text" disabled>
    <!-- disable : input tag를 사용 불가 하도록 만든 것  -->

    <button class="btn-success">Success</button>
    <button class="btn-danger">Danger</button>
</body>
</html>

Pseudo Selector

  • CSS(가상선택자)
    • hover, active, focus
    • 마우스를 가져다 대거나 클릭했을 때 변화가 생기는 것
      <!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>Document</title>

    <style>
        a:hover{
            /* hover : 가상의 요소, 아직은 일어나지 않았지만 사용자에 의해서 일어남 */
            font-weight: bold;
            font-size: 30px;
        }
        /* 사용자의 마우스가 a태그인 이동에 갖다대면 a:hover에서 지정한 것들이 실행됨 */

        .box{
            width: 100px;
            height: 100px;
            background: red;
        }

        .box:hover{
            width: 200px;
            transition: 3s;
        }
        /* div 태그의 box 클래스에 마우스를 갖다대면 가로 길이가 200px로 늘어나는데 늘어나는 시간이 3초 걸린다는 의미 */

        .boc:active{
            width:500px;
            background : yellowgreen;
        }
        
        input{
            width: 200px;
            border : 1px solid gray;
            padding : 5px 10px;
            /* 상하좌우 여백 */
            outline : none;
            transition:0.6;
        }

        

        input:focus{
            border-color: red;
            width: 300px;
        }   
        /* focus : 마우스로 클릭하거나 할때 변화 */

    </style>
</head>
<body>

    <a href="#">이동</a>
    <!-- div.box : div 태그에 class가 box인것을 생성하는 명령어 -->
    <div class="box"></div><br>

    <input type="text">

</body>
</html>

  • First-Last_child
    • pseudo selector : 가짜 클래스 선택자
    • 가짜 선택자를 통해서 특정 클래스 안의 자식들의 스타일을 바꿔줌
      <!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>Document</title>
    <style>

        .fruits >li:nth-child(4){
            color : orange;
            /* fruit 클래스 안에 자식 태그인 li의 4번째의 디자인을 바꿔라 */
        }

        .fruits >li:nth-child(even){
            color : blue;
            /* fruit 클래스 안에 자식 태그인 li의 짝수번째의 디자인들을 바꿔라 */
        }
        /* 디자인은 마지막으로 지정된 것을 기준으로 바뀜 그러므로 4번째는 오렌지색이였다가 파란색으로 변경 */

        .fruits >li:nth-child(odd){
            color : red;
            /* fruit 클래스 안에 자식 태그인 li의 홀수번째의 디자인들을 바꿔라 */
        }

        .fruits >li:nth-child(3n+1){
            font-size: 50px;
            font-style: italic;
            /* css는 n키워드 사용 시 0부터 들어감 */
        }
        /* 태그가 같아야 nth-child(순서) 적용가능  */

        .food  p:nth-child(1){
            color:blue;
        }
        /* food 클래스의 첫번째 자식이 p인지 아닌지 찾기 때문에 p는 첫번째 자식이 아니기 때문에 바뀌지 않음  */
        /* food의 첫번째 자식이 p가 아니기 때문에 지목해서 스타일을 매길 수 없음 */

        .food p:nth-of-type(1){
            color : blue;
        }
        /* food 클래스의 첫번째 p의 스타일을 바꾸기 위해서는 nth-of-type(순서)을 사용 */
        /* 같은 종류의 요소 중 n번째 요소의 스타일을 바꾸고 싶을때 사용 */

        /* 문제 : 3-1에 빨간색을 칠하라 */
        
        .box-group div:nth-of-type(3) :nth-of-type(1){
            color : red;
            font-size: 50px;
        }

    </style>
</head>
<body>
    <ul class="fruits">
        <li>딸기</li>
        <li>사과</li>
        <li class="orange">오렌지</li>
        <li>망고</li>
        <li>수박</li>
        <li>포도</li>
        <li>참외</li>
        <li>배</li>
    </ul>

    
    <hr> 
    <!-- 구분선 작성 -->

    <div class="food">
        <div>짜장면</div>
        <p>볶음밥</p>
        <p>탕수육</p>
        <span>짬뽕</span>
    </div>

    <hr>

    <!-- 문제 -->
    <div class="box-group">
        <div>1</div>
        <div>2</div>
        <div>3
            <div>3-1</div>
            <div>3-2</div>
            <div>3-3</div>
        </div>
    </div>

</body>
</html>
[iOS] 탭맨(TabMan) 라이브러리
554 : 반복제어문3 - 자가진단7

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage