https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐웹에서는 색상도 소스로 입력한다 ✔16진수 표기법 👉#ffff00 처럼 #기호 다음에 6자리 16진수로 표시한다 👉6자리는 앞에서부터 두 자리씩 묶어 #RRGGBB 형식으로 표시한다 RR 자리에는 빨간색(red), GG 자리에는 초록색(green), BB 자리에는 파란색(blue)의 양을 표시한다 👉각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ✔list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기 👉순서 없는 목록의 경우, 목록 앞에 다양한 불릿(bullet)을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있다 👉기본형 list-style-type : none | | 👉순서 없는 목록에서 불릿 모양 바꾸기 👉순서 없는 목록에서 불릿 없애기 ul {list-style-typ..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐문단 스타일에서 조절하는 부분은 텍스트 정렬이나 들여쓰기, 줄 간격 등이다. ✔direction 속성 : 글자 쓰기 방향 지정하기 👉기본형 : direction : ltr | rtl 👉텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지를 결정한다 아랍어는 오른쪽에서 왼쪽으로 쓴다 ✔text-align : 텍스트 정렬하기 👉기본형 text-align : start..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org name1 = String.new('egoing') name2 = String.new('k8805') puts(name1.reverse()) puts(name2.reverse() puts(name1.upcase()) # 대문자로 리턴 puts(name1.size()) # 문자열의 글자숫자 # 함수가 객체안에서 사용될때 메소드Methods 라고 한다 # 객체라는 것은 ..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org # 루비와 파이썬의 객체지향프로그래밍의 의미가 같다. name = 'egoing' # 문자열 데이터타입 = 객체 name=String.new('egoing') #문자열을 만드는 같은 방법 #String.new( ) = str이라는 클래스를 복제한 인스턴스가 된다. names = ['egoing', 'k8805'] # 배열 데이터타입 = 객체 name1 = String..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org Object = class(그룹 , 분류) + instance(사례) Class : 변수와 함수를 담은 그룹 모듈과는 다르게 함수뿐만아니라 연관되어있는 변수도 담을수있다. 하나의 클래스를 만들고 클래스를 복제한 여러개의 인스턴스를 만들수있다. 각각의 인스턴스는 클래스가 가지고 있었던 변수와 함수를 가지고있고 인스턴스마다 변수의 값은 다르고, 인스턴스의 함수를 실행하면..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 파이썬 Python 파일 import auth input_id = input("아이디를 입력해주세요.\n") if auth.login(input_id): print('Hello, '+input_id) else: print('Who are you?') Auth파일 def login(_id): members = ['egoing', 'k8805', 'leezche'] fo..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org def egoing_a() return 'a' end #엄청 많은 코드 def k8805_a() return 'B' end #엄청 많은 코드 puts(egoing_a()) #각 각의 함수를 모듈을 통해서 분리 시킨다 #파이썬의 모듈은 파일로 분리되지만, #루비의 모듈은 파일로 분리되거나 , 분리되지않는다. #파일로 분리되지않은 모듈을 만든다. #함수를 만들때 def를..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org def a(): return 'a' #엄청 많은 코드 def a(): return 'B' #엄청 많은 코드 print(a()) # 함수 사이에 이름이 같은 함수가 끼어들면 마지막에 작성한 함수의 값이 나온다. # 이름의 충돌을 방지하기 위해서 함수의 이름을 변경한다. def egoing_a(): return 'a' #엄청 많은 코드 def k8805_a(): retu..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 파이썬 https://docs.python.org/3/library/math.html 루비 https://ruby-doc.org/core-2.6/Math.html 파이썬 import math # math 라는 이름의 모듈을 import (가져온다.) # math.ceil() print(math.ceil(2.1)) # 2.1보다 더 큰 정수를 리턴한다. # math.f..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타 ✔color 속성: 글자 색 지정하기 👉기본형 : color : 색상 값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) , 색상 이름으로 표기한다 ✔text-decoration 속성 : 텍스트에 줄 표시하기 / 없애기 👉기본형 : text-decoration : non..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐글꼴 관련 CSS규약은 www.w3.org/TR/css-fonts-3 에서 볼 수 있다 ✔font-family 속성 : 글꼴 지정하기 👉기본형 : font-family:[,, ] 👉웹 문서에서 사용할 글꼴은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 주로 사용한다 👉윈도우7 이상의 사용자라면 " 맑은 고딕"글꼴이 설치되어 있으므로 제작자가 처음 ..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ✔CSS3란 ? CSS2나 CSS1보다 정교하고 화려한 화면을 구성할 수 있고 애니메이션까지 지원한다. CSS2 규약 안에는 스타일과 관련된 것들이 한꺼번에 담겨 있기 때문에 덩치가 크고 복잡해 한 번에 업데이트하기 쉽지 않다는 단점이 있다. 👉CSS3부터는 배경이나 글꼴, 박스 모델 등 수십 개 기능을 주제별로 규약을 따로 만들었다. 이것을 CSS모듈이라고 한다..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐스타일 시트라는 용어 앞에 캐스케이딩(cascading)라는 용어 하나 더 붙은 것이 CSS ✔캐스케이딩(Cascading)의 의미 👉CSS에서 C는 캐스케이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다. 👉캐스케이딩은 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다. 스타일 간의 충돌을 막기 위한 방..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐선택자(selector) : 스타일 속성을 적용하는 요소 ✔전체 선택자 : 모든 요소에 스타일 적용하기 👉기본형 : * {속성:속성 값; 속성:속성 값;} 👉전체 선택자(universal selector)는 말 그대로 스타일을 모든 요소에 적용할 때 사용한다 👉전체 선택자는 *(별표)를 사용한다 ✔태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용하기 👉기본..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐스타일 : 웹에서의 스타일은 미리 약속한 스타일 속성을 입력해 웹을 디자인하는것 ⭐스타일 시트: 한 문서에서 반복해 쓰이는 스타일들을 모아 놓은것 ✔왜 스타일을 사용할까? 👉스타일이란 HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들 👉웹 문서의 내용과 상관없이 디자인만 바꿀 수 있습니다. HTML로..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ✔, , 태그 : 드롭다운 목록 만들기 👉기본형 내용1 내용2 내용3 👉여러 옵션중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다. 👉공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적합하다. 태그로 ㅡ롭다운 목록의 시작과 끝을 표시하고 그 안에 태그를 사용해 원하는 항목들을 추가한다. 태그에는 value 속성을 이용해 서버로 넘겨..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐입력란에 커서나 힌트를 표시하고 필수로 입력해야 하는 필드를 지정하는 등 좀 더 세밀하게 폼을 조정할 수 있다. ✔autofocus속성 : 입력 커서 표시하기 👉페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다 ✔placeholder속성: 힌트 표시하기 입력란에는 적당한 힌트 내용을 표시할 수 있다. 필드를 클릭하면 내용이 사라..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 모듈은 미리 만들어 놓은 변수나 함수 등을 묶어놓은 것이다. 그래서 모듈을 불러오기만 하면 함수를 따로 정의하지 않아도 그 함수를 실행할 수 있게 된다. 모듈이란? 파이썬(Python) 모듈(Module)이란? 자주 사용되는 코드나 유용한 코드를 논리적으로 묶어서 관리하고 사용할 수 있도록 하는 것입니다. 보통 하나의 파이썬 .py 파일이 하나의 모듈이 됩니다. 모듈..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org ['A', 'B', 'C'].each(){ puts 1 } # each() : 각각의 원소들을 하나씩 하나씩 꺼내는 반복적인 작업들을 처리한다. # each가 실행되면 어레이 안의 각각의 원소들의 숫자만큼 {블럭}에 담겨있는 코드가 실행된다 # 원소의 값이 3개이기때문에 1이 3번 출력된다. ['A', 'B', 'C'].each(){ |i| puts i } # i의 ..
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org 5.times(){|i| puts i} # 5번 반복하여 숫자를 i에 널어서 출력한다. # 간결하게 반복만 한다. i = 0 while i
https://opentutorials.org/course/3084 WEB1 - HTML & Internet - 생활코딩 --- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여 opentutorials.org # > times {|i| block } → self upto(limit) {|i| block } → self
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐: 아이디나 검색어를 입력하는 텍스트 상자나 로그인 버튼처럼 사용자가 입력할 부분은 태그를 이용한다. ✔태그 : 폼에서 사용자 입력을 받기 위해 사용하는 태그 ✔태그 입력 항목 만들기 👉기본형 : 👉id 속성 사용하기 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성 태그를 이용해 캡션을 붙일 수도 있고 나중에 배울 CSS를 이용해 각 요소마다 ..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐폼 : 사용자가 웹 사이트로 정보를 보낼 수 있는 요소 ✔웹에서 자주 만나는 폼 👉폼과 관련된 대부분의 작업은 정보를 저장하거나 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 한다. 👉텍스트 상자나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그를 이용한다 👉폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP, JSP같은 서버 프로그래밍..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐비트맵 이미지 : gif,jpg,png파일을 크게 확대해 나타내면 이미지 테두리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. ⭐벡터 이미지(SVG) : 이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라고 한다. 로고나 아이콘에서 많이 사용된다. 데이터 시각화에서 차트나 다이어그램, 지도등을 구현할 때..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐텍스트를 클릭해 해당 페이지로 넘어갈 수 있고 이미지에 링크를 걸 수도 있으며 열고 있는 브라우저에서 해당 페이지로 이동하지 않고 새창을 띄워 보여 줄 수도 있다. ✔ 태그, href 속성 : 링크 만들기 기본형 텍스트
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야 하기 때문에 몇 가지 파일 형식만 사용할 수 있다. ✔웹에서 사용할 수 있는 이미지 파일 형식 👉GIF 표시할 수 있는 색상 수가 최대 256가지 파일 크기가 작아서 아이콘이나 불릿에 주로 사용 투명한 배경이나 움직이는 이미지를 만들 수 있다. 👉JPG GIF보다 다양한 색상..
https://www.youtube.com/user/easyspub easyspub '사람을 구체적으로 도와주는 책'을 만드는 이지스퍼블리싱 출판사입니다. 도서 내용과 관련된 문의는 Do it! 스터디 룸 (https://cafe.naver.com/doitstudyroom) 또는 영상 상세 설명에 있는 저자님의 이메 www.youtube.com ⭐표(table) 행(row)과 열(column)로 이루어져 있고 행과 열이 만나 이루는 영역을 셀(cell)이라고 한다. ✔, , , 태그 : 기본적인 표 만들기 👉기본형 내용 내용 ✔ ~ : 표의 시작과 끝 , 표 전체를 의미한다. ✔ ~ : 가로 행 ✔ ~ : 셀 ✔ ~ : 제목 셀 ✔행(column)을 만드는 태그는 없다. ✔기본적인 표 만들기 태그를 이용..