Dandy Now!
  • [ 언어·프레임워크/HTML·CSS ]
    [HTML][CSS][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 HTML+CSS 입문
    2021년 11월 29일 00시 32분 02초에 업로드 된 글입니다.
    작성자: DandyNow
    728x90
    반응형

    학습동기

    front-end개발 stack의 가장 기본이 되는 HTML, CSS를 학습하고자 하였다.

    학습내용

    1. 강의영상

    https://youtu.be/cb7VlXqFla4

     

    2. 학습 중 작성한 코드

    <!-- index.html -->

<!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>

    <!-- CSS -->
    <!-- <style>
        .color-primary {
            color:rgb(0, 255, 34);
        }
        
        .font-50 {
            font-size: 50px;
        }
    </style> -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <!-- <h1>My First Heading</h1>
    <p class="color-primary font-50">I am red</p>
    <p style="color:blue">I am blue</p>
    <p class="color-primary" style="font-size:50px;">I am big</p> -->

    <!-- 태그 선택자 적용 -->
    <p class="class1">I am red</p>
    <p>I am blue</p>
    <p id="p1">I am big</p>

    <!-- <input type="text" />
    <input type="number" style="height:40px;" /> -->
    <!-- <select style="height:40px;font-size:20px;color:blue;"> -->
    <!-- <select class="select-style1">
        <option>Seoul</option>
        <option>Jeju</option>
    </select> -->

    <table class="tb">
        <!-- <thead class="tb-head"> -->
        <thead>
            <tr>
                <td>이름</td>
                <td>지역</td>
                <td>전화번호</td>
            </tr>
        </thead>
        <!-- <tbody class="tb-body"> -->
        <tbody>
            <tr>
                <td>홍길동</td>
                <td>서울</td>
                <td>010-111-1111</td>
            </tr>
        </tbody>
    </table>

    <a href="https://www.naver.com" target="_blank">네이버</a>

    <!-- 이벤트 -->
    <!-- <button type="button" onclick="javascript:alert('click button!!');">Click</button>
    
    <img width="400px"
        src="html.png" /> -->
</body>
</html>
    /* style.css */

.color-primary {
    color:blue;
}

.font-50 {
    font-size: 50px;
}

.select-style1 {
    height:40px;font-size:20px;color:red;
}

.tb-head>tr>td {
    border: 1px solid #000;
    font-size: 14px;
    font-weight: bold;
    color: red;
}

.tb-body>tr>td {
    border: 1px solid #000;
}

/* p {
    background: yellowgreen;
    color: darkgreen;
} */

.class1 {
    background: red;
    color: darkgreen
}

#p1 {
    background: yellowgreen;
    color: darkgreen;
}

/* 하위선택자 */
.tb td {
    border: 1px solid #000;
}

     

    3. CSS 선택자

    [그림1] Rule Set(출처: https://www.nextree.co.kr/p8468/)

     

    > 전체 선택자(Universal Selector)

    * {margin: 0; text-decoration: none;}

     

    > 태그 선택자(Type Selector)

    p {background: yellowgreen; color: darkgreen;}

     

    > 클래스 선택자(Class Selector)

    .class1 {background: yellowgreen; color: darkgreen;}

     

    > ID 선택자(ID Selector)

    #id1 {background: yellowgreen; color: darkgreen;}

     

    > 하위 선택자(Descendant Combinator)

    div ul {border: 1px dotted black;}

     

    > 자식 선택자(Child Selector)

    div>ul {border: 1px dotted black;}

     

    4. w3schools.com

    https://www.w3schools.com/

     

    HTML Tutorial

    W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

    www.w3schools.com

    HTML과 CSS의 추가적인 학습이 가능한 사이트이다.

    학습소감

    html, css의 주요 기능을 빠르게 학습할 수 있었다.

    하지만 그야말로 입문이고,

    갈 길은 멀다!

    728x90
    반응형
    저작자표시 비영리 변경금지 (새창열림)

    '언어·프레임워크 > HTML·CSS' 카테고리의 다른 글

    [CSS] 동그라미 안에 텍스트 넣기, 대각선 그리기  (0) 2022.10.30
    CSV to JSON, CSV를 JSON으로 변환!  (0) 2022.09.28
    [CSS] 이미지 맵(Image Map)에 각각 다른 툴팁(Tooltip) 적용  (1) 2022.09.25
    [HTML] map 태그를 이용한 이미지 링크 연결(feat. JavaScript)  (0) 2022.09.24
    base64 Encode로 이미지 파일을 문자열로 만들어 HTML에 포함 시키기  (0) 2022.08.18
      댓글

    티스토리툴바