본문 바로가기
[css] reset css cdn 설치(ft. 기본 css style 세팅) reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for npm and GitHub 사이트 이동 중간에 보이는 /npm/reset-css@5.0.1/reset.min.css 의 클릭 후 Copy HTML 선택하여 내용 copy css cdn 코드 삽입 vs code와 같은 코드 편집기로 이동하여 index.html 파일에서 복사한 코드를 link 태그로 추가하면 이제 브라우저에서 제공하는 기본적인 style이 이렇게 초기화 완료됩니다.
[css] block, inline의 뜻과 사용법(ft. display, inline-block) CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | table-cell block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다. 그래서 이번 기회에 확실하게 짚고 넘어가겠습니다. 이 두 가지의 요소에 따라 전체 레이아웃이 변합니다. block 요소 block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수..
[js] 글자 타이핑 효과 라이브러리 소개 타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면 보다 간편한 소스로 자연스러운 타이핑 효과를 나타낼 수 있습니다. 타이핑 효과 사이트 https://libraries.io/npm/typewriter-effect typewriter-effect on NPM [![CircleCI](https://circleci.com/gh/tameemsafi/typewriterjs.svg?style=svg)](https://circleci.com/gh/tameemsafi/typewriterjs) libraries.io 설치 방법 cdn NPM npm install ty..
[css] reset css 기본값 코드(ft. 기본 css 세팅) 사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” 2.0 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, address, big, cite, code, del, dfn, em, img, ins, kbd, q..
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형) 스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다. 게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우, css를 이용하여 일정 크기 이상에서는 '...' 으로 정리합니다. css 코드 한 줄로 글자 수 제한 표시 (single line) · display: block(block레벨)에서만 적용 · text-overflow:ellipsis text가 초과할 경우 생략 부호로 표시 · white-space:nowrap : 공백 문자가 있는 경우 줄 바꿈 하지 않고 한 줄로 나오도록 처리 width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 여러 줄로 글자수 제한 표시 (multi line) overflo..
[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) 홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다. 최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여 매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에 아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다. 그래서 오늘은, flaot 속성에 대하여 이야기하겠습니다. float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.) float의 성격 · block 의 성격을 무시합니다. · 형제 구조로 이루어져있습니다. · 해당 요소들의..
[css] background속성 한번에 사용하기 css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-color : 배경색 · background-image : 배경 이미지 · background-repeat : 배경 이미지 반복여부 · background-size : 배경 이미지 크기 조절 · background-position : 배경 이미지 위치 조절 한 번에 사용하는 background 속성: background: url('image 경로') no-repeat center center; background-size: contain 또는 cover; 위의 소스가 제..
[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) 숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다. setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고, setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다. setInterval() : - 코드를 일정 시간 간격으로 반복 실행 - 기본형: setInterval(functi..
[js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다. 현재 구글링 정보를 통하여 그때그때 적용할 순 있어도, 사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다. 그래서 반응형 웹에서 사용할 수 있는 자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다. 반응형 이미지 수직 수평 가운데 정렬 방법 반응형웹 적용을 위한 필수 요소 viewport 삽입 사이에 아래 메타태그를 추가하세요. html (css는 inline스타일로 적용)..
반응형