'컴퓨터공학 > 시스템 분석 및 설계' 카테고리의 다른 글

[이론]시스템 분석 및 설계(System Analysis & Design) Part.5  (0) 2017.06.30
[이론]시스템 분석 및 설계(System Analysis & Design) Part.4  (0) 2017.06.30
[이론]시스템 분석 및 설계(System Analysis & Design) Part.3  (0) 2017.06.30
[이론]시스템 분석 및 설계(System Analysis & Design) Part.2  (0) 2017.06.30
[이론]시스템 분석 및 설계(System Analysis & Design) Part.1  (0) 2017.06.30

<LINK>
a:link : 방문한적없는일반링크 
a:visited : 한번방문한적있는링크 
a:hover : 마우스가링크위에올라와있는경우 
a:active : 클릭된순간

<LIST>
ul : none, disc(까만 동그라미), circle(흰 동그라미), square
ol : decimal, upper-alpha, upper-roman, lower-alpha, lower-roman…

<BORDER> : 테두리 굵기
border-width : 굵기
border-style : 종류
border-color : 색
border : width style color; 이렇게 한번에 나열도 가능합니다.



※ 위 그림은, 경희대학교 컴퓨터공학과 신수용 교수님 수업자료에서 따왔습니다.



margin : 바깥여백
padding : 안 여백

'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Text, Font)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Background)  (0) 2017.07.05
PHP와 MySQL을 통한 Database(DB) 연동하기  (9) 2017.07.05

이번에 소개해 드릴 내용은 Text와 Font입니다!

1. TEXT
color: #FF4E00; 
글자 색깔을 지정할 수 있습니다! red, yellow, blue, green 이런 식으로 직접 입력해도
되지만, 색깔 표에서 볼 수 있는 #XXXXXX 형식도 지원합니다.

text-align: center, left, right, justify
글자 정렬에 관한 건데요! 가운데, 왼쪽, 오른쪽 그리고 양쪽 정렬에 대한 속성입니다.

text-decoration: none, overline, line-through, underline 
줄치기! 줄 없음, 글자 위에, 가운데에, 아래에 줄 치는 속성입니다.

text-transform: UPPERCASE, lowercase, Capitalize 
영어 문장에서 모두 대문자, 모두 소문자, 첫 글자만 대문자로 지정하는 속성입니다.

text-indent: 20px;
문장을 쓸 때, 들여 쓰기에 대한 속성입니다.

line-height: 300%;
문단이 있을 때, 줄 간격을 지정해주는 속성입니다.

이 속성들 중 몇 가지를 이용해보겠습니다!
저번 background 편에서 설명드렸던 html을 이용해서 css 파일에 코딩하겠습니다.




2. FONT
font-family: 폰트 이름 1, 폰트 이름 2, ...
적용하고 싶은 폰트 이름을 쓰는데 우선순위 별로 씁니다.
상대방의 PC에 폰트가 적용이 안될 수도 있으니.

font-style: normal, italic 
기울인 꼴로 쓰고 싶을 경우

font-size: 20pt
폰트의 크기를 지정해줍니다.

font-weight: normal, bold
폰트를 굵게 지정해주고 싶을 때!



이상! 글자 CSS에 관련된 포스팅이었습니다 :)


'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Link, List, Border)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Background)  (0) 2017.07.05
PHP와 MySQL을 통한 Database(DB) 연동하기  (9) 2017.07.05

CSS란? HTML에서 코딩과 style적용 코드를 분리해서
좀 더 용이하게 관리해주는 기능인데요.

Basic한 기능 몇가지에 대해 실습해보겠습니다!

우선, 꾸미려는 HTML파일이 있어야겠죠?
메모장으로도 만드실 수 있으나 전문 에디터를 사용하시는걸 권장합니다.
저는 Atom을 사용했습니다.
New File하신 뒤, 파일 이름 뒤에 ".html" 혹은 ".htm"을 추가하시면 html파일이 생성됩니다.




