디버그

문제가 생겼을 때 찾을 수 있게


JavaScript 에서 에러

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

  </head>
  <body>
    <script type="text/javascript">
      doccument.write("Hello world");
    </script>
  </body>
</html>


document 라고 써야 하는데 doccument 라고 썼을 때, 웹브라우저의 도움을 받으면 오타를 쉽게 찾을 수 있다. 

크롬 -> 오른쪽 상단의 세로로 점 세개 클릭 -> 도구 더보기 -> 개발자 도구 -> Console 클릭




위와 같은 에러 화면 확인 가능 


php 에서 에러

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

  </head>
  <body>
    <script type="text/javascript">
      document.write("Hello world");
    </script>
    <?php
        

  </body>
</html>


위와 같이 php를 닫기를 안해주었다. 그러면

 


이러한 화면이 나온다. 에러를 찾는 방법은 

Atom -> File -> Openfile -> Wampstack -> apache2 -> logs -> error.log 클릭

txt 중에서 가장 밑에 있는 내용이 가장 최근에 발생한 error. 

[Mon Dec 18 20:02:23.691878 2017] [php7:crit] [pid 8896:tid 924] [client ::1:63567] PHP Parse error:  syntax error, unexpected '<', expecting end of file in C:\\Bitnami\\wampstack-7.1.12-0\\apache2\\htdocs\\phpjs\\3.php on line 14

이러한 에러메세지를 확인하고 에러 수정 가능 하다. 


보충수업 - error를 찾아서 보지 말고 error메세지를 화면에 바로 띄우게 해주기.

php.ini를 연다. (php폴더 안에 있다.)

Ctrl + F 로 display_errors 를 연다. 

477라인의 display_errors 를 On으로 바꿔준다. 

wamp-manager에서 Manage Servers에서 Restart를 누른다.   






















저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

자바스크립트, PHP로 로그인 기능 구현하기  (0) 2017.12.19
변수  (0) 2017.12.18
데이터타입과 연산자  (0) 2017.12.18
웹 페이지에 코드 삽입하기  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
데이터타입과 연산자

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>javascript</h1>
    <script>
      document.write(10+10);
      document.write("10"+"10");
    </script>
    <h1>php</h1>
    <?php
      echo 10+10;
      echo "10"+"10";
      ?>
  </body>
</html>


결과

javascript

201010

php

2020

-> Javascript 는 문자열 덧셈을 붙이는 것으로 하고 php 는 숫자로 바꿔서 덧셈 연산을 한 다음 출력한다. 

php에서 문자열끼리 더하고 싶다면 . 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>javascript</h1>
    <script>
      document.write(10+10);
      document.write("10"+"10");
    </script>
    <h1>php</h1>
    <?php
      echo 10+10;
      echo "10"."10";
      ?>
  </body>
</html>

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

변수  (0) 2017.12.18
디버그  (0) 2017.12.18
웹 페이지에 코드 삽입하기  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
웹 페이지에 코드 삽입하기

우선 htdocs에 phpjs 라는 폴더를 만든다. 

그 안에 1.php파일을 만든다.

1.php에 Hello world를 입력하고 

 localhost/phpjs/1.php 에 들어가보면 Hello world 가 출력되는 것을 확인할 수 있다. 

다른 방법으로 기본 형식에 맞춰서 실행시켜 본다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

  </head>
  <body>
    Hello world
  </body>
</html>


크롬에서 출력된 화면에 오른쪽 클릭하고 페이지 소스보기를 클릭하면 

작성한 코드를 그대로 보여준다. 


<?php ... ?> : php에 대한 내용이 들어간다. (HTML 태그는 아니고 php만의 독특한 형식이다.)

php 코드 : echo => 그대로 출력해주는 역할.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

  </head>
  <body>
    <?php
      echo "Hello world";
     ?>
  </body>
</html>


이렇게 입력하고 

소스보기를 클릭하면 위와 똑같게 나오지 않는 것을 확인할 수 있다. 

=> <?php 사이에 있는 것들은 php 엔진(=인터프리터) 에 의해 내부 코드가 웹페이지에 포함되게 되기 때문이다. 

또다른 예시

<?php
      echo 10 + 10;
     ?>

소스보기로 본 결과

20

