전체 글 159

[HTML/CSS] DIV 중앙, 가운데 배치하기

DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다. 블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다. 핵심 CSS 태그 - position:absolute; → 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다. - top: 50%; left: 50%; → 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다. → 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다. - height:300px; width:400px; → DIV의 크기를 설정 합니다. - margin:-150px 0p..

[JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기

가장 간단하게 만들어 볼 수 있는 세로방향 트리형 메뉴를 만들어 보도록 하겠습니다. 먼저 CSS목록 속성 중 불릿에 대하여 잘 모를 경우 아래 글을 참고하시기 바랍니다. 2018/02/06 - [프로그래밍/HTML, CSS, JavaScript] - CSS 목록 속성 불릿(Bullet) 지정하기 예제모습 트리메뉴 만들기 소스 프로그래밍 HTML, CSS, JavaScript JAVA, .NET, 기타 컴퓨터일반 여행/맛집 여행 맛집 코딩하기(소스설명) 1. 먼저 불릿을 이용하여 메뉴를 만들어 줍니다. 상위메뉴 하위메뉴1 하위메뉴2 상위메뉴 2. 불릿 메뉴에 CSS 스타일 속성을 설정 합니다. - 마우스 모양 및 표시할지에 대한 속성(display)을 설정합니다. UL > LI {cursor: pointe..

[보안]비공개로 인터넷 사용하는 법

어떤 이유에서든 내가 사용한 인터넷 기록을 다른이들이 알 수 없기를 원할 수 있을 것 입니다. 그래서 이번 포스팅에서는 크롬브라우저에서 제공되는 시크릿 모드 기능에 대하여 알아 보도록 하겠습니다. 시크릿 모드란 비공개로 인터넷을 사용할 수 있도록 브라우저 모드를 전환하여 사용하는 기능 입니다. 시크릿모드로 전환하여 사용시에는 다른 사용자가 내 활동을 볼 수 없습니다. 방문기록, 쿠키 및 사이트 데이터 양식에 입력한 정보를 저장하지 않게 됩니다. 시크릿 모드 사용법 크롬 설정에서 [새 시크릿 창] 을 클릭 하면 시크릿 모드로 브라우저가 전환 됩니다. ※ 단축키사용 [F10] 클릭 후 화살표 아랫방향 키(↓)를 누르면 옵션화면이 표시됩니다. 방향키를 이용하여 새 시크릿 창으로 이동 후 엔터 키를 누르면 전환..

컴퓨터 일반 2018.06.21 (2)

[자바스크립트] 일정간격으로 배경 색 변경하기- setInterval

자바스크립트를 이용하여 일정시간 후 이벤트를 발생시키거나, 일정시간마다 이벤트를 발생시키는 방법에 대하여 알아 보도록 하겠습니다. 이번 예제는 일정 시간(3초) 후 또는 일정시간(1초)마다 배경색을 랜덤으로 변경시키는 것 입니다. 먼저 소스 및 설명 아래에 있는 결과확인하기 부분에서 어떻게 발생되는지 버튼을 클릭해 보고 확인 해 보시면 이해하기 쉬울 것 입니다. 자바스크립트 소스 및 설명 결과 확인하기(버튼을 눌러 예제 결과를 확인 해 보세요) 정리 - setTimeout : 일정 시간 후 한번 실행 - setInterval : 일정 시간마다 반복 실행 - clearTimeout : 일정 시간 후 한번 실행하는 것을 중지 합니다. - clearInterval : 일정시간마다 반복하는 것을 중지 합니다. ..

[자바스크립트] 현재시간 화면에 표시하기

HTML과 CSS 학습에 조금 지루해 질 때 자바스크립트를 배워보면 다시 코딩에 대한 흥미를 느낄 수가 있습니다. HTML과 CSS가 웹디자인 영역이라면 자바스크립트는 웹프로그래밍 영역에 가까울 수 있겠지만 한번 배워 보는 것도 좋을 것 입니다. 그동안 자바스크립트에 대하여 잘 올리지 않은 것 같은데 이제 자바스크립트에 대하여 종종 포스팅을 해 보고자 합니다. 이번 시간에는 현재시간을 웹 화면에 출력하는 방법에 대하여 알아 보고자 합니다. 자바스크립트 소스 브라우저 실행 결과 소스설명 - var nowDate = new Date() var nowDate : newDate라는 이름의 변수를 선언합니다. new : 객체생성 Date() : 현재시간을 넘겨주는 함수 즉, nowDate라는 변수에 현재시간 객체..

[HTML/CSS] 텍스트 그림자 효과 꾸미기

텍스트에 그림자 효과를 주는 기능에 대하여 알아 보도록 하겠습니다. 그림자 효과 CSS를 사용하여 밋밋한 텍스트를 더욱 풍성하고 멋지게 꾸며 볼 수 있습니다. HTML/CSS 소스 ERun-Joy ERun-Joy ERun-Joy ERun-Joy ERun-Joy 브라우저 실행 결과 소스설명 - font-weight: bold; → font-weight(글자굵기) : bold(진하게) → font-weight 의 속성으로는 bold 이외에 100~900까지 100단위로 설정 할 수 있습니다. → 400은 normal과 같으며, 700은 bold와 동일합니다. 즉 숫자가 높을 수록 진하게 표시 됩니다. - text-shadow: 0px 5px 0px #FFB2F5; → text-shadow(그림자효과) : 0..

[HTML/CSS] 카테고리 DIV 박스 만들기

카테고리 DIV 박스 만들기 DIV박스 만들기 예제로 카테고리 형태의 박스를 만들어 보도록 하겠습니다. 소스를 참고하여 직접 만들어 보면 도움이 될 것이라 생각합니다. 참고로 디자인 감각이 없어, 색상이 이상하네요. 이렇게 저렇게 변경 해 보아도 시간만 흘러 이대로 올려 봅니다. HTML/CSS 소스 category 여행 맛집 요리 건강 육아 브라우저 실행 결과 소스설명 - list-style: none; → 리스트 스타일의 효과(예:●)를 사용하지 않도록 설정 합니다. - #divCategory ul li { border-top: 1px solid #003399; border-bottom: 1px solid #3DB7CC; } → li(리스트항목) 위, 아래로 1px 의 각 다른 색의 실선이 표시 되도..

닷넷(C#) SqlDataReader 에서 DataGridView로 바인딩 하는 방법

.NET(C#) SqlDataReader에서 DataGridView로 바인딩하기 CS 프로그램을 학습하던 중 ExecuteReader 함수를 호출하여 SqlDataReader 에 데이터를 담아서 사용하게 되었습니다. 그것을 DataGridView 에 바인딩을 할 경우 오류는 발생하지 않으나 바인딩되지 않는 것을 확인 하였습니다. 그럼 어떻게 DataGridView 에 바인딩 할 수 있을까 SqlDataReader을 DataTable에 담고 그것을 DataGridView에 넘기면 되었습니다. using System.Data; using System.Data.SqlClient; SqlConnection con = new SqlConnection(new ClsConn().ConnectionString); Sq..

CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow

CSS를 이용하여 간단하게 문자열을 자르는 방법에 대하여 알아 보겠습니다. 목록 화면 등에서 제목을 자르는 용도로 사용하면 좋을 것 같습니다. 영역을 설정하고 그 영역에서 벗어날 경우, 내용을 자르고 생략부호를 추가하여 표시되도록 하는 방법입니다. 예제 문자열 자르기 테스트 입니다. 예제 결과 예제 CSS 속성값 설명 - white-space : nowrap 줄바꿈이 실행되지 않도록 합니다. - width: 200px 너비를 지정합니다. - overflow: hidden 설정 영역을 넘었을 경우 숨김 처리 합니다. - text-overflow: ellipsis 영역을 넘을 경우 생략부호(...) 를 사용하여 생략처리 하여 넘지 않도록 합니다. 기타 속성값 알아보기 - white-space normal →..

DIV 배경이미지 변경하기 / CSS 배경설정 자바스크립트로 제어하기

DIV 배경이미지를 자바스크립트로 랜덤 제어 예제 배경이미지 변경하기 예제를 통해 DIV사용법 및 CSS 배경설정 속성 학습, 자바스크립트 난수발생 함수 등을 학습 해 보도록 하겠습니다.추가로 자바스크립트 배열도 사용하게 됩니다. 학습내용- DIV 영역 CSS를 통한 배경 설정 하기- 자바스크립트 난수 발생 함수를 통한 이미지 선택하기- DIV 태그 설정 id를 통한 배경 이미지 경로 변경하기 소스 소스설명- background-color:#464646 배경색상을 설정 합니다. - background-repeat:no-repeat 배경에 이미지를 반복해서 표시하지 않도록 설정 합니다. - background-position:center 배경이미지를 가운데로 정렬합니다. - var fileNm = ['이미..