eunyo의 it이야기

안녕하세요. 이번 포스팅은 css을 사용해 텍스트가 넘칠때 ...로 말줄임 처리하는 방법에 대해 알아보도록 하겠습니다. 한 줄 말줄임 처리하기 div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } 여러줄 말줄임 처리하기 { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

태그 form태그란? 웹사이트에서 사용자 정보를 입력받아, 사용자로부터 할당된 데이터를 서버로 전송합니다. 회원가입이나 로그인, 검색창과 같은 입력받은 데이터를 서버로 전송이 필요한 기능에 form태그가 사용됩니다. form의 구조 form의 구조는 위의 코드와 같습니다. action속성은 폼 데이터를 서버로 보낼 때, 데이터를 전달받을 url을 지정합니다. method속성은 폼데이터를 서버로 제출할 때 사용되는 HTTP 메소드를 지정합니다. method 속성의 속성값에는 'GET'과 'POST'가 있습니다. - GET 방식은 브라우저에 의해 저장되기 때문에 '보안의 취약점'이 존재합니다. 또한 데이터 길이의 제한이 있습니다. - POST 방식은 브라우저에 의해 저장되지 않기 때문에 '보안성'이 높습니다..

HTML video 태그 사용법HTML5에서는 video태그를 사용해 웹페이지 안에 동영상을 올릴 수 있습니다. 태그는 웹 문서에 동영상 파일의 링크만 연결시켜주면 간단하게 동영상 구현이 가능합니다.video 태그에서 지원하는 파일은 mp4, webM, avi, ogg가 있습니다.브라우저마다 지원하는 파일이 다르기 때문에 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. 브라우저 별 호환성 BrowserMP4WebMOggInternet ExplorerOXXChromeOOOFirefoxO from Firefox 21 from Firefox 30 for LinuxOOSafariOXXOperaO From Opera 25 OO지원하는 브라우저와, 브라우저별 지원하는 비디오파일 ..

스크롤바 CSS로 스타일 변경하는 방법 브라우저의 높이보다 콘텐츠가 길어질때, 브라우저 내에서 스크롤바가 생성됩니다. 이때 생기는 스크롤바의 스타일을 변경하는 방법에 대해 알려드리겠습니다. 하지만, 크롬이 아닌 타 브라우저에서는 최소한의 수준에서 스타일 변경이 가능한 점 참고부탁드립니다. 사이트 전체 스크롤 css 수정하기 ::-webkit-scrollbar { width: 5px; /*스크롤바의 너비*/ } ::-webkit-scrollbar-thumb { background-color: black; /*스크롤바의 색상*/ } ::-webkit-scrollbar-track { background-color: yellow; /*스크롤바 트랙 색상*/ } 실행화면 원하는 영역에 스크롤 css 수정하기 di..

오늘은 자바스크립트가 작동 안 할 때, 비활성화 상태일 때 처리 방법에 대해 알려드리겠습니다. 사실 요즘에 자바스크립트를 지원하지 않는 브라우저는 없지만, 사용자가 자바스크립트를 비활성화 한 상태에서 웹 브라우저를 사용한다면 레이아웃이 깨져 보이거나 자바스크립트로 개발된 영역이 작동이 안됩니다. 사용자가 자바스크립트가 꺼져있다는 사실을 인지 못한다면 오류라고 생각을 할 수 있기 때문에 방법은 noscript 태그는 자바스크립트가 활성화되어있을 때는 표시되지 않고, 자바스크립트가 비활성화 됐을 때만 보이는 태그입니다. 스크립트 비활성화 시 메시지 출력 아래와 같이 메시지를 출력하여 대체 방안을 마련합니다. 브라우저의 자바스크립트가 비활성화되어있는 상태입니다. 원활한 웹서비스를 이용하기 위해서는 자바스크립트..

리셋 css / reset css란? 모든 웹 브라우저에서 동일하게 보이기 위해서 사용하는 것으로, 브라우저 자체의 css style을 리셋시켜주는 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, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, s..

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,, 반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만, 가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다. See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen. table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다. 그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다. overflow 속성에는 , overflow:auto : 해당 범위를 벗..

HTML으로 마크업 할 때 필요한 특수문자 코드표입니다. 특수문자를 코드로 사용하지 않을 때 웹 표준에 부적합할 수 있기 때문에 특수문자 코드를 사용해주는 것이 좋습니다. Character Entity Reference Chart dev.w3.org 표현문자 숫자 표현 문자 표현 설명 - �- - 사용하지 않음 space - 수평 탭 space - 줄 삽입 - - - 사용하지 않음 space - 여백 ! ! - 느낌표 " " "e; 따옴표 # # - 숫자기호 $ $ - 달러 % % - 백분율 기호 & & & Ampersand ' ' - 작은 따옴표 ( ( - 왼쪽 괄호 ) ) - 오른쪽 괄호 * * - 아스트릭 + + - 더하기 기호 , , - 쉼표 - -..