생활코딩

Coding Everybody

코스 전체목록

닫기

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. Thankyou
    차근차근 하는데 정말 물고기 잡는 방법을 알려주셔서 감사합니다.
    이미지 크기어떻게 조절할까 하다가 코드 몇개 건드려보니까 바로 자기가 원하는데로 바뀌고, 새로운
    패러그래프 삽입해서 서로 색깔 다르게도 해보고 있는데 간단간단한 거지만 스스로 응용하게끔
    강의해주시니 오히려 방대한 양을 다 따라하는것보다 스스로 잘 익혀지는것 같아요 !!!
    열심히하겠습니다.
  2. Anonymous
    2017 / 05 / 19 오늘 하루 여기까지 완료 하였습니다 . 언제나 처럼 친절하고 자세한 좋은 강의 정말 감사드려요 ~~ :D
  3. Seo Yun Seok Tudoistube
    쉬운 예제로 padding, margin 개념이랑 float 가 이제 이해가 되어서 감사하고 기쁩니다^_____^
  4. 허스키
    완주했습니다~~ 점점 재밌어지네요 ㅎㅎ
  5. 송재욱
    완주 완료 !! 빨리 다 듣고 싶네요 ㅎㅎㅎ
  6. ㅇㅇ
    이거 마지막 동영상 부분에 이미지 삽입하고 브라우저로 확인해 봤는데 '보내는 사람에게 회원님의 컴퓨터 정보가 공개되는 것을 방지하기 위해 일부 사진이 차단되었습니다. 사진을 보려면 이 항목을 여세요,'라는 메시지가 뜨고 이미지가 엑박이 됩니다. 어떻게 해결해야 하나요?
  7. 쿠쿠다스
    보면서 막히는 부분은 없는데
    과연 여기서 얼마나 기억할수있을지가 걱정이되네요 ㅎㅎ
    일단 흐름이중요하니 빠르게 보는중인데 감사합니다^^
  8. Seunghyun Shin
    This is literally incredible !!!!!
  9. 박건우
    Aiden_S 님글을 보고 무엇이 필요한지 알앗어요.. 아톰 받는중입니다..^^ 갑자기 이상한게 나와서 당황했습니다.
    대화보기
    • 박건우
      아 이쪽으로는 무뇌한인데, 혹시 CSS 를 받아야 하는 건가요?? CSS 로 들어가는 방법을..ㅜㅜ모르겠어요
    • Seunghyun Shin
      와 돌았따.. 너무 좋아요 ㅡ.ㅡ;; 돈 조금 받아도 될듯
    • 슈퍼디벨로퍼
      완료!
    • 바키도우미
      border 라는 속성 하나에 변수가 3개인거 같네요.
    • 바키
      질문이 있습니다 ~~
      border:1px solid red;
      >> 이곳에서는 왜 1px다음에 세미콜론을 안쓰나요? 속성 2개가 아닌건가요?
    • Estancia Che
      File/Setting/install - emmet 설치해주세요~
      대화보기
      • 박예섬
        alt키를 누르면 되더군요
        대화보기
        • 질문이 있습니다ㅠㅠ
          제가 실수로 뭔가를 잘못 눌러서 file, edit 등이 있는 상단바를 지워버렸는데요ㅠㅠ 이거 어떻게 복구시키는지 아시는 분 계신가요!!! 인터넷을 찾아보고 atom 내에서 이것저것 클릭해봐도 상단바가 다시 나오지 않아서 수업을 못 따라가고 있습니다
        • 버켓
          질문 드리고싶습니다.

          ex_css_2를 만들어서 기존에 쓰던 태그들을 복사했는데,
          자동완성과 같은 기능이 활성화가 안되네요...

          혹시 해결 방법을 아시는 분 있으신가요>?
        • egoing
          넓은 마음 고맙습니다.
          대화보기
          • Aiden_S
            저도 Youtube 쪽은 잘 몰라서 제 답글로 인하여 ... 님이 기분이 상하셨을까 걱정이 됩니다. 잠시 혼선이 있었는데 바로 정정해주시고 어떻게 된 것인지 알려주셔서 고맙습니다. 그리고 생활코딩 강의들에 대해서도 정말 고맙습니다.
            대화보기
            • Aiden_S
              제가 강의를 홈페이지 만을 통해서 보고 있어서 Youtube 쪽이 어떻게 되어있는지 몰라서 답변을 그렇게 드렸는데 기분이 상하셨다면 먼저 사과드립니다.

              그리고 제 답변은 홈페이지의 순서를 따라서 강의를 들었을 경우 문제가 없을 것이라는 이야기를 드린 것이지 전혀 질문의 의도가 당황스러웠던 것은 아닙니다. 저도 아직 초보자이고 배우는 입장에서 다른 분들의 댓글/ 질문의 딴지를 걸거나 하지
              않습니다. 단지 상황이 안타깝게 생각되어 답글을 올려봤던 것입니다. 어쨋든 다시 진행을 하신다니 저도 다행이라 생각이
              됩니다. 기분이 상하셨다면 다시 한 번 사과드립니다.
              대화보기
              • egoing
                음 제가 실수가 있었네요. youtube 쪽 재생목록의 순서가 잘 못 되어 있었습니다. html -> 개발도구 -> css인데, html -> css -> 개발도구 순서로 youtube 재생목록이 섞여 있었습니다. 그래서 혼선을 드린 것 같습니다. 긴 시간동안 이걸 발견하지 못했으니 제가 실수를 했네요. 혼선을 드려서 죄송합니다. 또 알려주셔서 감사하고요. 정정했습니다! 끝까지 즐겁게 공부하셨으면 좋겠습니다. :)

                Aiden_S님 제가 youtube 쪽 재생목록의 순서를 섞어놔서 혼선이 있었던 것 같습니다. 댓글로 알려주셔서 고맙습니다.

                두분께 혼선을 드려서 죄송합니다!
                대화보기
                • Aiden_S님 유투브로 따라 했었구요
                  글은 삭제 했어요
                  하지만 1~20까지하다가 21 css부터는 '아톰'을 사용하시던데 아톰 다운은 26부터 나오더라구요
                  그러다보니 그전에 이곳에서 '서브라임텍스트'라는 것을 알고 다운받아사용하고 그것으로 계속 진행되는지알았다가 갑자기 바뀌니 초보인 저로선 당황했던부분이구요 26 '아톰'다운 부분이 21 아톰 툴사용전으로 나온다면
                  이런 글은 남기지 않았을거에요
                  그런 부분들은 제가 '생활코딩'에 대해 알게된지 며칠안되어 제대로 둘러보지 못한 부분도 있구요
                  안타까워서 글 남겨주셨다는 부분에 대해선 공감합니다
                  하지만 이렇게 좋은 강의를 무료고 뭐고 폄하할 의도는 없습니다
                  문맥상 그렇게 받아들이셨다면 제 잘못이구요
                  그래서 글을 삭제하고 답글로 남겨드립니다
                  그리고 전 님처럼 어려운 말은 몰라요
                  쌩초보라서요
                  저같은 쌩초보들은 강의 내용이 1~100이라면
                  쭉 이어지지않고 갑자기 생소한 것들이 등장하면 당황스럽고
                  좌절감을 느끼고 바로 포기하게되지요

                  그러다보니.. 저도 그럴뻔했지만 다시한번 이것저것 강의를 듣다가
                  '서브라임텍스트' 이외에 '아톰'을 다운 받아서 하는 부분을 알게되어 다시 포기하지않고 진행을 하고 있습니다
                  님말대로 '생활코딩' 강의 올려주신 쌤에겐 정말 너무 감사드립니다


                  ''홈페이지를 통해서 강의를 따라오고 계시다면 htdocs폴더가 왜 미리 만들어져있고 새파일 생성시 css\표시가 Atom 에디터에 의한 것 임을 아실 수 있을 것 같습니다.''

                  이부분은 말씀대로 htdocs란 폴더가 만들어진건 비트나미가 깔리면서 생성된거 알구있구요
                  저같은 초보들은 포토샵,일러스트,드림위버 이런 프로그램들밖에 모르기에 새로운 코딩프로그램들이 생소할 수 있습니다
                  "css\표시가 Atom 에디터에 의한 것 임을 아실 수 있을 것 같습니다." 이런 부분은 알아듣지못합니다
                  다들 저같은 초보분들이 없으셔서 제 글이 당황스럽고 황당하셨던것같네요??
                  대화보기
                  • Aiden_S
                    안녕하세요.
                    댓글을 보다 보니 조금 안타까운 느낌이 들어 답글을 달아봅니다.

                    1~20차 강의라는 개념은 제가 잘 모르겠는데 아마 다운로드를 받아서 강의를 보고 계신다고 예상해봅니다.
                    홈페이지를 통해서 강의를 따라오고 계시다면 htdocs폴더가 왜 미리 만들어져있고 새파일 생성시 css\표시가 Atom 에디터에 의한 것 임을 아실 수 있을 것 같습니다.

                    댓글 처음에 안타까운 느낌이 들었다고 했는데 첫번째는 끝까지 배우시는 것을 포기하실까봐 우려되는 마음에서 이고, 두번째는 무료로 제공된다는 이유로 이 강의들을 폄하하실까 우려되는 마음에서 입니다. 제 개인적인 경험에 의하면 지금 보고 계신 이 생활코딩 강의는 그 어떤 유료강의보다도, 심지어 대학 강의보다도 자세하고 친절하게 Be개발자를 위해 준비되었다고 생각합니다.
                    대화보기
                    • acoustic04
                      안녕하세요 float 에서 홈페이지 텍스트 복사 붙여넣기 하니까 공백까지 너무 많이 복사되는데 공백을 어느정도 삭제하는 키가 따로 있나요? 영상에서는 어떻게 없애시는 것 같은데요 ㅠ 붙여넣기 할 때 한 줄에만 쭉 길게 붙여넣기 되는 게 아니라 줄 바뀜 자동으로 되게 하는 방법도 알고 싶습니다.
                    • 위플래시
                      감사합니다
                      강의완료했습니다
                    • 우탄
                      웹 표준상에 더블쿼츠" 싱글쿼츠' 모두 허용하고 있지만 암묵적으로 "를 사용하는것으로 알고 있습니다.
                    • 갓챵
                      정말 감사히 수업 잘 듣고 있습니다.
                      궁금한게 있는데요 코딩할 때 " 이 큰 따옴표를 쓰는데요.
                      제가 실수로 ' 작은 따옴표로 코딩을 했는데 결과가 같더라구요.
                      코딩에서 "과 ' 의 차이가 어떻게 되는지 궁금합니다.
                    • 감사합니다.
                    • 타임슬립
                      으오오 정말 감사드립니다.
                      대화보기
                      • Chanyang Kim
                        아톰에디터 기능이예요.
                        File - Settings - Install 에 가셔서 검색창에 "emmet" 검색 후 맨 위에 나오는 것 Install 하시면 되용.
                        대화보기
                        • 타임슬립
                          li*3 하고 탭을 누르면 그냥 띄어지기만 하고 태그가 완성이 되지는 않는데
                          어떻게 해야할까요 수업을 따라가는데는 문제는 없는데 안되니까 궁금해요 ㅎㅎ..ㅜ
                        • 임진웅
                          3.21
                        • 14번째
                          3.17.
                        • 고은정
                          짱입니당............재미있어요
                        • 삐뽀
                          혹시 몰라 적어놓습니다. 1년쯤 전에 저와 같은 문제가 생긴 분이 계시는데 거기 답변이 없는 것 같아서요
                          맥에서 border가 안보이는 경우 값 순서를 다르게 해보세요
                          제 경우 실습 세번째에서 li {border: 2px red solid;} 일 때는 보더가 안보였어요
                          근데 두번째에서 헤더에 보더 넣는 건 됐었거든요.
                          그래서 순서를 li {border: 2px solid red} 로 두번째 예제 때와 똑같이 바꾸니까 보더가 나타나더라구요
                          혹시 안보이는 분들 순서를 다르게 해보세요
                        • 맥주3잔
                          항상 감사합니다. 질문있습니다. <style>코드는 <head>태크 사이에만 있어야 하나요? <body> </body>사이에 있으면 안되나요?
                        • Jaeeui Kwon
                          170309
                        • 코딩짱!
                          170306완료
                        • 이승우
                          20170302완료
                        • 가드
                          20170301 완료
                        • 글로리아
                          float
                          border
                          img src
                        • 미싱프로그램
                          <style>
                          h1 {color:blue; font-size: 40px; text-decoration: underline;}
                          </style>
                          <h1>깊은 감동받고 있습니다..</h1>
                        • 2017/02/20
                        • 170209
                          감사합니다
                        • 시시시시시시
                          ;(세미콜론)은 명령은 이것으로 끝이라는 의미라서 그렇습니다.
                          대화보기
                          • 강경호
                            감사합니다
                            170205
                          • 심재엽
                            오우 짱짱맨
                          • 첨지
                            완료
                          • 1px와 solid와 red는 모두 border라는 속성의 내용이기 때문입니다.
                            대화보기
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기