코딩독학 !


출처는 tcpschool.com 입니다.


오늘은 HTML 입력 양식의  Form 요소







Form 요소


웹페이지에서는 form 요소를 이용하여 사용자로부터 입력을 받을 수 있음.

사용자가 입력한 데이터를 서버로 보낼 때도 form 요소 사용.



<form action="처리할페이지주소" method="get|post"></form>




action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시함.



폼 핸들러(form-handler) : 전달받은 데이터를 처리하는 스크립트 파일



method 속성 : 입력받은 데이터를 서버에 전달할 방식을 명시함.

 


사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됨.






method 속성을 통해 명시할 수 있는 form 요소의 전달 방식 : GET 방식 / POST 방식

 



GET 방식 : 주소에 데이터(data)를 추가하여 전달함


데이터가 주소 입력창에 그대로 나타남 / 전송할 수 있는 데이터의 크기가 제한적임.

>> 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용함.

 



POST 방식 : 데이터(data)를 별도로 첨부하여 전달함


데이터가 외부에 드러나지 않음 / 전송할 수 있는 데이터의 크기에 제한이 없음.

>> 보안성 및 활용성이 GET 방식보다 좋음.



input 요소 : input 요소를 사용하여 사용자로부터 입력을 받을 수 있음.


1. 텍스트 입력 (text)

2. 비밀번호 입력 (password)

3. 라디오 버튼 (radio)

4. 체크박스 (checkbox)

5. 파일 선택 (file)

6. 선택 입력 (select)

7. 문장 입력 (textarea)

8. 버튼 입력 (button)

9. 전송 버튼 (submit)

10. 필드셋 (fieldset)




실습)


<h1>텍스트 입력</h1>

<form action="/examples/media/request.php">

검색할 내용을 입력하세요 :

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

</form>



>> 결과

      




















출처 : TCP스쿨

'[1일1코딩]' 카테고리의 다른 글

코딩독학 HTML form 요소 3 feat. tcpschool  (0) 2019.07.05
코딩독학 HTML form 요소 2 feat. tcpschool  (2) 2018.05.15
코딩독학 HTML 레이아웃 요소 feat. tcpschool  (2) 2018.05.11
코딩독학 HTML iframe 요소 feat. tcpschool  (2) 2018.05.10
코딩독학 HTML 블록과 인라인 feat. tcpschool  (0) 2018.05.09

오늘도 멘탈리스트로 영어공부




릭스비가 토막살인에 대해 열분을 토해내고 난 후의 대화입니다.

수사하는 장면은 처음이네요 ㅎㅎ





Jane : There's already plenty to work with right here.


Van Pelt : It's a right hand with a number 43 on it.


Rigsby : It's a male hand, or not very femme female. 

What else we got to work with right here without forensic analysis?


Jane: Let's see... Probably a white man, mid 50s. 

He wrote on his right hand, so he's a lefty.





Jane : 지금도 조사할만한게 많잖아.


Van Pelt : 숫자 43이 써있는 오른손밖에 없는데요...


Rigsby : 남자 손이고.. 아니면 여성스럽지 않은 여자 손일지도요. 감식반 분석 없이 우리가 여기서 뭘 할 수 있는데요?


Jane : 보자.. 아마도 백인 남성이고, 50대 중반같네. 오른 손에 글씨를 적었으니 왼손잡이네.






mid 50s 


50대 중반의 라는 뜻입니다.


나이를 정확히 밝히지 않고 10대, 20대, 30대 처럼 표현하고 싶을 때는


in one's 10s

in one's 20s


이렇게 표현한다고 합니당



저는 20대에요.


>> I'm in my 20s. 



그 여자분은 40대 중반이에요.


>> She's in her mid 40s.



저는 50대 초반이에요.


>> I'm in my early 50s.



초반은 early, 후반은 late 로 쓰시면 됩니다.





보너스 표현!


그는 왼손잡이야.


>> He's a lefty.


( 비격식 표현입니다. )




이렇게도 표현할 수 있어요.


>> He's left-handed.










'[1일1영어]' 카테고리의 다른 글

미드로 영어공부 나 오늘 아무것도 못먹었어 영어로?  (2) 2018.05.11
미드로 영어공부 "긍정적으로 생각해~!" / "꿈깨라" 영어로는 뭐라고 할까요  (2) 2018.05.10
미드로 영어공부 "생각이 바뀌었어" 영어로 어떻게 말할까요  (2) 2018.05.09
미드로 영어공부 peel out / behind the wheel / custody / ransom demand  (4) 2018.05.04
미드로 영어공부 snatch / specifically / liaise with / have someone back  (2) 2018.05.01

