웹 애플리케이션 만들기

CSS 이론

CSS의 기본문법 

 선택자 심화학습

ex_css_1.html 

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

 

박스모델

ex_css_2.html 

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

 

float

 ex_css_3.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     img{
       border:1px solid red;
       float:right;
    }
   </style>
</head>
<body>
  <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
  생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 활동입니다. 그간 프로그래머들이 이룩한 성취를 일반에 알려서 고독한 프로그래머들의 관객을 모객하는 활동이기도 합니다. 생활코딩은 세 가지로 구성되어 있습니다.


온라인 강의

생활코딩의 강의는 수업과 사전으로 구성되어 있습니다.

입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 또는 커뮤니티에 포스팅 단위로 파편화되어 있습니다. 그래서 최소한 무엇을 검색해야 하는지를 아는 사람들을 위해서는 더 없이 좋은 공간이지만, '무엇을 모르는지 모르는 상태'의 입문자에게는 그림의 떡으로 남아 있습니다. 다시말해서 전문가를 더욱 전문가답게 만드는 혁신에 머물고 있는 것이죠.

생활코딩 실습 시리즈인 웹 서비스 만들기는 웹 기반의 서비스를 만드는 최소한의 절차를 배경지식 없이 무작정 따라하는 코스입니다. 이 코스를 완주하면 웹서비스가 어떤 맥락에서 시작되고, 어떤 과정을 통해서 현실화 되는지에 대한 전체적인 인상을 갖게 될 것입니다. 생활코딩을 지금 시작한다면 여기서 시작하시면 됩니다.

생활코딩의 수업 시리즈는 먼저 익혀야할 것과 나중에 익혀야할 것을 순차적으로 배치해서 그 기술을 이해하기 위한 지식을 제공합니다. 그래서 '무엇을 모르는지 모르는 상태'에서 재빠르게 빠져나올 수 있도록 최소한의 것을 제공합니다.

생활코딩의 사전 시리즈는 그 기술을 실제로 구현하기 위해서 필요한 정보를 직접 찾아볼 수 있도록 구성되어 있습니다. 수업을 통해서 '무엇을 모르는지'를 알았다면 이제 '모르는 것'을 스스로 찾아서 문제를 해결해야 합니다.

생활코딩은 포괄적인 기술 커리큘럼을 지향합니다.

자신이 필요한 것에 따라서 아래와 같은 순서로 공부하시면 됩니다.

웹 프로그래밍

웹 서비스 만들기 실습
프로그래밍 오리엔테이션
HTML
CSS
javascript
jQuery
PHP
mysql
리눅스
 안드로이드 프로그래밍

Java
안드로이드 (계획 중입니다)
청소년 프로그래밍

스크래치
생활코딩의 목표는 고도로 복잡한 프로그래밍에 대한 진입점을 제공하는 것입니다. 프로그래밍을 하고 싶은 의지가 있다면 그렇게 할 수 있게 도움을 드리고 싶습니다. 그렇다고 생활코딩의 지식들이 쉬운 것들로만 구성되어 있는 것은 아닙니다. 누구나 처음엔 초보자입니다. 마찬가지로 영원한 초보자도 없습니다. 초급이 중급으로 중급이 고급으로 나아가는 과정을 이어주는 연결점을 제공하는 것 또한 생활코딩이 지향하는 목표입니다.

이곳의 댓글을 통해서 수업화를 원하는 기술을 알려주시면 스케줄에 따라서 수업을 만들겠습니다.

생활코딩 Youtube 채널

생활코딩의 모든 동영상 강의는 Youtube를 통해서 서비스 되고 있습니다. Youtube 채널을 구독하시면 생활코딩의 새로운 동영상을 받아보실 수 있습니다.

http://www.youtube.com/user/egoing2

질문

각각의 수업의 하단에는 댓글이 있습니다. 이 댓글을 통해서 질문을 받습니다. 댓글을 달며 운영자에게 이메일이 발송되기 때문에 질문은 모두 운영자에게 열람이 됩니다. 하지만 많은 양의 질문을 받기 때문에 운영자 입장에서는 큰 부담이 되는 것도 사실입니다. 운영자가 답장을 하지 않는 것은 운영자도 잘 모르는 문제이거나 지금은 답변하기 어려운 것일 수 있습니다. 꼭 운영자를 통해서 문제를 해결해야 하는 것은 아니기 때문에 우선은 검색이나 커뮤니티에 질문하는 것을 통해서 문제를 해결하셨으면 좋겠습니다. 물론 운영자에게 질문하시는 것을 주저하실 필요는 없습니다. 답변할 수 있는 것은 최대한 신속하게 도움을 드립니다. 그리고 질문은 최대한 상세하게 해주세요.

공동공부

공동공부는 온라인의 편리한 접근성에 오프라인의 함께하는 느낌을 하이브리드한 공부방식입니다.공동공부를 통해서 덜 외롭게 공부할 수 있습니다. 아래 동영상은 공동공부에 참여하는 방법입니다.

</body>
</html>

소스코드

github

참고

댓글

