choco's story

select 태그 ~ 태그란?: 여러 옵션(선택지)들을 제공해주는 컨트롤 생성 태그select 태그를 사용하면 여러 선택지 중 하나를 고를 수 있는 메뉴 형식의 콘텐츠가 만들어집니다. 간단히 말하면 "드롭다운"을 만들어줍니다.이때 ~ 태그 안의 각 선택지들은 option 태그를 사용합니다.select 태그도 각 요소마다 name을 지정할 수 있습니다. 젤리 쿠키이 코드를 보면 select 태그 안에 name 속성을 넣어서 어떤 옵션들이 있는지 안내합니다.또한 각각의 option마다 value 속성을 지정할 수 있습니다. 여기서 value는 실제로 처리될 값을 뜻합니다.이제 직접 예시를 통해 알아보도록 하겠습니다.select 태그 예시 먹고 싶은 간식 선택 사탕 ..

input 태그input 태그란?: 사용자로부터 데이터를 입력받기 위한 대화형 컨트롤 콘텐츠를 만들 수 있는 단일 태그 (인라인 요소)type의 속성값이 무엇인지에 따라 입력 요소의 형태나 입력하는 데이터의 유형이 달라집니다.type 외에도 여러 가지 속성을 통해 세부적인 조절이 가능합니다.이 코드는이런 식으로 input 입력칸을 만듭니다. 지정한 name 속성에 따라 알맞은 것들을 입력하면 됩니다.ex) 왼쪽은 닉네임, 오른쪽은 직업...이제 직접 여러 입력 요소들을 코드를 통해 구현해보도록 하겠습니다!입력 요소 구현 예시 여기서 input 내부의 속성들이 무엇인지 각각 알아보도록 하겠습니다.먼저 type은 input이 어떤 컨트롤 기능을 갖고 있는지를 제공해주는 속성입니다. 해당 속성..

목록목록이란?: 서로 연관 있는 항목(item)들을 나열한 것을 의미.html 문서에서 목록은 "순서 없는 목록"과 "순서 없는 목록"으로 구분합니다.Unordered List공부하기운동하기독서하기Ordered ListHTMLCSSJavaScript각 리스트 종류마다 사용하는 태그는 다음과 같습니다.순서가 있는 목록 (Ordered List) : ~ 순서가 없는 목록 (Unordered List) : ~ 각 항목을 나타내는 태그는?리스트 내부의 각 항목들은 ~ 태그를 사용합니다.이 태그는 리스트의 종류에 상관없이 둘 다 공통으로 사용하는 태그입니다. ~ 태그를 감싸는 상위 태그가 무엇이냐에 따라 각 항목의 기호가 달라지는 원리입니다.목록 만들기 예시 오늘 할 일 ht..

링크링크의 개념링크(Link)란?: 현재 문서에서 다른 문서로 이동할 수 있는 수단 ex) 외부 링크 클릭 시 해당 페이지로 이동...링크 = anchor (a 태그) ~ 태그란?: href 속성으로 특정 URL을 지정하여 하이퍼링크를 만들 수 있는 태그해당 a 태그는 인라인 요소입니다. 내부 콘텐츠(텍스트나 이미지...)를 클릭하면 지정된 URL로 이동하게 됩니다. 태그의 기본 구조는 다음과 같습니다. 콘텐츠 (텍스트 또는 이미지...) href="URL" : 하이퍼링크가 될 URL콘텐츠 : 사용자가 클릭하는 콘텐츠어떤 탭에서 열까?링크 클릭 시, 기존 탭에서 이동하거나 아예 새로운 탭을 통해 이동하는 방법 2가지가 있습니다.이는 target 속성을 통해 지정 가능합니다. 기본값은 현재 탭에서 이동..