따라하기 쉬우시라고, 텍스트 파일로도 첨부하겠습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset='utf-8'> 
<title>CSS 실습하기</title> 
<link rel="stylesheet" type="text/css" href="css/2011103991.css" /> 
</head> 
<body> 
  <h1> 
    <a href="http://blog.naver.com/01064132170"> 
      범이 블로그 
    </a> 
  </h1> 
  <img src="이미지 주소"> 
  <ul> 
    <li>학력사항</li> 
      <ul> 
        <li> 군자초등학교 졸업 </li> 
        <li> 군자중학교 졸업 </li> 
        <li> 시흥고등학교 졸업 </li> 
        <li> 경희대학교 재학 </li> 
      </ul> 
    <li> 인삿말: 
      <blockquote> 
        안녕하세요! 블로그를 찾아주신 여러분들!<br> 
        지금은 CSS에 관해 소개드리고 있습니다.<br> 
        항상 행복하세요 :) 
      </blockquote> 
    </li> 
    <li>유튜브 채널: 
      <a href="https://www.youtube.com/channel/UCWnXzQikhdXq2NNW_C0i4dA" target="blank"> 
        개인 영상 모음 
      </a> 
    </li> 
    <li> 
      앨범 
      <ol> 
        <li><a href="https://www.instagram.com/justgoforit217/">인스타그램</a></li> 
        <li><a href="https://www.facebook.com/yongbum.kim2">페이스북</a></li> 
      </ol> 
    </li> 
  </ul> 
</body> 
</html>

이렇게 작성하시고 html파일을 실행시키면! 아래와 같은 화면을 웹 브라우저에서 확인할 수 있습니다.



음..그치만 뭔가 2% 부족한느낌?정도가 아니라
ㅋㅋ많이 휑하지요..
간단한 CSS문법을 통해 조금의 변화를 줘보겠습니다!

.css파일을 별도로 만드셔야합니다.

1. Background 이용




이렇게 3줄만 추가하셔도!




배경색이 바뀌어서 신선하네요, 이걸 응용해서 원하는 사진으로도 할 수 있습니다.




저는 아이스크림 사진으로 배경을 바꿔보겠습니다 ㅎㅎ




사진이 반복되는게 싫으시다면
background-repeat:no-repeat; 를 추가하시면 됩니다.

한 방향으로만 이미지를 반복하게 하고 싶으시면!
background-repeat:repeat-x; 
background-repeat:repeat-y;
이런 코드를 추가해 주시면 됩니다. 


'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Link, List, Border)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Text, Font)  (0) 2017.07.05
PHP와 MySQL을 통한 Database(DB) 연동하기  (9) 2017.07.05

오늘 배워볼 내용은

PHP서버 <=> 데이터베이스(Database)

구조에서

Data를 전송하는 방법입니다!

웹프로그래밍의 아주 심플한 첫 step이니

간단한 실습으로 먼저 스타트 하겠습니다!


먼저 필요한 준비물은 Autoset과 Atom입니다.


먼저 Autoset을 설치함으로 Apache(서버)와 MySQL(데이터베이스)이 자동으로 설치됩니다.



Autoset 실행만으로 서버와 Database를 실행시켜줍니다.

더 궁금하신 사항은 사이트에 방문하시길 바랍니다!

http://autoset.net/xe/



자 우선, 그럼 오토셋을 설치해야겠죠?

아래 링크가셔서 다운로드 받으시면 됩니다.

무료입니다! Free!

(각자 설치된 PC의 운영체제에 맞게 32bit 혹은 64bit로 설치하시기 바랍니다.)


http://autoset.net/xe/download_autoset_9_0_0


설치를 다 하신뒤, 실행시켰을 때의 모습입니다!




(웹서버만 실행되고 MySQL이 실행 안되실 때에는 재부팅 후, 바로 Autoset을 실행시키시거나
다른 DB프로그램과 충돌때문일 수 있으니 HeidiSQL이나 MariaDB같은건 지워주세요)

