기록

코딩독학 HTML (출처 : tcpschool.com)

온라인으로 바로 코딩 실습이 가능한 티씨피스쿨의 내용을 필사해서 결과보기하는 식으로 연습 중

input 요소의 속성 : 사용자가 입력하는 방식을 다양하게 제어할 수 있음

1. value 속성

입력 필드 (input field)에 나타나는 초깃값 설정

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과"><br>

</form>

결과 >>

2. readonly 속성

사용자가 수정할 수 없는 입력 필드

disabled 와 다르게 전송하면 초깃값이 서버로 전송됨

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>

</form>

결과 >>

3. disabled 속성

사용자가 입력필드를 아예 사용할 수 없음

클릭 불가능

전송 버튼을 눌러도 초깃값이 서버로 전송되지 않음

<form>

    이름 : <br><input type="text" name="student_name"><br>

    학번 : <br><input type="text" name="student_id"><br>

    학과 : <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>

</form>

결과 >>

4. maxlength 속성

입력 필드에 입력할 수 있는 문자의 최대 길이를 설정함

<form>

    이름 : <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>

    학번 : <br><input type="text" name="student_id"><br>

</form>

결과 >>

5.  size 속성

input 요소의 크기 설정

maxlength와 다르게 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미함

	<form action="/examples/media/request.php">
		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 30" size="30"><br>
		학번 : <br>
      
      		이름 : <br>
		<input type="text" name="student_name" value="value 값 : 50" size="50"><br>
		학번 : <br>
		<input type="text" name="student_id"><br><br>
		<input type="submit" value="전송">
	</form>

결과 >>

내용 출처 : 티씨피스쿨 (tcpschool.com)

돌아온 코딩 공부

너무 오랜만이다ㅎ

출처 : tcpschool.com

온라인으로 실습이 바로 가능해서 편함.

tcpschool 내용을 필사해서 결과보기 하는식으로 연습..

1. 선택 입력 select 요소

하나의 옵션만 입력 받을 수 있음

selected 속성으로 미리 선택되는 옵션 지정 가능함

	<h1>선택 입력</h1>
	<p>다음 중 여러분이 가장 좋아하는 과일을 골라주세요.</p>
	<form>
		<select name="fruit">
			<option value="apple"> 사과
			<option value="orange" selected> 귤
			<option value="strawberry"> 딸기
			<option value="peach"> 복숭아
		</select>
	</form>

결과 >>

2. 문장입력 textarea

여러 줄의 텍스트 입력받기

rows, cols 속성을 이용해 크기 지정 가능함

	<h1>문장 입력</h1>
	<p>여러분의 부모님께 하고 싶은 말을 적어보세요.</p>
	<form>
		<textarea name="message" rows="5" cols="30">여기에 적으세요.</textarea>
	</form>

결과 >>

3. 버튼 button

버튼을 누르면 알림창이 뜸

<h1>버튼 입력</h1>
	<button type="button" onclick="alert('버튼을 클릭하셨군요!')">버튼을 눌러주세요.</button>

결과 >>

4. 전송 버튼 submit

데이터를 폼 핸들러로 제출

폼 핸들러 : 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지

form 요소와 action 속성을 이용

<h1>전송 버튼</h1>
	<form action="/examples/media/request.php">
		어릴 때 자신의 별명을 적어주세요 : <br>
		<input type="text" name="nickname" value="별명"><br><br>
		<input type="submit" value="전송">
	</form> 
	<p>별명을 적으신 후에 전송 버튼을 눌러보세요!</p>

결과 >>

5. 필드셋 fieldset

form 요소와 관련된 데이터들을 하나로 묶어줌

elgend 요소는 filedset 요소 안에서만 사용 가능, fieldset 요소의 제목을 나타냄

	<h1>필드셋</h1>
	<form action="/examples/media/request.php">
		<fieldset>
			<legend>입력 양식</legend>
			이름 : <br>
			<input type="text" name="username"><br>
			이메일 : <br>
			<input type="text" name="email"><br><br>
			<input type="submit" value="전송">
		</fieldset>
	</form>

결과 >>

출처 : 티씨피스쿨 (tcpschool.com)