==> 무언가를 더하는 작업. HTML이나 CSS 에서는 불가능한 일이지만 PHP 에서는 가능한 일.


JavaScript를 삽입하기. 

script 태그를 이용해서 삽입 가능하다. 

<script>
       document.write("Hello world");
</script>

JavaScript 는 소스보기를 하면 작성한 내용 그대로 나타나는 것을 확인할 수 있다.


차이가 발생하는 이유

php => Server Side 언어이기 때문에 결과만 출력 (서버)

JavaScript => 웹 브라우저에서 실행되는 언어이기 때문이다. (클라이언트)


저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

디버그  (0) 2017.12.18
데이터타입과 연산자  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 실습1  (0) 2017.12.17

HTML, CSS, JavaScript =>  웹브라우저 또는 클라이언트에서 동작하는 언어.

웹 브라우저에서 a.php란 파일을 웹 서버로 보낸다.

그러면 php라는 단어를 보고 웹서버 자체가 할 수 없는 일이라고 보고 담당자인 PHP 엔진을 부른다. 

<?php
  데이터 베이스의
  topic에서 수업 제목들을 가져온다.
 ?>

php 문법에 따라서 해석한다. 


서버 쪽에서 동작하는 흐름 


PHP 설정

bitnami -> php -> php.ini 실행 (메모장 또는 Atom)

Ctrl + F 로 display_errors 를 찾는다.

display_errors = Off 를 On으로 바꾼다. 

(Off로 되어있는 이유 = > error 메세지를 공격자가 보면 해킹하는데 유용한 정보를 주게됨)


다음 opcach을 검색해서 opcache.enable = 1인 것을 0으로 바꿔준다.

=> 수정된 내용을 바로바로 최신화해준다. 


manager-windows.exe 실행 => Manage Servers에서 Restart 

=> 재실행해야 변경한 환경설정이 적용된다. 



JavaScript와 PHP

JavaScript는 같은 일을 웹 브라우저에서

PHP는 같은 일을 웹 서버에서

 


HTML, CSS 정적인 언어

JavaScript, PHP 동적인 언어


JavaScript로 할 수 있는 일

 


이렇게 바꿀 수 있다.


PHP로 할 수 있는 일


본래 HTML에 있는 CSS를 하나로 묶어서 사용했다. 

여기서 만족할 수 있을까?

만약 CSS 코드를 바꾸는 것이 아니라 ol로 되어있는 순서가 있는 리스트들을 

순서가 없는 ul로 바꿔달라고 했다면 어떻게 해야 할까

==> 공존하고 있는 HTML과 정보를 분리한다. 

하나의 HTML로 여러개의 정보를 표현할 수 있게 하는 것 => PHP













저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

데이터타입과 연산자  (0) 2017.12.18
웹 페이지에 코드 삽입하기  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 실습2

다른 페이지의 레이아웃도 이전시간에 했던 것과 같은 양식으로 수정하기


기본 => style 태그안에 있는 내용을 복사 붙여넣기 하는 것으로 시작.


실습 1. body 안에있는 h2를 50px로 다 키우고 싶다.

h2{
  font-size:50px;
}

작성하고 다 복사 붙여넣기를 해야한다. ==> page수가 엄청 많을 때에는 문제가 된다. 

방법 => CSS를 완전히 HTML로부터 분리한다. 

htdocs 안에 style.css 라는 파일을 만든다. 확장자 명이 css라는 것에 유의한다. 

본래 style 태그 안에 있던 내용을 cut 해서 style.css 안에 paste 

cut 한 페이지로 가서 style 태그를 지우고

link라고 치고 tab 키를 누른다.

href 뒷 부분에 http://localhost/style.css 라고 입력하고 저장을 한다.

type="text/css" 로 지정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <link rel="stylesheet" type="text/css" href="http://localhost/style.css">;
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>


HTML이 link를 만나면 뒤에 있는 내용을 보고 외부에 있는 것을 읽어오려고 한다는 것으로 파악한다. 




저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

웹 페이지에 코드 삽입하기  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 실습1

- 최종적으로 만들 홈페이지 


실습하기전에 이전에 만들었던 소스 가져오기.

 

이 소스코드


실습 1. 맨 위 그림에서 빨간색 네모부분으로 바꾸기

html에서 header 부분이다.

border을 사용하면 되는데 4면이 다 필요한 것이 아니라 하단의 border만 필요하므로

