본문 바로가기

HTML37

HTML datalist, 드롭다운 메뉴를 만드는 또 다른 방법 (select와 차이점) 태그란? select 태그와 유사하게 드롭다운 목록을 만드는 태그입니다. 하지만, 몇 가지 부분에서 select 태그와 차이점이 있어요. 일단 사용법과 예시를 보면서 차이점을 알아볼께요. [HTML] - HTML 드롭다운 목록을 생성하는 태그 select, option 사용법 Ideal city to visit? 먼저 태그를 엽니다 태그를 사용해서 질문을 만들구요 태그를 넣습니다. (select와는 다른 부분입니다) 태그를 만듭니다. 이 때 id 속성은 input의 list 속성과 같은 이름을 사용해야 하구요. 선택사항을 태그로 만듭니다. 태그의 value는 선택지를 구분할 수 있는 임의의 이름입니다 실행화면 See the Pen datalist by 40's Programmer (@40sProgramm.. 2023. 7. 10.
HTML 드롭다운 목록을 생성하는 태그 select, option 드롭다운이란? 미리 정해둔 선택지를 펼쳐서 사용자가 고를 수 있게 하는 기능을 말합니다. 우리는 생년월일을 입력할 때 자주 접할 수 있습니다. HTML에서는 와 으로 드롭다운 목록을 만들 수 있어요. 사용법 제일 좋아하는 색은? Red Green Blue 먼저 태그를 엽니다. 태그를 사용해서 질문을 만들구요 태그를 만듭니다. 이 때 id 속성은 label의 for 속성과 같은 이름을 사용해야 하구요. 선택사항을 태그로 만듭니다. 태그의 value는 선택지를 구분할 수 있는 임의의 이름입니다 See the Pen select by 40's Programmer (@40sProgrammer) on CodePen. 태그의 추가 속성 위의 예시에서 select는 id와 name 속성만 사용했는데요 그 외에 다른 .. 2023. 7. 9.
표만들기 (기본편) HTML 표 만드는 태그, table, tr, td, th HTML Table(표) 만들기 HTML에서 표를 만드려면 최소한 아래 네 가지 태그를 같이 익혀야 합니다. 표를 만들기 위해 감싸는 기본 태그입니다 : table row의 약자입니다. 가로 한 줄을 만듭니다 : table header의 약자입니다. 제목을 생성합니다 : table data의 약자입니다. 태그 내에서 사용됩니다 이렇게만 쓰면 처음에는 이해가 잘 안되는데요. 아래 사용법과 예시를 보면 금방 익힐 수 있습니다. 기초 사용법 이름 나이 홍길동 25 김영희 30 먼저 태그를 만듭니다. 그리고 가로 몇 줄이 필요한지 생각해봅니다. 위의 예시에서는 3줄을 만드는 거에요. 그럼 태그를 3개 만듭니다 이제 세로 칸이 몇 개 필요한지 생각해봅니다. 위의 예시는 2칸입니다. 그래서 안에 를 2개씩 만듭니다.. 2023. 7. 7.
HTML <br> 텍스트의 줄바꿈을 하는 태그 BR 태그란? 태그는 line break의 약어입니다. (일반적으로 약어를 만드는 규칙과 조금 다르네요. lb라고 해야 하는 것 아닌가요...) 우리가 워드프로세스에서 줄바꿈 할 때는 엔터키를 치지만, HTML에서는 태그를 써야 합니다. 사용법 This is the first line. This is the second line. 텍스트 중에서 줄바꿈 할 곳에 태그를 입력합니다 태그는 닫는 태그가 없습니다 See the Pen br by 40's Programmer (@40sProgrammer) on CodePen. 위의 예시를 보면, 첫 번째는 줄바꿈이 잘 적용되었네요. 두번째는 제가 코드상에서 엔터키를 쳤지만 태그가 없으면 줄바꿈이 안되는 것을 확인할 수 있습니다. 줄바꿈은 텍스트에만 적용되는 것은 .. 2023. 7. 6.

티스토리툴바