오피스랩

안녕하세요 오늘은 비주얼 스튜디오에서 주석 단축키로 쉽게 주석처리 하는 방법을 소개해드리겠습니다. 저는 빨간표시 된 부분을 주석처리할건데요 마우스로 일단 이부분을 드래그해주신후 Ctrl + K + C 를 누릅니다. 그럼 코드가 이렇게 주석처리가 된것을 확인할 수 있습니다. 다시 주석을 풀고자 하신다면 Ctrl + K + U 그럼 다시 이렇게 변환 된 코드를 확인 할 수 있습니다. 그외 제가 주로 쓰는 단축키 입니다. Ctrl + Shift + P : 모든 명령 표시 Ctrl + P : 파일로 이동 Ctrl + Shift + F : 파일에서 찾기 F5 : 디버깅 시작 Ctrl + ` : 터미널 설정/해제 Ctrl + K + C : 주석처리 Ctrl + K + U : 주석해제 오늘도 좋은 하루 되세요 감사합..

목차 1. 404코드란? 2. CSS 애니메이션 이론 3. 베지어 곡선이란? 4. CSS 애니메이션을 이용한 404 페이지 404 코드란? 서버와 통신할 수는 있지만 요청한 바를 찾을 수 없다는 것을 가리키는 HTTP 표준 응답 코드 CSS 애니메이션 이론 animation-delay : 로드 이후 언제 시작할지 animation-direction : (종료 후) 정방향 / 역방향 진행 animation-duration : 얼마에 걸쳐 진행될지 animation-iteration-count : 몇 번 반복될지 (infinite : 무한) animation-name : 중간 상태를 지정 animation-play-state : 멈춤/재생 상태 지정 animation-timing-function : 어떤 시..

스타일시트의 재설정을 하는 이유 기본 줄 높이, 여백, 글꼴, 사이즈 등과 같은 브라우저 불일치를 줄이는 역할을 합니다. 아래 제공된 CSS스타일은 매우 일반적인 CSS 소스입니다. 현재 요소에는 기본 색상이나 배경이 없습니다. 특정 재설정 기준과 일치하도록 조정, 편집, 확장 및 조정해야 합니다. 페이지, 링크 등에 대해 원하는 색상을 입력하세요! /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym..

Classname일 경우 . id 일경우 #으로 입력 id는 유일해야 하고 Class는 여러 태그에 중복해서 사용이 가능하다. 문단을 나누는 header, body 등은 별도의 추가 입력없이 바로 css 를 입력하면 된다.

안녕하세요 오늘은 프론트, 퍼블리싱 개발자들이 쉽게 데이터 정보를 파악 할 수 있는 프로그램을 추천해드릴게요! VisBug Open source browser design tools chrome.google.com 본 프로그램은 크롬에서만 실행이 가능합니다! 저희가 기존 데이터 정보를 알고싶을때 F12를 눌러서 하나하나 클릭해서 파악했다면 Vis Bug를 사용하면 상세 사이즈를 모두 손쉽게 볼 수 있다는 장점이 있습니다. Vis Bug를 크롬스토어에서 다운받으신 후 크롬창을 열면 주소창 옆에 퍼즐과 비슷한 아이콘이 뜰거에요 여기서 Vis Bug를 실행시키면 좌측에 메뉴가 나오는데 느낌표 메뉴를 눌러주시면 div 정보를 마우스만 갖다대도 쉽게 파악 할 수 있답니다. 프론트엔드나 웹 개발자 도구로 강력 추천..

목차 1. CSS flex 속성 2. CSS grid 3. CSS Transition/transform 4. 에어비엔비 숙소 css,html CSS Flex란? 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 flex-grow 할당 가능한 공간의 정도 형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간 형제 아이템들이 다른 flex-grow 값 = 다른 공간 flex-shrink 아이템의 크기가 container보다 클 때 사용 설정된 값에 따라 크기가 축소 flex-shrink: 0 = 줄어들지 않겠다. flex-basis 아이템의 초기 크기 ‘auto가 아닌 flex-basis’와 ‘width(direction: column이면 height)’..

언제든지 언제든 일주일 게스트 추가 당신의 강의를 패스트캠퍼스 하세요. 한옥 /* CSS 리셋 코드로 모든 요소의 기본 스타일을 재설정합니다. */ /* 브라우저 호환성을 위한 것이며, 디자인에 직접적인 영향을 미치지 않습니다. */ /* CSS Reset by Eric Meyer - http://meyerweb.com/eric/tools/css/reset/ */ /* HTML5 요소를 적절한 기본 속성으로 설정합니다. */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,..

오늘은 Node.js를 다운로드 받는 방법에 대해 설명드리겠습니다. Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 다운로드시 현재버전(최신기능)과 LTS (안전성 확정된 버전)두가지가 있습니다. 혹시모를 상태에 대비해 LTS를 다운로드 받습니다. 컴퓨터 버전에 맞게 다운을 받으면 대요 전 Windows버전으로 다운받도록 해보겠습니다. 32bit와 64bit중 어떤건지 모르시는 분들은 바탕화면 오른쪽 마우스 클릭 '디스플레이설정' 클릭 > 새창 > 좌측 정보 클릭 하시면 해당정보를 보실수 있습니다. 전부 Next를 눌러주고 설치를 완료 시킵니다. 설치가 잘됐는지 확인해 ..

상품 이미지가 앞에 차지해 border 끝부분이 깨지는 현상이 생길때 쓸 수 있는 overflow 코드 해당 문제되는 부분의 개발자도구를 열어보면 따로 overflow가 적용되어 있지않음을 확인. .product-card { width: 180px; height: 300px; margin-right: 12px; margin-bottom: 12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; overflow: hidden; } 해당 css 코드에서 over flow를 적용시켜줍니다. 새로고침을 시켜 확인한 결과 테두리가 잘 출력되고 있음을 확인.

미리보기 판매되는 상품 #product-list { display: flex; flex-wrap: wrap; margint-top: 12px; } .product-card { width: 180px height: 300px; background-color: gray; margin-right: 12px; margin-bottom: 12px; } 쇼핑몰 상품을 수직이 아닌 평행으로 나열하기 쇼핑몰상품 이미지 삽입, 상품명, 판매가 입력 판매 상품들 상품명 가격 판매자 닉네임 상품명 가격 판매자 닉네임 * { margin: 0; padding: 0; } #header { height: 64px; display: flex; justify-content: center; border-bottom: 1px solid..