일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- 문자열
- CMD
- javascript
- Maven
- 이클립스
- 자바
- Button
- IntelliJ
- html
- 배열
- windows
- date
- Files
- Array
- string
- Visual Studio Code
- json
- 이탈리아
- input
- 인텔리제이
- list
- vscode
- table
- Eclipse
- Java
- 테이블
- ArrayList
- 자바스크립트
- js
- CSS
- Today
- Total
목록IT/HTML&CSS (104)
어제 오늘 내일
지난번에는 안의 텍스트를 가로 세로 방향으로 가운데 정렬하는 방법을 알아보았습니다. [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를 이용하여 세로줄 그리기 가로줄은 태그를 이용해서 비교적 쉽게 그릴수 있었는데요. 세로줄을 그려주는 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..
지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다. [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모 hianna.tistory.com 이번에는, CSS를 사용해서 HTML 테이블을 가운데 정렬하는 방법입니다. 테이블 가운데 정렬하기 Product Price Apple 3000 Banana 2000 table { margi..
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, #..
HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모두 가운데 정렬하기) 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 테이블 안의 글자의 가로 방향 정렬은 CSS의 'text-align' 속성을 사용하고, 속성값으로 'left', 'right', 'center'가 올수 있습니다. 기본 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; border-collapse : collapse; } table { width : 300px; height :..
기본 테이블 그리기 HTML에 아무런 스타일을 지정하지 않고, 태그만 사용해서 테이블을 그리면 테두리가 표시되지 않습니다. Product Price Apple 3000 Banana 2000 테이블에 테두리 표시하기 테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다. HTML의 border 속성 Product Price Apple 3000 Banana 2000 태그에 border 속성값을 1로 지정하였습니다. CSS의 border 속성 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; }; CSS의 border 속성을 '1px solid black'으로 정의하였습니다. 이때..
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..
지난 번에는 하이퍼링크(a href)의 밑줄을 없애는 방법을 알아보았습니다. [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (tex hianna.tistory.com 기본 하이퍼링크는 사용자가 링크를 클릭하기 전과 후의 링크 색깔이 다릅니다. 이번에는 하이버링크의 색깔을 바꾸는 방법에 대해서 정리합니다. 하이퍼링크 글자색 바꾸기 블로그 홈으로 이동하기 a:link { color : pink; } a:visited {..
HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (text-decoration-line) 블로그 메인으로 가기 a { text-decoration-line: none; /* text-decoration-line: underline; */ /* text-decoration-line: overline; */ /* text-decoration-line: line-through; */ /* text-decoration-line: underline line-through overline; */ } 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none..