기록

코딩독학 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스쿨

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

[1일 1코딩]  코딩독학 HTML 테이블  feat. tcpschool

오늘은 HTML 테이블!

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

tcpschool 사이트에서 보면서

창 두개 띄워 놓고 

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

HTML 테이블 (Table)

테이블 : 

여러 종류의 데이터를 보기 좋게 정리해서 보여주는 표

<table> 태그 사용

<tr> 태그 :  테이블에서 열 구분

<th> 태그 : 각 열의 제목, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬됨

<td> 태그 : 테이블의 열을 각각의 셀(cell)로 나눠줌

<body>

<h1>테이블 만들기</h1>

<table style="width:80%">

<tr style="background-color:hotpink">

<th style="color:white">1</th>

<th style="color:white">th 부분</th>

<th style="color:white">th 부분</th>

</tr>

<tr style="background-color:lightpink">

<td style="text-align:center">2</td>

<td style="text-align:center">td 부분</td>

<td style="text-align:center">td 부분</td>

</tr>

<tr style="background-color:beige">

<td style="text-align:center">3</td>

<td style="text-align:center">td 부분</td>

<td style="text-align:center">td 부분</td>

</tr>

</table>

</body>

>>결과

<tr>태그가 열을 구분해주는데

<tr>태그에 색을 입히면 세로로 색이 입혀지는게 아니라

가로로 입혀져서 왜 그렇지?하고 생각해보다가

구글링해보니깐

row number가 왼쪽 숫자로 표시해둔 1,2,3을 의미함

그러니까 첫번째 가로 행들은 모두 열번호 1번에 속함

그 다음은 열번호 2번...

그래서 <tr>태그로 했을 때 세로가 아닌 가로로 내용작성이 됨

옛날에 엑셀공부할 때도 맨날 헷갈렸었음ㅠㅠㅠㅋㅋㅋ

계속 생각해봐도 헷갈린다

그냥 외우는게 낫겠다 ^^...

CSS의 border 속성 : 테이블의 테두리 표현 가능

따로 명시하지 않으면 빈 테두리.

border 속성을 쓰면 테두리가 두줄씩 나옴.

한줄로 설정하려면 border-collapse 속성을 사용해야함.

<head>

<meta charset="UTF-8">

<title>HTML Tables</title>

<style>

table, th, td { border: 1px dashed blue ; border-collapse: collapse }

</style>

</head>

<body>

<h4 style = "color : hotpink">Border Collapse : 겹테두리 없애기</h4>

<table style="width:100%">

<tr style="background-color:lightblue">

<th>참치</th>

<th>고래</th>

<th>날치</th>

</tr>

<tr>

<td>상어</td>

<td>문어</td>

<td>꽁치</td>

</tr>

<tr>

<td>오징어</td>

<td>고등어</td>

<td>돌고래</td>

</tr>

</table>

</body>

>> 결과

테이블의 열(column) 합치기 : colspan 속성

테이블의 행(row) 합치기 : rowspan 속성

<head>

<meta charset="UTF-8">

<title>HTML Tables</title>

<style>

table, th, td {border: 1px solid green; border-collapse: collapse }

</style>

</head>

<body>

<h4 style="color:limegreen">테이블의 행 합치기</h4>

<table style="width:80%">

<tr>

<th>참치</th>

<th colspan="2">고래</th>

</tr>

<tr>

<td rowspan="2">상어</td>

<td>문어</td>

<td>꽁치</td>

</tr>

<tr>

<td>고등어</td>

<td>돌고래</td>

</tr>

</table>

</body>

>> 결과

테이블의 캡션 (caption) 설정 :

<caption> 태그 : 테이블 상단에 제목이나 짧은 설명을 붙일 수 있음.

<table>

<caption> 제목 </caption>

<tr>

           <td>내용 </td>

</tr>

</table>

출처 : TCP스쿨

[1일 1코딩]  코딩독학 HTML 리스트  feat. tcpschool

오늘은 HTML 리스트!

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

tcpschool 사이트에서 보면서

창 두개 띄워 놓고 

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

HTML 리스트 (List)

리스트 : 여러 요소들을 일렬로 나열한 목록이나 명단

1. 순서가 없는 리스트 : unordered list

요소는 <li>태그

CSS의 list-style-type 으로 마커를 다른 모양으로 변경할 수 있음.

- disc : 기본 bullet

- circle : 흰색 작은 원 모양

-square : 사각형 모양

[실습]

<h4 style="color:salmon">list-style-type</h4>

<ul>

                <li style="list-style-type: square"> <h3 style="color:gold"> square </h3></li>

<li style="list-style-type: disc"> <h3 style="color:pink"> disc </h3> </li>

<li style="list-style-type: circle"> <h3 style="color:magenta"> circle </h3> </li>

</ul>

[결과]

컬러 되나하고 해봤는데 다 되넼ㅋㅋ

yellow가 gold보다 더 쨍하다

2. 순서가 있는 리스트 : ordered list

CSS의 list-style-type 으로 마커를 다른 모양으로 변경할 수 있음.

- decimal : 숫자 (기본)

- upper-alpha : 영문 대문자

- lower-alpha : 영문 소문자

- upper-roman : 로마 숫자 대문자

- lower-roman : 로마 숫자 대문자

3. 정의 리스트 (definition)

용어의 이름은 <dt> 태그

용어의 정의는 <dd> 태그

[실습]

<h1>정의 리스트</h1>

<dl>

<dt>호박</dt>

<dd>- 박과의 한해살이 덩굴성 채소</dd>

<dt>상추</dt>

<dd>- 국화과의 한해살이 또는 두해살이풀</dd>

</dl>

[결과]

출처 : TCP스쿨

[1일 1코딩]  코딩독학 HTML 이미지  feat. tcpschool

오늘은 HTML 이미지!

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

tcpschool 사이트에서 보면서

창 두개 띄워 놓고 

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

이미지 삽입 태그 : <img>

<img src = "이미지 주소" alt = "대체문자열">

이미지의 크기 설정 : width, height

이미지의 테두리 설정 : border

<style>

    img {

        width:100%;

        border: 1px solid black;

    }

</style>

이미지에 링크 설정 : 

실습

오늘은 상콤한 제훈 사진으로 실습. ㅋㅋㅋㅋ

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>TCPSchool HTML Images</title>

</head>

<body>

<h2 style = "color : pink">이제훈 프로필로 이동</h2>

<a href="https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&q=%EC%9D%B4

%EC%A0%9C%ED%9B%88">

<img src="https://t1.daumcdn.net/cfile/tistory/9946E6345AE81E402D" alt="flag" style="width:320px; height:214px; border : 1px dotted blue">

</a>

<h4 style= "color:red">사진 클릭!</h4>

</body>

</html>

border 는 solid로 되어있었는데

점선도 될까 해서 dotted로 했는데 된닼ㅋㅋ

출처 : TCP스쿨