출처는 tcpschool.com 입니다.


오늘은 HTML 레이아웃...


블로그나 티스토리 메인화면 꾸밀 때 활용하기 좋을듯






HTML 레이아웃 (Layout)




레이아웃 : 특정 공간에 여러 구성 요소를 보기 좋게 배치하는 작업


1. div 요소를 이용한 레이아웃



CSS 스타일을 쉽게 적용할 수 있음.




<!DOCTYPE html>

<html lang="ko">


<head>

<meta charset="UTF-8">

<title>HTML Layouts</title>

<style>

#header {

background-color:lightgrey;

height:100px;

}

#nav {

background-color:#339999;

color:white;

width:200px;

height:300px;

float:left;

}

#section {

          background-color:lightyellow;

width:200px;

text-align:left;

float:left;

padding:10px;

}

      #section2 {

              background-color:lightpink;

width:200px;

text-align:left;

float:left;

padding:10px;

}

#footer {

background-color:#FFCC00;

height:100px;

clear:both;

}

#header, #nav, #section, #section2 #footer { text-align:center; }

#header, #footer { line-height:100px; }

#nav, #section, #section2 { line-height:240px; }

</style>

</head>


<body>


<h1>div 요소를 이용한 레이아웃</h1>

<div id="header">

<h2>HEADER 영역</h2>

</div>

<div id="nav">

<h2>NAV 영역</h2>

</div>

<div id="section">

<p>SECTION 영역</p>

</div>

  <div id="section2">

<p>SECTION2 영역</p>

</div>

<div id="footer">

<h2>FOOTER 영역</h2>

</div>


</body>


</html>


>> 결과


section 영역이 왜 저렇게 아래가 남는지 모르겠다..ㅠ


오늘은 좀 어렵다...








2. HTML 5 레이아웃



<!DOCTYPE html>

<html lang="ko">


<head>

<meta charset="UTF-8">

<title>HTML Layouts</title>

<style>

header {

background-color:lightgrey;

height:100px;

}

nav {

background-color:#339999;

color:white;

width:200px;

height:300px;

float:left;

}

section {

width:200px;

text-align:left;

float:left;

padding:10px;

}

footer {

background-color:#FFCC00;

height:100px;

clear:both;

}

header, nav, section, footer { text-align:center; }

header, footer { line-height:100px; }

nav, section { line-height:240px; }

</style>

</head>


<body>


<h1>HTML5 레이아웃</h1>

<header>

<h2>HEADER 영역</h2>

</header>

<nav>

<h2>NAV 영역</h2>

</nav>

<section>

<p>SECTION 영역</p>

</section>

<footer>

<h2>FOOTER 영역</h2>

</footer>


</body>


</html>



>> 결과








3. table 요소를 이용한 레이아웃 



<!DOCTYPE html>

<html lang="ko">


<head>

<meta charset="UTF-8">

<title>HTML Layouts</title>

</head>


<body>


<h1>table 요소를 이용한 레이아웃</h1>

<table width="100%" style="text-align:center; border:none">

<tr>

<td colspan="2" style="background-color:lightgrey">

<h2>HEADER 영역</h2>

</td>

</tr>

<tr>

<td style="background-color:#339999; color:white; width:20%">

<h2>NAV 영역</h2>

</td>

<td style="height:200px; text-align:left">

<p>SECTION 영역</p>

</td>

</tr>

<tr>

<td colspan="2" style="background-color:#FFCC00">

<h2>FOOTER 영역</h2>

</td>

</tr>

</table>


</body>


</html>



>> 결과









출처 : TCP스쿨

'[1일1코딩]' 카테고리의 다른 글

코딩독학 HTML form 요소 2 feat. tcpschool  (2) 2018.05.15
코딩독학 HTML form 요소 1 feat. tcpschool  (0) 2018.05.14
코딩독학 HTML iframe 요소 feat. tcpschool  (2) 2018.05.10
코딩독학 HTML 블록과 인라인 feat. tcpschool  (0) 2018.05.09
코딩독학 HTML 테이블 feat. tcpschool  (0) 2018.05.04

+ Recent posts

티스토리툴바