어제 오늘 내일

1. inline-block .parent { border: 1px solid black; margin: 1px; padding: 10px; text-align: center; } .child { display: inline-block; width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; } 는 기본적으로 'block' 요소입니다. block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다. 따라서, 요소는 항상 수직으로 배치되어 쌓이게 됩니다. display: inline-block; 를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다. inline-block은 inline과 b..

지난번에는 jQuery를 이용하여 div의 높이와 너비를 읽어오는 방법을 알아보았습니다. [jQuery] div 높이 너비 구하기 (height(), width()) div의 높이, 너비 변경하기 div의 높이와 너비를 구할 때와 마찬가지로 다음 두 함수를 사용할 수 있습니다. height() width() 위 두 함수를 사용하면 픽셀 단위로 요소의 높이, 너비를 지정할 수 있습니다. Hello #myDiv { background-color: yellow; } $('#myDiv').height(200); $('#myDiv').width(200); $('#myDiv').height(200); $('#myDiv').width(200); height()와 width() 함수의 파라미터로 div의 높이와 너비를..

div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진수 RGB(A) HSL(A) 위 예제는 각각 4가지 방법을 이용하여 div의 배경색을 지정한 예제입니다. CSS에서 색깔을 지정하는 위 4가지 방법에 대해서는 지난 포스팅을 참조하세요. [CSS] CSS에서 색깔을 지정하는 4가지 방법 (이름, 16진수, RGB(RGBA), HSL(HSLA)) 이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을..

지난번에는 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에 마우스 오버시 손가락 아이콘 나..

는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 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'로 설정하였습니다. ..

border-radius 30px 30% 30px, 10px 30px, 10px, 50px 10px, 20px, 30px, 40px #ex1 { background-color : green; border-radius: 30px; } #ex2 { background-color : red; border-radius: 30%; } #ex3 { background-color : gray; border-radius: 30px 10px; } #ex4 { background-color : lightpink; border-radius: 30px 10px 50px; } #ex5 { background-color : purple; border-radius: 10px 20px 30px 40px; } #ex1, #ex2, #..

CSS의 속성을 이용하여 div의 테두리를 그리는 방법을 정리하였습니다. 1. border 2. border-style, border-width, border-color 3. border-top, border-right, border-bottom, border-left 4. outline 5. outline과 border의 차이점 1. border border 속성 사용하기 1 안녕하세요? div { width : 100px; height: 100px; background-color: #f5d682; border: 1px solid red; } CSS의 border속성을 정의하여 div의 테두리를 그려주었습니다. border 속성 사용하기 2 dotted red solid 6px solid div { w..