HTML (24) 썸네일형 리스트형 [HTML/CSS] css 말줄임 처리하기 | 텍스트 text-overflow: ellipsis 웹페이지를 작성할 때에는 말줄임(...)을 사용하는 경우가 많은 편이다. 말줄임표를 사용하게 되면, 더 많은 문장을 간결하게 생략하여 표시할 수 있다. 말줄임 표시하는 방법 Lorem ipsum dolor sit amet -> Lorem ipsum dolor sit... 위와 같이 표현 하기 위해서는 HTML과 CSS를 통해 처리해주어야한다. See the Pen Untitled by HAJIN LEE (@rajin444) on CodePen. 말줄임을 2줄로 하기위해서는 -webkit-line-clamp를 이용하여 문자길이의 지정된 라인이 넘어가면 말줄임 처리를 해준다. .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; displ.. [HTML/CSS] 클릭 시 페이지 내에 특정 위치로 스크롤 이동 페이지 내에서 특정 위치로 이동하는 방법에 대해 알아보자! 이번에는 자연스럽게 스크롤을 이용하여 이동하는 방법을 알아보려고한다. 참고로 이 방식은 스크롤이 될 내용이 길 수록 눈으로 효과를 확인 할 수 있다. HTML scroll1 scroll2 scroll3 scroll4 scroll1 scroll2 scroll3 scroll4 CSS /* reset */ ul, ol, li {list-style-type: none;} a {color: #333; text-decoration: none;} .list {position: relative; height: 50px; margin-bottom: 50px;} .list li {display: inline-block; padding: 0 20px;} .listb.. [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부분에 작업할 코드를 작업해주면 된다. 이전 1 2 3 다음
