본문 바로가기

분류 전체보기174

맥)mac OS 주요 단축키 - 삭제 관련 Command + delete = 선택파일 삭제 선택 파일을 바로 휴지통으로 이동한다. 대화상자 없이 바로 삭제가 된다. Command +shift+ delete = 휴지통 비우기 휴지통 비우기 단축키 2021. 11. 22.
맥)mac OS 주요 단축키 - 종료관련 Command + Q = 앱,어플,finder창 종료 파인더 창을 닫아 버리거나, 어플을 완전히 종료(하단 아이콘 사라짐)를 위한 단축키 Command + W = 창 닫기 사파리, 크롬 등의 브라우저 창(or 탭) 닫는 단축키 Command + option + ESC = 앱 강제종료 앱을 강제 종료 하는 단축키. 앱이나 파인더가 사용하닥 멈추거나 할경우 사용하는 단축키 2021. 11. 22.
맥) 키보드 기호 및 단축 키 맥을 사용할때, 기본적으로 알아야할 단축키를 정리하려고 하는데 그에 앞서 키보드 기호를 알아두면 좋을 듯 하다! 애플 홈페이지- 맥 키보드 단축키 페이지 키보드 단축키를 사용하려면 하나 이상의 보조 키를 누른 상태에서 단축키의 마지막 키를 누릅니다. 예를 들어 command-C(복사)를 사용하려면 command 키를 누른 상태에서 C 키를 누른 다음 두 키를 놓습니다. command(또는 cmd) ⌘ shift ⇧ option(또는 alt) ⌥ control(또는 ctrl) ⌃ caps lock ⇪ fn 라고...상세히 설명해 주고 있지만, 윈도우랑 오며가며 사용하고 있어서 그런지 매번 헷갈린다... 실제로 자주 사용하는 단축키들이랑 자주 까먹는 단축키 몇개 골라서 업로드 할 예정. 2021. 11. 22.
[JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스 숫자가 자동으로 올라가거나 내려가게 하는 소스지정된 숫자에서 시작해서 지정된 숫자까지 카운팅이 필요한 경우 사용하면 좋을 소스 홈페이지 디자인할때 동적인 효과를 두드러지게 보여질 수 있게하는 요소중의 하나 연혁이나 팀원의 수 혹은 그외에 다양하게 사용 가능한 소스 HTML 마크업 Since 1700 CSS .title{ text-align:center; display:block; font-size: 30px; color: #222; margin-bottom:10px } .number { text-align:center; display:block; width:150px; height:150px; line-height:150px; margin: 0 auto; font-size: 40px; color: #3f.. 2021. 11. 17.
깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17.
[무료/상업이용가능]쿠키런폰트 상업적 이용이 가능한 무료 폰트로, 쿠키런 게임 회사에서 만든 쿠키런 폰트~~ 그래서,, 게임 산업군에선 임베딩 등을 금지한다고 한다.. 아기자기한 디자인이나, 어린이날 등, 귀여운 폰트가 필요한 디자인을 해야할때 적합한 폰트. 주요 폰트 특징 폰트두께 귀여운 폰트 활용 예제 라이센스 쿠키런 폰트는 모든 사용자에게 무료로 제공되며 자유롭게 사용할 수 있습니다. 단, 게임산업군에 한하여 소프트웨어 임베딩 및 번들, 재배포를 금지합니다. * 자세한 사항은 LICENSE 가이드를 참고 ( https://www.cookierunfont.com/#section7) 다운로드 페이지 https://www.cookierunfont.com/#section7 쿠키런 폰트 쿠키런 글꼴을 이제 웹에서도 즐기세요. www.co.. 2021. 10. 17.
[HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 버튼 클릭시 이미지 다운로드 html 신청서나, 양식, 혹은 이미지를 다운 받아야 할경우, 간편하게 쓸수 있는 html 소스 Html 이미지 원본 다운로드 다운로드 할 이미지가 파일이 위치한 경로를 적어야 다운로드가 됩니다! ex) 2021. 10. 13.
[CSS 활용]스크롤바 커스텀하기 - 익스IE 적용 가능한 CSS 스크롤바 익스와 크롬 모두 적용 가능한 스타일링 CSS확실한 크로스 브라우징을 위해서는 조금 더 손을 봐야겠지만... 그래도 좀 비슷하게나마 맞춰 쓸 수 있는 스크롤바 모양. HTML 마크업 스크롤바 익스플로러 IE 10 이하 적용 가능한 css, 디자인을 비슷하게 맞춘 커스텀 스크롤바. 공백 CSS .scrollbox{ width: 250px; height: 250px; overflow: auto; padding: 10px; font-size: 14px; color: #333; border:1px solid #ddd; } .scrollbox span{ display:block; height: 1200px; color:#999; font-size: 11px; } /* 크롬 스크롤바 CSS */ /*스크롤.. 2021. 10. 13.
CSS 디스플레이(display)속성- CSS 디스플레이 속성 기본값 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나. 대부분의 HTML 요소는 기본적으로 둘 중 하나를 display 속성 값을 가진다. 1. 블록(block) 2. 인라인(inline) 블록(block) { display : block }은 한 라인을 다 쓴다. , , , , , 대표적인 블록(block) 요소 인라인(inlne) { display : inline } 컨텐츠를 감싸는 크기만 갖는다. block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다. , , , 요소는 대표적인 인라인(inline) 요소 **크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로.. 2021. 10. 10.
이사만루체, 타이틀 제목글로 적합한 폰트(상업용도 가능) 상업적 용도로 사용이 가능한 타이틀로 쓰기 좋은~ 굵은 폰트의 이사만루체-! 공게임즈에서 만든 폰트 인데, 자주 사용하던 지마켓 폰트랑 비교했을때 LIGHT 폰트가 두꺼운 편이다. 폰트 두께 두꺼운 폰트 활용예제 라이센스 2020년 한글날을 맞이하여, 공게임즈와 폰트릭스가 손을 잡고 개발한 공게임즈 전용 폰트 '이사만루체'를 소개합니다. 공게임즈 로고와의 연결성과 활용성에 집중해서 개발하였습니다. 이사만루체는 홍보나 이벤트 등의 대외 활용 시 일관된 폰트의 사용을 통한 우리만의 아이덴티티를 구축하는데 가장 큰 목적이 있습니다. 제목에는 bold를, 본문에는 Light와 Medium사용을 권장합니다. 이사만루체의 지적 재산권 및 모든 권리는 (주)공게임즈에 있습니다. 상업적 용도를 포함하여 누구나 자유롭게.. 2021. 10. 8.
[CSS 활용]fade in/out animation배경 이미지가 서서히 나타나게 하기 이미지(배경화면) 서서히 나타나게 하기이미지가 첫 화면에서 자연스럽게 나타나게 되면 부드러운 느낌을 준다. 배경뿐만 아니라 다양한 요소 (폰트/이미지) 에서도 쓰일 수 있는 fadein / fadeout 애니메이션이다. CSS animation을 활용! HTML 마크업 CSS#main { width: 100%; margin:0 auto; animation: fadein 5s ease 3s; -webkit-animation: fadein 3s; /* Safari and Chrome */ } #main img{ width: 100%; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Saf.. 2021. 10. 7.
[CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인 라디오 버튼 태그 활용 - 버튼 디자인 CSS모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 라디오 버튼 보다는 버튼 형태를 많이 사용하는데 기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. HTML라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면 id속성과 label for속성을 같게 설정한다. tag label 속성 미혼 기혼 CSS 타입 선택자/인접 선택자 - input[type=radio]+label 선택자 종류 상세 .select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block.. 2021. 10. 7.
[CSS 활용]티스토리 book club 스킨 커스텀2 (카테고리보기-썸네일 크기 및 텍스트 길이 수정) 티스토리 book club 스킨 커스텀 두번째 카테고리 보기 페이지 1. 썸네일 크기 및 위치 수정 2. 보여지는 설명글 텍스트 길이 수정 기존 변경 후 거의 이미지가 주를 이루는 블로그 이기에 글자보다 이미지가 더 돋보이는게 중요하므로, 폰트가 많이 보이지 않아도 되는 방향으로 수정- 방법: html 에서 썸네일 사이즈 수정 -> CSS 추가 수정 현재 들어간 이미지 사이즈 확인 개발자 모드로 들어가서 썸네일 속성을 보면 사이즈가 230x300으로 들어간 것을 볼 수 있다. 이 사이즈만 티스토리에서 제공하는 옵션에 맞게 설정을 바꿔 줄 예정이다. 자료 출처 : 티스토리 이미지 썸네일 치환자 완벽정리 https://blogpack.tistory.com/167 티스토리 썸네일 사이즈 옵션 중 C300x20.. 2021. 10. 5.
[CSS 활용]티스토리 book club 스킨 커스텀 (글보기 부분- 상단 타이틀 배경 지우기) 티스토리 Book club 커스텀 하기 티스토리 이런저런 스킨을 쓰다가 북클럽 스킨이 가장 보기도, 쓰기도 편하단 생각이 들었다. 역시, 뭔가 좌측에 메뉴가 한눈에 보여야 안심이 되는건지. 여튼 스타일 모두 맘에 드는데 조금 걸리는 부분이 하나 있었는데.. 바로 글 보기를 눌렀을 때, 타이틀 뒤에 이미지가 들어가고 그 위에 글자가 있는 부분이었다.. 상단 타이틀 배경 자동 삽입되는 디자인 실제로 사용했을때는 화소가 낮은 이미지가 들어가 꺠져보이거나, 보여지는 위치가 엉뚱하거나. 사이즈, 크기, 위치를 고려하여 커스텀한 이미지를 넣으면 예쁘겠지만 그렇지 않은 경우가 대부분이기에 이부분을 안보이게 해서 사용하려고 한다. 수정 방향 완성 시안 잘 만들어진~ 북클럽 스킨을 사용해서 커스텀 하기! 수정 방법은 간.. 2021. 10. 4.
[HTML 태그 활용] MARQUEE 태그- 글자나 이미지를 흐르게 하는 태그 글자나 이미지를 흘러가게 하는 태그 Marquee tag 퍼블리싱 작업중에 글자/이미지를 화면에서 흐르게 하도록 하고 싶었는데, CSS로 하려고 보니 kryframe 애니메이션 효과를 주어야 했다. 문득 다른 방법은 없나 하고 검색하니, 마퀴 태그를 찾았다! (웹표준 HTML5에서는 더이상 지원하지 않는 기능이고, 브라우저마다 작동 여부를 확인해야 한다.) 간단하게 뒷배경이 흐르는 느낌만 주려고 했던거라 그냥 사용해 보기로 했다. 사용방법 왼쪽으로 흘러가는 글씨 여러가지 속성을 곁들어 주면 된다."따옴표가 있는것과 없는것 확인" width=400 height=300 direction="left[right|up|down]" 스크롤 방향 behavior=scroll[slide|alternate] 움직임 속성.. 2021. 8. 5.
[XD무료 템플릿] UI 모바일 UI UX 디자인 키트 XD UI 프로젝트 키트 모바일 전용 무료 XD 키트에 있는 모바일 전용 디자인을 확인 할 수 있는 템플릿! 아이콘 등 쓸만한 요소들이 다 수 있어서 자료 공유 원본은 어도비공식 사이트에서 다운로드 가능하다. *다만 XD를 사용하려면 어도비를 구매해야 합니다..ㅠㅠ 무료 XD Vault 키트 및 템플릿 다운로드 https://www.adobe.com/kr/products/xd/features/ui-kits.html Vault 키트 디자인 소스 이 템플릿에는 가이드 부터 해서 디테일하게 필요한 모든 요소들이 거의 다 들어있다. 스크린샷 파일을 다운로드 받으면 아래 이미지들의 원본을 XD로 볼 수 있다. 프로토 타입까지 구현되어 있어서 XD 디자인을 한다면 참고 하면 좋을 듯! 원본 다운로드 경로 https.. 2021. 8. 5.
XD 디자인 무료 키트 - 노트 프로그램 디자인 XD UI 프로젝트 키트 XD 툴을 사용하면서 무료 키트를 찾다가 발견한 디자인. 요즘 이런 다양한 UI 키트를 보다보면 그 안에 디자인 요소들이 잘 정리되어 있어서 디자인 공부하기에도 유용하다. 다만 XD를 깔려면 어도비를 구매해야 한다는 단점..ㅠ 그래도 나중에 쓸만한 요소들이 많은 무료 키트들을 틈틈이 보고 모아두면 디자인 작업 속도가 더욱 빨라질듯 하다! 무료 XD UI 키트 및 템플릿 다운로드 https://www.adobe.com/kr/products/xd/features/ui-kits.html 여기서 내가 다운 로드 받은 디자인은 NOTE APP 이었다. 파일을 다운로드 받으면 아래 이미지들의 원본을 XD로 볼 수 있다. 프로토 타입까지 구현되어 있어서 XD 디자인을 한다면 참고 하면 좋을 .. 2021. 8. 4.
[반응형] 모바일 화면 퍼블리싱 폰트 단위 rem 사용방법, rem계산 참고사이트 반응형 rem 단위 사용하기 REM 단위는 문서의 최상위 요소, HTML의 크기를 기준으로 한다. rem 적용 방법 html로 제작시 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 { font-size:16px;} 이다. html { font-size:16px; }로 설정하면 16px = 1rem 17px = 1.063rem 예를 들어 html{font-size: 16px} 일때 p의 폰트를 16px로 a의 폰트를 17px로 하고싶다면? p{font-size:1rem} a{font-size:1.063rem} 이렇게 할 경우, 17px = 1.063rem 이런식으로 소수점 단위가 나오기 때문에 좀더 편하게 제어하는 방법은 아래처럼 html의 폰트 사이즈를 .. 2021. 6. 15.
반응형 디자인 레이아웃 너비 기준 반응형 레이아웃 가로 사이즈 디바이스에 따라 구분하는 기준은 가로 너비 가로 너비 값에 따라 디바이스 인식하여 레이아웃 변경 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값으로 정하기도 한다. ( 디바이스 종류별 너비 값 기준은 제각각 이므로 가로 사이즈는 정의된 표준값이 있지는 않다. ) 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중단점 나눌 때 대표적으로 디바이스 별로 많이 사용되는 가로 해상도는 다음과 같습니다. 반응형 레이아웃 01 최소한의 반응형 레이아웃 가장 많이 사용하는 대중적이고 간결한 기준 768px 미만 : 모바일 기기 768px ~ 1024px : 타블렛 1024px 이상: 데스크탑 /* 데스크탑 */ @media scree.. 2021. 6. 13.
모바일 리셋 스타일- mobile css reset 글로벌 리셋 소스 reset.css PC버전 reset.css /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0} fieldset,img {border:0 none} dl,ul,ol,menu,li {list-style:none} blockquote, q {quotes: none} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} input,select,textarea,but.. 2021. 6. 11.
티스토리 소스코드 코드블럭 꾸미기 티스토리 소스 코드 블럭 꾸미기 - 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기 - highlightjs.org의 CDN을 활용 방법 1. 사이트 방문 https://highlightjs.org/download/ 2. cdnjs 복사 하기 ​ 3. 티스토리 설정에서 HTML 편집 4. Head 사이에 복사한 내용 붙여 넣고 적용 5. 적용 확인 6. 테마 변경 가능 https://highlightjs.org/static/demo/ 사이트에서 테마를 선택 하여 가져온 CDN에서 아래 경로에서 default를 변경해 주면 가능하다. 둘러 보다 보니 어두운 배경이 맘에 들어 agate 테마로 선택. 소스코드를 수정하고 적용하면 변경 완료!! 2021. 6. 9.
CSS Margin - 마진 CSS 마진 테두리 외부에 공간을 만드는 데 사용 여백-개별면 margin-top margin-right margin-bottom margin-left 위/오른쪽/아래/왼쪽을 하나로 합쳐서 적어줄 수도 있다. 여백 속성 auto - 브라우저가 여백을 계산 ex(div 가운데 정렬 - margin : 0 auto; ) 길이 - 여백을 px, pt, cm 등으로 지정 %로 여백을 지정 inherit-여백이 상위 요소에서 상속 (-) 음수 값 사용이 가능하다. ex ( margin : -10px 20px 20px 10px ; 위쪽으로 -10px 올라감 ) 2021. 1. 27.
CSS border-width 테두리 너비 CSS border-width 속성(테두리 너비) 네 테두리의 폭을 지정한다. 너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 미리 정의 된 값 (thin, medium, thick )으로 설정 p.one { border-style: solid; border-width: 5px; border-color: red } p.two { border-style: solid; border-width: medium; border-color: blue } p.three { border-style: dotted; border-width: 2px; border-color: orange; } p.four { border-style: dotted; border-width: thick; border-color:.. 2021. 1. 22.
CSS border 테두리 속성 CSS 테두리 속성 CSS border 속성을 사용하면 테두리의 스타일, 너비 및 색상을 지정할 수 있다. CSS 테두리 스타일 dotted -점선 테두리 dashed -파선 테두리 solid -단색 테두리 double -이중 테두리 groove-3D 그루브 테두리 / 테두리 색상 값 ridge-3D 능선 테두리 / 테두리 색상 값 inset-3D 삽입 테두리 / 테두리 색상 값 outset-3D 시작 테두리 / 테두리 색상 값 none -경계선 없음 hidden -숨겨진 테두리를 정의 HTML A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. A.. 2021. 1. 21.
CSS 컬러 (추천 컬러 사이트) CSS 색상 미리 정의 된 색상이름(blue, orange, red) 이나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정된다. CSS 색상 이름 미리 정의 된 색상 이름을 사용하여 색상을 지정할 수 있다. LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightYellow PaleVioletRed PapayaWhip Peru CSS / HTML은 140 개의 표준 색상 이름을 지원하고 있다. (출처 : w3school ) CSS 색상 값 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다. 컬러 이름 "LightSalmon": rgb.. 2021. 1. 19.
CSS선택자 - 1 CSS 선택자 스타일 줄 HTML 요소를 찾거나 선택하는 기능. CSS 선택자 종류 단순 선택자 (타입, ID, 클래스를 기준으로 요소 선택) 조합선택자(+,>...) 가상 클래스 선택자(:hover,:after... ) 가상 요소 선택자(::after, ::before..) 속성 선택자 ([title="this"], [attribute~="value"]..) 단순 선택자 종류 : 타입선택자 / ID 선택자 / 클래스 선택자 타입선택자 html 요소 이름을 기반으로 선택 p, span, b, h1, h2, .... html html 파일의 p 요소에 해당 스타이 적용된다 css p { text-align: left; color: red; } 클래스 선택자 HTML 요소 중에 같은 class 이름이 있는 .. 2021. 1. 18.
[CSS] CSS 적용 방법 CSS를 삽입하는 세 가지 방법 외부 CSS 내부 CSS 인라인 CSS 방법 : head에 link로 스타일 파일 경로 지정 특징 : mystyle.css 하나의 파일만 변경하여 전체 웹 사이트의 css 변경 가능 방법 : head 섹션의 사이에 css를 넣어준다. 방법 : 태그 안에 직접적으로 스타일을 준다. 특징 : 가장 직접적인 css 적용 방법으로 html에 스타일 시트가 있다 하더라도 인라인 css 우선적용 * 스타일 시트의 장점(하나만 바꿔도 모두 변경) 을 잃게 되므로 되도록 사용 안하는 것이 유지 관리에 용이 * 운영 관리나 유지 보수 입장에서 추천 하는 방식은 외부 css - 내부 css - 인라인 css CSS 적용 우선 순위 Cascatidng (캐스케이딩 - 계단식 적용) 하나의 태.. 2021. 1. 16.
[CSS] CSS 란? CSS 란? CSS 는 캐스케이딩 스타일 시트의 약자 (Cascading Style Sheets) CSS 는 HTML언어가 화면(화면, 미디어화면, 모바일 화면 등)에 표시되는 방법을 보여주는 언어이다. CSS 파일만 변경해도 같은 HTML의 웹사이트를 전혀 다른 모양으로 꾸밀 수 있다. CSS 는 옷과 액세서리, 화장 같은 역할이라고 할 수 있다. (HTML:마크업언어는 몸체 구조) CSS 구문 CSS 규칙 세트는 선택자와 선언으로 구성 선택자 타입선택자 (ex: h1, h2, span, div, b, 등) 클래스(.classname) , ID (#idname) 선언 각 선언은 속성 : 값 으로 구성된다. 여러 선언이 있으면 선언 하나 끝나고 세미콜론 ( ; ) 반드시 삽입 단순 선택자 종류 선택자의 .. 2021. 1. 10.
css 실전 예제 및 레이아웃 익혀볼 사이트 CSS 레이아웃을 배웁시다 이 사이트에서는 모든 웹 사이트의 레이아웃에 사용되는 CSS의 기초를 다룹니다. 이곳에서는 여러분이 선택자와 프로퍼티, 값이 무엇인지 알고 있다고 가정합니다. 그리고 레이아웃 작업이 여러 ko.learnlayout.com 처음 css를 배울때 많이 도움이 되어던 사이트 실전 예저들과 함께 복사하기/ 붙여넣기가 되어서 유용한 사이트 2021. 1. 9.
[html/css] text-transform (소문자-대문자 자동변환) CSS text-transform Property 텍스트의 대소 문자를 자동으로 변환해 주는 속성 none 기본값 capitalize 각 단어의 첫번째 문자를 대문자로 uppercase 모든 문자를 대문자로 lowercase 모든 문자를 소문자로 div { text-transform:capitalize } div { text-transform:uppercase} div { text-transform:lowercase} 기본값 없음 상속 예 버전 CSS1 자바스크립트 구문 object .style.textTransform = "uppercase" w3school 샘플 2021. 1. 6.
728x90
반응형

티스토리툴바