🐷전동준(Jeon DongJun)

Go with the flow

[web]CSS 기초 정리

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

강의를 들으며 배웠던 점들을 복습하며 내 나름대로 정리해봤다. 솔직히 내가 정리하는 것들은 정말 기초에 불과하며 너무나 다양한 속성들과 요소들은 사이트를 참조해서 보는게 맞는 것 같다 :)


CSS

  • Cascading Style Sheets
  • 문서의 스타일을 지정해주는 언어
  • 참고 :
    • CSS의 주석처리는 /* */
    • VSC에서 Ctrl+Spacebar 하면 자동완성 도와줌!
  • 참고 사이트 :

사용법

  • 인라인
    • 태그 안에서 사용
    • <tag style="속성: 값;" ></tag>
  • 내부
    • head 안에서 사용
    • <style></style>
  • 외부
    • 링크 태그 사용
    • <link href="*.css" rel="stylesheet" type="text/css">

1) 인라인

  • 블록/인라인 요소와 같은 태그 안에서 스타일 속성을 적용해주는 방법

  • <b style='color:red;'>1. 인라인 스타일</b>

2) 내부

  • HTML문서의 head부분 안에 <style> 태그를 넣어서 스타일 적용

  • <head>
    <style>
        p{
            color: yellow;
            background-color:black;
        }
    </style>
</head>

3) 외부

  • <link> 태그를 사용해 외부 css파일에 작성되있는 스타일을 적용시킨다.

  • <head>
    <link rel='stylesheet' href='resources/css/css01.css' type='text/css'>
</head>

  • href 주소의 css01파일의 내용은 이렇다.

    image

4) 예시 코드 결과

  • 위의 코드들이 적용된 HTML 문서를 보겠다.
  • 인라인에서는 1. 인라인 스타일 이라는 내용의 <b> 태그에 글씨를 빨강으로, 문서 내부적으로는 <p> 태그에 노랑 글씨와 검정 배경을, 외부의 css01.css 파일에서는 <b> 태그에 greenyellow, body 전체에는 palevioletred를 적용했다.

image

Selector

  • 선택자는 어떤 태그를 선택할 것인지 정하는 것이다.
  • css 파일에 작성해주면 편리하다.(외부 링크 설정하면 되니까, 관리도 용이)

1) type(타입) 선택자

  • /* 타입 */
pre{
    text-align: center;
}

  • 타입 선택자는 태그 이름을 사용해서 선택하며, 해당 태그를 사용하는 요소에 스타일을 적용한다.

  • 위 코드의 경우에는 <pre> 태그에 적용한 경우

  • text-align 속성은 요소 안의 데이터의 위치를 정렬할때 사용(left, center, right)

2) id 선택자

  • /* id */
#s-id01{
    color:hotpink;
}
#s-id02{
    color:darkred;
}

  • 아이디 선택자는 블록/인라인 요소들의 속성에 지정한 id값들을 지정해 스타일을 적용해준다.

  • 예를들어 위 코드를 보면 id='s-id01' 인 요소들을 선택하는 것

  • id가 s-id01인 요소들에 핫핑크 글씨 스타일이 적용될 것이다.

  • #아이디명 이렇게 적용 시킬 수 있다.

3) class 선택자

  • /* class */
.s-cls01{
    background-color: black;
    color: white;
}

  • class 선택자는 요소들에 클래스를 지정해서 지정된 클래스 값을 사용하여 선택해주는 것이다.

  • 예를들어 위 코드를 보면 class='s-cls01'인 요소들을 선택하는 것

  • class 값이 s-cls01인 요소들에 검은 배경과 하얀 글씨 스타일이 적용될 것이다.

  • .클래스명 이렇게 선택할 수 있다.

4) 전체 선택자

  • /* 전체 */
*{
    text-align: center;
  
}

  • asterisk(*)로 모든 요소에 적용해버리는 전체 선택자

  • 위 코드는 모든 요소에 가운데 정렬을 적용

5) 자식 선택자

  • /* 자식 */
#atc > p{
    color: yellowgreen;
}

  • > 형식으로 선택

  • 위 코드는 아이디 atc의 자식 <p> 태그를 선택해 글씨 색상에 yellowgreen을 적용하는 것

6) 인접 선택자

  • /* 인접 */