출처는 tcpschool.com 입니다.

코딩독학 ~~

오늘은 HTML form 요소 2편 ~~~~~

오늘은 너무 졸리드아아아아아앙

세상 만사가 귀찮다아아아아

그래도쬐끔만 해바야지...................

텍스트 입력 받기 : <input> 태그 text 속성

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

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

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

</form>

비밀번호 입력 받기 : <input> 태그 password 속성

<h1 style="color:red">비밀번호 입력</h1>

<form style="color:magenta">

사용자 : <br>

<input type="text" name="username"><br>

비밀번호 : <br>

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

</form>

>> 결과

<h1>라디오 버튼</h1>

<p>감자튀김을 좋아하시나요?</p>

<form>

<input type="radio" name="potato" value="yes" checked> 예 <br>

<input type="radio" name="potato" value="no"> 아니오 <br>

</form>

>> 결과

체크박스 : <input> 태그 checkbox 속성 (여러개 옵션 선택)

<h1>체크박스</h1>

<p>다음 중 재밌고 내용이 알찬 강좌를 모두 골라주세요.</p>

<form>

<input type="checkbox" name="lecture" value="html" checked> HTML <br>

<input type="checkbox" name="lecture" value="css"> CSS <br>

<input type="checkbox" name="lecture" value="java"> JAVA <br>

<input type="checkbox" name="lecture" value="cpp" disabled> C++

</form>

>> 결과

파일 선택 : <input> 태그 file 속성 (파일 전송받기)

<h1>파일 선택 박스</h1>

<p>여러분이 가장 행복했던 날의 사진을 선택해 주세요.</p>

<form>

<input type="file" name="upload_file" accept="image/*">

</form>

>> 결과

출처 : TCP스쿨

코딩독학 !

출처는 tcpschool.com 입니다.

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

Form 요소

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

사용자가 입력한 데이터를 서버로 보낼 때도 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스쿨

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

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

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

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.

출처는 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스쿨

지난 씬에 이어서..

오늘은 릭스비의 불평이 빛나는 씬을 공부해봅시다

지난 씬에서는 초와 릭스비가 얘기하면서 사건현장으로 가는 중이었죠.

이번에는 사건현장에서 조사중이던 반펠트와 제인과 만나서 대화하는 씬입니다.

Van Pelt : Hey. Forensics are already running the prints. Maybe we'll get a quick match.

Rigsby : We could never get that lucky. 

Now we're gonna be talking to the hand for a long while.

Jane : Why so glum? A case is a case.

Rigsby : We're in the middle of nowhere. It's windy as all hell.

I haven't eaten anything. Dismemberments are a bitch. 

You spend months assembling the victim. There's always a piece missing.

Vanpelt : 오셨어요? (Hey : 인삿말) 감식반이 이미 지문인식 검사를 하고 있어요. 아마 곧 결과 받을 것 같아요.

Rigsby : 우리가 그렇게 운이 좋을리가 없지. 이제 당분간은 손이랑 오래도록 대화해야겠네.

Jane : 왜그렇게 침울해? 사건은 사건이지.

Rigsby : 우리 지금 어디인지도 모르는 곳에 있잖아요. (허허벌판에 있잖아요) 바람은 아주 개같이 불고. 저 오늘 아무것도 못먹었어요. 

               토막살인은 진짜 거지같아요. 몇 달동안 피해자를 조각조각 맞춰도 꼭 한 조각이 어디갔는지 안보인다니까요.

      (꼭 한군데가 안맞아요 / 한 조각이 없어요)

ㅋㅋㅋㅋ릭스비 왜그렇게 화가 많아...?

시즌 초반에 릭스비는 못먹으면 예민해지는 캐릭터였던 것 같아요

후반에는 기억이 잘 안나는뎈ㅋㅋㅋ 초반에는 항상 뭔갈 먹고 있었음

한 단어만 하려고 했는데

좋은표현인 것 같아서 세개 할게요ㅋㅋㅋ

1. for a long while

Now we're gonna be talking to the hand for a long while.

for a long while : 오랫동안

그냥 통째로 외우기 좋은 표현

오랫동안 ! 외워봅시다

2. in the middle of nowhere

