웹 애플리케이션 만들기

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. 타임슬립
    li*3 하고 탭을 누르면 그냥 띄어지기만 하고 태그가 완성이 되지는 않는데
    어떻게 해야할까요 수업을 따라가는데는 문제는 없는데 안되니까 궁금해요 ㅎㅎ..ㅜ
  2. 임진웅
    3.21
  3. 14번째
    3.17.
  4. 고은정
    짱입니당............재미있어요
  5. 삐뽀
    혹시 몰라 적어놓습니다. 1년쯤 전에 저와 같은 문제가 생긴 분이 계시는데 거기 답변이 없는 것 같아서요
    맥에서 border가 안보이는 경우 값 순서를 다르게 해보세요
    제 경우 실습 세번째에서 li {border: 2px red solid;} 일 때는 보더가 안보였어요
    근데 두번째에서 헤더에 보더 넣는 건 됐었거든요.
    그래서 순서를 li {border: 2px solid red} 로 두번째 예제 때와 똑같이 바꾸니까 보더가 나타나더라구요
    혹시 안보이는 분들 순서를 다르게 해보세요
  6. 맥주3잔
    항상 감사합니다. 질문있습니다. <style>코드는 <head>태크 사이에만 있어야 하나요? <body> </body>사이에 있으면 안되나요?
  7. Jaeeui Kwon
    170309
  8. 코딩짱!
    170306완료
  9. 이승우
    20170302완료
  10. 가드
    20170301 완료
  11. 글로리아
    float
    border
    img src
  12. 미싱프로그램
    <style>
    h1 {color:blue; font-size: 40px; text-decoration: underline;}
    </style>
    <h1>깊은 감동받고 있습니다..</h1>
  13. 2017/02/20
  14. 170209
    감사합니다
  15. 시시시시시시
    ;(세미콜론)은 명령은 이것으로 끝이라는 의미라서 그렇습니다.
    대화보기
    • 강경호
      감사합니다
      170205
    • 심재엽
      오우 짱짱맨
    • 첨지
      완료
    • 1px와 solid와 red는 모두 border라는 속성의 내용이기 때문입니다.
      대화보기
      • 생활코딩짱짱맨
        질문이 있습니다.
        스타일 코드에서 ";"은 속성과 속성을 구분하는 구분자라고 알려주셨는데요

        예제 ex_css_1.html에서 header h1{border:1px solid red;} <---이 부분은 왜 쎄미콜론이 속성과 속성 사이가 아닌 맨 뒤에 붙어야하나요??
      • katie0205
        7분 12초 자막에 h11 -> h1 오타있네요!
      • File - Settings - Install 들어가셔서 'emmet'을 검색, 설치하세요.
        대화보기
        • li 하고 Tab을 누르면 태그가 완성 되는데, li*3하고 Tab 하면 반응이 없습니다.. 어떻게 해야 할까요.
        • Seung Jae Yang
          h1의 경우, 이에 대해서 폰트 사이즈 지정되면, h1에 대한 헤더파일로서의 강조와
          css상에서 스타일 명령어가 중복되는건데, 이게 실제 처리속도에 영향을 없을까요?
          그리고 그 우선순위 때문에 <header>안에 들어가는건가요? 아니면 css가 html보다 우선인건가요?
        • 20170118 완료
        • 하루에 한 강의 라도 열심히 20170116 완료.
        • 앙애스
          맥북에서의 사파리 브라우저는 크롬 브라우저와 같은 개발자도구가 없나요?
        • 울랄라부라더스
          잘 들었습니다.
        • Youngjin Mo
          h1, h2 {
          color: red;
          font-size: 10px
          }

          이 부분에서 color태그에서 ;를 제거하시고, font-size 뒤에 ;를 붙이시면 됩니다.
          대화보기
          • 쌘진
            2016-12-30 완료

            강의 감사합니다
          • areswon1
            161223 완료
          • seonghee_12@naver.com
            161221
          • 완료
          • style 속성을 특정 미디어나 디바이스에 보여줄지를 지정하는 속성입니다.
            말씀하신 <style media="screen">은 해당 css를 컴퓨터 스크린에 보여준다 라는 뜻이예요

            보통 받은메일을 인쇄할때 상단 혹은 하단에 인쇄 버튼이 있죠? 버튼을 누르고 새창이 띄워질 때,
            <style media="print"> 의 속성을 이용해서 다른 부분은 제외한 메일 부분만 보여지도록 하는거죠

            또 간단한 예로는
            스마트폰을 세로로 들었을 때와 가로로 들었을 때의 화면구성이 변화하는 것을 보실 수 있어요
            이것 또한 가로형css / 세로형css를 적용했다는 걸 알수 있습니다.

            http://www.w3schools.com......asp
            대화보기
            • 2016/12/1 완료 감사합니다!
            • 민지민디
            • harris
              2016.12.01 10.42 완료
            • 배둘
              11월14일 완료
            • Summer
              style하고 tab 누르면 저는 <style media="screen">이게 떠서
              뒤에 media="screen" 지우고 하는데요
              왜 뜨고, 무엇을 의미하는지 궁금합니다!
            • 이긍정
              16.11.14완료! 보면서는 따라 할 수 있는데 나중에 과연 다 외워서 할 수 있을까요?
              틈틈히 에버노트쓰면서 메모하고 수업듣고 있는데 괜한 걱정드네욬ㅋㅋ
            • janinh93
              브라우져 설정에가셔서 인코딩을 utf-8로 변경하시면 한글 제대로 나오실껍니다.
              대화보기
              • 김효준
                한글이 깨져서 나오는데
                어떻게 해결해야하나요?
              • 홍강표
                아니전왜화면이 안나오죠?
              • Bogwang Jung
                11.6 완료
              • 화욱이
                잘 보았습니다.
                머리에 쏙쏙 이해가 되니 이상합니다.
                강의 기법을 배우고 싶습니다.
                고생하세요.
              • 활화산
                잘 봤습니다.
              • Michiko
                수강완료~ 재미있습니다~
              • 이상윤
                css이론3 강의 2:44 분에서
                1줄 <li>html</li>
                2줄 <li>css</li>
                3줄 <li></li>

                이 화면에서
                커서가 css단어에 있다가 바로 아래줄 <li>위로 커서가 옮겨졌는데
                무슨 단축키인지 궁금합니다~!
              • Kijin Roh
                161021 학습완료
              • 양경식
                감사합니다! 잘듣고 갑니다. 계속해서 공부하겠습니다.10/20수강완료
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기