어제 오늘 내일

postgres 서버 버전 확인하는 2가지 방법을 정리하였습니다. 다음의 2가지 SQL을 실행하여 postgres 서버의 버전을 확인할 수 있습니다. 1. select version(); select version(); 결과 예시 2. show server_version; show server_version; 결과 예시 postgres 서버 버전을 확인하는 방법을 알아보았습니다.

지난번에는 css의 text-decoration 속성을 설정하여 문자열에 밑줄을 그리고, 색깔, 위치, 굵기, 모양 등을 정의하는 방법을 알아보았습니다. [HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration [HTML/CSS] 글자 밑줄 긋기 (위치, 두께, 색깔, 모양 지정하기) text-decoration 이번에는 CSS를 사용하여 글자에 밑줄을 긋고, 밑줄의 위치, 두께, 색깔, 모양을 지정할 수 있는 방법을 정리해보겠습니다. 간단하게 밑줄 긋기 글자에 밑줄을 긋기 위해서는 CSS의 text-decoration 속 hianna.tistory.com 이번에는, 텍스트와 밑줄 사이의 간격을 조정하는 방법을 정리해 보겠습니다. 여러가지 방법이 있지만, 여..

지난번에는 div에 onclick 이벤트를 거는 방법, 그리고, div에 마우스 오버되었을 때 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보았습니다. [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. hianna.tistory.com [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기 [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나..

이번에는 CSS를 사용하여 글자에 밑줄을 긋고, 밑줄의 위치, 두께, 색깔, 모양을 지정할 수 있는 방법을 정리해보겠습니다. 간단하게 밑줄 긋기 글자에 밑줄을 긋기 위해서는 CSS의 text-decoration 속성을 사용합니다. 안녕하세요? .my-underline { text-decoration: underline; } text-decoration : underline; 간단하게 text-decoration 속성을 underline으로 지정하여 문자열에 밑줄을 그었습니다. 이번에는 밑줄의 위치, 두께, 색깔, 모양을 지정할 수 있는 방법을 정리해 보겠습니다. 앞에서 간단히 밑줄을 긋는데 사용했던 text-decoration 속성을 사용하면 이런 다양한 속성들도 정의할 수 있습니다. text-decor..

는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. HTML, Javascript 사용하기 html과 Javascript를 이용하여 div에 onclick 이벤트를 추가하는 방법입니다. .my-div { width : 150px; height : 150px; background-color : blue; } function hello() { alert('안녕하세요'); } [JS] div 클릭시 실행될 hello() 함수를 정의하였습니다. div가 클릭되면, '안녕하세요' 메세지를 출력하는 alert 창을 띄웁니다. [HTML] onclic..

에 마우스를 가져갔을 때, 클릭 할 수 있음을 나타내는 손가락 아이콘을 보여주는 방법입니다. cursor : pointer .my-div { width : 200px; height : 200px; background-color : blue; cursor : pointer; } cursor: pointer; div의 css에 cursor 속성값을 poinster로 지정하였습니다. div 안으로 마우스 포인터를 가져가면, 마우스 포인터가 손가락 모양으로 변경되는 것을 확인 할 수 있습니다.

지난번에는 안의 텍스트를 가로 세로 방향으로 가운데 정렬하는 방법을 알아보았습니다. [HTML/CSS] DIV 안의 텍스트 가운데 정렬하기 (가로, 세로) 안에 가 있을 경우 안에 있은 를 가로, 세로 방향 가운데 정렬하는 방법을 정리해 보도록 하겠습니다. 아래와 같이 파란 배경의 div안에 빨간 배경의 div가 있을 경우, 안쪽에 있는 div를 가로, 세로 방향 모두 가운데 정렬해 보도록 하겠습니다. .outer-div { width : 300px; height : 300px; background-color : blue; } .inner-div { width : 100px; height : 100px; background-color: red; } 1. 가로 정렬 margin justify-content..

이번에는 다음과 같이 div 안에 있는 text를 가로, 세로로 가운데 정렬하는 방법을 알아보겠습니다. 안녕하세요 .my-div { border : 1px solid blue; height : 200px; } 1. 가로로 가운데 정렬하기 여기에서 소개할 안의 글자를 가로로 가운데 정렬하는 방법은 다음 2가지 입니다. text-align justify-content text-align 안녕하세요 .my-div { border : 1px solid blue; height : 200px; text-align : center; } text-align : center; text-align 속성은 가로정렬을 설정할 수 있는 속성입니다. 여기서는, 가운데 정렬을 하기 위해 속성값을 'center'로 설정하였습니다. ..

CSS에 주석은 보통 스타일의 목적을 설명하기 위해 추가하는 경우가 많습니다. CSS 주석 CSS의 주석은 아래와 같이 '/*'로 시작해서 '*/'로 끝납니다. /* 주석 */ CSS 주석 예제 /* 파란 박스 */ .blue-box { background-color : blue; height : 50px; width : 50px; } HTML과 Javascript에 주석을 추가하는 방법은 다음 포스팅을 참조하세요. 2017.06.13 - [IT/HTML] - [HTML] 주석 달기 (Comment) [HTML] 주석 달기 (Comment) HTML 파일의 코드가 길어지면 도대체 이 코드들이 무슨 말을 하는 건지 알아보기가 힘들다. 그래서, HTML은 브라우저가 알아보는 언어이지, 인간이 쉽게 알아보기 ..

CSS를 이용하여 세로줄 긋는 방법을 소개합니다. CSS를 이용하여 세로줄 그리기 가로줄은 태그를 이용해서 비교적 쉽게 그릴수 있었는데요. 세로줄을 그려주는 HTML 태그는 없기 때문에 여기서는 CCS를 이용해서 세로줄을 그리는 방법을 소개합니다. border-left 속성 .v-line { border-left : thick solid #32a1ce; height : 50px; } 세로줄을 그리기 위해서 를 하나 생성하고, css의 border-left 속성을 사용하여 div의 왼쪽 border의 스타일을 지정해주었습니다. border-left에는 3개의 값을 지정할 수 있습니다. 첫번째 값 : width 기본값 : medium 허용값 키워드 값 thin : 얇은 테두리 medium : 중간 테두리 t..