2일 학습 enmmet +단축키 공부필요

초록귤·2021년 11월 1일
0

멋사1기

목록 보기
7/19

합격자의 깃허브 정리 참고해서 적용하자!

<배워야 할 것> (수업 프론트엔드 + 백엔드) 라고 생각하면 됨.
우주에 내가 어느 부분에 있는지 헷갈릴때 -> 로드맵 보기!

watson? (어려움)
bootstrap >> 빠르게 ui 만들 수 있음.
java, spring ( 한국에서 대세 )

DB : MySQL쓰는데 굉장히 많다. ( sql 못쓰는 백엔드 개발자 x)

목표

  1. 1일 1커밋
  2. repo 20여개, 10여개의 프로젝트
  3. 코테 js
  4. 2% 채우지 말고 98% 채우는데 집중!

서비스 개발할 때, 정보보안 빼먹을 수 없다.

설치없이 아이패드에서도 할 수 있다

쉘창
html 폴더에 들어가서 쉘창 열기
code . 엔터
이 폴더 기준으로 열린다.
= visual studio 클릭 폴더 열기와 같다.

<단축키> 커맨드 +n (new file)

커맨드 +s(save)

! tap누르면 html 기본형태 자동완성

html lang = "ko" 로 수정

User Snippets

사용자 코드조각 >> html >> 수정 가능 ( 사용자화 코드 )
"prefix": "htmlko"
코드 창에서 htmlko + 탭 하면 자동으로 완성됨

git web

setting > pages> url 주소 복사 ( ctrl+페이지 누르면 다른 창에서 켜짐 > read me에 붙여넣어주자. (보기 쉽게)
https://github.dev/skgml0/front_end_school_html
com -> dev 로 고치면 코딩 가능!

enmmet : 생산성 극대화시켜줌

에밋 : html,css 등을 작성할때, 시간을 단축시켜주는 확장기능
외워주는게 좋다.
command +b : 옆 메뉴사라짐

    <!-- command / 주석 명령어 + command del  지움 -->
    <!-- lorem *3 홈페이지 골격잡음. 문구 채우는게 중요 -간격은 봐야함. lorem l= -->
    <!-- lorem3과 곱하기 3은 다르다 -->
    <p>Lorem, ipsum dolor.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, qui consequuntur nam autem asperiores quasi sequi rem, expedita esse ab at placeat totam ea tempora excepturi consequatur eos, neque optio.
    Facilis, soluta ut. Repudiandae atque ratione, voluptas, laborum non at dolorum, nulla porro quod neque aliquid nemo deserunt ab! Ducimus minus quasi voluptatum est laudantium vitae et iure, quae repellendus!
    Perferendis vel doloremque magnam aspernatur repudiandae quas a laboriosam atque. Quas modi veritatis non cumque nam deserunt soluta necessitatibus molestiae obcaecati harum odio suscipit, reiciendis qui velit, quaerat et aliquam.</p>
    <img src="" alt="" sizes="" srcset="">
      h1
        h1+h1+p
        h1*3
        h1{hello world}*10
        h1#hojun
        h1.hoju
        (div>table>(tr>(td*2))*3)+(footer>p)
        div#one.c1.c2.c3
        ul>li.item$*5
        a{Click}
        lorem
        img:z
        <!-- lorem*5는 5개의 문장 -->
        lorem*5
        <!-- lorem5는 5개의 단어 -->
        lorem5
        [a='value1' b="value2" c=1]
        a[href='www.naver.com']
        <!--
            Ctrl + \ : 토글 보이기
            Ctrl + O : 파일 열기
            Ctrl + P : 프로젝트 검색
            Ctrl + F : 열려 있는 파일 내에서 검색
            Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
            Ctrl + , : Settings
            Ctrl + N : 새로운 파일
            Ctrl + S : 파일 저장
            Ctrl + Shift + S  :다른 이름으로 저장
            Shift + del : 라인 지우기
            Ctrl + 클릭 : 여러줄 입력 
        -->

수업을 시작하기 전 알아야 할 기초 상식 !
www.naver.com 이름 URL
223,130,200.107. 주소 IP
https:// ~.5000/ 문. PORT
https:// ~.80/ 문. PORT. https기본 포트 80

html, js 해석 엔진 o
-chrome :v8
...

서버치게되면 패킷 형태로..
1)라우터를 통해서, 이름과 주소과 mapping되어있는 도메인서버(DNS)로 가게 됨.
2)클라이언트- 공유기 - 라우터 - 각종 보안장비 및 네트워크 장비 - 서버 (네이버 페이지 요청) - DB ( 값을 갖고오게 됨 )


