웹 애플리케이션 만들기

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. 허민진
    style 태그에 대해 검색하다가 html에서 style 태그 사용을 가급적이면 지양하는게 좋다고 되어있던데 왜 그런건가요..?!
  2. atom을 찾을수가 없어서 setup을 눌렀더니 마치 처음 설치된것처럼 바탕화면바로가기도 생기고 프로그램에도 생겼어요... 이유가 뭘까요..?
  3. Minje Jeon
    완료했습니다!!
  4. emessell
    수강완료
  5. 윤희경
    완료했습니다!
  6. egoing
    alt 키를 누르세요!
    대화보기
    • 이민재
      그렇게 하니까 되네요!! 정말 감사합니다!! 이것 때문에 진도 못따라갈까봐 우울해하고 있었어요ㅠㅠ
      대화보기
      • 파일 경로, 코드 잘못 된 것이 없는데 웹브라우저에서 아무것도 안 보입니다ㅜㅜ.. (에러코드도 안 뜨고 백지장)

        앞선 강의에서 만들었었던 파일을 css 폴더로 이동시키면 웹브라우저에서 멀쩡하게 열리는데, 아톰에서 새로 작성하는 파일들은 하나도 안 열리네요..
        C드라이브 폴더가서 확인해봤더니 용량도 0KB 뜨구요..

        흑흑 진도를 못 빼고 있습니다 도와주실분 ㅠ_ㅠ...!!
      • 하오리여우
        7/23 수강 완료

        아톰 install에 패키지 검색이 안되는 오류 고치는 방법 아시는 분 있나요?
        아무리 찾아봐도 방법이 없네요 ㅜㅜ emmet 말고도 다른 패키지도 검색이 전혀 안되고 있어요 ㅜㅜ
      • 장한솔
        수강완료
      • 몽실구름
        주소를 제대로 입력하셨나요?
        html파일을 넣어둔 곳이 htdocs폴더이면
        localhost/ex_css_3.html
        의 주소가 맞지만
        실습에서 css폴더를 새로 만들고 그 안에 ex_css_3.html 파일을 넣었기 때문에
        주소는
        localhost/css/ex_css_3.html
        을 입력하셔야 됩니다.
        대화보기
        • Min
          완료~~^^
        • 정필립
          아톰 에디터에서 툴바가 사라졌습니다. 어떻게 다시 나타나게 하나요?
        • 김진홍
          완료!
        • CrazyJune
          소스 자체에는 문제가 없어 보입니다.
          에러 로그를 보면, 경로가 잘못된 것 같아요.

          지금 그 파일이 있는 위치와 웹브라우져에서 호출한 URL 을 말씀해주시면 잘못된 부분을 찾을 수 있을 듯 합니다.
          대화보기
          • 이민재
            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="utf-8">

            </head>
            <body>
            <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />

            </body>
            </html>

            잘못된게 없는 것 같은데
            Not Found

            The requested URL /ex_css_3.html was not found on this server.

            이런게 계속 뜨면 어떻게 해야하나요? index1.html같은건 열리는데 css파일에 있는건 아무것도 안열려요ㅠㅠ
          • 남대현
            하나하나 다 눌러보며 20분만에 해결했습니다 ㅠㅠ
          • aimerthis
            유용한 정보 듣고 갑니다. 감사합니다.
          • Sangbin Choi
            CSS와의 만남
          • 정규원
            감사합니다
          • 이환길
            감사합니다~~!!
          • 전환오
            에디터에서 태그 안에 코드 입력하고, 다음줄 태그로 이동할때 바로 커서가 태그안으로 위치하는건 어떻게하는건가요?
            예를들면 <li> (커서) </li>
            <h1> (커서) </h1>
            li태그에서 커서가 바로 h1 태그 안으로 이동하는 경우입니다!
          • YeonHoon Jeong
            수강완료 하였습니다. 안드로이드 스튜디오랑 padding , margin 등 비슷한 것들이 많이 있네요.
            한결 편하게 수강하였습니다. 감사합니다.
          • 꿀맛바밤바
            완료!! 감사합니다~
          • 박형호
            잘 봤습니다~! 배우면 배울수록 재미있어요^^
          • 이원석
            7.21 오호 css 가 이런거였구만
          • powhyckf
            재미있게 잘봤습니다~
          • 문경민
            잘 봤습니다~
          • 송연주
            완료~!!
          • vegaplanet
            드디어 css를 만났네요^^ 잘 봤습니다 감사합니다
          • 이재욱
            완료^^
          • 정상우
            done
          • 조재영
            점점 만들어져가는게 느껴져서 너무 재밌네요 ㅎㅎ
          • jimmyzip
            완료
          • kaliblog
            눈으로 완료~
          • 김길운
            완료
          • JustBeing
            My power comes from Consistency
          • 이용성
            드디어 뼈대에다가 디자인을 하는군요! >< 내일이 기대 되는군용!!
          • 최수진
            잘 봤습니다!
          • Jayce-Yun
            완료
          • 홍준완
            수강 완료!!
          • 솔횻ㅅㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹ
          • ggang
            점점 재미있게 실습하구 있습니다!!
          • 까나까나
            2017.07.20 pm06:45
            수강!
          • 김진희
            오늘도 유용하게 잘 들었습니다. 감사합니다!
          • aga159
            완료
          • 김우진
            완료
          • 홍창용
            CSS(Cascading Style Sheet)
            디자인을 위한 언어
            STYLE을 내기 위한 언어
            HTML과 독립된 언어
            HTML + CSS
            <style></style> : 디자인을 하기 위한 태그
            CSS의 시작과 끝을 의미하는 태그
            h1 {color: red}
            선택자 서술
            selector description
            color : 색상 변경
            2개이상의 속성을 사용할 때 세미콜론(;)으로 구분하면 된다.
            세미콜론 : 하나의 문장이 끝난다는 것을 알려주는 기호
            font-size : 글자크기 변경
            공백은 없어도 상관없다.
            가동성이 높은 코딩을 하기 위해서는 줄바꿈과 공백으로 깔끔하게 표현하는 것이 좋다.
            2개이상의 선택자를 사용할 때는 콤마(,)로 구분하면 된다.
            text-decoration : 텍스트를 꾸미기 위한 속성
            overline : 윗줄긋기
            line-through : 가운데 줄 긋기
            underline : 밑줄 긋기
            none : 꾸미기 없애기
            border : 테두리 생성
            solid : 태그요소의 테두리를 직선으로 표시한다.
            박스모델 : CSS을 이용해서 각 html의 위치, 부피, 여백을 지정하기 위한 모델
            id : 사용자의 고유한 값을 지정해주는 속성
            사용할 때는 #으로 해당 id값을 불러올 수 있습니다.
            padding : 내용 주위에 공간을 생성하는데 사용하는 속성
            margin : 태그와 태그 사이의 간격을 지정해주는 속성
            width : 폭을 지정해주는 속성
            height : 높이를 지정해주는 속성
            크롬 개발자 도구
            float : 웹페이지의 레이아웃을 디자인할 때 사용하는 속성
            보통 정렬에 사용
            left : 왼쪽 방향으로 지정
            right : 오른쪽 방향으로 지정
            none : 기본값으로 설정
            img : 이미지 파일을 넣기 위한 속성
            src : 해당 이미지 파일 주소를 지정하기 위한 속성

            잘 봤습니다.
          • hoyabbang@google.com
            수강완료
          • 김경준
            감사합니다!!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기