웹서버가 잘 돌아가고 있는지 확인을 위해!
크롬 브라우저를 실행 후 주소창에 127.0.0.1을 입력하세요.
아래와 같은 화면이 나온다면 정상!



좌측상단에 까만버튼 3개가 있죠?
2번째인 phpMyAdmin을 클릭하세요!


사용자명은 기본적으로 root라고 되어있습니다.
암호는 autoset 입니다. 로그인!



New를 누르신다음에
오른쪽 박스에 새로 만들 database이름을 적어줍니다.
저는 custom이라고 정했습니다.
데이터 정렬방식은 utf8_general_ci로 선택해주신 뒤,
만들기 버튼 클릭!
이렇게해서 custom 데이터베이스가 생성되었습니다!!
왼쪽 목록에서 확인할 수 있습니다.




왼쪽 목록에서 custom을 클릭하신 뒤,
새 테이블을 만들어야합니다.
저는 회원의 정보를 입력받기 위해서
info라는 테이블 이름을 주었고 컬럼은 3개만 지정했습니다.
(아이디,이름,나이)


화면과 같이 
custom_id, custom_name, custom_age
라고 지정하였습니다.
아이디와 이름은 문자이므로 VARCHAR,
나이는 숫자이므로 INT
길이는 모두 30으로 주었습니다.
데이터 정렬방식 모두 utf8_general_ci로 설정!

이로써, database 셋팅은 모두 끝났습니다.
이제 값이 들어오는걸 확인하면 됩니다.
.
.
.

서버랑 DB는 준비가 되어있으니!
이제 PHP편집기를 설치합니다.
다양한 프로그램이 있지만, 저는 Atom을 사용하기 때문에
Atom설치에 대해 안내해 드리겠습니다.
아래 링크로 가셔서 다운받으시면 됩니다. 무료!



두둥! 설치 후, 실행화면입니다.
왼쪽 오른쪽 모두 X버튼을 눌러서 닫아주시구요.
왼쪽에 public_html이라는 곳을 우클릭하셔서

1) New Folder -> Blog 입력
2) Blog 폴더 우클릭 -> New File -> main.php 입력
3) Blog 폴더 우클릭 -> New File -> dbconnection.php 입력
4) Blog 폴더 우클릭 -> New File -> post.php 입력
(뒤에 .php까지 꼭 치셔야 합니다.)

 dbconnection.php부터 설명드리겠습니다!
아래 코드를 복사해서 붙여넣기 하세요.

<?
function dbconn(){
$host_name="localhost";
$db_user_id ="root";
$db_name="custom";
$db_pw="autoset";
$connect=@mysql_connect($host_name, $db_user_id, $db_pw);
mysql_query("set names utf8", $connect);
mysql_select_db($db_name, $connect);
if(!$connect)die("연결에 실패".mysql_error());
return $connect;
}

//에러메세지 출력
function Error($msg)
{
  echo"
  <script>
  window.alert('$msg');
  history.back(1);
  </script>
  ";
  exit; //위 에러 메세지만 띄우기
}
?>

php는 <? ?>여기 안에다가 쓰시면 됩니다.
여러분이 위에서 차근차근 만드셨던 
db에 관한 정보를 넣어주시면 됩니다. 

저희 id는 root, pw는 autoset맞죠?
만든 db이름은 custom이구요.
연결이 안되었을 때 예외처리까지 해줍니다.
입력 후 Ctrl + S눌러서 저장합니다.

그 다음은! post.php로 이동합시다.

<?php
    include './dbconnection.php';
    $connect=dbconn();

    $userid=$_POST['custom_id'];
    $username=$_POST['custom_name'];
    $userage=$_POST['custom_age'];

    $query="INSERT into info(custom_id, custom_name, custom_age) values('$userid','$username','$userage')";
    mysql_query("set names utf8", $connect);
    mysql_query($query, $connect);
 ?>

 <script>
 windows.alert('DB로 전송 완료 !');
 location.href='./main.php'
 </script>

