오피스랩

스타일시트의 재설정을 하는 이유 기본 줄 높이, 여백, 글꼴, 사이즈 등과 같은 브라우저 불일치를 줄이는 역할을 합니다. 아래 제공된 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를 적용시켜줍니다. 새로고침을 시켜 확인한 결과 테두리가 잘 출력되고 있음을 확인.

안녕하세요~ 오늘은 PDF 파일에 링크거는 방법에 대해 알려드릴게요 어도비 아크로뱃이라는 프로그램이 있어야해요! Adobe 계열사로 보통 포토샵이나 일러스트를 구독하시는 분들이라면 사용가능하실거에요 :) 어도비 아크로뱃을 연다음 링크걸어줄 PDF파일을 열어줍니다. 상단에 메뉴가 뜨는데 상단 맨~~ 우측에 생긴 파일을 수정하는듯한 그림의 메뉴를 클릭해주세요. 그럼 이렇게 PDF편집 칸이 추가가 될거에요! 여기서 링크를 클릭해주세요. 링크추가 외에 링크를 제거하는 메뉴도 있네요? 저희는 링크를 추가해볼거에요. 그럼 네모난 툴을 그릴수있게 십자가 모양으로 마우스커서가 바뀌게 될거에요 그럼 링크걸어줄 곳에 마우스를 끌어주세요. 그러면 링크만들기 창이 자동으로 뜰거에요! 링크유형은 보이지않는사각형or보이는 사각형..

미리보기 판매되는 상품 #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..

네이버를 참조한 기본 쇼핑몰 레이아웃입니다. 판매 상품들 먼저 inex.html파일로 틀을 짜줍니다. 그다음 index.css파일로 스타일을 지정해주세요. #header { height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray; } head는 화면을 풀로 채울거기때문에 높이는 임의로 64px 지정하시고 display는 flex로 justify-content는 center로 그리고 하단에 선을 1px gray로 주도록합니다. body { margin: 0; padding: 0; } body를 지정하지않으면 border 양쪽여백이 생기게 되므로 상단에 위와같이 작업해주세요. #header { height: 64p..