border-bottom 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px solid gray;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
  </body>
</html>


실습 2. 제목과 border 사이가 너무 가까워서 좀 떨어뜨리고 싶다.

padding 사용

padding:20px; 추가.

header {
        border-bottom:1px solid gray;
        padding:20px;
      }


실습 3. 위의 그림에서 왼쪽 아래부분 만들기

본래 코드에서 nav에 해당되는 부분

앞에서 배운 float를 사용하고 left를 사용하면 된다.

nav{
        border-right:1px solid gray;
      }

이렇게만 하면 

맨 위의 그림과 다르게 화면 맨 끝에 테두리가 생기게 됨 : right 로 하면 화면 끝에 생긴다. 

수정하기 위해 필요한 것 : width

이렇게 하면 화면 끝이 아닌 설정한 width 뒤에 선이 생기게 된다. 

nav{
        border-right:1px solid gray;
        width:200px;
      }


실습 4. 맨 위 그림처럼 아래의 설명 부분이 오른쪽으로 오게 하기.

먼저 설명이 있는 html 파일. 예를 들어 이전에 만들었던 page_html에서 위에서 설명한 만큼 수정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px gray solid;
        padding:20px;
      }
      nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>

여기서 아래로 내려간 글자를 오른쪽으로 옮기기 위해 float 추가

nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }

이렇게 하면 li의 height를 초과하는 부분은 왼쪽 끝부터 글자가 시작되어서 보기가 안좋다. 

1번 방법 이를 위해 nav의 height를 늘려주자.


nav {
        border-right:1px gray solid;
        width:200px;
        height:600px;
        float:left;
      }

2번 방법 아래 내려가는 문자들을 float로 올려주자

article {
        float:left;
      }


글자가 적절한 길이이면 자동으로 올라간다. 


실습 5. article 영역에 적절한 여백 주기. 


너무 붙어있어서 보기가 안좋다. 

padding 사용

article {
        float:left;
        padding:20px;
      }

  • tip : Ctrl + Space ==> 추천기능


실습 6. 앞의 숫자가 마음에 들지 않는다.

소속된 곳에서 list-style:none 삽입

nav ol {
        list-style: none;
      }



저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
Float 

웹페이지 레이아웃을 할 때 사용되는 것. 



실습 1. 매우 긴 txt를 body에 넣기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 

 ...............

생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>


실습 2. 이미지를 삽입하기

원하는 이미지의 주소를 복사

img 태그 사용 src 속성 입력


<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>


실습 3. 이미지에 빨간색 테두리 넣기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    img{
      border:1px red solid;
    }
  </style>
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>




글자와 이미지 사이에 여백이 생기는 이유 : 이미지나 글자나 같은 한 행을 차지한다. 같은 행을 차지하는데 크기가 달라서 여백이 생긴다. 


실습 4. 글자를 그림과 같이 위로 끌어올려서 좀 더 아름답게 보이게 하기


float 이용

img 태그 안에 float:left 추가

img{
      border:1px red solid;
      float:left;
    }

right도 해보기

float : 그림과 글자를 나란히 나타나게 하는 역할을 한다. 

left면 왼쪽에 정렬되게 하고 right면 오른쪽에 정렬되게 한다. 





저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 실습2  (0) 2017.12.17
CSS 실습1  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
CSS 이론1  (0) 2017.12.16
CSS 이론 - 박스모델

기본 템플릿 만들기 

template.html파일을 만들고 

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
  </body>
</html>

이 코드를 저장해 둔 후 이 것을 매번 작성하는 수고할 필요 없이 복사해서 사용하자. 


실습 1. ol과 li 를 이용해서 수업의 리스트를 출력하기.

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    <ul>
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

  • li 3번 연속되는 부분은 li*3 + tab으로 빠르게 입력할 수 있다. 


실습 2. li 태그에 테두리 넣기

테두리는 border로 설정가능 

style 태그를 head에 넣고 

border:1px : 테두리는 1px의 두께

한칸 띄우고 red : 빨간색으로

한칸 띄우고solid : 단색으로 그린다

=> border:1px red solid;
=> 한칸 띄우는 것이 속성을 구분하는 약속 

solid 말고 dotted로 하면 점선

li {
  border:1px red solid;
}