span + pre {
    background-color: cornflowerblue;
}

  • + 형식으로 선택

  • 위 코드는 <span> 태그에 인접한 <pre> 태그를 선택해 배경색을 cornflowerblue로 지정

7) 하위 선택자

  • /* 하위 */
#atc02 span{
    color: chocolate;
}

  • 사이공백 으로 선택

  • 위 코드는 아이디 atc02의 하위에 있는 <span> 태그의 글씨 색상을 chocolate를 적용

8) 속성 선택자

  • /* 속성 */
p[title]{
    background-color: gray;
}

  • <태그>[속성]으로 선택

  • 선택한 태그에 정의된 속성을 선택함

  • 위 코드는 <p> 태그의 title 속성을 선택해 배경색 gray를 적용

9) 가상 클래스 선택자

  • /* 가상 클래스 선택자 */
a:link{
    color: green;
    font-size: 20pt;
}
a:visited{
    color: gold;
}
a:hover{
    background-color: black;
    color:white;
}
a:active{
    background-color: yellow;
    color: tomato;
}
  
input:checked{
    width: 100px;
    height: 100px;
}

  • a : 앵커 태그 기준

    • :link: 방문하지 않은 링크
    • :visited : 방문한 링크
    • :hover : 마우스를 올렸을 때
    • :active : 마우스를 눌렀을 때

  • input : 인풋 태그 기준

    • :checked : 체크박스 속성 선택

위 코드 결과물

  • <body>
  
    <h1>선택자</h1>
  
    <article>
        <h3>타입 선택자</h3>
        <pre>태그 이름을 지정하여 선언</pre>
    </article>
  
    <article>
        <h3>id 선택자</h3>
        <ul>
            <li id='s-id01'>요소에 id를 지정하고</li>
            <li id='s-id02'>지정된 id값을 사용하여 선택</li>
            <li id='s-id03'>#으로 구분</li>
        </ul>
    </article>
  
    <article>
        <h3>class 선택자</h3>
        <ol>
            <li class='s-cls01'>요소에 클래스를 지정</li>
            <li class='s-cls01'>지정된 클래스 값을 사용하여 선택</li>
            <li class='s-cls02'>.(dot)으로 구분</li>
              
        </ol>
    </article>
  
    <article>
        <h3>전체 선택자</h3>
        <b>*</b>
    </article>
  
    <article id='atc'>
        <h3>자식 선택자</h3>
        <p>자식!</p>
        <div>
            <p>자손</p>
        </div>
    </article>
  
    <article>
        <h3>인접 선택자</h3>
        <b>지정한 요소</b>
        <span>다음에 나오는 요소를 선택</span>
        <pre>인접?</pre>
    </article>
  
    <article id='atc02'>
        <h3>하위 선택자</h3>
        <div>
            <p>
                <span>특정 요소 하위의</span>
            </p>
            <span>요소를 지정할 때 선택</span>
        </div>
        <span>하위?</span>
    </article>
  
    <article>
        <h3>속성 선택자</h3>
        <p title='a'>속성이 정의된</p>
        <p title='b'>태그만 선택</p>
        <p>속성 없음</p>
    </article>
  
    <article>
        <h3>가상 클래스 선택자</h3>
        <ul>
            <li>특정 이벤트가 발생한 태그 선택</li>
            <li><a href='https://www.naver.com'>네이버</a></li>
            <li><a href='http:/www.ubuntu.com'>우분투</a></li>
            <li><input type='checkbox'>체크하면 커짐!</li>
        </ul>
    </article>
</body>

  • image

  • 가상클래스 선택자

    • a

      • hover

        image

      • active

        image

    • input

      • checkbox

        • 체크 전

          image

        • 체크 후

          image

Font(글꼴)

  • 속성

    • font-weight : 글꼴의 굵기
    • font-style : 글꼴의 스타일 ex)기울임(italic)
    • font-variant : small-caps를 사용할 경우 소문자를 대문자로 만들어주나 바뀐 소문자는 기존 대문자보다 크기가 작음
    • font-size : 글꼴의 크기
    • line-height : 줄간격
    • font-family : 여러개의 글꼴을 모아놓은 집합의 글꼴 모양 지정(복수 지정 가능) ex)궁서체

  • 폰트 등록 방법

    1. 선택자 지정

    2. @font-face{} 작성

      @font-face {
            font-family: '글꼴집합';
            src: url('경로/글꼴파일.ttf');
        }

    3. font-family로 적용

