모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.
문제시, 비공개로 전환하겠습니다.
- CSS 디자인을 위한 언어 -
CSS = Cascading Style Sheet
HTML과는 완전히 다른 독립된 언어이다. 하지만 CSS는 HTML을 떠날 수 없다.
CSS가 HTML 언어의 디자인을 위해 고안된 언어이기 때문이다.
- <style> 태그 -
CSS의 시작과 끝
ex 1 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>CSS</h1> <h2>JavaScript</h2> <h3>HTML</h3> </body> </html> |
ex 2 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> <...>HTML 코드 h1 {color:red} {....} CSS코드 </style> </head> <body> <h1>CSS</h1> <h2>JavaScript</h2> <h3>HTML</h3> <h1>PHP</h1> </body> </html> |
CSS 기본 문법 |
h1 {color:red} |
선택자 (Selector) 서술 (Description) |
- 선택자 심화학습 -
ex 1 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> <...>HTML 코드 h1 {color:red; font-size: 10px} // 2가지 속성(Property)이 적용되었다. 공백은 무시 </style> </head> <body> <h1>CSS</h1> <h2>JavaScript</h2> <h3>HTML</h3> <h1>PHP</h1> </body> </html> |
ex 2 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> <...>HTML 코드 h1, h2 {color:red; font-size: 10px} // 2가지 속성(Property)이 적용되었다. 공백은 무시 </style> </head> <body> <h1>CSS</h1> <h2>JavaScript</h2> <h3>HTML</h3> <h1>PHP</h1> </body> </html> |
ex 3 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> <...>HTML 코드 h1 {color:red; font-size: 10px} // 2가지 속성(Property)이 적용되었다. 공백은 무시 h2 {text-decoration:underline;} </style> </head> <body> <h1>CSS</h1> <h2>JavaScript</h2> <h3>HTML</h3> <h1>PHP</h1> </body> </html> |
ex 4 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1 {color:red; font-size: 10px} h2 {text-decoration: underline} header h1 {border:1px solid red;} </style> </head> <body> <header> <h1>CSS</h1> </header> <h1>CSS</h1> <h2>JavaScript</h2> ＜h3>HTML</h3> <h1>PHP</h1> </body> </html> |
- 박스모델 -
CSS를 이용해서 HTML 태그들의 크기, 부피, 위치 등을 지정하는 것이다.
id = "...." // ...는 id의 속성을 부여한다.
ex1 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> li { border:1px red dotted; } </style> </head> <body> <ul> <li>html</li> <li id="">css</li> <li>javascript</li> </ul> </body> </html> |
|
ex2 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #selected { border:1px red dotted; } </style> </head> <body> <ul> <li>html</li> <li id="selected">css</li> <li>javascript</li> </ul> </body> </html> |
|
ex3 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #selected { border:1px red dotted; padding:30px; } </style> </head> <body> <ul> <li>html</li> <li id="selected">css</li> <li>javascript</li> </ul> </body> </html> |
|
ex4 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #selected { border:1px red dotted; padding:30px; } #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> |
 |
