전체 글 (37) 썸네일형 리스트형 [JS]멀티선택 | 다중선택 Multi Select Box 멀티선택에 대해 작업을 하다가 꽤나 괜찮은 소스를 발견하여 간단히 정리해보려한다. Jquery Multi Select Box 플러그인이라 하는데 아래 링크로 접속해서 세팅을 먼저해야한다. https://hemantnegi.github.io/jquery.sumoselect/ Jquery.sumoselect by Hemant Negi jquery.sumoselect jquery.sumoselect.js - A cross device Single/Multi Select jQuery Select plugin. LIVE DEMO HERE Sumoselect full : jquery.sumoselect.js Minified : jquery.sumoselect.min.js A jQuery plugin that pro.. [HTML/CSS]웹 페이지 노출을 높여주는 검색 엔진 최적화 SEO(Search Engine Optinization) 검색 엔진 최적화는 웹페이지의 노출도를 높여 트래픽의 양과 질을 높이는 최적화 작업이다. - 보안 프로토콜(HTTPS) - Robots.txt(로봇 배제 표준파일) & Sitemap.xml(사이트맵) - 타이틀 & 메타디스크립션 태그(검색엔진최적화 메타태그 + 기타 태그) : 길이제한 영문기준 320자, 한글 160자 - 소셜 검색엔진최적화 메타태그 이렇게 4가지 방법으로 웹 페이지의 노출도를 높여주는 최적화 작업의 예시를 아래서 보자 이미지 태그 및 최적화: 이미지 alt태그, 웹사이트에 사용되는 이미지에는 가능하면 alt태그를 설정해두는 것이 좋다. 모바일 최적화 모바일 친화적인 웹사이트를 구축하여 운영하며, 구글에서 제공하는 .. [HTML/CSS] css :root(가상선택자)를 통해 css 변수 선언 해보자! 보통 CSS문서에서 사이트 구축을 할 때나, 유지보수 작업을 하다보면 여러 곳을 임의로 바꿔야하고, 공통적으로 들어가는 부분들이 있다. CSS에서 이를 간단하게 변수를 선언하여 사용하면 좀 더 쉽게 작업을 할 수 있게 하기위한 방법을 알아보려한다. 1. :root 의사 클래스 :root는 문서 트리의 루트 요소를 선택하며, HTML의 루트 요소는 요소이므로, :root와 html은 같다. 2. CSS 변수(사용자 지정 속성) CSS:root를 이용해 가상선택자를 이용해 재사용할 값을 담아줄 변수를 만들어 저장해준다. 보통 웹사이트 하나를 만들면, 기본적으로 reset.css, common.css, sub.css 등 많은 양의 CSS를 가지고 있다. 유지보수를 하다보면 임의로 값을 변경하거나 컬러변.. [HTML/CSS] 표(table)의 태그를 사용해서 깔끔하게 만들어보자 저번에 table을 만드는 방법과 tr, th, td에 대한 기본 정의를 한 적이 있다. 이번에는 table의 태그와 css를 이용해 좀 더 깔끔하게 만들어 볼 것이다. 1.thead와 tbody란? 와 는 단어에서 알 수 있듯이 thead는 html에서 각 영역별로 head,body,footer라고 나누듯 table에서 콘텐츠 영역을 나눠 그룹화시킬 때 사용한다. 그리고 thead와 tbody는 table의 자식요소로써 table 밖에서 사용하면 안됨. 또한, table에서 , 요소 아래에 위치힌다. 2. caption, colgroup이란? caption와 colgroup 또한 table의 자식요소로써 caption는 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다. 나 같은 경우 웹접근성으.. [etc] vs code| 비주얼 스튜디오 코드 웹 버전 | 소스 편집기 이번에 마이클소프트가 비주얼 스튜디오 코드의 웹 버전을 발표했는데요! 아래의 링크를 타고 들어가시면 바로 사용되는 것을 확인 할 수 있습니다! 링크 타고 들어가면 바로 웹브라우저로 팝업 들어가는 것을 확인 할 수 있는데요 https://vscode.dev/ Visual Studio Code for the Web Build with Visual Studio Code, anywhere, anytime, entirely in your browser. vscode.dev 크롬/엣지에서는 로컬 파일 편집도 가능하고, 크롬북과 같은 시스템에서도 VS Code를 사용할 수 있게 된다고 합니다! 확장 기능 역시 대부분 동작하며, 브라우저 버전에서도 사용 할 수 있도록 확장 기능이 업데이트 되는 수도 늘어날 것.. [etc] vs code| 비주얼 스튜디오 코드 html 자동완성 방법 1. index.html 파일을 생성해준다. 솔직히 매번 이러면서 하나하나 쳐주는게 귀찮았는데 자동완성 하나면 뚝딱!되는 것을 찾았다. 2.! + tab버튼 클릭하기 !(느낌표) 작성 후 바로 tab버튼을 누르면 아래화면과 같이 나타나는 것을 확인할 수 있다. 여기서 한가지 수정해줘야 할 부분이 있는데, 을 로 바꿔줘야한다. 이렇게 변경 해주면, 이제 body부분에 작업할 코드를 작업해주면 된다. [etc] 한컴 입력기 삭제하기 | 한글 교정 이상문제, IDE 단축기 오작동 vs code나 이클립스를 사용하는데 단축키가 작동하지 않아 작업에 불편함을 겪엇다.. 처음엔 키보드 배터리 문제인줄 알았는데 아닌것을 알게되었다! 문제는 윈도우 자체 한컴 입력기때문이었는데..! 이 문제를 해결하기 위한 방법을 기억하기 위해 이 글을 쓰게됨!!! 첫번째 설정에 들어가기 먼저 설정에 들어가서 시간 및 언어를 클릭해준다. 두번째 언어 선택 언어로 들어가서 기본 설정 언어에 한국어를 클릭하면 옵션이 뜬다. 그 옵션을 클릭해 준다. 세번째 한컴 입력기 삭제 언어 옵션에 들어가면 한컴 입력기가 추가되어있는것을 확인 할 수 있는데, 선택해서 제거해버린다. 이러면 이제 vs code나 이클립스 뿐만아니라 단축키가 사용이 잘되는 것을 확인할 수 있다. [etc] 유용한 웹사이트 추천 | 코드펜 codepen 사용법 | 웹 편집기 요즘은 웹 사이트에서도 간단한 코딩이 가능한 페이지 하나를 소개하려고 한다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드펜이라는 사이트이다. 위의 링크를 타고 가면 페이지가 열린다. 이렇게 첫 페이지가 나타나면 "Start Coding" 버튼을 클릭한다. 이렇게 코딩할 수 있는 창이 나온다. HTML, CSS, JS가 기본으로 잡혀 있으며, 설정을 클릭하면 팝업창이 뜨는데 팝업 왼.. 이전 1 2 3 4 5 다음
