소금인형 - SW개발자?

'Web/WEB기본'에 해당되는 글 78건

1. 

   [CSS] display: 속성으로 여러개의 li 한줄로 표시하기(메뉴 버튼 처럼)

   display Property (속성) display 속성은 요소를 어떻게 보여줄지를 결정하는 속성입니다. 4가지 속성 값을 많이 사용합니다. HTML element 요소(태그)마다 기본값이 다릅니다. none : 보이지 않음 block : 블록박스 inline : 인라인 박스 inline-block : block과 inline의 중간 형태 그 외도 다양한 속성 값들이 있습니다. contents flex : 요소들을 블록 박스 단위로 쌓아서 정렬한다. (한쪽방향으로만 정렬) grid : 요소들을 블록박스 단위로 격자 모양으로 정렬한다. (좌우, 상하 2차원 정렬) inlin-block inline-flex inline-grid inlin-table run-in table : 요소를 처럼 처리합니다. ta..
2. 

   [CSS] <ul>과 <ol>안의 <li>앞에 나오는 점과 숫자 표시 없애기

   Unordered List 이나, Ordered List 의 하위에 속한 List 에 기호나, 숫자를 표시 되지 않게 하는 CSS 스타일 list-style:none 속성 "list-style: none" CSS를 추가하면, unordered list () or ordered list ()의 bullet or number제거됨 unordered (bulleted) list 예제 최상단의 에 "list-style:none" CSS를 추가해 주면서, Coffee, Tea, Milk에 표시가 제거됩니다. Coffee Tea Black tea Green tea China Africa Milk HTML 결과물 >> 여러번 반복되면, 인라인 style코드를 CSS class로 선언해서 사용해도 편하겠죠. ... C..
3. 

   [html] HTML 페이지 로딩시 <input>에 커서 자동으로 가기

   프로그램을 개발하다보면, 사용자의 입력을 받는 곳에 커서를 처음 위치해준다는 것은 작은 배려이지만, 많은 부분 사용자에게 마우스 커서를 한번 찍지 않아도 되는 이득을 줄 수 있습니다. 의 autofocus 속성을 알기 전에는 javascript를 이용해서 커서를 이동시켰답니다. [ 옛날 javascript 소스를 이용한 Input박스에 커서 이동하기 ] ... 결론적으로 해당 방법은 믿을만 하지만, 별로 필요 없는 코딩 낭비(?) 였습니다. 해결 방법은 autofocue 속성을 이용하는게 편리하고 유용합니다. [ 쉬운 해결법 ] 페이지가 로딩되는 순간 해당 Input 박스로 커서가 이동됩니다. Browser Support Chrome IE firefox safari opera autofocus 5.0 1..
4. 

   HTML code, HTML Symbols 특수문자, 화폐표시 웹 랜더링 html Code값들

   HTML를 통해서 웹의 UI화면과 내용을 넣다보면, 특수 문자를 입력하는 방법에 다양한 방법들이 있답니다. HTML 파일의 File type 포멧을 UTF-8을 이용해서 해당 문자로 입력하는 방법도 있고, 개인적으로 많이 사용하는 코드는 HTML ENTITY코드를 사용하는 방법입니다. 보통 Empty Space(공백)을 입력할때, 와 같은 HTML Entity를 사용하는데. 저는 형식으로 HTML CODE를 값을 자주 사용합니다. 화폐 단위 표시나, 1/4과 같은 문자 표시나 자주 사용되는 항목들의 코드값을 정리해둔 사이트가 있어서 남겨둡니다. ¼ 쿼터의 표시의 경우, ¼를 사용하면 이쁘게 표시가 됩니다. ⅆ ⅉ (dj문자값 ⅆ ⅉ) ♻ (리사이클♻) 다양한 문자 코드를 이용해서, 디자인 없이도 간단한 ..
