[HTML/CSS] 2일차 HTML

25022 단어 프론트엔드스쿨htmlcsshtmlcss

미션

  • 1일 1커밋(양도 양이고 질도 질이다)
    • 양이 많아지면 많아질 수록 질도 올라간다고 생각

보안 지식 필수

  • 해킹당하는 사이트 부지기수

VSCode 원하는 폴더에서 바로 열기

  • 원하는 폴더에서 gitbash를 켜고 “code .”을 입력하면 바로 오픈!

TextEditor

  • 설명 영상

https://youtu.be/NIrY9zShBtk

  • !+ : html 전체적인 틀 자동완성
  • crtl+p : 명령팔레트
    • >snippets
      • html.json
        {
            // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
            // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
            // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
            // same ids are connected.
            // Example:
            // "Print to console": {
            //     "prefix": "log",
            //     "body": [
            //         "console.log('$1');",
            //         "$2"
            //     ],
            //     "description": "Log output to console"
            // }
        
            "Print to console": {
                "prefix": "htmlko",
                "body": [
                    "<!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>$1</title>",
                    "</head>",
                    "<body>",
                    "    $2",
                    "</body>",
                    "</html>"
                ],
                "description": "한국어 페이지용 html 템플릿"
            }
        }
  • <title>hello</tilte> 에서 <tab>누르면 바로 <body></body>로 이동
        <!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>hello</title> <!--여기서 <tab>하면-->
        </head>
        <body>
            hello <!--여기로!-->
        </body>
        </html>

1. HTML

  • hyper text mark up language (태그</>로 감싸져 있음)
    • mark down은? #, ##, ### 과 같이 태그</>로 감싸져 있지 않음

CSS 리셋

  • 요소

업무 효율을 높이는 emmet 문법

<!-- h$*6 -->
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    <!-- h${hello}*6 -->
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
    <leehojun>hello</leehojun>
    <!-- h1+h2 -->
    <h1></h1>
    <h2></h2>
    <!-- h1>p -->
    <h1>
        <p></p>
    </h1>
    <!-- h1+h2>p -->
    <h1></h1>
    <h2>
        <p></p>
    </h2>
    <!-- h1#one -->
    <h1 id="one"></h1>
    <!-- h1.two -->
    <h1 class="two"></h1>
    <!-- .three -->
    <div class="three"></div>
    <!-- #five -->
    <div id="five"></div>
    <!-- lorem -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis minus vel, illum suscipit quisquam quo iste perspiciatis odit vitae, eius est provident eligendi cumque commodi possimus. Animi doloremque a numquam.
    <!-- lorem*2 -->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. In id at ipsa maiores rerum possimus minus voluptates distinctio quo veniam enim nisi molestiae, nesciunt quia a sint blanditiis facilis quisquam?
    Fugit vero assumenda distinctio laboriosam aliquam commodi, voluptatem voluptatum modi odio error, voluptates quas temporibus aspernatur a! Nobis ipsum maiores veniam exercitationem necessitatibus aliquid, eum quisquam odio, consectetur perspiciatis dolorum.
    <!-- lorem5 -->
    Lorem ipsum dolor sit amet.
    <!-- img -->
    <img src="" alt="">
    <!-- img:z -->
    <img src="" alt="" sizes="" srcset="">
    <!-- p[a="value1" b="value2" c=1] -->
    <p a="value1" b="value2" c="1"></p>
    <!-- a -->
    <a href=""></a>
    <!-- a[href="https://www.naver.com"] -->
    <a href="https://www.naver.com"></a>
    <!-- h1.one.two#three -->
    <h1 class="one two" id="three"></h1>
    <!-- table>(tr>td*4)#3 -->
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="3"></tr>
    </table>
  • ctrl+alt+방향키 : 여러줄 동시 수정

2. 수업을 시작하기 전 알아야 할 기초상식

  • 도메인,URL,URI - 이름: 제주코딩베이스캠프

  • IP - 주소: 동광로 137 대동빌딩...

  • Port - URL: 숫자

URL구매하고 깃헙에 연결하기

프론트엔드는 iframe 공격 주의!

  • 공격 종류
    • NAT
    • DDX - Anti DDoS - 임계치로 방어
    • IPS(IDS) - 행위
    • FW - IP, PORT

Sever

  • APP Server
    - 동적인 페이지를 전달(사람마다 다르게 나타나는)
    - Django Server, Express Server...
  • WEB Server
    - Ngnix, Apach
  • DB Server

모놀리식 아키텍쳐와 마이크로서비스

  • 모놀리식 아키텍쳐
  • 마이크로서비스

4. Document element & metadata

5. Sections


  • <div></div>로 작성하지 말 것!
    • <div>는 너무 광범위하고 접근성을 무시하기 때문
    • 코드는 시멘틱하게!

6. Grouping Content

  • dl, dt, dd
    • 메타데이터를 표시
    • 대상을 정의
  • font - 눈누 사이트 추천
dbcTemplate - SQL Injection 위험
[시계열] Chapter 12

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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