어제 오늘 내일

HTML의 태그를 이용하여 가로줄을 긋고, CSS를 활용하여 가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다. HTML의 hr 태그는 Horizontal Rule의 약자로, HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용됩니다. 단순히 HTML에 태그를 추가하여 가로선을 그었습니다. 에 스타일 적용하기 HTML의 에 스타일을 적용하는 방법은 2가지가 있습니다. HTML 속성 사용하기 - align, color, size, width, noshade CSS 적용하기 HTML 속성을 사용하여 스타일을 적용하는 것은 편리합니다. 하지만, HTML5 이후, 이 속성들은 대부분 deprecated되었거나, standard가 아닌 경우가 대부분입니다. 따라서, 이 속성들을 사용하..

이번에는 CSS를 사용하여 버튼(element)을 숨기는 방법과 사용자 이벤트가 발생하였을 때 Javascript를 사용하여 버튼을 숨기고 다시 보일수 있는 방법(토글)을 정리하였습니다. [CSS] 버튼 숨기기 display : none; visibility : hidden; [Javascript] 버튼 숨기기, 보이기 (토글) display 속성 visibility 속성 1. [CSS] 버튼 숨기기 display : none; #btn2 { display : none; } 위 예제에는 원래 3개의 버튼이 존재 합니다. (버튼1, 버튼2, 버튼3) display: none; display 속성값을 none으로 설정하면 해당 버튼은 화면에서 사라지고, 더 이상 화면에서 공간을 차지하지 않게 됩니다. 이 예..

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

이번에는 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..