db연결 설정을 불러와서
$userid, $username, $userage라는 변수를 만든 뒤,
각 입력받은 값들을 POST합니다.
쿼리를 통해서 db에 값을 집어넣게 됩니다.
Ctrl+S를 눌러서 저장!

이제 main.php로 이동!

 
<html>
<head>
<title>Jake's DB TEST</title>
</head>
<body>
  <?
      include("./dbconnection.php");
      $connect=dbconn();
  ?>
  <form action='./post.php' name='review_table' method='post'>
<br>
<br>
<CENTER>DB로 전송할 값 입력받기</b></div><br>
<form action="" method="post">
<label>아 이 디 : </label><input type="text" name="custom_id" class="box"/><br>
<label>이    름 : </label><input type="text" name="custom_name" class="box"/></br>
<label>나    이 : </label><input type="text" name="custom_age" class="box"/>

<center><input type="submit" value="DB로 전송"/><br />

</form>
</body>

</html>

브라우저를 실행시켰을 때,
아이디, 이름, 나이를 입력받기 위한 폼을
HTML을 통하여 만들어줍니다.
Ctrl+S를 눌러서 저장!

자, 이제 크롬 브라우저를 실행시켜서
주소창에 127.0.0.1/blog/main.php 입력하고 엔터를 누릅니다.


이런 화면이 뜰텐데,
각각 아이디, 이름, 나이 순서대로 입력합니다.
그리고 DB로 전송 버튼을 클릭!

주소창이 127.0.0.1/blog/post.php로
이동하면서 빈화면이 뜰것입니다.
제대로 DB로 갔나 확인을 위해서는

주소창에 127.0.0.1/phpmyadmin 입력 후,
여기로 이동하셔서 DB를 확인하시면 됩니다.



짠! 이렇게 잘 들어온것을 확인하실 수 있습니다.
서버와 DB의 연결은 아주 기초적인 기초!
이 기능들을 잘 활용하면
무궁무진한 개발을 할수 있겠죠?

오늘도 좋은하루 되세요^^!


'컴퓨터공학 > 웹프로그래밍(HTML, CSS, Javascript)' 카테고리의 다른 글

[CSS]홈페이지를 stylish하게 꾸며보자!(Link, List, Border)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Text, Font)  (0) 2017.07.05
[CSS]홈페이지를 stylish하게 꾸며보자!(Background)  (0) 2017.07.05



1. 초음파 센서를 이용해서 일정범위 내 물체 인식 시 자동문
(문이 열려있을 경우에만 하얀색 LED 점등)

2. 화재감지 시, 엘리제를 위하여로 경보음

3. 현재 값(온도, 습도)이 임의로 정한 기준 값 범위 안에 있을 경우 LED 점등
(최적 온도 : 빨간 LED 점등, 최적 습도 : 파란 LED 점등)

4. 블루투스 통신을 이용하여 안드로이드 폰과 연동
4-1) 문 앞에 하얀색 LED를 ON/OFF 조작 가능(인터폰 봐야 될 경우 신원 확인시)
4-2) 초음파 센서 앞에 물체가 없더라도 문 OPEN/CLOSE 조작 가능

모형으로 만든 집이지만 인테리어좀 이쁘게 하고 싶었는데
시간이 너무 촉박해서ㅠㅠ 난장판이네요..

'컴퓨터공학 > 로봇 소프트웨어(Arduino)' 카테고리의 다른 글

IoT를 이용한 병실관리  (0) 2017.11.29
[아두이노(Arduino)]Ardu-ez Project  (0) 2017.07.05
[아두이노(Arduino)]실습 영상  (0) 2017.07.05
[EV3 Lego]종이비행기 발사대(A paper airplane launcher)  (0) 2017.07.05
[이론]EV3 LEGO PROGRAMMING  (0) 2017.07.05