웹에서 해석할 수 있는 언어 4가지

web assembly, js, html, css 4개 해석가능

WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.
WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다.

개발자도구 꺼내는 법 4개 .
맥북에서 단축키 뭐지?

option +command + i

개발자환경에서 요청 메서드 종류 확인과 content-type 확인하기.
네트워크 > Headers > General 에서 Request Method
HTTP Request
HTTP Response


해킹

https://hack-cracker.tistory.com/41
http://suninatas.com/challenges
(request가 1000번 2000번 들어오면?
= request를 한 아이디에 횟수 제한을 준다( 서버 단 )

  • ip를 방화벽 정책에 넣어준다.

markup <-> markdown?
notion => markdown
Q. 마크다운은 뭘까?
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.

css3 <- css1 , css2
HTML5 - MDN문서 참고
일부 요소는 여는 태그(void elements)로만 구성 !
시멘틱한 HTML: 기계가 이해할 수 있는 언어로 HTML로 코딩 .
= 어떤 골격으로 되어있는지 파악 쉽게 만들어야한다.


header
nav
aside
footer
이런 구조로 제작하기


section , article, div
그룹화된 컨텐츠 제작에 사용 (같은 역할)

article : 독립적 콘텐츠
section: 비독립적
보통 최후 수단으로 div사용하라. -동적생성(자바스크립트 생성)은 예외


main :문서 주요 컨텐츠

Rest API (Representational State Transfer)

REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스

Representational State Transfer
h$ *number => 변수

css에서 리셋함 (어차피 h1~h6 문자굵기/크기 리셋)

이게 제목이다 !!!! 표시용

https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

https://developer.mozilla.org/ko/docs/Web/HTML

a커 태그? 페이지 전환
절대경로
1. click
2. click 새로운 탭에서 여는 것
상대경로
3. click # 이 페이지로 전환된다 (?)
4.
5. click
../ 상위폴더
./ 하위폴더
딕셔너리 attack 공격에 취약함 (보여지는게 좋은 것아님)

<b> 얘도 굵기 </b>
<strong> 중첩가능 </strong>
<hr>단락구분.</hr>
<i> <em>기울임. 
<mark> sappganeng <!--색깔은 css에서 변경가능-->
<abbr title="National Aeronautics-">NASA</abbr>
  <sub> 아래</sub>
    <sup>	^</sup>
<blockquote>
  <p>인용구</p>
  <cite>오징어게임 오밀남</cite> <!--출처사이트-->
 </blockquote>

컨트롤하기 위한 영역으로 id줄때 사용한다.
div와 마찬가지로 최후 수단으로 span사용한다
css>> 에서

<pre>def hello(): 
	  print('hello world')
      hello()</pre>
<!--pre 장점. 있는 그대로 나온다-. 줄바꿈도 다르게 나옴->
<code> ~</code>는 줄바꿈 안됨 

문서표현 양식
1. 순서있는 ol
ol>li*6
1. 2. 3. 4. 5. 6. ~ 순서있게 나옴 ol때문에 가능!
어떤 태그인지 .
2. 순서없는 ul

footer

<dl>
<dt>대표 </dt> 
<dd>nana </dd>
</dl>

dl : definition list
dt : 용어 제목
dd : 용어 내용
alt+ 화살표 일부만 드래그해도 전체 옮기기 가능
shift +화살표 여러개 가능
맥북은 ctrl+command +방향키

개발자환경> 스크린샷. ...>?

처음엔 div로 다 만들고
cheetsheet 보고 바꾸기.

srcset속성을 사용하면 여러 해상도에 대응이 가능하다.
<\img src="a.jpg" srcset="a.jpg, b.jpg" >

a이미지였다가 , 어떤 특정 조건 만족하면 다른 것 보여준다. ! <- 많이 사용함.

  <picture>부분. 

드래그 + commant + / : 드래그 주석처리

사용자가 iframe 업로드하면 해킹가능

profile
초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.

0개의 댓글