Box

  • 항목의 크기를 조정하는 기능

  • 태그

    • <dl> : 항목의 레이아웃(영역)
    • <dt> : 항목의 제목
    • <dd> : 항목에 들어갈 내용

  • 속성

    • width : 항목의 너비(가로)
    • border : 항목의 테두리 선
    • margin : 항목 바깥 여백
    • padding : 항목 내 여백
    • letter-spacing : 글자 사이의 간격을 조절

  • 예시

    <!DOCTYPE html>
<html lang="en">
<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 type='text/css'>
        dl, dt, dd, p{
            margin: 0px;
            padding: 0px;
        }
        /* # 00(red) 00(green) 00(blue) [00은 16진수] */
        .box{
            width: 600px;
            border: 3px #123456 double;
        }
        dt{
            background: yellowgreen;
            text-align: center;
            font-size: 20px;
            letter-spacing: 15px;
            padding: 15px;
            border-bottom: #1f2 5px double;
        }
        dd{
            padding: 10px;
  
        }
        .line{
            border-bottom: #123456 1px dotted;
        }
  
    </style>
</head>
<body>
      
    <dl class='box'>
        <dt>잔나비의 명곡</dt>
        <dd class='line'>
            <h2>뜨거운 여름밤은 가고 남은 것은 볼품없지만</h2>
            <p>뜨~거운 여름밤은 가고 남은 건 볼품없지만 또 다시 찾아오는 누군갈 위해서 남겨 두었소</p>
        </dd>
        <dd>
            <h2>주저하는 연인들을 위해</h2>
            <p>그러다 밤이 찾아오면 우리 둘만의 비밀을 새겨요~</p>
        </dd>
    </dl>
  
  
</body>
</html>

    image

Float

  • 플롯은 속성에 명시한 위치에 내용(항목)을 띄우고 옆의 공백을 메워주는 기능

  • 속성

    • float = left, center, right 등등

  • 예시

    • <!DOCTYPE html>
<html lang="en">
<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>
        body{
            width: 300px;
    
        }
        img{
            width: 100px;
            height: 200px;
        }
        /* float은 해당 위치에 내용을 띄우고 공백을 메워줌 */
        h1{
            float: left;
            background: orange;
        }
        p{
            text-align: justify;
        }
        p span{
            border: 3px dotted red;
            float: right;
        }
    </style>
</head>
<body>
        
    <h1>드래곤 라자</h1>
    
    <p>"우리는 별이오."
        "별?"
        "무수히 많고 그래서 어쩌면 보잘것없어 보일 수도 있지. 바라보지 않는 이상 우리는 서로를 잊을 수도 있소. 영원의 숲에서처럼 우리들은 서로를, 자신을 돌보지 않는 한 언제라도 그 빛을 잊어버리고 존재를 상실할 수도 있는 별들이지."
        숲은 거대한 암흑으로 변했고 그 위의 밤하늘은 온통 빛무리들 뿐이었다. 칼의 말은 이어졌다.
        "그러나 우리는 서로를 바라볼 줄 아오. 밤하늘은 어둡고, 주위는 차가운 암흑 뿐이지만, 별은 바라보는 자에겐 반드시 빛을 주지요. 우리는 어쩌면 서로를 바라보는 눈동자 속에 존재하는 별빛 같은 존재들이지. 하지만 우리의 빛은 약하지 않소. 서로를 바라볼 때 우리는 우리의 모든 빛을 뿜어내지."
        "나 같은 싸구려 도둑도요?"
        네리아의 목소리는 슬프지 않았다. 그리고 칼의 대답도 평온했다.
        "이제는 아시겠지? 네리아 양. 당신들 주위에 우리가 있고, 우리는 당신을 바라본다오. 그리고 당신은 우리들에게 당신의 빛을 뿜어내고 있소. 우리는 서로에게 잊혀질 수 없는 존재들이오. 최소한 우리가 서로를 바라보는 이상은."
        어둠 속에서 네리아의 눈이 별처럼 아름답게 반짝였다. 나는 혹시 반짝인 것은 그녀의 눈물이 아닐까 따위의 생각은 관두기로 했다. 그래서 고개를 돌려 밤하늘을 바라보았다.
        <span>
            <img src='https://w.namu.la/s/c182412ae18194dc4945588a576d1991b12e6ffd025b4742f7d4482b0e8ccdcbce3f96e251ab3a45b56c00816bf3dfd07e3558b6f859bbdc08d80136bba43018e39f12a8a6189c455fa9e861ef3b53b580a258d7a06ff39d5e44b80fbf12a86f49db4f40de0e7d72ffcad05031595c8b' alt='드래곤라자 표지' />
        </span>
        내가 바라보자, 별들은 나에게 빛을 주었다.
        - 본문 중-
    </p>
    
    
    