ex5 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #selected { border:1px red dotted; 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> |
Google Chrome에서 웹사이트 띄우고 마우스 오른쪽 클릭 <요소검사> => 보통 가려놓는다.
- CSS float -
CSS의 float 효과
Web page의 Layout을 디자인할 때 사용
float는 content들을 나란히 화면에 배치되게 하는 기능을 가지고 있다.
float: left, right;
ex 1 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> img{border:1px solid red; float: left;} </style> </head> <body> <img src= "https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" /> 혼자서 공부하는 막막함을 덜어드리기 위해서 구글과 코딩야학이라는 캠페인을 진행하고 있습니다. 7월 17일부터 8월 15일까지 적당한 진도로 생활코딩 웹에플리케이션 만들기 수업을 함께 공부해보시면 어떨까요? 코딩야학 신청하러가기 hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠. 온라인 강의 소개 입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 또는 커뮤니티에 포스팅 단위로 파편화되어 있습니다. 그래서 최소한 무엇을 검색해야 하는지를 아는 사람들을 위해서는 더 없이 좋은 공간이지만, '무엇을 모르는지 모르는 상태'의 입문자에게는 그림의 떡으로 남아 있습니다. 다시말해서 전문가를 더욱 전문가답게 만드는 혁신에 머물고 있는 것이죠. 생활코딩은 컴퓨터와 인터넷이 존재하는 시대의 공부방법은 어때야 하는가를 찾는 작업을 꾸준히 하고 있습니다. 정보기술이 발전하지 않았던, 낭만적인 시절에는 어떤 일을 하려고 하면 그것을 하기 위해서 필요한 거의 모든 것을 알고 있어야 했습니다. 검색할수도 없었고, 질문하기도 어려웠기 때문입니다. 한편 한번 배운 지식만으로도 평생을 살아 갈 수 있었습니다. 오늘날은 인터넷이 연결된 환경에서 일을 합니다. 언제든지 검색하고, 질문할 수 있습니다. 또 많은 일을 기계가 대신해줍니다. 이런 시대의 공부방법은 과거와 달라져야 한다고 생각합니다. 생활코딩이 지향하는 목표는 작은 교육입니다. 작은교육의 핵심은 '무엇을 모르는지 모르는 상태'에서 '무엇을 모르는지는 아는 상태'가 되는 것입니다. 무엇을 모르는지를 알면, 지금 당장 그 지식을 익히지는 않더라도, 그 지식이 정말 필요할 때 그 지식을 구하려 할 것입니다. 이 때 하는 공부는 이전과 같지 않을 것입니다. 수업소개 생활코딩 실습 시리즈인 웹 애플리케이션 만들기는 웹 기반의 서비스를 만드는 최소한의 절차를 배경지식 없이 무작정 따라하는 코스입니다. 이 코스를 완주하면 웹서비스가 어떤 맥락에서 시작되고, 어떤 과정을 통해서 현실화 되는지에 대한 전체적인 인상을 갖게 될 것입니다. 생활코딩을 지금 시작한다면 여기서 시작하시면 됩니다. 이 수업을 완주하신 후에는 자신이 하고자 하는 일에 따라서 적합한 수업을 선택해서 심화학습하시면 됩니다. 웹 프로그래밍 웹 애플리케이션 만들기 프로그래밍 오리엔테이션 HTML CSS javascript jQuery PHP mysql 리눅스 안드로이드 프로그래밍 Java 안드로이드 (계획 중입니다) 청소년 프로그래밍 스크래치 이곳의 댓글을 통해서 수업화를 원하는 기술을 알려주시면 스케줄에 따라서 수업을 만들겠습니다. 생활코딩 Youtube 채널 생활코딩의 모든 동영상 강의는 Youtube를 통해서 서비스 되고 있습니다. Youtube 채널을 구독하시면 생활코딩의 새로운 동영상을 받아보실 수 있습니다. http://www.youtube.com/user/egoing2 질문 각각의 수업의 하단에는 댓글이 있습니다. 이 댓글을 통해서 질문을 받습니다. 댓글을 달면 운영자에게 이메일이 발송되기 때문에 질문은 모두 운영자에게 열람이 됩니다. 하지만 많은 양의 질문을 받기 때문에 운영자 입장에서는 큰 부담이 되는 것도 사실입니다. 운영자가 답장을 하지 않는 것은 운영자도 잘 모르는 문제이거나 지금은 답변하기 어려운 것일 수 있습니다. 꼭 운영자를 통해서 문제를 해결해야 하는 것은 아니기 때문에 우선은 검색이나 커뮤니티에 질문하는 것을 통해서 문제를 해결하셨으면 좋겠습니다. 물론 운영자에게 질문하시는 것을 주저하실 필요는 없습니다. 답변할 수 있는 것은 최대한 신속하게 도움을 드립니다. 그리고 질문은 최대한 상세하게 해주세요. 공동공부 공동공부는 온라인의 편리한 접근성에 오프라인의 함께하는 느낌을 하이브리드한 공부방식입니다.공동공부를 통해서 덜 외롭게 공부할 수 있습니다. 다음 링크는 공동공부에 참여하는 방법입니다. https://www.youtube.com/watch?v=1YZSqRZ_1rg 커뮤니티 생활코딩 페이스북 그룹 생활코딩 페이스북 그룹은 프로그래밍을 하고 싶은 일반인과 일반인을 만나고 싶은 프로그래머들이 드물게 조우하는 커뮤니티 입니다.이곳에서 사람사는 잡담도 하고, 기술적인 질답도 하고, 서로의 입장도 바꿔보는 훈훈한 커뮤니티입니다. 그 지식을 기반으로 하는 사람들의 사회를 이해하는 것은 그 지식을 이해하는 것만큼 중요할 뿐 아니라, 지식을 넘어서 지혜를 구하는데 가장 좋은 방법입니다. http://goo.gl/BjjSh 생활코딩 페이스북 페이지 생활코딩 페이스북 페이지에서 좋아요를 누르시면 새로운 강의가 등록될 때 알려드립니다. 정보 기술과 관련한 다양한 소식도 알려드립니다. http://goo.gl/xsdUW 오프라인 강의 생활코딩에서는 비정기적으로 오프라인 수업을 합니다. 3일 동안 웹서비스를 직접 만들어보는 수업입니다. 아래 양식에 연락처를 적어주시면 수업이 있을 때 알려드립니다. http://codingeverybody-notify.appspot.com 라이선스 생활코딩은 오픈소스를 지지합니다. 그 연장 선상에서 생활코딩의 모든 컨텐츠는 오픈된 컨텐츠 라이선스인 CCL를 따릅니다. 이 말은 생활코딩의 컨텐츠를 이용해서 영리활동을 하셔도 되고, 블로그나 홈페이지에 담아가셔도 됩니다. 또한 생활코딩을 사용하는 컨텐츠가 CCL 라이선스를 따라야 하는 것도 아닙니다. 다만, 영리를 목적으로 하는 경우에는 영리 활동이 생활코딩과의 제휴관계가 아니라 CCL 라이선스에 따른 사용관계라는 것을 사용자가 충분히 인지 가능한 형태로 명시해주셔야 합니다. 생활코딩의 라이선스 규정은 Creative Commons 저작자 표시 2.0 문서를 참고해주세요. 나만의 코스 만들기 생활코딩의 홈페이지인 opentutorials.org는 생활코딩과 같은 활동을 하고자 하는 분들이 그렇게 할 수 있도록 돕기 위한 비영리 플랫폼입니다. 생활코딩의 컨텐츠들을 재조립해서 생활코딩과 같은 새로운 코스를 만들 수 있습니다. 자세한 내용은 아래 동영상을 참고해주세요. 자세한 내용은 opentutorials.org에서 컨텐츠 만들기 토픽을 참고해주세요. 생활코딩을 돕는 법 생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다. 활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다. 질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다. </body> </html> |
| |
댓글