We're in the middle of nowhere.

참 신기한 표현이죠.

해석하기도 어려워요

관용적 표현으로 외딴 곳( 인적이 드문 곳) / 허허벌판 이라는 뜻이라고 합니다.

대화체로는 잘 안쓰이는 표현같아서

위에서는 저한테 와닿는 느낌으로 해석해보았습니다.

in the middle of는 자주 쓰이는 표현인데

한창 ~하는 중에 라는 표현으로 많이 쓰여요

I'm in the middle of a class : 나 지금 수업듣는 중이야

I'm in the middle of something : 나 뭐 좀 하고 있어

3. I haven't eaten anything. 

나 아직 아무것도 못먹었어 / 오늘 아무것도 못먹었어.

이것도 통째로 외워봅시다.

예민한 릭스비처럼

I haven't eaten anything.

ㅋㅋㅋㅋㅋ

오늘도 미드 멘탈리스트에서 영감을 받아 포스팅을 작성합니다.

ㅎㅎ

멘탈리스트 시즌1 에피소드 6 오프닝씬입니다.

Cho : That damn GPS is gonna put it in California. I know it.

Rigsby : Eh, Think positive. It's Nevada. Definitely Nevada.

Cho : You're dreaming. We will catch it. A stone cold mystery.

토막살인 사건의 현장!

홀로 남겨진 외로운 도토리같은 한쪽 손...

초와 릭스비는 CBI 소속인데요

이 손이 캘리포니아와 네바다의 경계에 있어서

어느 쪽으로 더 가까운지를 체크하러 가는 중입니다.

초가 그 손이 캘리포니아에 가까울 것이라고 얘기하자

릭스비가 긍정적으로 생각하자고 하는 장면입니다.

"저 빌어먹을 GPS가 캘리포니아로 인식하겠지 안봐도 훤하다."

"아, 긍정적으로 생각하세요. 네바다에요, 확실히 네바다죠"

"꿈깨라. 우리가 수사할테니까.. 완전히 미스테리한 사건을"

시즌 1이라 그런지

초의 캐릭터가 너무 다릅니닼ㅋㅋㅋ

제가 아는 초는 말을 저렇게 하는 사람이 아닌데요....

정주행하다 깜짝놀랐어욬ㅋㅋㅋ 

저는 이 오프닝씬도 참 좋아합니다... ^^

뒤에 더 보시면 릭스비, 반펠트, 제인의 캐릭터가 확실히 나오는 장면이라서요.

초는 캐릭터가 많이 바뀌었지만ㅋㅋㅋㅋ

긍정적으로 생각해~!

긍정적으로..

동사를 꾸며주는 게 부사기 때문에

Think positively 가 문법에 맞는게 아니냐고 생각하실 수도 있어요

저도 이게 의문이에요

ㅋㅋㅋㅋ

찾아보니 자동사로 쓰일 때는 부사가 아닌 형용사가 나와야한다는 얘기도 있구..둘다 맞다는 얘기도 있는데요

영어표현에서는 부사를 잘 안쓴다고 하네요

Think positive 가 더 자연스러운 표현이라고 합니다.

발음하기 더 쉬워서 일지도?

다음 꿈깨라.

"You're dreaming."

직역하면 넌 꿈꾸고 있어.

ㅋㅋㅋㅋ

"말도 안되는 소리하지마. / 꿈같은 소리하고 있다." 등 여러가지로 해석할 수 있겠네용

[1일 1코딩]  코딩독학 HTML iframe 요소 feat. tcpschool

오늘도 tcpschool로 코딩실습

가즈아

iframe : inline frame

해당 웹페이지 안에 다른 웹페이지를 삽입할 수 있음

테두리는 style의 border 속성 이용

테두리 없애고 싶으면 border 값 >> none

<h1 style = "color:orange">iframe태그를 이용한 웹 페이지 삽입</h1>

<iframe src="/css/intro" style="width:80%; height:150px; border: 3px dashed orange"></iframe>

<h1 style = "color:green">iframe의 테두리 삭제</h1>

<iframe src="/css/intro" style="width:80%; height:150px; border:none"></iframe>

>> 결과

iframe 요소의 페이지 변경하기