</body>
</html>

    • 해당 코드를 보면 style 서식 부분에서, 주황색 <h1> 태그에 float속성을 left로 지정해줬고, <p> 문단 하위의 <span> 태그에 float속성을 right로 지정해줬다. 따라서 <h1> 태그의 주황색 배경의 내용과 <span> 태그의 그림이 장문의 글들 사이에 공백을 메워주는 것을 확인할 수 있다.

    • image

Clear

  • 동일 방향의 float 속성이 흐르는 것을 막아주는 기능

  • Lorem Ipsum의 글을 가져와 항목들의 내용으로 사용했다.

  • #box01 -> box01라는 아이디를 선택해 배경색을 #ccc, float:right으로 지정

  • #box03 -> box03라는 아이디를 선택해 배경색을 gray, clear: right으로 지정

  • 따라서, box03 항목이 box01 항목의 내용들이 공백을 메우지 못하게 clear하고 있다.

  • <!DOCTYPE html>
<html lang="en">
<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 type='text/css'>
        *{
            margin: 0px;
            padding: 0px;
  
        }
        #wrapper{
            width: 600px;
            border: 1px dotted red;
  
        }
        #box01{
            float: right;
            width: 200px;
            padding: 15px;
            background: #ccc;
  
        }
        #box02{
            float: left;
            width: 200px;
            padding: 15px;
            background-color: cadetblue;
        }
        #box03{
            clear: right; /* 해당 방향의 float 속성이 흐르지 못하게 clear*/
            background-color: gray;
            padding: 10px;
        }
    </style>
</head>
<body>
  
    <!--lorem ipsum-->
    <h1>Lorem ipsum</h1>
  
    <div id='wrapper'>
        <div id='box01'>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div id='box02'>
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
        </div>
        <div id='box03'>
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
        </div>
    </div>
      
</body>
</html>
  • image

Display

  • 블록요소 p태그가 인라인 요소처럼 컨텐츠를 가로로 차지하게 만들어줌

  • <body>
      
    <div id='header'>
        <h1>제목</h1>
        <div id='menu'>
            <p><a href='#'>메뉴1</a></p>
            <p><a href='#'>메뉴2</a></p>
            <p><a href='#'>메뉴3</a></p>
            <p><a href='#'>메뉴4</a></p>
        </div>
        <div id='login'><a href='#'>login</a></div>
    </div>
  
</body>

  • 이렇게 <div>로 생성해준 영역에서 각 <p> 블록요소는 ‘menu’라는 id를 갖고 있는데, 이렇게 설정할 경우에 홈페이지에서는 이런식으로 블록요소로 표현한다(세로).

  • image

  • 이럴때 display속성을 사용하면 블록요소 <p>도 인라인 요소처럼 사용할 수 있도록 만들어 준다.

  • <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>
        #menu p{
            display: inline; /* 블록요소 p태그가 인라인 요소처럼 컨텐츠를 가로로 차지하게 만들어줌 */
        }
        #login{
            display: inline;
        }
    </style>
</head>
  • image

Overflow

  • 항목 내용의 크기를 지정해준 후 overflow 속성을 사용하면 콘텐츠에 흘러 넘치는 부분을 제어해준다.

  • 속성

    • overflow: hidden : 콘텐츠에 흘러 내리는 부분을 숨겨줌

      image

    • overflow: scroll : 스크롤 창을 만들어줌

      image

    • overflow: auto : 자동으로 창을 맞춰 줌

