D.S.
Übermensch : To a Brighter Future
D.S.
전체 방문자
오늘
어제
  • 분류 전체보기 (109)
    • Lecture Notes (1)
      • CS231n (1)
    • Thoughts on Videos (ToV) (7)
    • Tech (0)
    • 개인 기록 (0)
      • 프로그래밍공부일지 (0)
      • CS Study 한눈에 보기 (0)
    • 프로그래밍 (65)
      • C (35)
      • C++ (0)
      • Python (12)
      • 이코테python (8)
      • 2022군장병AI_SW_Elice (4)
      • 2022군장병AI_SW_Kakao (1)
      • Solidity (2)
      • Web (3)
    • Mental Augmentation (28)
      • Kwik Reading (22)
      • 독서 (0)
      • 갸꿀팁 (2)
      • 3-Part Memory Training (1)
      • Kwik Recall (3)
    • Physical Augmentation (3)
      • Health Journal (2)
      • Sinclair Podcast (1)
    • Others (0)
      • 여행 (0)
    • Idea Bank (0)
      • VBA (0)
      • PLANS (0)
    • 22-2학기 수업 (0)
      • 데이터베이스시스템 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

글쓰기

Kwik Reading

공지사항

인기 글

태그

  • Jim Kwik
  • kwik recall
  • 학습
  • brain yoga
  • 번역
  • 독서
  • Kwik Reading
  • 디지털 방해
  • 우뇌
  • 속발음
  • 뇌 요가
  • 짐 퀵
  • elice
  • 백준
  • Infinity Technique
  • 습관
  • Eye Fixation
  • Dandapani
  • 속독 훈련
  • 속독
  • 군장병
  • ai/sw
  • Kwik Brain
  • 비문학독해
  • subvocalization
  • 기술독서
  • 노화의 종말
  • brain break
  • baekjoon
  • lifespan

최근 댓글

hELLO · Designed By 정상우.
D.S.

Übermensch : To a Brighter Future

너무 쉬운 HTML/CSS 입문 #2
프로그래밍/Web

너무 쉬운 HTML/CSS 입문 #2

2022. 9. 26. 16:53

9~11강 내용

 

사용자 입력 폼(Form)

<form action="이동하고자 하는 페이지">

    <input type="종류" value="버튼의 label">

***종류로는 submit(버튼), text(text box) 등이 있음.

</form>

 

Text Box

<input type="text" value="미리 채워진 값" maxlength="입력 글자수 제한" size="표시되는 box의 크기"

readonly(표시된 값을 바꿀 수 없음) disabled(readonly와 같은데 화면에도 이것이 나타남) 

placeholder="어떤걸 입력해야되는지 알려주는 흐릿한 글씨(누르면 사라짐)">

 

라벨(Label)

<label for="name속성값">라벨내용</label>

<input type="text" name="name속성값">

이렇게 적어주면 input box의 왼쪽에 label이 표시됨.

 

비밀번호(Password)

<label for="pwd">Password</label>

<input type="password" name="pwd" maxlength="12" size="12">

 

Radio Button(여러 옵션 중 하나만 고를 수 있음)

<input type="radio" id="" name="" value=""> ///같은 name을 가진 것들 끼리 묶이고, value속성에 따라 달라짐.

(ex) <input type="radio" id="male" name="gender" value="M" checked><label for="male">Male</label>

<input type="radio" id="female" name="gender" value="F"><label for="female">Female></label>

 

id를 이용하여 label에 대응할 수 있음.

checked 입력하면 default로 체크해 놓을 수 있음.

 

Checkbox(여러 옵션 중 여러개를 고를 수 있음)

<input type="checkbox" name="a" value="a" checked>

<label for="a">A</label>

 

드롭다운 리스트(Drop-down)

Radio와 유사하나, <select>, <option>으로 구현

<label for="gender">Gender:</label>

<select name="gender" size="" multiple> ////size를 통해 선택창의 크기 늘릴수 있고, multiple하면 다수 선택 가능

    <option value="M">Male</option>

    <option value="F" selected>Female</option>

</select>

 

자유텍스트입력(Textarea)

<textarea name="" cols="" rows="">텍스트박스 위에 써 있는 글씨</textarea>

사용자가 직접 입력할 수 있는 텍스트박스를 생성. cols,rows를 통해서 크기 설정.

 

파일 선택(File)

<input type="file" name="picture">

파일을 선택하는 다이얼로그가 표시됨.

 

버튼(Button)

<input type="button" value="" name="" onclick="">

onclick에는 클릭했을 때 자바스크립트 연동

 

Hidden 값

<input type="hidden" name="" value="">

화면에 표시X, 내부적으로 갖고 있다가 javascript에서 활용 or submit에 넘겨주는 역할(value값을)

 

 

 

숫자(Number)

<input type="number" min="x" max="y">

숫자를 입력받고, x, y 사이에서 값을 올리고 내릴 수 있는 버튼이 표시됨.

 

컬러선택(Color)

<input type="color" name="">

RGB 컬러를 선택하는 color picker가 표시됨.

 

날짜, 시간 선택(Date, Time)

<input type="date" name="">

<input type="time" name="">

날짜 혹은 시간을 선택할 수 있도록 함.

 

 

'프로그래밍 > Web' 카테고리의 다른 글

너무 쉬운 HTML/CSS 입문 #3  (0) 2022.10.01
너무 쉬운 HTML/CSS 입문 #1  (0) 2022.09.25
    '프로그래밍/Web' 카테고리의 다른 글
    • 너무 쉬운 HTML/CSS 입문 #3
    • 너무 쉬운 HTML/CSS 입문 #1
    D.S.
    D.S.

    티스토리툴바