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


>> 결과








라디오 버튼 : <input> 태그 radio 속성 (한개의 옵션 선택)

모든 input요소의 name 속성이 같아야 함.




<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 요소 사용.



<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스쿨

출처는 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 사이트에서 보면서


창 두개 띄워 놓고 


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






이미지 삽입 태그 : <img>


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



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


이미지의 테두리 설정 : border




<style>

    img {

        width:100%;

        border: 1px solid black;

    }

</style>


이미지에 링크 설정 : 


<a href="링크주소" target="_blank">

    <img src="사진주소" alt="flag" style="width:320px; height:214px">

</a>




실습






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




<!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스쿨








[1일 1코딩]  코딩독학 HTML 링크  feat. tcpschool





오늘은 HTML 링크!




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





tcpschool 사이트에서 보면서


창 두개 띄워 놓고 


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






링크 : <a> 태그


<a href = "링크주소"> HTML 링크 </a>




target 속성 : 


링크로 연결된 문서를 어디에서 열지 명시함.


_blank : 링크로 연결된 문서를 새 창이나 새 탭에서 염.


_self : 현재 프레임에서 염 (기본)


_parent : 부모 프레임에서


_top : 현재 창의 가장 상위 프레임에서


프레임 이름 : 지정된 프레임에서





링크의 상태 : 


link : 방문한 적이 없는 상태 (기본)


visited : 한 번이라도 방문한 적이 있는 상태


hover : 링크 위에 마우스를 올려놓은 상태


active : 링크를 마우스로 누르고 있는 상태




페이지 책갈피 : 


<a> 태그의 name속성 이용


가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성


그 다음 작성한 name 값을 이용하여 <a>태그에서 링크를 걸기


<a href = "#bookmark"> <p>다음으로 이동</p></a>


<a name = "bookmark"</a> <p>여기로</p>







앞에서 했던 내용이랑 오늘 공부한 거랑

응용해서 한 실습 공유합니다 ㅋㅋㅋ


재미있꾼




<head>

<meta charset="UTF-8">

<title>HTML Links</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>




<h1 style="color:silver">페이지 책갈피</h1>

<a href="#book"><p>북마크를 해보자</p></a>

        <a href="#book2"><p>한번 더 해보자</p></a>

   <a href="http://www.tistory.com" target="_blank"><h1>티스토리로 이동</h1></a>

  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  


<h1 style="color:pink"><a name="book"></a>여기로</h1>


  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  <h1 style="color:red"><a name="book2"></a>여기로</h1>

  

  

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  <h4>여기가 아니고</h4>

  

  

</body>

  



>>결과 한번 확인해보세욤  >> 클릭


제가 쓴 코드 복붙해보시면 됩니당





출처 : TCP스쿨









[1일 1코딩]  코딩독학 HTML 색  feat. tcpschool





오늘은 HTML 색!



내가 제일 좋아하는 스타일 꾸미기



난 이런게 제일 재미있다...


왜냐면..


쉬우니까... ^^



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





tcpschool 사이트에서 보면서


창 두개 띄워 놓고 


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











HTML 색상 표현에는 세 가지 방법이 있다.






1. 색상 이름



색상이름으로 표현할 수 있는 것은 16개밖에 없는가보다.






<태그이름 style = "속성이름 속성값">


배경색 변경


>> 속성 : background-color



글자색 변경


>> 속성 : color



글자 크기 변경


>> 속성 : font-size



문단 정렬 변경


>> 속성 : text-align




<h1 style="color : olive"> 색상 이름으로 표현된 올리브색 </h1>





>> 결과








2. RGB 색상값



Red / Green / Blue 혼합


0부터 255까지의 범위


(Red, Green, Blue) 형태



숫자 조합해서 색상 만드는 재미가 있다 ㅋㅋ






<h1 style = " color rgb(0,0,255)"> blue </h1>


<h1 style color : rgb(0,0,0)"> black </h1>


<h1 style color : rgb(255,100,100)"> peach </h1>


<h1 style color : rgb(150,125,200)"> light purple </h1>






>> 결과









3. 16진수 색상값





RGB 색상값을 16진수로 변환.


각각의 기본색은 00 ~ FF 까지 값을 가짐