5. 

   HTTP "Basic" URL Param 인증 방식 쉽게하기 + wget에서 인증하기

   일반적으로 HTTP 통신의 접근은 권한 인증을 하지 않고, 시용하는 방법을 많이 사용하고 있습니다. 그러나, RFC 7235 (규약 내용)에 보면, HTTP TTP 인증은 서버는 클라이언트(웹브라우저 등)의 요청간에 401(Unauthorized) 응답으로, 최소한 한 번의 인증 시도(WWW-Authenticate)를 통해서, 응답 헤더(HTTP header)에 무인증(Unauthorized) 권한 부여 정보를 제공합니다. 클라이언트에서 서버로 HTTP 권한 인증 처리 과정에서, 서버에서는 Username과 Password를 요구할수 있게 처리가 가능하며, 이걸 Basic 인증라하며, 이 인증 정보가 맞는 사용자에게 정보를 보여주게 할 수 있습니다. 여기서, 해당 정보를 wget과 같은 유틸리티로 웹 페..
6. 

   [CSS] CSS 를 사용한 프린트시 페이지 나눔 처리 방법 page-break-after: always;

   Web페이지에서도, Word의 페이지 나눔 처리가 가능합니다. 객체 태그에 style인라인 값으로 style="page-break-after: always;" 추가해주면, 다음 태그부터는 다음 페이지로 인쇄가 됩니다. (예제: CSS 인라인으로 추가) [ 웹페이지 화면 ] 상단 테이블 영역과 하단 테이블 영역이 화면에 보일 때는 붙어 보입니다. 그러나, 인쇄를 하면 다른 페이지로 인쇄가 됩니다. [ 프린트 인쇄 미리보기 ] page-break-after의 CSS를 이용해서, Word의 페이지 나눔 처리가 가능 해집니다. 또 다른 적용 방법은 인라인 방식이 아니라, CSS함수 선언하는 방식을 말한다. CSS @media print { footer { page-break-after: always; } } H..
7. 

   [CSS] 부모 객체의 색상을 그대로 사용하는 color:inherit; 속성값

   CSS를 사용하다보면, 윈도우 객체의 Transparent color(투명컬러)와 같이 부모의 색상을 받고 싶을때가 있습니다. CSS에서 "color: inherit;" 을 이용하면, 해당 객체의 부모의 색상을 사용하기에 투명한 느낌처럼 사용이 가능합니다. /* Make second-level headers green */ h2 { color: green; } /* ...but leave those in the sidebar alone so they use their parent's color */ #sidebar h2 { color: inherit; } 참고: (1) https://stackoverflow.com/questions/6722467/how-to-remove-the-default-link-c..
8. 

   [html5] input 객체의 type별 형태 (tel 모바일 숫자 Kepad로 변경)

   html5의 input의 타입별로 유용하게 쓰일 때가 많습니다. type="tel"과 같은 경우, 휴대폰에서 숫자 기보드만 입력이 가능하게 변경이 되어서 너무 유용하게 쓰이죠. HTML5의 type내용들 type="button" value="button" type="checkbox" type="color" type="date" type="datetime-local" type="email" type="file" type="hidden" type="image" type="month" type="number" type="password" type="radio" type="range" type="reset" type="search" type="submit" type="tel" type="text" type="t..
9. 

   [CSS] 구글 나눔 명조(Nanum Myeongjo) 웹폰트 사용 방법

   구글의 폰트 서비스 Google Fonts https://fonts.google.com/ 한글 구글 폰트 Google Fonts (subset=korean) https://fonts.google.com/?subset=korean 다양한 폰트를 지원합니다. 쉽게 가능하며, 사용도 방법 예제도 너무 잘 나와있습니다. 나눔 명조 사용법 구글의 웹폰트 중에 나눔 명조(Nanum Myeongjo)가 있습니다. 미리보기 화면과, 폰트 다운로드와 다양한 정보들이 있습니다. Google Fonts의 나눔 명조 Nanum Myeongjo: https://fonts.google.com/specimen/Nanum+Myeongjo 나눔 명조는 네이버사로 유명한 NHN사의 무료 폰트 입니다. 화면 표시, 인쇄 용으로도 사용이 ..
10. Pagination 처리는 흐름 (Pagination / Infinite Scrolling / User Experience Consequences)

    출처: http://blog.usabilla.com/pagination-theres-life-webs-old-dog-yet/ Pagination: Why there’s life in the web’s old dog yeton February 11, 2014 / by Oliver McGoughAs web technologies continue to improve, so are the ways in which we experience the internet. In the 23 years of the web, many trends have come and gone. We’ve seen Page Counters come and go, Flash rise and fall, and we’re currently se..