<a>태그의 target 속성과 iframe의 name 속성을 같게 설정해서 링크를 눌렀을 때 iframe의 페이지를 변경할 수 있도록 함.

링크 때 공부했던 것도 복습해봤다.

자꾸 까먹음...

<head>

<meta charset="UTF-8">

<title>HTML Iframes</title>

  <style>

a:link    { color: blue; }

a:visited { color: red; text-decoration: none }

a:hover   { color: yellow; text-decoration: none }

a:active  { color: gray; text-decoration: none }

</style>

</head>

<body>

<h2>iframe 요소의 페이지 변경하기</h2>

<iframe src="/css/intro" name="frame_target" style="width:100%; height:300px"></iframe>

<p><a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a></p>

<p>위의 링크를 클릭하면 iframe 요소의 페이지가 다른 페이지로 변경돼요!</p>

</body>

>> 결과

프레임셋(frameset) :

하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있음

종료 태그가 없음

noframes 요소는 해당 브라우저가 frame요소를 지원하지 않을 때 보여지는 문자열

크기를 표시할 때 * 을 쓰면 나머지 칸을 다 차지하는 것 같음.

noresize를 명시하지 않으면 사용자가 마음대로 페이지 크기를 조절할 수 있음.

수직 프레임셋 :

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>HTML Frames</title>

</head>

<frameset cols="20%,20%,*">

<frame name="left" src="/html/intro"/>

<frame name="center" src="/css/intro"/>

<frame name="right" src="/php/intro"/>

<noframes>

<body>

이 브라우저는 frame태그를 지원하지 않습니다!

      <!--> frame태그를 지원하지 않는 브라우저에서 보이는 메시지 <-->

</body>

</noframes>

</frameset>

</html>

>> 결과

수평 프레임셋 :

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>HTML Frames</title>

</head>

<frameset rows="20%,60%,20%">

<frame name="top" src="/html/intro" noresize="noresize" />

<frame name="center" src="/css/intro" noresize="noresize" />

<frame name="bottom" src="/php/intro" noresize="noresize" />

<noframes>

<body>

이 브라우저는 frame태그를 지원하지 않습니다!

</body>

</noframes>

</frameset>

</html>

>> 결과

출처 : TCP스쿨

[1일 1코딩]  코딩독학 HTML 블록과 인라인  feat. tcpschool

오늘은 HTML 블록과 인라인!

실습해본거 옮겨적기...

tcpschool 사이트에서 보면서

창 두개 띄워 놓고 

바로 바로 베끼면서 코딩실습하는중

HTML 블록과 인라인

HTML 요소의 타입 : 

HTML의 모든 요소는 display 속성을 가짐

display 속성은 웹 브라우저에서 해당 요소가 어떻게 보이는지를 결정함

1. 블록 (block)

display 값이 블록인 요소는 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함.

<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됨.

<h1>display 속성값 : 블록</h1>

<p style="border: 3px solid pink">

p요소는 display 속성값이 블록인 요소입니다.<br>

        p, div, h, ul, ol, form 태그 : display 속성값이 블록임.

</p>

       <br><br><br>

        <h1>div요소를 이용한 스타일 적용</h1>

  <div style="background-color:beige; color:gray">

<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여

         한 번에 스타일을 적용할 수 있습니다.</p>

  </div>

>> 결과

2. 인라인 (inline)

새로운 라인에서 시작하지 않고, 너비도 해당 라인 전체가 아닌 HTML 요소의 내용만큼만 차지함.

span 요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용함.

<div style = "border : 1px dotted lightgray">

<h2>display 속성값 : 인라인</h2>

<p><span style="background-color:lightgrey; color:white">span요소</span>는 display 속성값이 인라인인 요소입니다.</p>

    <p>span, a, img 태그는 display 속성값이 인라인임.</p>

     </div>

  <br><br>

    <h2>span요소를 이용한 스타일 적용</h2>

<p>이렇게 

      <span style="border: 1px dashed blue">span요소로 텍스트의 <strong>일부분</strong></span>

만을 따로 묶은 후에 스타일을 적용할 수 있음.</p>

>> 결과

출처 : TCP스쿨