Position

  • 위치를 지정하는 속성

  • 속성

    • relative : 원래 자신의 위치에서 얼마나 움직이는지
    • absolute : 부모의 위치 기준으로, 상대적으로 얼마나 움직이는지
    • fixed : 브라우저 기준으로, 얼마나 움직이는지

  • 예시:

  • <!DOCTYPE html>
<html lang="en">
<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>
        *{
            margin: 0px;
            padding: 0px;
        }
    
        #box{
            position: relative;
            width: 500px;
            margin: 10px;
            padding: 10px;
            border: 1px dotted red;
              
        }
        p{
            width: 150px;
            height: 150px;
            color: #fff;
            font-weight: bold;
  
        }
        .myred{
            background: red;
            position: relative;
        }
        .myblue{
            background: blue;
            position: absolute;
            left: 100px;
            top: 30px;
            z-index: 2;
        }
        .mygreen{
            background: green;
            position: relative;
            left: 30px;
            top: -30px;
        }
        .myred:hover {
            z-index: 100;
        }
        .myblue:hover {
            z-index: 100;
        }
        .mygreen:hover {
            z-index: 100;
        }
        #fixed{
            width: 100px;
            height: 300px;
            background: silver;
            position: fixed;
            right: 50px;
            top: 100px;
            border: 2px dotted red;
        }
    </style>
</head>
<body>
  
    <div id='box'>
        <p class='myred'>빨간 박스</p>
        <p class='mygreen'>초록 박스</p>
        <p class='myblue'>파란 박스</p>
    </div>
    <div id='fixed'>
        Fixed!!!!
    </div>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
  
      
</body>
</html>

  • 항목의 순서는 빨간박스, 초록박스, 파란 박스의 순서다.

  • 빨간박스(myred)는 원래 자신의 위치. position: relative;로 padding 적용 때문에 항목의 점선 테두리에서 살짝 떨어진 곳에 위치해 있다.

  • 초록박스(mygreen)는 자신의 항목위치에서 오른쪽 위로 이동해서 빨간박스와 겹친다.

  • 파란박스(myblue)는 position: absolute;로 부모인 #box로 부터 지정한 거리만큼 떨어져있다.

  • id='fixed' 항목은 일정 위치에 position: fixed;로 고정해줬다. 마우스 스크롤을 내리거나 올려도 항상 그 위치에 고정되어 따라다닌다.

  • 속성들 중 z-index는 3차원으로 따졌을 때 화면 앞뒤로의 크기로 생각하면 될것 같다.

  • 적용된 :hover들은 z-index: 100; 속성을 갖고 있기 때문에 박스들에 마우스를 가져다대면 그 박스가 가장 앞으로 나오게 된다.

  • image

Border

  • border 속성은 요소의 테두리를 설정한다.

  • 그 중 border-radius를 속성을 사용해 네모난 블록요소들의 테두리를 원으로 만들 수 있다.

  • <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>
        *{
            margin: 0px;
            padding: 0px;
  
        }
        ul{
            margin:100px;
        }
        li{
            list-style: none;
            width: 100px;
            height: 100px;
            text-align: center;
            float: left;
  
            border-radius: 50px 50px 50px 50px; /* 상좌, 상우, 하우, 하좌로 시계방항 */
            -webkit-border-radius:50px 50px 50px 50px;
            -moz-border-radius: 50px 50px 50px 50px;
            -ms-border-radius: 50px 50px 50px 50px;
            -o-border-radius: 50px 50px 50px 50px;
            /*
                webkit : 구글, 사파리
                moz : 파이어폭스
                ms : 익스플로러
                o : 오페라
            */
            color: yellow; 
            font-size: 50px;
        }
        #ball01{background: red;}
        #ball02{background: green;}
        #ball03{background: blue;}
    </style>
</head>
<body>
      
    <ul>
        <li id='ball01'>C<span></span></li>
        <li id='ball02'>S<span></span></li>
        <li id='ball03'>S<span></span></li>
    </ul>
  
  
</body>
  • image

Transform

  • transform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과 등 애니메이션을 부여해 조금 더 시각적인 효과를 부여할 수 있다.
  • 속성
    • translate(px, px) : 가로 세로 이동
    • rotate(deg) : 회전
    • scale(x, y) : 크기 조정
    • skew(deg, deg) : 변형
    • transition: width, background, linear, transform

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