확장기능

비주얼 스튜디오 코드 확장기능

  • Beautify: 정렬
  • ftp-simple
  • Live Server
  • open in browser

브라켓 확장기능

  • Emmet: 단축키
  • Cutom Work : 상단에 탭 메뉴 기능
  • Beauty: 코드 정렬
  • Indect Guide : 코딩 라인 가이드

크롬 확장기능

  • full page Screen Capture: 캡쳐기능
  • Web Developer: html,css 검사
  • Google번역: 번역기

홈페이지 모음

  • https://materializecss.com/color.html : 색상
  • https://noonnu.cc/ : 눈누
  • https://unsplash.com/ : 이미지
  • http://troy.labs.dau"m.net/ : 핸드폰 해상도
  • https://jquery.com/ : 제임쿼리 홈페이지
  • https://oscarotero.com/jquery/ : 제이쿼리 종류?
  • https://kenwheeler.github.io/slick/ : 이미지슬라이드 js
  • https://github.com/kenwheeler/slick/ : 자바용어
  • https://codepen.io/ : 코드펜
  • https://codepen.io/webstoryboys : 선생님 코드펜
  • https://webgradients.com/ : 백그라운드색
  • https://coderap.tistory.com/499 : 면접질문
  • https://wsss.tistory.com/category/Animation/Loading :애니메이션
  • https://sass-lang.com/ : scss 홈페이지
  • https://www.dbcut.com/bbs/index.php : 디비컷
  • https://guideguide.me/ : 가이드가이드
  • http://tympanus.net/codrops// : 오버효과
  • https://material.io/design : 머터리얼 디자인
  • https://fontawesome.com/ : 아이콘이 들어간 폰트
  • https://www.figma.com/files/recent : 피그마 사이트
  • https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md : cscc 사이트
  • https://swiperjs.com/demos/ : 스와이프 js

2020.03

2020.03.11

프로그램

  • 브라켓 :코드 수정
  • 파일질라 : 파일 전송

브라켓 확장기능

  • Emmet: 단축키
  • Cutom Work : 상단에 탭 메뉴 기능
  • Beauty: 코드 정렬
  • Indect Guide : 코딩 라인 가이드

브라켓

  • 복사하기 : Ctrl + C
  • 붙여넣기 : Ctrl + V
  • 전체 복사하기 : Ctrl + A
  • 4칸 이동하기 : Tab
  • 4칸 반대로 이동하기 : Shift -Tad
  • 저장 :Ctrl + S
  • ul에서 li 여러개 생성 : ul > li * 갯수 +tab
  • li 여러개 생성 : li * 갯수 + tab
  • 브라켓 2개로 보는 방법 : 보기> 분활

포토샵

  • 변형:ctrl + T (변형 할때는 shift)
  • 웹용저장 : ctrl + shlft + alt + S
  • 저장 : ctrl + shlft + S
  • 새로운 파일 : ctrl + N
  • 이미지 불러오기 :Ctrl +O
  • https://materializecss.com/color.html : 색상 사이트
  • https://unsplash.com/ : 저작권 없는 사진 사이트
  • https://noonnu.cc/ : 폰트 사이트
  • 브라켓 이미지 넣는법 :img src="이미지 이름(위치)" style="width: 크기" alt="태그"

2020.03.12

  • http://www.s-core.co.kr/who-we-are/font/ 폰트사이트
  • https://noonnu.cc/ 폰트사이트
  • https://wiss.tistory.com/category/SITE/Color 색상 사이트

CODING

  • div(선택자){width(속성) :(콜론) 100%(값);(세미클론)}->중괄호
  • ;(세미콜론) : 속성이 끝남을 표시
  • px : 픽셀
  • width : 폭(가로)
  • height : 높이(세로)
  • background : 배경색
  • id : #으로 표현
  • wrap : 감싸다라는 의미로 전체여백을 뜻한다.
  • * : 전체를 선택하여 명령 ex)*{margin: 0; padding: 0;} ->모든태그에 여백을 없앰
  • margin : 바깥쪽여백
  • padding : 안쪽여백
  • margin: 0 auto : 가운데 정렬
  • text-align: center : 텍스트 가운데 정렬

단축키

  • Ctrl + D : 줄복사
  • Ctrl + Space Bar : 자동화 기능
  • w700 + tab = width : 700px
  • bgc# + tab = background-color: #f48fb1(컬러)
  • #fff : 흰색