댓글 본문
작성자
비밀번호
  1. 원스팩토리
    감사합니다.
  2. 손영민
    픽셀, 보더, float 등의 여러가지 css 태그들, 잘 배우고 갑니다.
  3. sung박
    padding
    등등
    잘봤어요
  4. jy1234
    감사합니다.
  5. 정말 잘 보고있습니다!

    Atom 에서 첫 화면에 html 치고 엔터 누르면
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>

    </body>
    </html>

    라고 한번에 뜨네요 ㅎㅎ 자주쓰는 태그 저장해두지 않고 이방법 쓰고 lang="en" dir"ltr"이부분 지우고
    사용하시면 더 편리할거같네요~
  6. 뽀글
    다음강의에 설명되어있어요!
    대화보기
    • 경주
      그리고 또 궁금한게요
      CSS인 style태그는 항상 head에 작성해야 하나요??
      바로 바로 확인을 위해서 해당하는 태그(소스?) 주변에 넣으면(body 내에)
      나중에 수정할 때도 더 편리할 것 같은데!
    • 경주
      선택자 심화학습에서
      border:1px solid red;
      라는 속성이 있는데
      border:1px와 solid red;사이에 왜 구분자를 안 넣는지 이해가 안됩니다..ㅠㅠ
      그 전까지는 구분자(세미콜론)에 대해서 설명까지 해주셨는데..
    • Eric Jang
      width: 100px; 요런 식으로 쓰시면 됩니다.
      대화보기
      • 사진크기 어떻게 줄여요?
      • Jinsoo Choi
        감사합니다~
      • 이락
        ^^
      • 꿀기
        여기까지 완료 ㅜㅜ 재밌네요 감사합니다.!
      • Podgor
        항상 감사합니다.
      • 슝태
        20180105
      • 감사합니다.
      • 171230 감사합니다!
      • hiparee
        12/30 정말 이해하기 쉽게 잘가르치시고 도움 많이됩니다. 감사합니다
      • 12/29
        감사합니다.^^
      • wefwlejf
        감사합니다~~~
      • PassionOfStudy
        17-12-21 4일차 - 1번째 강의

        수강완료!

        ---------------------------------------------------------
        HTML id - #
        CSS box Model : content - padding - margin
        CSS float
        ---------------------------------------------------------
      • 감사합니다.
      • SW Kim
        171216 수강완료
      • Hye-won Lee
        수강완료
      • Yong Choi
        #171213 수강완료 감사합니다!
      • 짜몽
        20171210 감사합ㄴ다
      • 빛보다 밝은 빛
        감사합니다!
      • 요요마
        오! 종근님 캄사합니다
        대화보기
        • Kim Liam KunTae
          강의 너무나 유익합니다. 감사합니다. 고맙습니다.
        • 박종근
          //요요마
          저와 같은 고민을 하고 계셔서 댓글 남깁니다.
          이미지 주소 뒤에 style="width:xxx; height:xxx;" 입력하시면 됩니다.
          ex) <img src="이미지주소" style="width:가로; height:세로;" />
          정확한 크기를 아신다면 위의 방법으로 하시면 되고,
          정확한 크기를 아는게 아니라면 구글에서 검사하기를 통해 사이즈를 가늠할 수 있습니다.
          *참고 : 구글에서는 크기가 자동비례해서 조정이 됩니다.

          다음 강의를 보면서 알게된 방법을 추가해서 알려드릴게요.
          head 태그에 style 태그를 넣는데 거기서 일괄적으로 수정해도 되더군요.
          위의 방법으로도 가능하지만 head 태그에서 일괄적으로 style을 잡아주는게 더 가독성이 좋을것 같습니다.
          <head>
          <style>
          img{
          width:100px;
          height:100px;
          }
          </style>
          </head>
        • 요요마
          이미지크기 바꾸는 건 어떻게 하죠?
        • 강의 잘 보고있습니다. 감사합니다.
        • 이근환
          2017-11-28

          수강완료 감사합니다!
        • 김종은
          17.11.26 수강완료
        • 박인호
          11-22
          수강완료.
        • 수강완료.감사합니다
        • 11/16 수강 완료
        • atnskynst
          11/15
        • 루안
          어제 들었었는데 깜빡했네.. 11-14 수강완료!!
        • 11/13/17 Fin
        • 서성진
          2017년 11월13일 수강!
        • daumjung
          서버 설치할떄 btinami 설치 오류떠서 codeanywhere로 강의 따라갔는데 점점 강의 내용과
          실천하는 것이 달라져서 막히네요. ㅜㅜ 역시 bitnami 설치하고 해야 하나요? codeanywhere로 하다가
          업데이트 하려면 유료라 어쩌야 할 지 난감합니다.;;
        • 2017년 11월 10일 수강완료
        • 2017/11/1
          완료!
        • 타짜여타짜
          질문이 있어요~

          style 태그는 왜 head 아래에 입력 하신건가요?
        • 소소대담
          저도 비슷하게 안된 적아 았어요.. 저의 경우앤 meta charset= "urf-8"로 오타가 있어서 이상한 상형문저거 나타나도라구요. 아마 utf-8로 다시 고치고나 오른쪽 하단이 utf-8인지 확인해보세요
          대화보기
          • 감사합니다!
          • 소소대담
            float, box 이론 공부 감사합니다
          • Cascading Style Sheet

            html과 뗄 수 없고, html의 디자인을 책임짐
          • Jeff Oh
            캄사합니다. ㅎㅎ
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기