일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- json
- table
- CSS
- 테이블
- list
- IntelliJ
- date
- 문자열
- ArrayList
- vscode
- javascript
- Maven
- 이탈리아
- 이클립스
- Java
- Array
- CMD
- string
- Files
- 자바스크립트
- input
- 배열
- 인텔리제이
- js
- 자바
- Visual Studio Code
- Eclipse
- html
- Button
- windows
- Today
- Total
목록IT/HTML&CSS (104)
어제 오늘 내일
웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..
가상 요소란? (Pseudo-elements) CSS 가상 요소는, 선택자에 추가하는 키워드로, 선택한 요소(element)의 일부에만 스타일을 적용합니다. 즉, 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용합니다. 다시 말해, HTML에 새로운 요소(element)를 추가한 것처럼 동작합니다. 가상 요소 사용법 가상 요소는, ::before, ::after, ::first-letter 와 같이 앞에 '::'를 붙여서 표기합니다. p::first-letter { color: blue; } 위 코드로 영역의 첫번째 글자를 파란색으로 지정할 수 있습니다. 가상 요소 종류 가상 요소의 종류는 다음과 같습니다. ::before ::after ::first-letter ::fi..
HTML 페이지가 길 경우, 페이지의 상단에 목차를 만들고, 목차를 클릭하면, 페이지의 원하는 부분으로 이동하고자 할 때 책갈피 기능을 사용할 수 있습니다. 페이지 링크 만들기 제목 1 제목 2 태그의 'href' 속성값을 '#'로 시작해야 합니다. 여기서 '#' 뒤의 'title1', 'title2'는 이동하고자 하는 위치의 태그 name 값입니다. 이 링크를 클릭하면, 페이지 내의 위치로 커서가 이동합니다. 이동하고자 하는 위치 지정 제목 1 ....content.... 제목 2 ....content.... 이동하고자 하는 위치에 태그를 추가하고, name 속성에 고유한 이름을 지정해 줍니다.
CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat) background-repeat 속성 값 배경 이미지 반복 (repeat) 배경 이미지 한 번만 넣기 (no-repeat) 가로 방향으로 이미지 반복 (repeat-x) 세로 방향으로 이미지 반복 (repeat-y) 배경 이미지 잘리지 않도록 반복 (space) - 공백 배경 이미지 잘리지 않도록 반복 (round) - 빈 공간 없음 배경 이미지 위치 지정하기 (background-position) 배경 이미지 가운데 한 번만 넣기 (center) 배경 이미지 크기 설정하기 (background-size) 이미지가 잘리지 않는 ..
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가지 방법을..
이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을 정리하였습니다. 이름 16진수 RGB 또는 RGBA HSL 또는 HSLA 1. 이름 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 이 방법은 쉽게 색상을 지정할 수 있는 장점이 있지만, 표현할 수 있는 색상의 한정적이고, 색상을 사용하려면 이름을 외우고 있어야 한다는 단점이 있습니다. div { height : 20px; width : 200px; } 색상의 이름을 직접 css의 속성값으로 지정해 주었습니다. 전체 색상 이름은 아래 링크의 페이지를 참조하세요. Color keywords..
CSS를 적용하는 3가지 방법 HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 인라인 (Inline CSS) 내부 (Embedded CSS) 외부 (External CSS) 인라인 (Inline CSS) 안녕하세요? 스타일을 적용하고자 하는 HTML 위치에 'style' 속성을 정의하여 HTML에 직접 스타일을 정의할 수 있습니다. 내부 (Embedded CSS) 안녕하세요? CSS 속성을 HTML의 태그 사이에 을 배치하는 방법입니다. 이 때는, HTML의 어느 항목에 CSS를 적용해야 하는지를 나타내기 위해 CSS 선택자를 사용해야 합니다. 위 예제에서는 태그 안의 'p'가 선택자(CSS Selector)입니다. 이것은 HTML의 'p' 태그를 선택하여 스타일을 적용하도록 합니다. 외부 (Ex..
밑줄 긋기 CSS를 사용하여 텍스트에 밑줄을 긋기 위해서는 다음과 같이 코드를 작성하였습니다. text-decoration: underline; 취소선 긋기 취소선을 그을 때는 밑줄 긋기와 마찬가지로 text-decoration 속성을 지정해줍니다. 다만, 속성값은 'line-through'로 지정해줍니다. text-decoration: line-through; 예제 다음은 밑줄과 취소선을 긋는 예제입니다. 밑줄 취소선 .underline { text-decoration: underline; } .strike-through { text-decoration: line-through; } 취소선 스타일링 취소선의 색깔, 굵기, 모양 등을 변경하는 것은 밑줄을 스타일링 하는 방법과 같습니다. 취소선의 스타일링..
HTML의 태그를 이용하여 가로줄을 긋고, CSS를 활용하여 가로줄의 가로 세로 길이, 색깔, 모양 등을 변경하는 방법을 정리하였습니다. HTML의 hr 태그는 Horizontal Rule의 약자로, HTML에서 가로줄을 생성해주고, 문단을 구분하는데 사용됩니다. 단순히 HTML에 태그를 추가하여 가로선을 그었습니다. 에 스타일 적용하기 HTML의 에 스타일을 적용하는 방법은 2가지가 있습니다. HTML 속성 사용하기 - align, color, size, width, noshade CSS 적용하기 HTML 속성을 사용하여 스타일을 적용하는 것은 편리합니다. 하지만, HTML5 이후, 이 속성들은 대부분 deprecated되었거나, standard가 아닌 경우가 대부분입니다. 따라서, 이 속성들을 사용하..
에 마우스를 가져갔을 때, 클릭 할 수 있음을 나타내는 손가락 아이콘을 보여주는 방법입니다. cursor : pointer .my-div { width : 200px; height : 200px; background-color : blue; cursor : pointer; } cursor: pointer; div의 css에 cursor 속성값을 poinster로 지정하였습니다. div 안으로 마우스 포인터를 가져가면, 마우스 포인터가 손가락 모양으로 변경되는 것을 확인 할 수 있습니다.