온도, 습도, 가스 센서를 이용하여 받아온 값을
LCD에 display해줍니다.
서보모터를 환풍기처럼 개조하여 센서값의 범위 외에 해당할 경우
서보모터가 작동하게 됩니다.

센서값의 범위에 따라 자동으로 작동도 하지만 user가 원할경우
수동으로 조절도 가능하게 버튼을 이용한 기능도 추가하였습니다!
1. 온도/습도/가스 제한 값 수동으로 조절 가능.
2. 범위 이외의 값이므로 환풍기 작동시 수동 OFF 가능.

부엌이나 실내에 적용될 수 있는 IoT에서 아이디어를 땄습니다.

'컴퓨터공학 > 로봇 소프트웨어(Arduino)' 카테고리의 다른 글

IoT를 이용한 병실관리  (0) 2017.11.29
[아두이노(Arduino)]IoT@home Project  (0) 2017.07.05
[아두이노(Arduino)]실습 영상  (0) 2017.07.05
[EV3 Lego]종이비행기 발사대(A paper airplane launcher)  (0) 2017.07.05
[이론]EV3 LEGO PROGRAMMING  (0) 2017.07.05



1초마다 값이 떨어졌다가 증가하게하여 밝기를 조절하는 LED!




위에 버튼을 누르면 파란불이, 밑에 버튼을 누르면 노란불이 나오는 구조입니다ㅎㅎ




7세그먼트를 이용해서 1씩 증가하기! 엘레베이터 올라가는 것 같네요.



'컴퓨터공학 > 로봇 소프트웨어(Arduino)' 카테고리의 다른 글

[아두이노(Arduino)]IoT@home Project  (0) 2017.07.05
[아두이노(Arduino)]Ardu-ez Project  (0) 2017.07.05
[EV3 Lego]종이비행기 발사대(A paper airplane launcher)  (0) 2017.07.05
[이론]EV3 LEGO PROGRAMMING  (0) 2017.07.05
3. 광센서를 이용해 야간등을 만들어보자(Cisco Lab 2.2.3.2 - Photo Resistor using Redboard and Arduino IDE)  (0) 2017.06.30



EV3 프로젝트 종이비행기 발사대

'컴퓨터공학 > 로봇 소프트웨어(Arduino)' 카테고리의 다른 글

[아두이노(Arduino)]Ardu-ez Project  (0) 2017.07.05
[아두이노(Arduino)]실습 영상  (0) 2017.07.05
[이론]EV3 LEGO PROGRAMMING  (0) 2017.07.05
3. 광센서를 이용해 야간등을 만들어보자(Cisco Lab 2.2.3.2 - Photo Resistor using Redboard and Arduino IDE)  (0) 2017.06.30
2. RGB LED를 이용해 모든 색깔 표현하기(Cisco Lab 2.2.2.6 - RGB LED using RedBoard and Arduino IDE)  (0) 2017.06.30



'컴퓨터공학 > 로봇 소프트웨어(Arduino)' 카테고리의 다른 글

[아두이노(Arduino)]실습 영상  (0) 2017.07.05
[EV3 Lego]종이비행기 발사대(A paper airplane launcher)  (0) 2017.07.05
3. 광센서를 이용해 야간등을 만들어보자(Cisco Lab 2.2.3.2 - Photo Resistor using Redboard and Arduino IDE)  (0) 2017.06.30
2. RGB LED를 이용해 모든 색깔 표현하기(Cisco Lab 2.2.2.6 - RGB LED using RedBoard and Arduino IDE)  (0) 2017.06.30
1. LED를 깜빡여보자(Cisco Lab 2.2.2.5 - Blinking an LED using RedBoard and Arduino IDE)  (0) 2017.06.30

BE THE FIRST PENGUIN

티스토리툴바