빨간색 rgb(255,0,0) 은


#FF0000



네이버치면 색상표 나오긴하는데


16진수 다시 공부해바야겠다








<h1 style =" color : #0000FF"> blue </h1>

<h1 style =" color : #00C000"> green </h1>

<h1 style =" color : #FFB2D9"> pink </h1>

<h1 style =" color : #FBFF90 ; background-color : black"> lemon </h1>

<h1 style =" color : #FF8000"> orange </h1>






>> 결과












출처 : TCP스쿨









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





오늘은 HTML 스타일!


내가 제일 좋아하는 스타일 꾸미기



난 이런게 제일 재미있다...


왜냐면..


쉬우니까... ^^



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





tcpschool 사이트에서 보면서


창 두개 띄워 놓고 


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







<태그이름 style = "속성이름 속성값">


배경색 변경


>> 속성 : background-color



글자색 변경


>> 속성 : color



글자 크기 변경


>> 속성 : font-size



문단 정렬 변경


>> 속성 : text-align



<!DOCTYPE html>


<html lang="ko">


<head>


<meta charset="UTF-8">


<title>HTML Styles</title>


</head>



<body style = "background-color #33CCFF">



<h1 style="background-color pink; font-size : 18pxtext-align right">


style 속성


</h1>



</body>


</html>




>> 결과













출처 : TCP스쿨










의식의 흐름으로 써보는 짧은 생각....과 유용한 사이트 추천







바야흐로 4차산업혁명시대가 왔다...



인공지능의 발전이 내 생각보다 훨씬 빠르게 진행되고 있는 것 같다


이세돌과 알파고의 대결로 한창 얘기가 많을때까지도 그냥 그래..아무래도 기계로 돌리는게 사람보다 낫지 했었는데


요즘은 좀 무섭다...ㅋㅋㅋ 와 이렇게까지 발전했다고? 하는 생각이 든다.


요즘은 KT 기가지니, 아마존의 알렉사, 카카오 미니, 네이버 웨이브 등 인공지능 스피커도 다양하더라.


최근 나오는 로봇들은 퀄리티도 생각보다 너무 좋고...



로봇한테 일자리 안뺏기고 오래오래 먹고살려면


코딩을 조금이라도 알아야할 것만 같은 기분이 든다.



의식의 흐름으로 ..쓰다가 생각난 아마존의 알렉사 슈퍼볼 광고


영어공부하다가 발견한 광고인데 재미있음ㅋㅋㅋㅋ





해석은 유튜버 소피반님의 "쓸만한 영어 - TV광고로 ~ "의 영상을 참고하세용





아무튼 최근에 코딩교육 의무화도 되었고 4차산업혁명에 관한 말들이 많으니..


문과생들 사이에서도 코딩공부하는 사람들이 꽤 많다.


아무래도 문과생은...답이없다...



하지만....융합의 시대가 아닌가...

문과생이 코딩공부하면...시너지효과가 좋다고하니..... 열심히 해보자.....ㅠ



컴활 딸때도 토나오는줄 알았는데...




마무리도 의식의 흐름으로 ......

코딩독학하려고 검색하다가 찾은 사이트 공유합니당








코딩독학 / 코딩교육 유용한 사이트 정리



자바 / 파이썬 / C언어 / 자바스크립트 등 프로그래밍언어를 공부할 수 있는 곳 위주


그리고 코딩실습 가능한 위주로 모았습니다.


코딩사이트 찾다보니까 초등코딩 / 중등코딩교육 사이트도 많이 나와서 같이 정리해봤어요! 




이론교재 + 실습 : tcpschool.com

이론교재 + 실습 : www.w3schools.com

이론교재 + 실습, 그림이 너무 귀여움ㅠ : codeclubprojects.com

CSS 이론 + 게임 : flukeout.github.io

이론교재 : poiemaweb.com

이론강의 : www.codeschool.com

이론강의 + 실습 : edu.goorm.io

이론강의 + 실습 : progate.com

이론강의 : inflearn.com

이론강의 : www.bbc.co.uk/schools/0/computing

블럭코딩 : playentry.org

블럭코딩 : hourofcode.com

소프트웨어 교육 : playsw.or.kr

소프트웨어 교육 : www.software.kr













+ Recent posts