태그는 한 줄 이상의 문장을 입력할 때 사용하는 폼을 말합니다. 주로 게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용됩니다. 태그는 일반적으로 태그와 함께 사용되며, 사용자가 입력한 데이터를 서버로 보내기 위해 사용됩니다. 이 태그는 "name" 속성을 사용하여 입력 필드의 이름을 지정할 수 있습니다. textarea 만들기 name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정합니다. cols : 텍스트 영역의 가로 너비를 문자 단위로 지정합니다. rows : 텍스트 영역의 세로 길이를 줄 단위로 지정합니다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생깁니다. See the Pen textarea1 by wjdxo513 (@wjdxo513) o..
체크박스는 사용자가 하나 이상의 옵션을 선택할 수 있도록 할 수 있는 UI 요소입니다. 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 체크박스는 대개 양식, 설정, 필터링 등의 기능을 구현할 때 사용됩니다. 체크박스 만들기 name : 체크박스가 여러개 있을 경우 폼태그에서 체크박스를 구분하기 위한 이름을 지정합니다. value : 선택한 체크박스들이 선택되었을 때 서버로 넘길 값을 선택합니다. 이 값은 필수 속성입니다. See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. 위 코드는 체크박스 3개를 생성합니다. name 속성은 같은 그룹에 속한 체크박스를 식별하기 위한 이름입니다. 만약 각각의 체크박..
라디오 버튼은 여러 항목 중 원하는 항목 하나를 사용자가 선택할 수 있도록 하는 폼 요소입니다. 딱 하나만 선택할 수 있는 것이 특징으로 사용자가 라디오 버튼 중에서 하나를 선택하면, 다른 라디오 버튼은 선택이 해제됩니다. 라디오 버튼은 주로 폼(form) 태그에서 사용되며, 사용자가 선택한 옵션의 값을 폼 데이터로 제출할 수 있습니다. 예를 들어, 사용자가 성별을 선택하는 폼이 있다면, 라디오 버튼으로 "남성"과 "여성" 옵션을 제공할 수 있습니다. 이렇게 사용자가 성별을 선택하면 그 정보를 서버로 전송하여 후 처리를 할 수 있습니다. 라디오 버튼 만들기 name : 라디오 버튼이 여러개 있을 경우 폼태그에서 라디오 버튼을 구분하기 위한 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는..
사용자가 여러 옵션 중에서 하나를 선택하도록 하고 싶을 때 드롭다운 리스트를 사용합니다. 드롭다운 리스트란 클릭 했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 생긴 명칭입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다. 드롭다운 리스트는 태그와 태그를 사용하여 생성합니다. 태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 태그를 사용해 원하는 항목들을 추가합니다. 드롭다운 리스트 만들기 See the Pen 드롭다운 리스트1 by wjdxo513 (@wjdxo513) on CodePen. 드롭다운 리스트는 위 예제처럼 태그를 사용하여 드롭다운 리스트를 만들고, 태그를 사용하여 드롭다운 리스트 내에 선택할 수 있는 항목들을 만들어주면 됩니다. 여기서 val..
HTML과 CSS를 사용하여 웹 페이지를 디자인할 때, 요소들의 위치와 배치를 제어할 때 float 속성을 사용하고는 합니다. float은 떠 있다는 의미로 왼쪽 구석이나 오른쪽 구석에 요소를 배치시키는 기능을 가지고 있습니다. 요소 왼쪽이나 오른쪽에 배치하기(float 속성) none : 해당 요소를 어느쪽으로도 배치하지 않습니다. (기본 값) left : 해당 요소를 문서의 왼쪽으로 배치합니다. right : 해당 요소를 문서의 오른쪽으로 배치합니다. See the Pen float 1 by wjdxo513 (@wjdxo513) on CodePen. float 속성을 사용하면 필요한 너비만 콘텐츠를 차지하고 다른 요소가 들어올 만큼의 공간을 비워둡니다. 위의 예제에서 파란색 box1은 float:le..
CSS 주석 사용법 /*주석 기호 사이의 데이터는 웹 브라우저에 출력되지 않습니다.*/ CSS의 주석은 /* 주석 내용 */ 같은 형식으로 작성하시면 됩니다. CSS 주석 사용 예시 See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen. CSS 주석 단축키 Visual Studio 주석 단축키 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Visual Studio Code 주석 단축키 Ctrl + / : 한줄 주석 처리 / 해제 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Eclipse 주석 단축키 Ctrl + Shift + / : 블록을 주석으로 처리 Ctrl + Shift + / : 블록 주석을 ..
HTML 주석 사용법 HTML의 주석은 와 같은 형식으로 작성하시면 됩니다. HTML 주석 사용 예시 See the Pen HTML 주석 사용예시 by wjdxo513 (@wjdxo513) on CodePen. HTML 주석 단축키 Visual Studio 주석 단축키 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Visual Studio Code 주석 단축키 Ctrl + / : 한줄 주석 처리 / 해제 Ctrl + K + C : 주석 지정 Ctrl + K + U : 주석 해제 Eclipse 주석 단축키 Ctrl + Shift + / : 블록을 주석으로 처리 Ctrl + Shift + / : 블록 주석을 해제 Ctrl + / : 한줄 주석 처리 / 해제 Codepen 주석 단..
HTML 요소를 적절하게 배치함에 있어 테두리가 있다면 요소의 영역을 시각적으로 표현할 수 있습니다. 작게는 텍스트의 단락에서부터 그림이나 표, 양식 등 형태를 가진 요소에게 다양하게 테두리를 적용할 수 있는데요. CSS의 border라는 속성을 통해 테두리를 적용할 수 있습니다. 이번 포스팅에서는 border 사용법에 대해 알아보도록 하겠습니다. 요소 테두리(border) 설정하기 border 속성은 요소에 테두리를 추가하는 데 사용됩니다. border 사용 예제 See the Pen 테두리1 by wjdxo513 (@wjdxo513) on CodePen. 기본적으로 테두리만 사용하시려고 하신다면 위와 같이 html style border에 원하는 값을 넣어주시면 됩니다. 참고로 border-style..
이전 포스팅에서 그라데이션을 만드는 두가지 방법에 대해 알아보았습니다. 이 선형 그라데이션과 원형 그라데이션은 패턴을 한번 만든 후 요소를 채울 만큼 반복해서 표시할 수 있는데요. 이 기법을 활용하면 그라데이션으로 패턴을 만들 수 있습니다. 이번 포스팅에서는 그라데이션을 활용하여 패턴을 만드는 방법에 대해 알아보도록 하겠습니다. ※ 선형, 원형 그라데이션을 만드는 방법이 궁금하시다면 아래 글을 참고해 주세요. [HTML/CSS] 배경에 선형 그라데이션 효과 넣기(linear-gradient) [HTML/CSS] 배경에 원형 그라데이션 효과 넣기(radial-gradient) 선형 그라데이션을 활용한 패턴 만들기 repeating-linear-gradient : 선형 그라데이션 반복하기 See the Pe..
그라데이션(Gradient) 효과는 여러 색상을 서서히 혼합하여 부드러운 색상 전환 효과를 만드는 것으로 크게 선형 그라데이션, 원형 그라데이션 두 가지 형태로 나뉩니다. 이 중 이번 포스팅에서는 원형 그라데이션을 넣는 방법에 대해 알아보겠습니다. CSS3에서는 radial-gradient 함수를 활용하여 선형 그라데이션을 넣을 수 있습니다. 원형 그라데이션 만들기 (radial-gradient) 원형 그라데이션은 색상이 가운데 중심에서부터 원이나 타원의 형태로 바깥으로 색상이 변하는 형태를 말하며 radial-gradient() 함수를 사용하면 배경에 원형 그라데이션을 적용할 수 있습니다. radial-gradient 사용법 radial-gradient([최종모양] [크기] at [위치], color1..
그라데이션(Gradient) 효과는 여러 색상을 서서히 혼합하여 부드러운 색상 전환 효과를 만드는 것으로 크게 선형 그라데이션, 원형 그라데이션 두 가지 형태로 나뉩니다. 이 중 이번 포스팅에서는 선형 그라데이션을 넣는 방법에 대해 알아보겠습니다. CSS3에서는 liner-gradient 함수를 활용하여 선형 그라데이션을 넣을 수 있습니다. 선형 그라데이션 만들기(linear-gradient) 선형 그라데이션은 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 형태를 말하며 liner-gradient() 함수를 사용하면 배경에 선형 그라데이션을 적용할 수 있습니다. linear-gradient 사용법 linear-gradient([방향], color1, color2, color3 ...) See..
웹 사이트를 꾸미다 보면 때로는 배경에 단순히 배경에 색을 넣는 것보다는 이미지를 넣어 디자인을 하는 것이 필요한 경우가 있습니다. CSS의 background-image 속성을 사용하면 웹에서 사용이 가능한 jpg나 gif, png 파일을 사용하여 배경 이미지를 설정할 수 있으며, 다양한 크기의 이미지를 스케일링하여 사용할 수 있습니다. 이번 포스팅에서는 웹 문서의 배경에 이미지를 설정하는 방법에 대해 알아보도록 하겠습니다. 배경 이미지 지정하기 (background-image) body {background-image : url('이미지 URL');} #area {background-image : url('이미지 URL');} .area {background-image : url('이미지 URL');..
HTML과 CSS를 이용하여 웹 문서를 만들어감에 있어서 배경(background)의 설정은 매우 중요합니다. 배경을 설정함으로써 전체적인 웹 페이지의 느낌이나 분위기를 결정할 수 있기 때문입니다. 웹 문서 전체에 배경을 넣을 수 있기도 하고 텍스트, 목록 등 원하는 부분에만 배경을 설정할 수 있습니다. 이번 포스팅에서는 배경색 설정에 대해 알아보도록 하겠습니다. 배경색 지정하기 (background-color) 배경 색상을 지정하는 4가지 방법 background-color:#000000; (HAX코드 16진수 사용) background-color:rgb(0,0,0); (RGB 코드 사용) background-color:rgba(0,0,0,0); (RGBA 코드 사용) background-color:b..