실습 3. li가 3개인데 중간에 있는 li에만 적용시키고 싶을 경우

html의 속성 중 id를 사용하면 된다. 

<li id="selected">css</li> 로 해서 

id값이 selected 인 것만 수정할 수 있다.

id를 나타내는 특수한 기호 #을 이용.

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    #selected {
      border:1px red solid;
    }
  </style>
</head>
  <body>
    <ul>
      <li>html</li>
      <li id="selected">css</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>


실습 4. css와 테두리 사이의 파란색 동그라미 친 공백을 조절하고 싶다. 


padding 이용

ex) padding:30px을 css코드에 추가

#selected {
      border:1px red solid;
      padding:30px;
    }



실습 5. JavaScript에 파란색 테두리 주기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    #selected {
      border:1px red solid;
      padding:30px;
    }
    #extra{
      border:1px blue solid;
    }
  </style>
</head>
  <body>
    <ul>
      <li>html</li>
      <li id="selected">css</li>
      <li id="extra">JavaScript</li>
    </ul>
  </body>
</html>


실습 6. css와 javascript 사이의 간격 주기


margin 이용

#selected {
      border:1px red solid;
      padding:30px;
      margin:50px;
    }




태그와 태그사이의 간격 정리 - 박스모델



크롬을 이용한 박스모델 

마우스포인터를 css위에 올려놓고 오른쪽 클릭 -> 요소검사



크롬 개발자 도구는 실시간으로 수치를 바꿔보면서 어떻게 하는 것이 시각적으로 아름다운가를 확인하는데 큰 도움을 준다. 

이 개발자 도구로 수정했던 내용은 원래의 소스코드에 영향을 미치지 않는다. 

저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
CSS 이론1  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
CSS 이론2

CSS는 태그 별로 기본 디자인을 가지고 있음

CSS를 통해서 모든 디자인을 바꿀 수 있다.


실습 1 : h1태그의 글자 사이즈를 바꾸고 싶다.

font-size:xxpx 사용

속성과 속성의 구분 => ;
  h1 {
    color:red; 
    font-size:10px
  }


실습 2 : h2태그도 h1태그와 같은 효과를 주고 싶다.

    h1, h2 {
    color:red; 
    font-size:10px
  }


실습 3 : 실습 2의 속성은 유지하고 h2에만 밑줄을 긋고 싶다.

h1, h2 {
  color:red;
  font-size:10px
}
h2 {
   text-decoration:underline;
}
실습 4 : header태그 밑에있는 h1에만 효과를 주고 싶다.

  • <h1>CSS</h1>을 header태그로 감싼 후에 header h1으로 구현 가능

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1, h2 {
        color:red;
        font-size:10px
      }
       h2 {
         text-decoration:underline;
      }
      header h1{
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>CSS</h1>
    </header>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
    <h1>PHP</h1>
  </body>
</html>

border => 테두리



저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론1  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
HTML실습  (0) 2017.12.14
CSS 이론

도입

HTML => 너무 못생겼다. 

정보를 꾸미기 위한 언어 CSS

Cascading Style Sheet




CSS => Style 을 위한 언어

HTML + CSS : CSS는 독립적인 언어이긴 하지만 HTML 없이는 의미가 없다. 

HTML : 정보에 집중

CSS : 디자인에 집중








HTML과 CSS의 공존

=> Style이란 태그

tip : Ctrl + \ 를 통해 왼쪽에 있는 Tree View를 껐다 켰다 할 수 있음


CSS실습 전 코드




실습 1 : h1태그의 색과 글자크기를 바꾸고 싶다. 

<style>
  h1 {color : red}
</style>

CSS의 시작과 끝은 style 태그에 있다. 

<style> 까지 HTML 코드이고 이 안에 있는 내용이 CSS 코드이다. 

이유 : Markup(꺽새) 가 있으므로

h1의 의미 : h1이란 태그를 가지고 있는 것들의 속성을 설정







1번 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h3>HTML</h3>
  </body>
</html>

2번코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {color:red}
    </style>
  </head>
  <body>
    <h1>CSS</h1>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
    <h1>PHP</h1>
  </body>
</html>



저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
HTML실습  (0) 2017.12.14
HTML 문법 - 태그의 중첩  (0) 2017.12.14

+ Recent posts

티스토리툴바