본문 바로가기

카테고리 없음

05 - 18 ui 개발 기본기 준비 9

 

* 테이블 태그의 scope는 무엇인가 

-> <th> 태그의 scope 속성은 해당 헤더 셀이 관련되는 셀의 종류를 명시한다.

일반 웹 브라우저에서는 <th> 요소에 scope 속성을 명시해도 아무런 시각적 효과도 나타나지 않지만,

스크린 리더기와 같은 장치에서는 유용하게 사용이 될 수 있다. ( 웹 접근성 향상 )

 

속성 값

col ( 해당 셀이 열을 위한 헤더 셀임을 명시함 )

row ( 해당 셀이 행을 위한 헤더 셀임을 명시함 )

colgroup 해당 셀이 열의 그룹을 위한 헤더 셀임을 명시함

rowgroup 해당 셀이 행의 그룹을 위한 헤더 셀임을 명시함

 

* 테이블 태그에 scope를 쓰는 이유를 서술하라

 

-> 시각 장애인들은 눈으로 브라우저를 볼 수 없으므로, 스크린 리더기라는 프로그램을 통해서 표에 대한 정보를

오직 귀로만 들어야 한다. 이런 이유로 table의 각 셀에 대한 해당 영역 ( scope ) 을 지정하여 프로그램이

데이터를 읽어 내려가는 순서를 만들 수가 있다.

 

* 병합이 되어 있는 경우엔 group을 넣어서 colgroup , rowgroup을 명시해주면 된다.

 

 

 

form -> 로그인, 회원가입, 물건을 사거나 글을 작성할 때 입력한 정보를 서비스를 제공하는 서버라고 하는 곳으로 정보를 전송할 때 사용하는 글자를 입력하는 것들 일종의 양식.  

* 사용자가 입력하는 정보를 서버로 전송할 때

 

input -> 입력하다 라는 뜻, 사용자로부터 어떤 정보를 입력한다 라는 뜻의 태그.

 

<input type="text" 타입을 텍스트, 즉 사용자로부터 문자를 받겠다 라는 뜻. >

type="password" 비밀번호 받겠다 ( 땡땡이로 보임 감춰서 )

 

<input type="submit"> 

이러면 버튼이 생기고 제출이라는 텍스트가 적혀있음.

 

어디로 정보를 포낼꺼냐? 

form태그가 필요.

 

<form action=""> 이 액션 안에다가 넣어주면됨.

 

Q. 사용자가 입력한 정보는 ( 로그인 ) 해당 사이트.php로 보내주세요~ 라고 한다면?

 

해당 주소를 저 forn action="" <- 이 안에 넣어주면됨

 

<input type="text" name="id">

<input type ="password" name="pwd">

<input type="text" name="address">

 

그리고 이름을 줌. ( 서버쪽으로 전성할 때 각각의 이름의 값으로 데이터가 전송이 되기 위함. )

 

 

 

그 다음, value라는 속성이 있음. 값이라는 얘기.

value에다가 값 적으면 기본적으로 공백이 아닌 그 값이 적혀져있는 상태가 디폴트값이 됨.

 

<textarea></textarea>

= 여러줄을 입력할 수 있는 화면이 뜸 ( 내용 좀 많이 입력 가능 )

 

<textarea cols="50"> -> 50글자만큼 입력할 수 있는 만큼 폭이 커짐 ( 수평 )

rows="10" -> 문자를 10줄을 입력할 수 있을만큼 폭이 커짐. ( 수직 )

 

* 기본값 넣으려면 그냥 태그 안에 넣으면됨 ( 굳이 벨류값에다가 ㄴㄴ )

 

 

* form태그의 label에 대해서 설명하라.

 

 

-> label, 무언가의 이름표에 대한 뜻.

input태그를 설명할 수 있는, input이 무엇과 관련되어 있는지 정확히 기술해주기 위한 일종의 이름표 같은 개념.

 

* 어떻게 연결하는가?

 

-> for 속성을 사용한다.

ex)  <label for="id_txt">text</label> 

       <input id="id_txt" type="text" name="id">

 

 

이 레이블이라는 태그를 감싸줄 수도 있음.

 

<lable> text

  <input type="text" name="id>

</lable>

 

위와 동일한 태그임.

 

* 체크박스 넣으려면?

 

-> input type="checkbox"

 

* 라디오 버튼은?

 

-> input type="radio" 

하나의 버튼만 누를 수 있는 형식 ( 옛날에 그 라디오를 생각하면됨. 일종의 은유적 표현임 )

 

라디오 버튼 2개를 만들고 네임을 같이 지정해주면 하나의 버튼만 선택될 수 있게 함.

예를 들어 이런 거지 옵션 중에 남 여 이렇게 하나만 고를 수 있게 마크업을 해야할 경우 이 라디오를 활용하면됨.

 

라디오 -> 네임 값이 같은 것들끼리 그룹핑이 된다. ( 하나만 선택이 되고 나머진 다 해제가 되는 형식 )

 

 

* 라디오와 체크박스의 차이는?

 

-> 체크박스는 네임이 같아도 다중으로 선택이 가능함.

 

* 기본적으로 선택이 되어있는 상태로 만들려면 checked를 넣어주면됨. 

   그럼 웹페이지가 열려있을 때 바로 선택이 되어있는 상태가됨.

 

서버 쪽으로 데이터 전송하려면?

 

<input type="submit"> ( + action )

 

 

* dropdown list, option, select태그에 대해서 설명하라

옵션은 선택지라는 뜻. ( 선택할 수 있는 것들, 선택지로 정의함 )

 

 

 

 

 

* form태그의 method에 대해서 설명하라

 

-> <form> 태그의 method 속성은 폼 데이터 ( form data ) 가 서버로 제출될 때 사용되는 HTTP 메소드를 명시한다.

속성값으로는 GET, POST 두 가지 중 하나를 선택할 수 있다.

 

* 그게 뭔데?

 

GET은 URL에 추가해서 서버로 전달하는거고

POST는 폼데이터를 별도로 첨부해서 서버로 전달하는 방식임.

 

GET -> URL로 전달

POST -> "감춰서" 전달 

 

폼 태그에 메소드라고하는 속성을 지정하면됨 ( 메소드 = 방법, 데이터를 어떤 방법으로 전송할래? 전송 방법의 타입을 설정하는 것. )

메소드 지정안하면? 기본적으로 GET으로 보내짐 ( URL )

 

POST -> 데이터를 숨겨서 전송함. 훨씬 더 안전.

 

( 폼을 이용해 데이터를 전송하면 거의 100% post 방식을 이용해서 전송함. 이건 서버쪽 엔지니어의 권한이기도함 )