기타

  • head : 전체적인 속성 부여
  • style : 속성부여(body 구성포함)
  • body : 블록 구조(틀만들기)
  • html lang="ko" : ko는 한글의 코리아 의미(en는 영어)
  • style의 id는 반드시 body의 id를 복사하여 붙여넣기
  • style에서 body를 쓸때에는 #을 붙이지 않음

2020.3.13

  • https://wtss.tistory.com/category/SITE/01%20WEBSTANDARD 레이아웃 사이트
  • https://entitycode.com/ 정리된 사이트링크
  • Entity Code란 같은것

2020.03.16

  • https://docs.emmet.io/cheat-sheet/ 키
  • div#이름>div*박스갯수 +tab 박스 생성시 맨위 이름 넣기 div 맨앞 생략가능
  • Shift+ Home: 선택된 글자 앞 선택
  • Shift+ End: 선택된 글자 뒤 선택
  • m0-a+tab :
  • font-size : 글자 크기
  • text-align : 글자 정렬
  • text-transform : 대문자 변경
  • color : 배경
  • ol : 앞에 숫자로 표기

2020.03.17

  • https://www.dbcut.com/bbs/index.php 디비컷
  • Full Page Screen Capture - 화면 캡쳐
  • background: rgba(r,g,b,a(0~1)); rgba 값으로 색 설정

2020.03.18

  • https://uxtools.co/survey-2019/ 무슨 웹이 많이 쓰이는가 나오는 페이지
  • table태그 표를 만드는 태그 tr, td 태그를 같이 사용합니다.
  • w100p = width:100%

2020.03.19

  • http://tcpschool.com/ 태그,용어 정리 사이트
  • https://ofcourse.kr/ 태그, 속성 등 정리 잘 되어있는 사이트
  • 주석 단축키 : Ctrl + /
  • "+(플러스)"는 친구를 의미한다.
    ex) #div+div*2 :
    <div id="div"> </div>
  • 묶어서 태그를 입력할때 ",(콤마)"로 연결해서 한꺼번에 효과를 줄 수 있다.
  • text-decoration:(장식) : 밑줄
    border : 테두리

2020.03.20

  • https://github.com/webstoryboy/webstandard2019 이미지
  • h1~h6 의 요소는 6단계의 구획 제목입니다.
  • h1 이 가장 높고 h6 이 가장 낮습니다.

2020.03.23

  • https://nuli.navercorp.com/ 네이버 웹표준
  • http://darum.daum.net/ 다음 웹 표준
  • https://www.wah.or.kr:444/ 웹 접근성 연구소
  • ul>li*14>a[#] [ # ] []= 자동 이름 (브라켓해당)
  • ul>li*7>a[href="#"] (다른 프로그램)
  • last-child 마지막 박스
  • https://fonts.google.com/ 구글 폰트사이트
  • https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw 선생님 유튜브
  • position: relative; 기준점
  • tstory 이미지 크기 650 *430 똑같게 작업
  • table-bordered (보더) : 전체 사각 테두리로 둘러싸고, 각 항목에 테두리를 긋고 표로 만든다.

2020.03.24

  • https://webzz.tistory.com/357 선택자
  • .colunn.col$*6>h3+p
    $→ 숫자 $$ → 01
  • 일러스트 선깨기 object Expend
  • 일러스트 색넣기 object 선깬후 Live paint
  • aria-hidden 불필요한거 숨김 접근성을 위한것
    .(우리나라 시각장애인들이 주로 사용하는 센스리더에서는 지원하지 않는다.)
  • nth-child(2) ie9 부터 적용

2020.03.25

  • https://coderap.tistory.com/499 면접 질문정리
  • https://tympanus.net/Development/HoverEffectIdeas/ hover효과
  • < src="img/notice01.jpg"> → alt →alt 장식용이면 =""안씀
  • strong 강조하는 태그

2020.03.26

  • 부트스트랩(Bootstrap) : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하며 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
  • https://getbootstrap.com/ 프레임 워크

2020.03.30

  • https://wiss.tistory.com/category/SITE/Mockup
  • https://www.mockupworld.co/page/5/?s=imac
  • https://www.google.com/get/noto/#sans-kore

2020.03.31

  • https://ricostacruz.com/til/css-media-query-breakpoints
  • 컨트롤 d 글 선택
  • 알트 클릭 지정선택
  • 알트 화살표위 아래 줄바꿈
  • 알트 쉬프트 화살표 위 아래
  • 컨트롤 / 주석
  • 알트 쉬프트 드래그 밑에 선택

2020.04

2020.04.01

  • https://gsnedders.html5.org/outliner/
  • https://github.com/webstoryboy/responsive2019
  • html lang="ko" 브라우저
  • meta charset="UTF-8" 컨텐츠

2020.04.02

  • https://fonts.google.com/?query=abel
  • https://codepen.io/
  • https://fonts.google.com/?query=abel
  • 컨트롤 / 전체주석표시

2020.04.06

  • https://fontawesome.com/ 아이콘이 들어간 폰트
  • https://css-tricks.com/the-shapes-of-css/ 도형만들기
  • Ctrl + H : 단어 선택 후 원하는 글자로 바꾸기

2020.04.07

  • aria-hidden : 속성을 사용하여 시각적으로 숨겨지지 않는 콘텐츠를 보조 기술에서 제외하기 위한 메커니즘을 제공한다. 접근성을 위해 넣어줌
  • ex) .nav > div:last-of-type {width:20%} nav의 div박스 마지막 자식에게만 width값을 20%로 준다.
  • last-of-type : 같은 유형의 맨 마지막 형제를 선택하여 설정한다.
  • last-child : 부모 요소 안에 있는 마지막 자식만 선택하여 설정한다.

