본문 바로가기

웹퍼블리셔 💻14

img 태그는 젠코딩으로! 자동완성기능/a태그 a(img)+img+a(img) img 를 쓰고 tap 키를 누르면 자동완성이된다 이때 src="" 절대 타이핑 금지 (오타날 확률 높다) ctrl + 스페이스바를 누르면 폴더를 선택할수 있는 자동완성이 뜬다 a(img)+img+a(img) a 태그 + img 젠태그 방식 이렇게 자동완성이 활성화가 됬을때 tab 키를 누르면 코드 자동생성 2022. 12. 28.
기본코드 한번에 입력하기 ! + tab키 기본 셋팅코드는 프로그램마다 적용이 조금씩 다르다 ! 입력수 탭키 누르기 비주얼 스튜디오 코드 자동완성 브라켓 자동완성 2022. 12. 26.
zen 젠코딩 방식 한번에 코드입력 ul>li*3 ul 태크안에 li 태그 입력시 ul>li*3 젠코딩 방법을 쓰면 한번에 처리가능 p 하고 tap 키를 누르면 자동완성이된다! link 태그도 더 쉽게 젠코딩으로 가능! css 젠코딩 mt50 입력시 margin-top 바로생성 숫자 뒤에는 단위를 입력하지않아도 px 로 자동인식 .article { margin-top: 50px; mt50 } 2022. 12. 26.
웹퍼블리셔란? 웹디자이너가 디자인한 시안을 웹 문서화 언어인 HTML과 웹 페이지를 시각화하는 CSS를 사용 원칙에 맞추어 제작 웹표준(국제표준화단체인 W3C가 지정한 표준안에 따라 목적과 방법에 맞게 웹페이지를 만드는 것) 웹접근성(장애를 가진 사람뿐만 아니라 장애를 가지지 않은 사람 모두가 정보와 기능에 동등하게 접근할 수 있도록 웹사이트를 제작하는 것) 크로스브라우징(Cross Browsing:어떤 웹브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음), 시멘틱마크업(브라우저가 잘 이해할 수 있는 코드를 사용해 의미를 잘 전달하도록 웹문서를 작성하는 것) Javascript, jQuery등을 사용하여 동적인 사이트를 구현, 작업결과물을 웹프로그래머, 웹기획자 등에게 전달 운영.. 2022. 11. 23.
백엔드 개발언어 상식 https://www.lpoint.com/app/mypage/LHMA200100.do 확장자 .do 확장자는 자바로 만들었다는 백엔드 확장자라는 뜻! 백엔드 개발언어 - 자바 : 관공서(정부프레임웍), 대기업에서 주로 사용 - php : 무료 (워드프레스, 제로보드, 그누보드), 중소규모 프로젝트 - asp: ms사에서 개발 (거의안씀) 망함 요즘 - node.js 자바스크립트 기반 백엔드개발. 일렉트론으로 응용개발 가능 주로 솔루션 개발 스타트업에서 많이 사용, 챗봇개발, 채팅프로그램 - 파이썬 : 인공지능, 빅데이터 2022. 11. 3.
네이밍 컨벤션 분류별 Prefix 부가설명분류prefix부가설명 타이틀 tit 일반적인 타이틀 영역 section 제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양) wrap 일반 영역의 묶음 (선택적 사용, 중첩사용 지양) inner 부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우 내비게이션 gnb 서비스 전체 내비게이션 lnb 지역 내비게이션(gnb 영역) snb 사이드 내비게이션(좌측메뉴) 탭 tab 테이블 tbl 목록 list 일반 목록(ul, ol, 리스트 형식의 dl) 폼 tf textfield (input 타입 text / textarea) inp input 타입 radio, checkbox, file 등 opt selectbox lab label fld .. 2022. 10. 27.
비주얼스튜디오 코드 셋팅하기 [환경설정] File>Preferences>Settings(F1 > settings검색) Tab Size: 2 - 탭키 누르면 두칸 들여쓰기, 에디터마다 기본 탭사이즈가 다르므로 두칸으로 통일시키기 위해 Word Wrap: on - 텍스트가 화면보다 길경우 아래로 내려줌 Bracket Pair Colorization: 허용 - js에서 중괄호 컬러링 [extension] live server새로고침없이 저장후 바로확인 beautify: html, css formatter, beautify selection 단축키지정(alt + b), join lines 단축키지정(alt + j) prettier 코드 formatter - default formatter > prettier로 변경 - settings > .. 2022. 10. 13.
퍼블리싱_기본공식 필수숙지! - width는 밖에서 높이는 안에서 (li는 밖에서 width , 높이는 a 에서) - 부모를 이동, 안에서 좌우간격 (ul 부모를 잡고 li 는 안에서 좌우간격 및 내용채우기) - 메인섹션 main_사용, 안에선 사용하지않음 - 메인섹션은 100%로 두고 .inner에서 가로잡고 margin:0 auto; (inner는 가운데 크기잡고 정렬하기 위해서) - 특별한 경우가 아니면 높이지정 금지(알아서 내용만큼 잘늘어나므로) (헤더 제외 높이 잡기 금지) - 안쪽에 높이 있을경우 밖에선 빼줌 - 토글은 이동은 - 이동은 : 다른페이지로 이동, 한페이지에서 위아래이동, 포커스 이동 모두 - 좌우 레이아웃은 float, sns아이콘 좌우는 인라인블럭(내용이 버튼밖에 없을경우) - 페이지네이션등 가변요소일 경.. 2022. 10. 12.
[퍼블리싱 코딩 컨벤션] - 형태 의미 순서 상태 (네이버 컨벤션기초) [퍼블리싱 코딩 컨벤션] - 폴더,파일은 스네이크 문법 (언더바 _ 사용) ex. /product_images sns_login.js, main_products.html - id, 클래스는 스네이크 ex. #header, #header_wrap - html기본구조 id를 쓰는이유 : 스킵네비게이션 접근성 때문 (tap키로 id 영역으로 enter 사용시 바로 넘어간다.) [공통클래스 코딩 컨벤션] 클래스 명명방식 형태 의미 순서 상태, _(언더바)로 구분, 숫자는 두자리 언더바없이 연결 형태가 중요한 경우 버튼(btn_), 테이블(tbl_), 탭메뉴(tab_), 게시판(board_) 순서가 중요한 경우 위치는 뒤에 .header_top, .header_mid, .header_bottom, .service.. 2022. 10. 12.
비주얼스튜디오 코드 / 세로줄 한번에 선택 수정하기 한번에 여러개를 수정하고 싶을때 단축키 1. alt + 더블클릭 더블클릭으로 띄어쓰기 전까지 텍스트가 전체 잡힘 여러개 선택가능 2. alt + shift + 드래그 시작점에 커서를 두고 alt + shift 를 누른상태에서 드래그를 해주면 새로로 원하는 지점까지 선택이 가능하다. (단 세로로 코드가 나열되어 있을경우에만 사용가능) 3. ctal + f 단어검색 후 수정 참조링크 https://hyojinny.tistory.com/35?category=1094359 비주얼스튜디오 태그 한번에 수정하기 변경할 지점 잡고 ctal + f Replace 에 넣고 엔터 (빈칸은 놔두기) hyojinny.tistory.com 2022. 9. 24.
비주얼 스튜디오 코드 한번에 여러줄 잡기 단축키 ctrl+alt 여러줄한번에 잡고 수정하기 2022. 9. 17.
비주얼스튜디오 태그 한번에 수정하기 변경할 지점 잡고 ctal + f Replace 에 넣고 엔터 (빈칸은 놔두기) 2022. 9. 16.

티스토리툴바