2020.04.08

  • nth-child(3n) : 3의 배수를 지정해서 설정한다.
  • div {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} max-height: 40px /* 구 버전일 경우 필요 */ 두줄표현

2020.04.09

  • http://troy.labs.daum.net/ 핸드폰 해상도
  • srcset 속성은 각 기기의 해상도에 따른 이미지를 띄우는 속성이며, 2x로 인해 해상도가 2배가 되면 blog3_@2 이미지가 자동으로 보이게 된다. 이미지 주소와 해상도 사이에는 띄어쓰기를 해야 하며, 이미지 주소를 추가 할 경우에는 콤마(,)가 필요하다.

2020.04.10

  • <clearfix> : clear : both; float의 속성을 해제시킨다. .clearfix:after{content:""; display:black; clear:both;} clearfix class를 미리 생성해두고 최상단에 위치 후 필요한 부분에 class 추가

2020.04.13

  • https://kenwheeler.github.io/slick/ 이미지슬라이드 js
  • https://github.com/kenwheeler/slick/ 자바용어
  • display: grid; 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있다.

2020.04.14

  • perspective : 사전적의미가 “원근법”으로 3D속성이 적용된 요소의 멀고 가까운 상태를 지정할 수 있다. perspective 속성에 숫자값을 지정하게 되면 2D요소를 3D요소처럼 보여지게 원근법이 적용된 모양으로 랜더링된다.

2020.04.15

  • https://sachinchoolur.github.io/lightgallery.js/ 라이트 박스

2020.04.16

  • height: 100vh; vh = 백분율
  • height 100%는 인식못하고 100vh는 100등분을해서 인식할 수 있음

2020.04.17

2020.04.20

  • https://sass-lang.com/ scss 홈페이지

2020.04.21

  • https://960.gs/ 960그리드사이트
  • https://github.com/yamoo9/PSD2HTML-CSS/wiki/%EC%9B%B9-%EA%B7%B8%EB%A6%AC%EB%93%9C-%EC%8B%9C%EC%8A%A4%ED%85%9C 웹그리드시스템
  • https://guideguide.me/ 가이드가이드
  • https://material.io/design 머터리얼 디자인

2020.04.22

2020.04.23

2020.04.27

2020.04.28

  • https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md cscc 사이트
  • https://www.figma.com/files/recent 피그마 사이트

2020.04.29

  • 컨트롤+쉬프트+L 단어 전체선택
  • https://swiperjs.com/demos/ 스와이프 js

2020.05

2020.05.06

  • https://jquery.com/ 제임쿼리 홈페이지
  • https://oscarotero.com/jquery/ 제이쿼리 종류?

2020.05.07

  • .addClass() - 자체에 클래스가 있기때문에 "."(점)을 찍지 않는다. (.removeClass도 마찬가지)

2020.05.08

  • toggle() = hide()랑show()가합쳐진것 클릭하면 나오고 다시 클릭하면 없어지는 효과
  • slideToggle(); 슬라이드효과 T는 대문자로 써야함