'분류 전체보기'에 해당되는 글 86건

CSS - Codecademy

스스로 코딩/Codecademy 2020. 4. 26. 11:50

이 과정을 배우기전에 HTML을 배우고 오시는게 좋습니다.

무엇을 만드는가?

여러분은 새로운 CSS 기술을 연습하기 위해 많은 아름다운 웹 페이지를 만들 것입니다: 작가, 요리법 웹사이트, 포트폴리오 사이트, 디자인 회사를 위한 랜딩 페이지 등.

왜 CSS를 배워야 하나?

CSS가 없다면, 모든 웹 페이지는 페이지의 왼쪽을 따라 곧바로 이어지는 단순한 텍스트와 이미지가 될 것이다. CSS를 사용하면 색상과 배경 이미지를 추가하고 페이지 레이아웃을 변경할 수 있습니다. 웹 페이지는 마치 예술 작품처럼 느껴질 수도 있습니다!

태그 선택기, 클래스 선택기, id 선택기 중 3가지 조건이 다 존재할 때 적용되는 순서는 id, 클래스, 태그 순이다. 더 정확하기 때문이다.

<h1>...</h1> 태그 선택기

h1 {

color: maroon;

}

<h1 class="color">...</h1> 클래스 선택기

.color {

color: teal;

}

<h1 id="article-title"> id선택기

#article-title {

font-family: cursive;

text-transform: capitalize;

}

요소를 선택하는데도 순서가 있다. !important → .class → p {} 순이다.

!important는 가장 중요하단 의미로 그냥 요소 p에 붙든 .class 요소 p에 붙든 첫 순위가 된다.

그 다음부터는 클래스의 요소를 선택한 것이 두번째가 된다. 좀더 자세히 적었기 때문이다. .class p{}를 사용했다면 이제 그냥

요소 p는 적용이 되지 않는다. .class p{}가 없을 때만 그냥 요소 p가 적용이 반영된다.

p {

color: teal !important;

}

.class p {

color: red;

}

p {

color: blue;

}

요소는 <p>나 <h1> 같은 태그들을 말한다.

범용 선택기(*)는 웹 페이지의 모든 요소를 대상으로 하며 해당 상자 모델을 테두리 상자 모델로 설정합니다.

1. Learn CSS: Selectors and Visual Rules

1. CSS Setup and Selectors

이 과정에서는 CSS 파일 설정 방법, CSS 선택기 작성 방법 및 CSS 규칙 집합 설정 방법에 대해 알아봅니다.

1-1. Intro to CSS

모든 웹 페이지, HTML의 기본 구조는 그 자체로 매우 명백하다.인터넷을 통해 볼 수 있는 아름다운 웹사이트들은 CSS를 포함한 다양한 도구들로 꾸며져 있다.

CSS(Cascading Style Sheet)는 웹 개발자가 웹 페이지에서 HTML 콘텐츠를 스타일을 지정하는 데 사용하는 언어입니다. 색, 글꼴 유형, 글꼴 크기, 그림자, 이미지, 요소 위치 지정 등을 수정하려는 경우 CSS가 작업을 위한 도구입니다!

이 과정에서는 스타일을 지정하고 CSS 파일 구조를 설정하는 방법을 알아봅니다.

오른쪽의 코드와 브라우저를 보세요.그 코드는 어떤 스타일도 없는 평범한 HTML이다. CSS의 위력을 간단히 살펴보겠습니다.

다음 코드 라인을 복사하여 5번에 붙여넣고 코드를 실행하십시오.

# 그냥 텍스트만 있는 홈페이지 였는데 엄청 이쁘게 바꼈다.

<!DOCTYPE html>

<html>

<head>

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>

</head>

<body>

<h1>Innovation Cloud</h1>

<p>Connect your ideas globally</p>

<a class="btn" href="#">Learn More</a>

</div>

<ul>

<li>Register</li>

<li>Schedule</li>

<li>Sponsors</li>

<li>About</li>

<li>Contact</li>

</ul>

</div>

<h2>The Innovation Cloud Conference</h2>

<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>

<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>

<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>

</div>

<h2>Stay Connected</h2>

<p>Receive weekly insights from industry insiders.</p>

</div>

<p>© Innovation Cloud Conference</p>

</div>

</body>

</html>

1-2. Inline Styles

CSS는 HTML과 다른 언어이지만 인라인 스타일을 사용하여 HTML 코드 내에서 직접 CSS 코드를 쓸 수 있습니다.

HTML 요소의 스타일을 지정하려면 스타일 특성을 열기 태그에 직접 추가할 수 있습니다. 속성을 추가한 후 해당 요소에 적용할 CSS 스타일과 동일하게 설정할 수 있습니다.

<p style="color: red;">I'm learning to code!</p>

위 예의 코드는 인라인 스타일 사용 방법을 보여줍니다. 문단 요소에는 해당 문단의 시작 태그 내에 스타일 특성이 있습니다. 다음으로, 스타일 특성은 색상: 빨간색과 동일하게 설정됩니다. 이 색상은 브라우저 내에서 문단의 색상을 빨간색으로 설정합니다.

색상 코드: 빨간색의 구문이 궁금할 수 있습니다. 지금은 구문에 대한 세부 정보가 중요하지 않습니다. 다른 연습에서는 CSS 구문에 대해 자세히 배울 것입니다. 현재로서는 인라인 스타일이 HTML 요소를 직접 스타일을 설정하는 빠른 방법임을 알아야 합니다.

인라인 스타일로 여러 스타일을 추가하려면 스타일 특성에 계속 추가하십시오. 세미콜론(;)으로 스타일을 종료해야 합니다.

<p style="color: red; font-size: 20px;">I'm learning to code!</p>

Hint

1.In index.html에서 인라인 스타일을 사용하여 첫 번째 단락의 글꼴 패밀리를 Arial로 설정합니다.

<!DOCTYPE html>

<html>

<head>

<title>Vacation World</title>

</head>

<body>

<h1 class="title">Top Vacation Spots</h1>

<h5>By: Stacy Gray</h5>

<h6>Published: 2 Days Ago</h6>

<p style="font-family: Arial;">The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>

<h2 class="destination">1. Florence, Italy</h2>

<div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. <a href="http://travel.nationalgeographic.com/travel/city-guides/florence-italy/" target="_blank">Learn More</a>.

<h5>Top Attractions</h5>

<ul>

<li>Museums</li>

<li>Bike Tours</li>

<li>Historical Monuments</li>

</ul>

</div>

<h2 class="destination">2. Beijing, China</h2>

<div class="description">A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on viewin the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.

<a href="http://travel.nationalgeographic.com/travel/city-guides/beijing-china/" target="_blank">Learn More</a>.

<h5>Top Attractions</h5>

<ul>

<li>Biking</li>

<li>Historical Sites</li>

<li>Restaurants and Dining</li>

</ul>

</div>

<h2 class="destination">3. Seoul, South Korea</h2>

<div class="description">The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city centercomplete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.

<a href="http://travel.nationalgeographic.com/travel/city-guides/seoul-south-korea/" target="_blank">Learn More</a>.

<h5>Top Attractions</h5>

<ul>

<li>Parasailing</li>

<li>Segway Tours</li>

<li>Spas and Resorts</li>

</ul>

</div>

<h2> More Desinations </h2>

<ul>

<li><h4 class="destination">Jackson Hole, Wyoming</h4></li>

<li><h4 class="destination">Cape Town, South Africa</h4></li>

<li><h4 class="destination">La Paz, Bolivia</h4></li>

</ul>

<p>—Best of luck with your travels, and be sure to send pictures and stories. We"d love to hear them!</p>

</body>

</html>

1-3. The <style> Tag

인라인 스타일은 HTML을 빠르게 스타일링하는 방법이지만 제한 사항도 있습니다. 예를 들어 여러 개의 <h1> 요소를 스타일을 지정하려면 각 요소에 수동으로 인라인 스타일을 추가해야 합니다. 또한 추가 <h1> 요소를 추가할 때 HTML 코드를 유지해야 합니다.

다행히도 HTML을 사용하면 <스타일> 요소를 사용하여 자체 전용 섹션에 CSS 코드를 쓸 수 있습니다. CSS는 <스타일> 태그의 개폐 사이에 쓸 수 있다. <스타일> 요소를 사용하려면 <헤드> 요소 내부에 배치해야 합니다.

<head>

<style>

</style>

</head>

Head 섹션에 <스타일> 태그를 추가한 후 CSS 코드 작성을 시작할 수 있습니다.

<head>

<style> p {

color: red;

font-size: 20px;

}

</style>

</head>

위의 예에서 CSS 코드는 모든 단락 텍스트의 색상을 빨간색으로 변경하고 텍스트의 크기를 20픽셀로 변경합니다. 대부분의 경우 CSS 코드 구문이 인라인 스타일에 사용된 구문과 어떻게 일치하는지 확인합니다. 주요 차이점은 스타일을 적용할 요소를 지정할 수 있다는 것입니다.

다시 말해, 위의 예에서 CSS 구문의 세부사항은 현재 중요하지 않다. CSS 구문에 대한 자세한 내용은 나중에 배울 것입니다.

1.먼저 index.html의 헤드에 <스타일> 요소를 추가합니다. 그런 다음 단락에 추가한 인라인 스타일을 삭제하십시오.

# 4~11번 라인

<head>

<title>Vacation World</title>

<style>

</style>

</head>

# 19번 라인

<p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>

2. <p> 요소에서 제거한 인라인 스타일을 머리의 <스타일> 요소에 추가합니다.

# 4번~11번 라인

<head>

<title>Vacation World</title>

<style>

p {

font-family: Arial;

}

</style>

</head>

1-4. The .css file

개발자는 HTML과 CSS 코드를 별도의 파일에 저장하여 코드를 혼용하지 않습니다(HTML 파일에는 HTML 코드만 포함되고 CSS 파일에는 CSS 코드만 포함됨).

.css 파일 이름 확장명을 사용하여 CSS 파일을 생성할 수 있습니다. style.css

CSS 파일을 사용하면 HTML 파일의 가독성과 유지관리성을 희생하지 않고 페이지를 스타일을 지정하는 데 필요한 모든 CSS 코드를 작성할 수 있습니다.

1.index.html을 살펴보십시오. 열기 및 닫기 <스타일> 태그 사이에 CSS 코드를 잘라서 style.css라는 새 파일에 직접 붙여 넣습니다.

index.html에서 나머지 <스타일> 요소를 삭제해야 합니다.

# 헤드 부분에 있던 스타일 태그 삭제.

<head>

<title>Vacation World</title>

</head>

# style.css 파일에 CSS코드만 옮긴 후 Style 태그는 삭제.

p {

font-family: Arial;

}

1-5. Linking the CSS File

완벽해! 스타일링(CSS)에서 구조(HTML)를 성공적으로 분리했지만 웹 페이지가 여전히 흐리게 보입니다. 왜일까요?

HTML과 CSS 코드가 별도의 파일에 있는 경우 파일을 연결해야 합니다. 그렇지 않으면 HTML 파일이 CSS 코드를 찾을 수 없으며 스타일이 적용되지 않습니다.

<link> 요소를 사용하여 HTML 및 CSS 파일을 연결할 수 있습니다. <링크> 요소는 HTML 파일 head 내에 있어야 합니다. 이 태그는 자동 닫힘 태그이며 다음 세 가지 특성이 필요합니다.

1. href - 앵커 요소처럼 이 속성의 값은 CSS 파일의 주소 또는 경로여야 합니다.

2. type(유형) - 연결 중인 문서 유형(이 경우 CSS 파일)을 설명합니다. 이 특성의 값은 text/css로 설정해야 합니다.

3. rel - HTML 파일과 CSS 파일 간의 관계를 설명합니다. 스타일시트에 연결하는 중이므로 값을 스타일시트로 설정해야 합니다.

HTML 파일과 CSS 파일을 함께 연결할 때 [link] 요소는 다음과 같이 표시됩니다.

위의 예에서 스타일시트에 대한 경로는 URL입니다.

https://www.codecademy.com/stylesheets/style.css

URL을 사용하여 스타일시트의 경로를 지정하는 것도 스타일시트를 연결하는 방법입니다.

CSS 파일이 HTML 파일과 동일한 디렉터리에 저장된 경우 URL 대신 다음과 같이 상대 경로를 지정할 수 있습니다.

상대 경로를 사용하는 것은 스타일시트를 연결하는 매우 일반적인 방법입니다.

1. styleheet style.css를 HTML file index.html에 연결하겠습니다.

먼저 <헤드> 섹션에 <링크> 요소를 추가하십시오.

2. 다음으로, href 속성을 <link> 요소에 추가하고 style.css와 동일하게 설정합니다.

오른쪽 브라우저의 웹 페이지를 보세요. 변경 사항이 있습니까?

3. 다음은 유형 특성을 추가하고 올바른 값으로 설정합니다.

4.마지막으로 rel 속성을 추가하고 올바른 값으로 설정합니다. 첫 번째 단락의 글꼴을 확인합니다. 스타일시트가 올바르게 연결되었을 때 대상 설명과 다르게 표시되어야 합니다.

# style.css 와 링크하며 type은 text를 css로 관계는 스타일시트 관계. index.html

# 요렇게. index.html

<head>

<title>Vacation World</title>

</head>

1-6. Tag Name

CSS는 요소의 태그 이름을 사용하여 HTML 요소를 선택할 수 있습니다. 태그 이름은 HTML 꺾쇠 괄호 사이의 단어(또는 문자)입니다.

예를 들어 HTML에서 문단 요소에 대한 태그는 <p>입니다. <p> 요소를 선택하기 위한 CSS 구문은 다음과 같습니다.

p {

}

위의 예에서 모든 문단 요소는 CSS 선택기를 사용하여 선택된다. 위의 예에서 선택기는 p입니다. CSS 선택기는 해당 요소의 HTML 태그와 일치하지만 각 괄호는 일치하지 않습니다.

또한 두 개의 곱슬곱슬한 브레이스가 셀렉터 바로 뒤에 따라갑니다(각각 열린 브레이스와 닫기 브레이스). 모든 CSS 속성은 선택한 요소의 스타일을 지정하기 위해 곱슬곱슬한 가새의 안으로 들어갑니다.

1.In style.css는 <h1> 요소에 대한 선택기를 추가합니다.

참고: 이미 index.html 및 style.css를 연결했으므로 웹 페이지의 내용이 업데이트됩니다.

2. 방금 선언한 H1 실렉터의 곱슬곱슬한 가새에 다음을 기록합니다. 이 코드는 모든 <h1> 태그의 텍스트 색상을 만듭니다.

# style.css 파일. p 태그에 적힌 요소들은 Arial 폰트로 바뀐다. h1 태그에 적힌 요소들은 maroon 색으로 바뀐다.

p {

font-family: Arial;

}

h1 {

color: maroon;

}

1-7. Class Name

CSS는 태그 이름으로 요소를 선택하는 것으로 제한되지 않습니다. HTML 요소에는 태그 이름뿐만 아니라 속성도 포함될 수 있습니다. 하나의 공통 특성은 클래스 속성입니다. 클래스 속성별로 요소를 선택할 수도 있습니다.

예를 들어 다음 HTML을 고려하십시오.

<p class="brand">Sole Shoe Company</p>

위 예의 문단 요소에는 "p" 태그 내에 클래스 속성이 있습니다. 클래스 특성은 "브랜드"로 설정됩니다. CSS를 사용하여 이 요소를 선택하려면 다음 CSS 선택기를 사용할 수 있습니다.

.brand {

}

CSS를 사용하여 클래스별로 HTML 요소를 선택하려면 클래스 이름 앞에 마침표(.)를 붙여야 합니다. 위의 예에서 클래스는 브랜드이므로 클래스의 CSS 선택기는 .brand입니다.

1.In style.css, 제목 클래스와 함께 HTML 요소에 대한 CSS 선택기를 추가합니다.

2. 방금 선언한 .title 선택기의 원형 가새 안쪽에 다음 내용을 기록합니다. color: teal;

제목 H1 요소에는 HTML에 title 클래스가 있으므로 title 색상이 teal로 변경됩니다. 11행에서 index.html로 이동하여 HTML 요소를 볼 수 있습니다.

나중에 연습할 때는 왜 .title을 사용하는 것이 h1 선택기보다 우선하는지 알아보겠습니다.

# style.css에 추가

.title {

color: teal;

}

1-8. Multiple Classes

CSS를 사용하여 HTML 요소의 클래스 속성을 이름으로 선택할 수 있습니다.

지금까지 요소당 하나의 클래스 이름만 사용하여 요소를 선택했습니다. 모든 HTML 요소에 단일 클래스가 있는 경우 각 요소에 대한 모든 스타일 정보에 새 클래스가 필요합니다.

다행히도 HTML 요소의 클래스 속성에 클래스 이름을 둘 이상 추가할 수 있습니다.

예를 들어, 녹색과 대담해야 하는 표제 요소가 있을 수 있습니다. 다음과 같이 두 개의 CSS 규칙을 작성할 수 있습니다.

.green {

color: green;

}

.bold {

font-weight: bold;

}

그런 다음 이러한 클래스를 하나의 HTML 요소에 포함할 수 있습니다.

여러 클래스를 공백으로 구분하여 HTML 요소의 클래스 속성에 추가할 수 있습니다. 따라서 필요한 모든 스타일 조합에 대한 사용자 정의 클래스를 쓰지 않고도 CSS 클래스를 혼합하여 일치시킬 수 있습니다.

1. style.css에서 모든 문자를 대문자로 만들어 페이지 제목을 더 두드러지게 만드는 클래스 선택기를 추가합니다. .uppercase라는 이름의 수업을 쓰시오. 그런 다음, 곱슬곱슬한 가새의 안쪽에 다음을 기록합니다.

2. 이제 클래스를 제목 요소에 추가할 수 있습니다. index.html로 이동합니다. 11번 라인에는 타이틀 클래스를 가진 <h1> 요소가 있습니다. 이 요소에 대문자 클래스를 추가합니다.

# style.css 상태

p {

font-family: Arial;

}

h1 {

color: maroon;

}

.title {

color: teal;

}

.uppercase {

text-transform: uppercase;

}

# index.html 11행 라인

<h1 class="title uppercase">Top Vacation Spots</h1>

1-9. ID Name

HTML 요소를 고유하게 스타일링해야 하는 경우(어떤 클래스가 요소에 적용되는지에 상관없이) 요소에 ID를 추가할 수 있습니다. 요소에 ID를 추가하려면 요소에 ID 속성이 필요합니다.

그런 다음 CSS는 ID 속성별로 HTML 요소를 선택할 수 있습니다. ID 요소를 선택하려면 CSS가 ID 이름을 해시태그(#)로 앞에 붙입니다. 예를 들어 위의 예에서 HTML 요소를 선택하려는 경우 다음과 같이 표시됩니다.

#large-title {

}

ID 이름은 large-title 이므로 해당 ID의 CSS 선택자는 large-title 입니다.

1.In style.css, 아티클 ID가 있는 요소에 대한 CSS 선택기를 추가합니다. 곱슬곱슬한 가새의 안쪽에 다음 글을 쓰십시오.

font-family: cursive;

text-transform: capitalize;

이 두 가지 CSS 속성은 글꼴을 필기체로 만들고 각 단어의 첫 번째 문자를 대문자로 사용하는 동시에 나머지 문자를 낮춥니다.

# style.css 에 추가한다. article 옆에있는 샾은 기능을 하는 샾이다.

#article-title {

font-family: cursive;

text-transform: capitalize;

}

2.index.html로 이동합니다. 줄 11에서 h1 요소에 ID 특성을 추가하고 아티클을 ID로 포함합니다. 제목에 대문자만 있는 필기체로 변경 내용이 표시됩니다.

# index.html에 추가한다.

<h1 class="title uppercase" id="article-title">Top Vacation Spots</h1>

1-10. Classes and IDs

CSS는 태그, 클래스 및 ID별로 HTML 요소를 선택할 수 있습니다. CSS 클래스와 ID는 서로 다른 용도를 가지며, HTML 요소의 스타일을 지정하는 데 사용하는 용도에 영향을 줄 수 있습니다.

CSS 클래스는 여러 요소에 재사용됩니다. CSS 클래스를 작성하면 HTML 요소의 클래스를 혼합하여 다양한 방법으로 요소를 스타일을 설정할 수 있습니다.

예를 들어, 두 개의 제목이 있는 페이지를 상상해 보세요. 한 개의 헤드라인은 굵고 푸른색이여야 하고, 다른 하나는 굵고 녹색이어야 한다. 서로 코드를 반복하는 각 헤드라인에 대해 별도의 CSS 규칙을 작성하는 대신 .bold CSS 규칙, .green CSS 규칙 및 .blue CSS 규칙을 작성하는 것이 좋습니다. 그런 다음 한 헤드라인에 녹색 그레이드를 지정하고, 다른 헤드라인을 파란색으로 지정할 수 있습니다.

클래스는 여러 번 사용해야 하지만 ID는 한 요소만 스타일을 지정합니다. 다음 연습에서는 ID가 태그 및 클래스 스타일을 재정의합니다. ID는 클래스 및 태그 스타일을 재정의하므로 항상 동일하게 보여야 하는 요소에 대해서만 자주 사용해야 합니다.

1. index.html의 13행에는 페이지의 기사가 게시된 시간을 표시하는 요소가 있습니다.

게시 시간의 클래스와 함께 클래스 속성을 추가합니다.

# index.html 13행

<h6 class="publish-time">Published: 2 Days Ago</h6>

2. style.css에 게시 시간 클래스 선택기를 추가하고 CSS 규칙 본문 내에 텍스트를 회색으로 만듭니다.

# style.css에 추가.

.publish-time {

color: gray;

}

1-11. Specificity

특이성은 브라우저가 표시할 CSS 스타일을 결정하는 순서입니다. CSS에서 가장 좋은 방법은 가장 낮은 수준의 특수성을 사용하여 요소를 스타일을 지정하는 것입니다. 따라서 새로운 스타일이 필요할 경우 요소를 재정의하기가 쉽습니다.

ID는 CSS에서 가장 구체적인 선택 항목이며, 이어서 클래스 및 마지막으로 태그입니다. 예를 들어 다음과 같은 HTML 및 CSS를 고려해 보십시오.

<h1 class="headline">Breaking News</h1>

h1 {

color: red;

}

.headline {

color: firebrick;

}

위의 예제 코드에서 클래스 선택기가 태그 선택기보다 더 구체적이기 때문에 머리글의 색상이 firebrick으로 설정됩니다. 위의 코드에 ID 속성(및 선택기)을 추가한 경우 ID 선택기 본문 내의 스타일은 머리글에 대한 다른 모든 스타일을 재정의합니다. ID를 재정의하는 유일한 방법은 추가 스타일을 사용하여 다른 ID를 추가하는 것입니다.

시간이 지나면서 파일이 코드와 함께 증가하면 많은 요소에 ID가 있을 수 있으며, 이로 인해 요소의 스타일을 변경하기 위해 보다 구체적인 새로운 스타일을 생성해야 하므로 CSS를 편집하기 어려울 수 있습니다.

스타일을 쉽게 편집하려면 가능하면 태그 선택기로 스타일을 지정하는 것이 좋습니다. 그렇지 않으면 클래스 선택기를 추가하십시오. 이 정보가 충분히 구체적이지 않은 경우 ID 선택기를 사용하는 것이 좋습니다.

1.In index.html, 라인 11의 요소에는 h1 태그, 두 클래스 및 ID가 있습니다. ID는 둘 다보다 구체적이기 때문에 ID의 스타일이 요소에 적용됩니다. 클래스를 만들어 덜 구체적이 되도록 이 요소의 ID를 다시 작성하겠습니다.

index.html에서 라인 11의 h1 요소에서 ID 속성을 삭제합니다.

# 지웠음.

<h1 class="title uppercase">Top Vacation Spots</h1>

2. 이제 CSS에서 #tiple-title ID를 삭제합니다.

style.css로 이동하여 #ticle-id ID 선택기 및 내용 삭제

3. style.css로 이동합니다. .cursive라는 이름의 클래스 선택기를 추가합니다. 몸 안에 다음 글을 쓰십시오.

font-family: cursive;

.cursive {

font-family: cursive;

}

4. 대문자로 명명된 다른 클래스 선택기를 추가합니다. 곱슬곱슬한 가새에 다음을 기록합니다.

text-transform: capitalize;

.capitalize {

text-transform: capitalize;

}

5. 이제 다시 index.html로 이동하고 대문자 클래스를 11행에서 h1 요소의 필기체 및 대문자로 바꿉니다.

# 바꾸기 전. title이라는 클래스와 uppercase라는 클래스가 있는데 cursive 클래스와 capitalize 클래스로 바꾸었다.

<h1 class="title uppercase">Top Vacation Spots</h1> # 띄어쓰는 것만으로도 클래스 2개 설정을 넣을 수 있다.

# 바꾼 후(답)

<h1 class="cursive capitalize">Top Vacation Spots</h1>

# 요렇게 style.css 파일 안에 있다.

.title {

color: teal;

}

.uppercase {

text-transform: uppercase;

}

.cursive {

font-family: cursive;

}

.capitalize {

text-transform: capitalize;

}

1-12. Chaining Selectors

CSS 규칙을 작성할 때 HTML 요소에 두 개 이상의 CSS 선택기가 동시에 있어야 할 수 있습니다.

이는 여러 선택기를 결합하여 이루어지며, 이를 체인으로 합니다. 예를 들어, h1 요소에 대한 .special 클래스가 있는 경우 CSS는 다음과 같습니다.

h1.special {

}

위의 코드는 특별한 클래스를 가진 h1 요소만 선택합니다. p 요소에도 특수 클래스가 있는 경우 예제 규칙은 문단의 스타일을 지정하지 않습니다.

1.체인을 사용하여 스타일을 추가할 대상을 선택합니다.

style.css에서 대상 등급의 h2 요소에 대한 CSS 선택기를 작성합니다. 셀렉터의 곱슬곱슬한 가새 안에 다음을 기록하십시오.

font-family: cursive;

이렇게 하면 목적지가 기사의 제목처럼 피상적으로 된다.

h2.destination {

font-family: cursive;

}

1-13. Nested Elements

CSS는 선택기를 선택하여 요소를 선택하는 것 외에도 다른 HTML 요소 내에 내포된 요소의 선택을 지원합니다. 예를 들어 다음 HTML을 고려하십시오.

</ul>

내포된 <li> 요소는 다음과 같은 CSS로 선택됩니다.

.main-list li {

}

위의 예에서 .main-list는 .main-list 요소(순서되지 않은 목록 요소)를 선택합니다. 중첩된 <li>는 공백으로 분리된 선택기에 li를 추가하여 최종 선택기로 .main-list li를 생성함으로써 선택됩니다(선택자의 공간에 유의).

이러한 방식으로 요소를 선택하면 기대되는 컨텍스트에 선택 항목이 표시되도록 함으로써 선택 항목을 더욱 구체적으로 지정할 수 있습니다.

1.In index.html, 각 대상에는 아래에 설명 단락이 있습니다. 각 설명에는 명소 목록이 있습니다. Top Attactions 요소를 선택하여 티울을 만들어 더 두드러지게 합니다.

style.css로 이동합니다. 클래스 .description이 있는 내부 요소 내에 내포된 모든 h5 요소를 대상으로 하는 선택기를 추가합니다.

2. 셀렉터의 나선형 가새 안쪽에 다음 글을 쓰십시오. color: teal;

# 설명 .description 안에 있는 h5 요소를 컬러로 teal 색깔을 지정.

.description h5 {

color: teal;

}

1-14. Chanining and Specificity

마지막 연습에서는 모든 h5 요소를 선택하는 대신 .description 요소 내에 내포된 h5 요소만 선택했습니다. 이 CSS 선택기는 h5만 쓰는 것보다 더 구체적이었다. CSS 선택기에 둘 이상의 태그, 클래스 또는 ID를 추가하면 CSS 선택기의 특수성이 증가합니다.

예를 들어 다음 CSS를 고려하십시오.

p {

color: blue;

}

.main p {

color: red;

}

이러한 CSS 규칙은 p 요소의 모양을 정의합니다. .main p에는 클래스와 p 태그가 선택기로 있으므로 .main 요소 내의 p 요소만 빨간색으로 표시됩니다. 이것은 p 요소가 파란색이어야 한다는 또 다른 일반적인 규칙에도 불구하고 일어난다.

1.In style.css, h5 요소 선택기를 작성합니다. 곱슬곱슬한 가새의 안쪽에는 다음이 표시됩니다.

color: rebeccapurple;

설명의 h5 요소는 색상이 변경되지 않습니다. 그들은 계속해서 티끌을 것이다.

이는 지난 연습에서 작성한 h5 요소에 대한 보다 구체적인 선택 항목이 있기 때문입니다. 보다 구체적인 CSS 선택기(.description h5)로 인해 h5의 일반 선택기가 유지되지 않습니다.

# 레베카퍼플 색이 적용이 되지 않는다. 위에서 .description h5{}를 사용했기 때문에 이제 클래스 요소를 사용하지 않으면 적용이 안된다.

h5 {

color: rebeccapurple;

}

1-15. Important

ID보다 더 구체적인 것이 하나 있습니다: ! 중요. !important는 전체 규칙 대신 특정 속성에 적용될 수 있습니다. 아무리 구체적이라 할지라도 그것은 어떤 스타일도 뛰어넘을 것이다. 결과적으로, 그것은 거의 사용되지 말아야 한다. 일단! 중요한 것이 사용되면, 그것은 무시하기가 매우 어렵다.

CSS에서 중요한 !의 구문은 다음과 같습니다.

p {

color: blue !important;

}

.main p {

color: red;

}

!important는 p 선택기의 색 특성에 사용되므로 색 속성을 빨간색으로 설정하는 좀 더 구체적인 .main p 선택기가 있더라도 모든 p 요소는 파란색으로 표시됩니다.

! 중요 플래그는 요소가 시간의 100%와 동일한 방식으로 나타날 때만 유용합니다. 프로젝트 내내 그리고 시간이 흐르면서 이것이 진실일 것이라고 보장하는 것은 거의 불가능하기 때문에, 전적으로 피하는 것이 가장 좋습니다! 만약 여러분이 언젠가 중요한 사용(또는 스스로 사용하고 싶은 유혹)이 있다면, 우리는 당신의 CSS 재편성을 강력히 추천한다. 당신의 CSS를 더 융통성 있게 만드는 것은 일반적으로 즉각적인 문제를 해결할 것이고 당신의 코드를 장기적으로 더 유지 가능하게 할 것이다.

1. 마지막 연습에서 정의한 H5 선택기의 색 특성에 중요한 항목을 추가합니다. !중요한 것은 반점 이전, 반점 이전이어야 한다.

이제 h5 요소가 teal 대신 reeccapurple이 됩니다. 왜냐하면! 중요한 것은 어떤 것이든 다른 스타일을 능가할 것이기 때문이다.

# .class 요소를 사용하지 않았지만 !important를 사용하였더니 적용이 되었다. 중요한 것의 힘!

h5 {

color: rebeccapurple !important;

}

1-16. Multiple Selectors

CSS를 더욱 간결하게 만들기 위해 CSS 스타일을 한 번에 여러 CSS 선택기에 추가할 수 있습니다. 이렇게 하면 반복적인 코드 쓰기를 방지할 수 있습니다.

예를 들어, 다음 코드에는 반복 스타일 특성이 있습니다.

h1 {

font-family: Georgia;

}

.menu {

font-family: Georgia;

}

글꼴 가족: 두 명의 선택자에 대해 Georgia를 두 번 쓰는 대신, 선택기를 쉼표로 구분하여 두 가지 모두에 동일한 스타일을 적용할 수 있습니다.

h1,

.menu {

font-family: Georgia;

}

CSS 선택기를 쉼표로 구분하면 h1 및 .menu 요소 모두 글꼴 패밀리: 조지아 스타일을 사용할 수 있습니다.

1.H5 및 p 요소에 대한 선택기를 작성하여 두 요소가 모두 동일한 CSS 규칙으로 스타일을 지정합니다. 다음 두 요소에 이 스타일 적용:

font-family: Georgia;

페이지 전체의 글꼴은 동일한 CSS 규칙을 두 번 작성하지 않고 조지아로 변경됩니다.

# h5와 p의 폰트가 변경 되었다.

h5,

p {

font-family: Georgia;

}

1-17. Review CSS Selectors

이 과정 내내 CSS로 HTML 요소를 선택하고 스타일을 적용하는 방법을 배웠습니다. 배운 내용을 복습해 보겠습니다.

1. CSS는 HTML 요소의 모양을 변경할 수 있습니다. 이를 위해서는 CSS가 HTML 요소를 선택한 다음 스타일을 적용해야 합니다.

2. CSS는 태그, 클래스 또는 ID별로 HTML 요소를 선택할 수 있습니다.

3. 하나의 HTML 요소에 여러 CSS 클래스를 적용할 수 있습니다.

4. 클래스는 재사용할 수 있지만 ID는 한 번만 사용할 수 있습니다.

5. ID는 클래스보다 구체적이며 클래스는 태그보다 구체적입니다. 즉 ID는 클래스의 스타일을 재정의하고 클래스는 태그 선택기의 스타일을 재정의합니다.

6. 여러 선택기를 함께 묶어 요소를 선택할 수 있습니다. 이것은 특수성을 높이지만 필요할 수 있다.

7. 내포된 요소는 선택기를 공간과 분리하여 선택할 수 있습니다.

8 !important 플래그는 어떤 스타일보다 우선하지만, 무시하기가 매우 어렵기 때문에 거의 사용해서는 안 됩니다.

9. 관련 없는 여러 선택자는 선택 도구 이름을 쉼표로 구분하여 동일한 스타일을 받을 수 있습니다.

이번 수업은 아주 잘했다. 이 지식을 통해, 당신은 CSS를 사용하여 웹사이트들이 멋져 보이게 하기 위해 웹사이트들의 외관과 느낌을 바꿀 수 있을 것이다.

# style.css

p {

font-family: Arial;

}

h1 {

color: maroon;

}

h2.destination {

font-family: cursive;

}

.title {

color: teal;

}

.uppercase {

text-transform: uppercase;

}

.publish-time {

color: gray;

}

.cursive {

font-family: cursive;

}

.capitalize {

text-transform: capitalize;

}

.description h5 {

color: teal;

}

h5 {

color: rebeccapurple !important;

}

h5,

p {

font-family: Georgia;

}

# 둘의 차이 : h2 클래스 명을 = "destination" 이라고 지었다. <h2 class="destination">

h2.destination {

font-family: cursive;

}

# 둘의 차이 : 얘는 .description 클래스 안에 있는 h5 요소를 정확히 지정한 것이다.

.description h5 {

color: teal;

}

2. CSS Visual Rules

이 과정에서는 HTML 요소에 스타일을 추가하는 데 도움이 되는 CSS 시각적 규칙의 기본 사항을 알아봅니다.

2-1. Introduction To Visual Rules

이 과정에서는 스타일링 웹 페이지 요소를 시작할 수 있도록 CSS의 기본 구조와 구문을 배우게 됩니다.

아래 코드를 살펴보세요.

# index.html

<!DOCTYPE html>

<html>

<head>

<title>The Rise of Soccer in The US</title>

</head>

<body>

<h3 class="byline">Article By: Jane Dover</h3>

<h1>How the Rise of Soccer in the US Is Changing the Face of Youth Sports</h1>

<h2>The focus on soccer in youth sports programs is exploding nation-wide</h2>

<p>When the first World Cup arrived in the US in the 90's everyone officially declared that soccer was it. Well it's taken it's time but we can definitely see the influence of soccer, especially women's soccer, across the US. This year, 3 million kids

played in youth soccer leagues with 2/3 of those leagues for girls. In fact, in the 12-17 age range the MLS has surpassed the MLB and NFL in popularity.</p>

<p>Part of this meteoric rise can be attributed to the impressively soaring ad dollars being pumped into the Women's World Cup games in 2014. The women's games generated $40 million for Fox, that's definitely not chump change. And those advertisers,

like ATT, Coca Cola, Verizon, Nike, Visa, and other heavy hitters, are working to make sure they see those numbers grow year after year by investing in youth soccer facilities and promoting programs across the country. </p>

<p>Now that big business is involved you can be assured you'll see a continued rise in popularity in soccer across the country for years to come. </p>

</div>

<p class="caption">The local semi- pro soccer team in Seattle, WA plays an international friendly</p>

</div>

</body>

</html>

# style.css

body {

/* Old browsers */

background: #141E30;

/* Chrome 10-25, Safari 5.1-6 */

background: -webkit-linear-gradient(-45deg, #35577D, #141E30);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

background: linear-gradient(-45deg, #35577D, #141E30);

margin: 0;

padding: 0;

}

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

}

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

color: rgba(255, 255, 255, 0.5);

font-weight: 100;

font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

}

p {

color: AliceBlue;

line-height: 1.3em;

text-align: left;

width: 100%;

}

.byline {

font-family: Helvetica;

color: rgba(255, 255, 255, 0.5);

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

}

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

}

.content {

padding: 40px;

}

.image {

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;

}

.writer-img {

-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);

float: left;

width: 50px;

}

2-2. CSS Structure

CSS를 사용하여 HTML 요소의 스타일을 지정하려면 CSS 선택 도구 본문에 CSS 선언문을 작성해야 합니다.

h1 {

color: blue;

}

위 예에서는 <h1> 요소를 선택합니다. 실렉터의 몸 안에서 우리는 파란색을 쳤다. 이 줄을 CSS 선언이라고 합니다. CSS 선언은 속성 및 값으로 구성됩니다.

속성 - 해당 요소의 스타일을 지정할 속성(예: 크기, 색상 등)입니다.

값 - 속성 값(예: 크기는 18px, 색상은 파란색 등)입니다.

위의 예에서 속성은 색이고 값은 파란색입니다. 속성 및 값은 콜론(:)으로 구분됩니다. 선언이 끝나면 세미콜론(;)을 사용해야 합니다.

마지막으로 위의 예에서 코드의 전체 조각을 CSS 규칙 또는 규칙 집합이라고 합니다. CSS 규칙은 선택기(여기, h1)와 선택기 내부의 모든 선언으로 구성됩니다.

style.css를 살펴보고 다양한 CSS 규칙 집합을 살펴보십시오.

2-3. Font Family

포맷된 워드 프로세서를 사용한 적이 있는 경우 입력하는 글꼴을 변경할 수 있는 기능도 사용했을 가능성이 높습니다. 글꼴은 기술 용어 서체 또는 글꼴 패밀리를 나타냅니다.

웹 페이지의 텍스트 유형을 변경하려면 글꼴 집합 속성을 사용할 수 있습니다.

h1 {

font-family: Garamond;

}

위의 예에서 모든 주요 머리글 요소의 글꼴 패밀리가 가리몬드로 설정되었습니다.

웹 페이지에서 서체를 설정할 때는 다음 사항에 유의하십시오.

1. 사용자가 웹 페이지를 방문할 때 해당 글꼴을 표시하려면 스타일시트에 지정된 글꼴을 사용자의 컴퓨터에 설치해야 합니다.

2. 모든 HTML 요소의 기본 서체는 Times New Roman입니다. 포맷된 워드 프로세서를 사용한 적이 있는 경우 이 서체를 잘 알고 있을 수 있습니다. 글꼴 집합 특성이 정의되지 않은 경우 페이지는 Times New Roman에 나타납니다.

3. 웹 페이지에 사용되는 서체 수를 2 또는 3으로 제한하는 것이 좋습니다. 이것은 경우에 따라 페이지가 더 빨리 로드되는 데 도움이 되며 일반적으로 좋은 설계 결정입니다.

4. 서체 이름이 두 개 이상의 단어로 구성된 경우 다음과 같이 서체 이름을 따옴표로 묶는 것이 좋습니다.

h1 {

font-family: "Courier New";

}

웹 안전 글꼴은 여기에서 참조할 수 있습니다.

1.Inside style.css, 메인 제목(h1) 및 서브헤드링(h2)의 글꼴 패밀리를 조지아에 추가합니다.

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

}

h2 {

border-bottom: 1px solid rgba(255, 255, 255, 0.5);

color: rgba(255, 255, 255, 0.5);

font-weight: 100;

font-size: 22px;

line-height: 24px;

padding-bottom: 30px;

text-align: left;

width: 70%;

font-family: Georgia;

}

2. 다음으로 단락의 글꼴 패밀리를 Helvetica로 변경합니다.

p {

color: AliceBlue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

}

.byline {

font-family: Helvetica;

color: rgba(255, 255, 255, 0.5);

float: left;

font-size: 14px;

padding-left: 10px;

text-transform: uppercase;

}

2-4. Font Size

서체를 변경하는 것만이 텍스트를 사용자 지정하는 유일한 방법은 아닙니다. 종종 웹 페이지의 다른 섹션은 글꼴 크기를 수정하여 강조 표시됩니다.

웹 페이지에서 텍스트 크기를 변경하려면 글꼴 크기 속성을 사용할 수 있습니다.

p {

font-size: 18px;

}

위의 예에서, 모든 단락의 글꼴 크기는 18px로 설정되었다. px는 픽셀을 의미하며 글꼴 크기를 측정하는 방법이다.

1.In style.css 문단 요소의 글꼴 크기를 18픽셀로 설정합니다.

p {

color: AliceBlue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

}

2-5. Font Weight

CSS에서 글꼴 가중 속성은 굵게 또는 얇은 텍스트가 표시되는 방식을 제어합니다.

p {

font-weight: bold;

}

위의 예에서 웹 페이지의 모든 단락은 굵게 표시됩니다.

font-weight 속성의 또 다른 값은 정상입니다. 왜 존재할까?

웹 페이지의 모든 텍스트를 굵게 표시하려면 모든 텍스트 요소를 선택하고 글꼴 무게를 굵게 변경할 수 있습니다. 그러나 텍스트의 특정 섹션이 정상으로 나타나야 하는 경우, 특정 요소의 글꼴 무게를 정상으로 설정할 수 있으며, 기본적으로 해당 요소에 대해 굵은 글꼴을 끌 수 있습니다.

1.In style.css 문단 요소의 글꼴 무게를 굵게 설정합니다.

p {

color: AliceBlue;

line-height: 1.3em;

text-align: left;

width: 100%;

font-family: Helvetica;

font-size: 18px;

font-weight: bold;

}

2-6. Text Align (텍스트 정렬)

텍스트에 스타일링 적용 여부와 상관없이(형식, 크기, 무게 등) 텍스트는 항상 브라우저 왼쪽에 표시됩니다.

텍스트를 정렬하기 위해 텍스트 정렬 속성을 사용할 수 있습니다. 텍스트 정렬 속성은 텍스트를 보관하는 요소(또는 상위 항목)에 맞춰 정렬합니다.

h1 {

text-align: right;

}

텍스트 정렬 속성은 다음 세 가지 값 중 하나로 설정할 수 있습니다.

left(왼쪽) - 상위 요소의 왼쪽에 텍스트를 정렬합니다. 이 경우 브라우저입니다.

center(가운데) - 상위 요소 내부에 텍스트를 배치합니다.

right(오른쪽) - 상위 요소의 오른쪽에 텍스트를 정렬합니다.

1.In style.css는 주 제목의 텍스트 정렬 속성을 설정하여 중앙에 표시되도록 합니다.

h1 {

color: #FFF;

font-size: 2em;

padding-top: 100px;

width: 100%;

font-family: Georgia;

text-align: center;

}

2-7. Color

색상의 세부 사항을 토론하기 전에 색상에 대해 두 가지 구별을 하는 것이 중요하다. 색상은 다음과 같은 설계 측면에 영향을 미칠 수 있습니다.

Foreground color

Background color

전경색은 요소가 나타나는 색입니다. 예를 들어, 머리글이 녹색으로 보이도록 스타일을 지정할 때 머리글의 전경 색상이 스타일 지정되었습니다.

반대로, 헤딩의 배경이 노란색으로 보이도록 스타일을 지정할 때 헤드의 배경색이 스타일 지정되었습니다.

CSS에서 이러한 두 가지 설계 측면은 다음 두 가지 속성으로 스타일을 설정할 수 있습니다.

색상: 이 속성은 요소의 전경색을 스타일을 지정합니다.

배경 색상: 이 속성은 요소의 배경색을 스타일 지정합니다.

h1 {

color: red;

background-color: blue;

}

위의 예에서, 제목의 텍스트는 빨간색으로, 제목의 배경은 파란색으로 표시됩니다.

1.In style.css는 .caption Selector의 배경색을 흰색으로 설정합니다.

2. 그런 다음 같은 클래스 선택기에서 텍스트 색상을 검은색으로 설정합니다. 페이지 하단에 있는 그림의 캡션 결과를 관찰합니다.

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: White;

color: black;

}

2-8. Opacity (불투명도)

불투명도는 요소가 얼마나 투명한지를 측정합니다. 0부터 1까지 측정되고 1은 100%를 나타내고 0은 0%를 나타내거나 완전히 보이지 않습니다.

불투명도는 멋진 오버레이 효과를 위해 요소를 다른 요소로 희미하게 만드는 데 사용할 수 있습니다. 요소의 불투명도를 조정하려면 구문이 다음과 같이 표시됩니다.

.overlay {

opacity: 0.5;

}

위의 예에서, .overlay 요소는 50% 가시적이므로 뒤에 있는 모든 위치가 표시됩니다.

1. 0.75의 값으로 불투명도 특성을 추가하여 .caption 클래스를 투명하게 만듭니다.

.caption {

display: block;

font-family: 'Playfair Display', serif;

font-size: 14px;

font-style: italic;

line-height: 14px;

margin-left: 20px;

padding: 10px;

position: relative;

top: 80%;

width: 60%;

background-color: White;

color: black;

opacity: 0.75;

2-9. Background Image

CSS에는 요소의 배경을 변경할 수 있는 기능이 있습니다. 한 가지 옵션은 요소의 배경을 이미지화시키는 것입니다. 이 작업은 CSS 속성 배경 이미지를 통해 수행됩니다. 구문은 다음과 같습니다.

.main-banner {

background-image:

url("https://www.example.com/image.jpg");

}

1. 배경 이미지 속성은 이미지를 표시하도록 요소의 배경을 설정합니다.

2. 배경 이미지에 제공되는 값은 URL입니다. URL은 이미지에 대한 URL이어야 합니다. URL은 프로젝트 내의 파일일 수도 있고 외부 사이트에 대한 링크일 수도 있습니다. 기존 프로젝트 내의 이미지에 연결하려면 상대 파일 경로를 제공해야 합니다. 프로젝트에 rans.jpg라는 이름의 이미지가 포함된 이미지 폴더가 있으면 상대 파일 경로는 다음과 같습니다.

.main-banner {

background-image: url("images/mountains.jpg");

}

1.In style.css, .image 클래스의 배경 이미지를 변경합니다. 다음 URL을 사용합니다.

https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/soccer.jpeg

# url 안에 주소 부분만 변경해 주었다.

.image {

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/soccer.jpeg");

background-size: cover;

background-position: center;

height: 300px;

}

2-10. Review Visual Rules (시각적 규칙 검토)

믿을 수 없는 일! CSS를 사용하여 웹 사이트 전체에서 텍스트 및 이미지를 변경했습니다. 이 과정 내내 다음과 같은 개념을 배웠습니다.

CSS 선언은 속성 및 값 쌍으로 구성됩니다.

font-family(글꼴 집합) 속성은 요소의 유형 모양을 정의합니다.

font-size(글꼴 크기)는 표시되는 텍스트 크기를 제어합니다.

font-weight(글꼴 두께)는 텍스트가 표시되는 방식을 정의합니다.

text-align(텍스트 정렬 속성)은 상위 컨테이너의 왼쪽, 오른쪽 또는 가운데에 텍스트를 배치합니다.

background-color, color. 텍스트에는 색과 배경색이라는 두 가지 색 특성이 있을 수 있습니다. 색상은 텍스트 색상을 정의한 반면 배경색은 텍스트 뒤의 색을 정의합니다.

CSS는 불투명도 속성으로 요소를 투명하게 만들 수 있습니다.

CSS는 배경 이미지 속성이 있는 이미지로 요소의 배경을 설정할 수도 있습니다.

2. Learn CSS: The Box Model

1. The Box Model

이 과정에서는 CSS Box 모델에 대해 설명합니다.

1-1. Introduction to the Box Model

브라우저는 기본 위치 값을 가진 HTML 요소를 로드합니다. 이로 인해 사용자가 생성할 수 있는 보기가 제한되는 동시에 예기치 않은 사용자 환경도 발생할 수 있습니다. 이 과정에서는 웹 사이트에서 요소가 배치되고 표시되는 방법을 이해하는 중요한 개념인 상자 모델에 대해 알아봅니다.

HTML 및 CSS를 사용한 경우 상자 모델의 모르는 측면이 있습니다. 예를 들어 요소의 배경색을 설정한 경우 색상은 요소 바로 뒤의 영역뿐만 아니라 요소의 오른쪽에 있는 영역에도 적용되었음을 알 수 있습니다. 또한, 만약 여러분이 텍스트를 정렬했다면, 여러분은 그것이 무언가에 비례하여 정렬되었다는 것을 알고 있을 것입니다. 그게 뭔데요?

웹 페이지의 모든 요소는 브라우저에 의해 상자 안에서 "살아 있는" 것으로 해석됩니다. 이것이 박스 모델이 의미하는 것이다.

예를 들어 요소의 배경색을 변경할 때는 전체 상자의 배경색을 변경합니다.

이 과정에서는 상자 모델의 다음 측면에 대해 알아봅니다.

1. 요소 상자의 크기.(demensions)

2. 요소 상자의 경계입니다.(borders)

3. 요소 상자의 패들.(paddings)

4. 요소 상자의 여백.(margins)

시작합시다!

오른쪽의 코드를 편집하는 데 약간의 시간을 할애하십시오. 다음 특성이 요소의 디스플레이에 어떤 영향을 미치는지 확인할 수 있는지 확인합니다.

1. height(높이)

2. width(폭)

3. padding(패딩)

4. border(경계)

5. margin(여백)

6. overflow(넘쳐흐르다)

1-2. The Box Model

상자 모델은 웹 페이지에서 공간을 차지하는 요소의 일부를 정의하는 속성 집합으로 구성됩니다. 모델에는 내용 영역의 크기(폭 및 높이)와 요소의 패딩, 테두리 및 여백이 포함됩니다. 속성은 다음과 같습니다.

1. 너비 및 높이 - 내용 영역의 폭 및 높이를 지정합니다.

2. 패딩: 내용 영역과 테두리 사이의 공간 크기를 지정합니다.

3. 테두리 - 내용 영역 및 패딩을 둘러싼 경계의 두께와 스타일을 지정합니다.

4. 마진: 요소의 외곽선과 외곽선 사이의 공간의 양을 지정합니다.

오른쪽에 있는 이미지는 박스 모델의 시각적 표현입니다.

새 탭에서 상자 모델 이미지를 열어서 해당 과정을 진행하는 동안 상자 모델을 참조할 수 있습니다.

Box Model image : https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/diagram-boxmodel.svg

1-3. Height and Width

요소의 내용은 높이와 너비라는 두 가지 차원을 가집니다. 기본적으로 HTML 상자의 치수는 상자의 원시 내용을 포함하도록 설정됩니다.

CSS 높이 및 너비 특성을 사용하여 이러한 기본 치수를 수정할 수 있습니다.

p {

height: 80px; width: 240px;

}

이 예에서 문단 요소의 높이와 너비는 각각 80픽셀과 240픽셀로 설정됩니다. 위의 코드의 px는 픽셀을 나타냅니다.

픽셀을 사용하면 요소 상자의 정확한 크기를 설정할 수 있습니다(폭과 높이). 요소의 폭과 높이를 픽셀 단위로 설정하면 모든 장치에서 크기가 동일하며 랩톱 화면을 채우는 요소가 모바일 화면에 오버플로됩니다.

1. #banner에 700 픽셀의 높이를 추가합니다.

#banner {

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");

background-size: cover;

background-position: bottom center;

width: 100%;

height: 700px;

}

2. .pull-quote 너비를 350픽셀로 설정합니다.

.pull-quote {

width: 350px;

}

3. #banner .content h1 를 width 400픽셀로 설정합니다.

#banner .content h1 {

position: relative;

top: 50px;

margin: 0 auto;

width: 400px;

}

1-4. Borders

테두리는 그림 주위의 프레임처럼 요소를 둘러싸고 있는 선입니다. 경계는 특정 너비, 스타일 및 색상으로 설정할 수 있습니다.

1. width(너비) — 테두리의 두께입니다. 경계 두께는 픽셀 단위로 설정하거나 다음 키워드 중 하나를 사용하여 설정할 수 있습니다.

2. style(스타일) — 테두리의 설계. 웹 브라우저는 10가지 스타일을 렌더링할 수 있습니다. 이러한 스타일에는 없음, 점, 솔리드 등이 있습니다.

3. color(색상) - 테두리의 색상. 웹 브라우저는 140개의 기본 제공 색상 키워드를 포함하여 몇 가지 다른 형식을 사용하여 색상을 렌더링할 수 있습니다.

p {

border: 3px solid coral;

}

위의 예에서, 테두리의 폭은 3픽셀이며, 고체의 스타일과 산호색을 가지고 있다. 세 가지 속성은 모두 한 줄의 코드로 설정됩니다.

기본 테두리는 중간 무색이며, 여기서 색은 요소의 현재 색상입니다. CSS 파일에 너비, 스타일 또는 색상이 설정되어 있지 않으면 웹 브라우저는 해당 속성의 기본값을 할당합니다.

p.content-header {

height: 80px;

width: 240px;

border: solid coral;

}

이 예에서는 경계 스타일이 솔리드로 설정되고 색상은 산호로 설정됩니다. 너비가 설정되지 않았으므로 기본값은 중간입니다.

# 규칙만 알면 쉽다. border: 픽셀크기 테두리표시형태 색깔;

# dotted : 점선, solid : 직선.

1.점 1픽셀 빨간색 테두리를 모든 H2 헤딩에 추가합니다.

h2 {

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

border: 1px dotted red;

}

2. #banner .content h1 규칙에 경계를 추가하여 이렇게 보이도록 합니다.

테두리 두께는 3픽셀입니다.

#banner .content h1 {

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

border: 3px solid white;

}

1-5. Border Radius (테두리 반지름)

상자의 테두리를 표시한 후 경계가 요소 상자의 실제 모양인 정사각형을 강조 표시한다는 것을 알게 될 것입니다. CSS 덕분에, 경계가 사각형일 필요는 없습니다.

경계 반지름 특성을 사용하여 요소 경계 상자의 모서리를 수정할 수 있습니다.

div.container {

border: 3px solid rgb(22, 77, 100);

border-radius: 5px;

}

위 예의 코드는 테두리의 네 모서리를 모두 5픽셀의 반경으로 설정합니다(즉, 반지름 5픽셀의 원과 동일한 곡률).

반지름을 상자의 높이와 같게 설정하거나 100%로 설정하여 완전한 원인 테두리를 작성할 수 있습니다.

div.container {

height: 60px;

width: 60px;

border: 3px solid rgb(22, 77, 100);

border-radius: 100%;

}

위 예의 코드는 완벽한 원인 <div>를 생성합니다.

# 테두리가 곡선으로 이뻐졌다.

1.In style.css는 #banner .content h1의 경계 반지름을 15 픽셀로 설정합니다.

#banner .content h1 {

border: solid 3px white;

position: relative;

top: 50px;

width: 400px;

margin: 0 auto;

border-radius: 15px;

}

2. 다른 경계 반지름 값을 사용하여 실험하고 코드를 실행하여 결과를 확인하십시오!

1-6. Padding l

상자의 내용물과 상자의 테두리 사이의 공간을 패딩이라고 합니다. 패딩은 그림과 그것을 둘러싼 프레임 사이의 공간과 같습니다. CSS에서 패딩 속성을 사용하여 이 공간을 수정할 수 있습니다.

p.content-header {

border: 3px solid coral;

padding: 10px;

}

이 예의 코드는 문단(텍스트)과 테두리 사이에 10픽셀의 공간을 네 개의 모든 측면에 배치한다.

패딩 속성은 배경색을 확장하고 콘텐츠를 덜 좁아 보이게 하는 데 종종 사용됩니다.

상자의 각 측면에서 패딩의 양을 보다 구체적으로 지정하려면 다음 속성을 사용할 수 있습니다.

1. padding - top

2. padding - right

3. padding - bottom

4. padding -left

각 속성은 상자 컨텐츠의 한 쪽에서만 패딩에 영향을 주므로 사용자 지정의 유연성이 향상됩니다.

p.content-header {

border: 3px solid fuschia;

padding-bottom: 10px;

}

위 예에서 문단 내용 하단만 패딩이 10픽셀입니다.

1. 한 줄로 .navigation li 요소를 20픽셀의 패딩으로 설정합니다. 실행을 클릭하고 변경 내용을 확인합니다.

.navigation li {

font-weight: 100;

letter-spacing: 2px;

padding: 20px;

}

2.웹페이지 하단에 있는 빨간 상자를 보세요. .share 요소를 14픽셀의 style.css로 설정하고 코드를 실행합니다. 페이지 하단의 빨간색 상자가 어떻게 바뀌었는지 관찰합니다.

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

text-decoration: none;

padding: 14px;

}

3.H2 요소의 상단 및 하단 패딩을 20픽셀로 설정하고 h2 요소의 왼쪽 및 오른쪽 패딩을 30픽셀로 설정합니다.

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 30px;

}

1-7. Padding ll

패딩 속성의 다른 구현에서는 컨텐츠의 각 측면에 단일 선언에서 정확히 얼마나 많은 패딩을 사용해야 하는지 지정할 수 있습니다.

p.content-header { border: 3px solid grey; padding: 6px 11px 4px 9px; }

위의 예에서 4개의 값 6px 11px 4px 9px는 시계 방향으로 회전하는 패딩의 양에 해당합니다. 이렇게 하려면 컨텐츠의 상단(6픽셀), 오른쪽(11픽셀), 아래쪽(4픽셀) 및 왼쪽(9픽셀)을 지정합니다.

패딩 속성의 이 구현을 사용하는 경우 요소의 모든 네 측면에 대해 패딩 값을 지정해야 합니다.

그러나 패딩을 위한 상단 및 하단 값이 서로 동일하고 패딩을 위한 왼쪽 및 오른쪽 값이 서로 동일한 경우 다음 바로 가기를 사용할 수 있습니다.

p.content-header {

padding: 5px 10px;

}

첫 번째 값인 5px는 컨텐츠의 상단과 하단 측면에 대한 패딩 값을 설정합니다. 두 번째 값인 10px는 내용의 왼쪽과 오른쪽의 패딩 값을 설정합니다.

1. H2 패들을 두 개의 값을 사용하여 CSS의 한 줄에 설정하도록 변경합니다.

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

text-align: center;

padding: 20px 30px;

}

2.padding 속성에 2개의 값을 사용하여 문단 패딩을 상단과 하단에 10픽셀, 왼쪽과 오른쪽에 20픽셀로 설정합니다.

p {

color: grey;

font-size: 16px;

line-height: 48px;

padding: 10px 20px;

}

1-8. Margins l

지금까지 컨텐츠, 경계 및 패딩이라는 상자 모델의 구성 요소에 대해 배웠습니다. 네 번째 및 마지막 구성 요소는 여백입니다.

마진은 상자 바로 바깥쪽에 있는 공간을 말합니다. 여백 속성은 이 공간의 크기를 지정하는 데 사용됩니다.

p {

border: 1px solid aquamarine;

margin: 20px;

}

위 예의 코드는 문단 상자 바깥쪽에 모두 20픽셀의 공간을 배치합니다. 즉, 페이지의 다른 HTML 요소는 단락 테두리에서 20픽셀 이내에 있을 수 없습니다.

상자의 각 측면에 있는 여백의 양을 더욱 구체적으로 지정하려면 다음 속성을 사용할 수 있습니다.

1. margin-top

2. margin-right

3. margin-bottom

4. margin-left

각 속성은 상자의 한 쪽에서만 여백에 영향을 주므로 사용자 지정에 더 많은 유연성을 제공합니다.

p {

border: 3px solid DarkSlateGrey;

margin-right: 15px;

}

위 예에서 문단 상자의 오른쪽만 15픽셀의 여백을 가집니다. 요소의 특정 측면에 사용되는 여유 값을 보는 것이 일반적입니다.

1.p 요소의 위쪽 여백을 60픽셀로 설정합니다.

p {

color: grey;

font-size: 16px;

line-height: 48px;

padding: 10px 20px;

margin-top: 60px;

}

2. 웹 페이지 하단에 있는 빨간 상자 세 개를 보세요. 이러한 요소는 클래스 .share의 고정 요소입니다. 10픽셀의 여백을 가지도록 이러한 .share 요소를 설정합니다.

# 서로 간의 간격이 늘어 났다.

.share a {

background: red;

border: 1px solid red;

border-radius: 3px;

color: white;

display: inline-block;

padding: 14px;

text-decoration: none;

margin: 10px;

}

1-9. Margin ll

상자의 네 면 모두에서 같은 마진을 원하지 않는다면?

마진 속성의 유사한 구현은 단일 선언에서 상자의 각 측면에 얼마나 많은 마진이 있어야 하는지를 정확하게 지정하는 데 사용됩니다.

p {

margin: 6px 10px 5px 12px;

}

위의 예에서, 네 개의 값 6px 10px 5px 12px는 상자 주위의 여유의 양을 시계 방향으로 회전시킵니다. 이렇게 하려면 상단의 여백(6픽셀), 오른쪽(6픽셀), 아래쪽(5픽셀) 및 왼쪽(12픽셀)을 지정합니다.

여백 특성의 이 구현을 사용하는 경우, 상자의 모든 네 측면에 대해 여백 값을 지정해야 합니다.

패딩 바로 가기와 마찬가지로 여백에 대한 상단 및 하단 값이 서로 동일하고 여백에 대한 왼쪽 및 오른쪽 값이 서로 동일할 경우 다음 바로 가기를 사용할 수 있습니다.

p { margin: 6px 12px; }

첫 번째 값 6px는 상자의 상단과 하단에 대한 여백 값을 설정합니다. 두 번째 값인 12px는 상자의 왼쪽과 오른쪽의 여백 값을 설정합니다.

1.두 개의 값을 사용하여 H2 상단 및 하단 여백을 30픽셀로, 왼쪽 및 오른쪽 여백을 20픽셀로 설정합니다.

h2 {

border: 1px dotted red;

color: red;

font-size: 14px;

line-height: 48px;

padding: 20px 30px;

text-align: center;

margin: 30px 20px;

}

1-10. Auto

또한 여백 속성을 사용하여 콘텐츠를 중앙에 배치할 수 있습니다. 그러나 몇 가지 구문 요구 사항을 따라야 합니다. 다음 예를 살펴보십시오.

div {

margin: 0 auto;

}

위의 예에서, 여백: 0 자동, 포함된 요소에 점을 중앙에 배치합니다. 0은 위쪽 및 아래쪽 여백을 0픽셀로 설정합니다. 자동 값은 요소가 포함된 요소 내에서 중앙에 배치될 때까지 브라우저에 왼쪽 및 오른쪽 여백을 조정하도록 지시합니다.

위의 예에서 div 요소는 페이지를 채우는 요소 내에서 중앙에 위치해야 하지만, 발생하지 않습니다. 이유가 무엇입니까?

요소의 중심을 맞추려면 해당 요소의 너비를 설정해야 합니다. 그렇지 않으면, 점 너비는 예를 들어 <바디>와 같이 포함 요소의 전체 너비로 자동 설정됩니다. 페이지의 전체 폭을 차지하는 요소의 중심을 지정할 수 없습니다.

div.headline {

width: 400px;

margin: 0 auto;

}

위의 예에서, div의 너비는 400픽셀로 설정되며, 이는 대부분의 화면 너비보다 작습니다. 이렇게 하면 폭이 400픽셀 이상인 포함 요소 내에서 div가 중앙에 배치됩니다.

1.pull-quote 클래스 요소의 너비를 350픽셀로 설정합니다.

.pull-quote {

width: 350px;

}

2. 한 줄에서 .pull-quote 클래스의 수직 여백을 0으로 설정하고 수평 여백을 자동으로 설정합니다.

.pull-quote {

width: 350px;

margin: 0 auto;

}

3. #main 요소의 수직 여백을 0으로 설정하고 수평 여백을 자동으로 설정합니다. 이걸 하니 보기 좋아졌다.

#main {

padding: 40px;

text-align: center;

width: 400px;

margin: 0 auto;

}

1-11. Margin Collapse

보셨듯이 패딩은 요소의 테두리 내부에 추가된 공간이고 여백은 요소의 테두리 외부에 추가된 공간입니다. 또 다른 차이점은 수직 여백이라고도 하는 상단과 하단 여백은 축소되지만 상단과 하단 패딩은 축소되지 않는다는 것입니다.

패딩과 같이 수평 여백(왼쪽과 오른쪽)이 항상 표시되고 함께 추가됩니다. 예를 들어, ids #div1과 #div-2를 가진 두 개의 디바가 서로 옆에 있으면 인접한 여백의 합계만큼 멀리 떨어져 있습니다.

#img-one {

margin-right: 20px;

}

#img-two {

margin-left: 20px;

}

이 예에서는 #img-one과 #img-2 경계 사이의 공간이 40픽셀입니다. #img-one(20px)의 오른쪽 여백과 #img-2(20px)의 왼쪽 여백이 추가되어 총 마진이 40픽셀이 됩니다.

수평 여백과 달리 수직 여백은 추가되지 않습니다. 대신, 두 개의 수직 여백 중 더 큰 것은 인접한 요소 사이의 거리를 설정한다.

#img-one {

margin-bottom: 30px;

}

#img-two {

margin-top: 20px;

}

이 예에서는 #img-one과 #img-2 요소 사이의 수직 여백이 30픽셀입니다. 여백의 합계는 50픽셀이지만 여백은 축소되므로 간격은 #img1 아래쪽 여백에만 따라 달라집니다.

수직 여백이 무너지는 것을 키 큰 사람을 밀려고 노력하는 작은 사람으로 생각하면 도움이 될 수 있다. 키가 큰 사람은 팔이 길며 키가 작은 사람을 쉽게 밀 수 있는 반면 팔이 짧은 사람은 긴 사람에게 닿을 수 없다.

오른쪽의 그래픽 디스플레이를 살펴봅니다. 요소 A와 B에는 각 요소 여백의 합인 20픽셀의 수평 여백이 있습니다. 요소 A와 C는 요소 C의 위쪽 여백인 30픽셀의 수직 여백이 있습니다.

1-12. Minimum and Maximum Height and Width (최소와 최대, 높이와 폭)

웹 페이지는 화면 크기가 다른 디스플레이를 통해 볼 수 있기 때문에 웹 페이지의 콘텐츠는 이러한 크기의 변경으로 인해 어려움을 겪을 수 있습니다. 이 문제를 방지하기 위해 CSS는 요소 상자의 크기를 얼마나 좁게 또는 얼마나 넓게 지정할 수 있는지 제한할 수 있는 두 가지 특성을 제공합니다.

min width(최소 너비) - 이 속성은 요소 상자의 최소 너비를 보장합니다.

max width(최대 너비) - 이 속성은 요소 상자의 최대 너비를 보장합니다.

p {

min-width: 300px;

max-width: 600px;

}

위의 예에서 모든 단락의 너비는 300픽셀 미만으로 줄어들지 않으며, 폭은 600픽셀을 넘지 않습니다.

텍스트와 마찬가지로 브라우저 창이 좁아지거나 확장되면 콘텐츠를 읽기 어려울 수 있습니다. 이 두 가지 특성은 요소의 최소 및 최대 폭을 제한하여 내용을 읽을 수 있도록 합니다.

요소의 최소 및 최대 높이를 제한할 수도 있습니다.

min height(최소 높이) - 이 속성은 요소 상자의 최소 높이를 보장합니다.

max height(최대 높이) - 이 속성은 요소 상자의 최대 높이를 보장합니다.

p {

min-height: 150px;

max-height: 300px;

}

위의 예에서 모든 단락의 높이는 150픽셀 미만으로 줄어들지 않으며 높이는 300픽셀을 넘지 않습니다.

최대 높이 특성이 너무 낮게 설정되면 요소 상자의 내용은 어떻게 됩니까? 내용이 상자 밖으로 유출되어 읽을 수 없는 내용이 발생할 수 있습니다. 다음 연습에서는 이 문제를 해결하는 방법을 배울 것입니다.

Hint

단락 요소는 <p> HTML 태그로 표시되며, 이 태그는 p 태그 선택기를 사용하여 CSS 파일에서 선택할 수 있습니다.

1.In style.css는 문단의 최소 너비를 200픽셀로 설정합니다.

이 작업을 성공적으로 완료하면 브라우저의 크기를 조정하고 단락 상자가 더 이상 200픽셀 미만으로 줄어들지 않는 방법에 주목하십시오.

2. 다음으로, 단락의 최대 폭을 800픽셀로 설정합니다.

이 작업을 성공적으로 완료하면 브라우저의 크기를 조정하고 단락 상자가 더 이상 800픽셀 이상으로 확장되지 않는 것을 볼 수 있습니다.

3.In style.css는 문단의 최소 높이를 200픽셀로 설정합니다.

이 작업을 성공적으로 완료하면 브라우저의 크기를 조정하고 단락 상자의 높이가 더 이상 200픽셀 미만으로 줄어들지 않는 것을 알 수 있습니다.

4.In style.css는 문단의 최대 높이를 300픽셀로 설정합니다.

이 작업을 성공적으로 완료하면 브라우저의 크기를 조정하고 단락 상자의 높이가 더 이상 300픽셀 이상으로 확장되지 않는 것을 볼 수 있습니다. 당신은 당신의 텍스트가 넘쳐날 것입니다. 다음 연습에서는, 우리가 그것을 고칠 거예요!

p {

color: grey;

font-size: 16px;

line-height: 48px;

margin-top: 60px;

padding: 10px 20px;

min-width: 200px;

max-width: 800px;

min-height: 200px;

max-height: 300px;

}

1-13. Overflow

상자 모델의 모든 구성 요소는 요소의 크기로 구성됩니다. 예를 들어 다음과 같은 치수의 이미지는 너비가 364픽셀이고 높이가 244픽셀입니다.

1. 300픽셀 폭

2. 200픽셀

3. 왼쪽과 오른쪽에 10픽셀 패딩

4. 상단 및 하단에서 10픽셀 패딩

5. 왼쪽과 오른쪽에 2픽셀 경계

6. 상단 및 하단에서 2픽셀 경계

7. 왼쪽 및 오른쪽의 20픽셀 여백

8. 상단 및 하단에서 10픽셀의 여유

총 치수(364px x 244px)는 모든 수직 치수 및 모든 수평 치수를 함께 추가하여 계산합니다. 경우에 따라 이러한 구성 요소는 상위 포함 영역보다 큰 요소를 생성합니다.

부모 영역보다 큰 요소를 모두 볼 수 있도록 하려면 어떻게 해야 할까요?

오버플로 속성은 상자 외부에 유출되거나 오버플로되는 콘텐츠에 발생하는 작업을 제어합니다. 다음 값 중 하나로 설정할 수 있습니다.

hidden(숨김) - 이 값으로 설정하면 오버플로우되는 모든 콘텐츠가 보기에서 숨겨집니다.

scroll(스크롤) - 이 값으로 설정하면 스크롤 막대가 요소 상자에 추가되어 나머지 내용을 스크롤하여 볼 수 있습니다.

visible(보이는) - 이 값으로 설정하면 포함된 요소 외부에 오버플로 내용이 표시됩니다. 이 값은 기본값입니다.

p {

overflow: scroll;

}

위의 예에서 단락 콘텐츠가 오버플로되면(사용자가 브라우저 창의 크기를 조정한 경우), 사용자가 나머지 콘텐츠를 볼 수 있도록 스크롤 막대가 나타납니다.

웹 브라우저에 하위 요소를 렌더링하는 방법을 지시하기 위해 상위 요소에 오버플로 속성이 설정됩니다. 예를 들어, 디바의 오버플로 속성을 스크롤하도록 설정하면 이 디바의 모든 하위 항목에 스크롤 막대가 있는 오버플로 내용이 표시됩니다.

1. In overflow: scroll, #main 요소의 높이를 1000픽셀로 변경합니다.

2. #main 요소의 오버플로를 스크롤할 수 있도록 설정합니다.

아래로 스크롤하면 두 번째 스크롤 막대가 단락 섹션 위에 나타나야 합니다. 브라우저 구성 요소를 확장해야 이 동작을 명확히 볼 수 있습니다.

#main {

margin: 0 auto;

padding: 40px;

text-align: center;

width: 400px;

height: 1000px;

overflow: scroll; 이 기능을 넣으니 스크롤이 생겨서 글을 내릴 수 있도록 보게 되었다. ㅎㅎ 편하다.

}

1-14. Resetting Defaults (기본값 재설정)

모든 주요 웹 브라우저에는 외부 스타일시트가 없을 때 사용하는 기본 스타일시트가 있습니다. 이러한 기본 스타일시트를 사용자 에이전트 스타일시트라고 합니다. 이 경우 "사용자 에이전트"라는 용어는 브라우저의 기술 용어입니다.

사용자 에이전트 스타일시트에는 패딩 및 여백의 기본값을 설정하는 기본 CSS 규칙이 있는 경우가 많습니다. 이는 브라우저에 HTML 요소가 표시되는 방식에 영향을 미치므로 개발자가 웹 페이지를 디자인하거나 스타일을 지정하기가 어려울 수 있습니다.

많은 개발자들이 이러한 기본값을 재설정하여 실제로 새로운 슬레이트 작업을 수행할 수 있습니다.

* {

margin: 0;

padding: 0;

}

위 예의 코드는 모든 HTML 요소의 기본 여백 및 패딩 값을 재설정합니다. 외부 스타일시트의 첫 번째 CSS 규칙인 경우가 많습니다.

두 속성 모두 0으로 설정되어 있습니다. 이러한 속성을 0으로 설정하면 측정 단위가 필요하지 않습니다.

1.In style.css, 본체의 기본 여백 및 패딩 값을 재설정합니다. 브라우저의 웹 페이지는 어떻게 됩니까?

# body안에 모든게 적혀 있으니 이렇게 하면 된다.

body {

background-color: #FFF;

font-family: 'Raleway', sans-serif;

margin: 0;

padding: 0;

}

1-15. Visibility

요소를 보기에서 가시성 속성으로 숨길 수 있습니다.

가시성 속성은 다음 값 중 하나로 설정할 수 있습니다.

1. hidden - 요소를 숨기다

2. visible - 요소를 표시하다

<ul>

<li>Explore</li>

<li>Connect</li>

<li class="future">Donate</li>

<ul>

.future {

visibility: hidden;

}

위의 예에서 미래 클래스가 있는 목록 항목은 브라우저의 보기에서 숨겨집니다.

그러나 사용자는 브라우저에서 소스 코드를 확인하여 목록 항목(예: 기증)의 내용을 볼 수 있습니다. 또한 웹 페이지는 요소의 내용만 숨깁니다. 여전히 요소가 표시되도록 지정된 빈 공간이 남아 있습니다.

참고: 디스플레이와 가시성의 차이는 무엇입니까? 표시장치: 웹 페이지에서 아무것도 완전히 제거되지 않습니다. 그러나 가시성이 있는 요소는 웹 페이지에 표시되지 않지만 예약된 공간은 표시됩니다.

1.index.html의 목록 항목을 살펴보십시오. 목록 항목인 Donate는 기부 클래스를 가지고 있습니다.

In style.css:

1. 기부할 학급 선택기 추가

2. 가시성을 숨김으로 설정

# 숨긴 것이지 요소가 사라진 것은 아니다. 요소가 있는 자리는 빈 공간으로 표시가 된다.

.donate {

visibility: hidden;

}

1-16. Review

이 과정에서는 상자 모델의 네 가지 특성, 즉 높이와 너비, 패딩, 경계 및 여백에 대해 다루었습니다. 상자 모델을 이해하는 것은 고급 HTML 및 CSS 주제를 배우는 중요한 단계입니다. 잠시 시간을 내어 배운 내용을 복습해 봅시다.

1. 상자 모델은 HTML 요소 주위의 및 사이에 공간을 만드는 데 사용되는 속성 집합으로 구성됩니다.

2. 내용 영역의 높이와 너비는 픽셀 또는 백분율로 설정할 수 있습니다.

3. 경계면(Border)에는 요소의 내용 영역과 패딩이 있습니다. 경계의 색상, 스타일 및 두께는 CSS 속성으로 설정할 수 있습니다.

4. 패딩(padding)은 내용 영역과 테두리 사이의 공간입니다. 픽셀 또는 백분율로 설정할 수 있습니다.

5. 마진(margin)이란 요소의 테두리를 벗어나는 간격의 양입니다.

6. 수평 여백이 추가되므로 인접한 요소의 경계 사이의 총 공간은 한 요소의 오른쪽 여백과 인접 요소의 왼쪽 여백의 합과 같습니다.

7. 수직 여백이 축소되므로 수직 인접 요소 사이의 공간이 더 큰 여백과 같습니다.

8. 여백: 0 auto는 폭이 있는 경우 상위 내용 영역 내부의 요소를 수평으로 배치합니다.

9. 오버플로 속성은 표시, 숨기기 또는 스크롤하도록 설정할 수 있으며, HTML이 부모 콘텐츠 영역을 오버플로우는 콘텐츠를 렌더링하는 방법을 나타냅니다.

10. 가시성 속성은 요소를 숨기거나 표시할 수 있습니다.

#내 생각

padding이 있는 이유는 content의 가독성을 위해 존재하는 것 같다. 이쁘게 꾸미더라도 내용의 본질엔 피해를 주면 안되기 때문에 그 사이 간격을 만든 것이다. 그것이 패딩이다.

margin은 요소와 요소 사이의 간격 거리이다. 이것 또한 가독성을 위한 것 같다. 띄어쓰기 해야 하는 이유 같은 거?

코드 편집기에서 코드를 조정하십시오. 다음 속성을 변경하여 페이지 모양을 개선할 수 있는지 확인하십시오.

2. Changing the Box Model

웹 페이지를 디자인하는 데 사용되는 새로운 상자 모델에 대해 알아보십시오.

2-1. Why Change the Box Model?

마지막 교훈은 상자 모델의 가장 중요한 측면, 즉 상자 치수, 테두리, 패딩 및 여백에 초점을 맞추었다.

그러나 박스형 모델은 박스 치수에 대한 제약이 있다. 이 제한은 예를 들어 가장 잘 설명됩니다.

<h1>Hello World</h1>

h1 {

border: 1px solid black;

height: 200px;

width: 300px;

padding: 10px;

}

위 예에서, 헤딩 요소의 상자는 솔리드, 검정, 1픽셀 두께의 테두리를 가집니다. 상자의 높이는 200픽셀이고 상자의 폭은 300픽셀이다. 상자 내용물의 네 가지 모두에 10픽셀의 패딩이 설정되어 있습니다.

# 걍 쉽게 말하면 콘텐츠 테두리는 1픽셀 검은색 직선을 사용하고 높이는 200픽셀, 폭은 300픽셀 이고 콘텐츠와 테두리 사이 경계는 10픽셀 간격.

안타깝게도 현재 박스 모델에 따라 테두리 두께와 패딩이 상자의 크기에 영향을 미칩니다.

패딩의 10픽셀은 상자의 높이를 220픽셀로, 너비는 320픽셀로 증가시킨다. 다음으로, 1픽셀 두께의 테두리는 222픽셀로, 너비는 322픽셀로 증가한다.

이 상자 모델 아래에는 상자의 전체 치수에 테두리 두께와 패딩이 추가됩니다. 이렇게 하면 상자의 크기를 정확히 맞추기 어렵습니다. 시간이 지나면서 웹 페이지의 모든 콘텐츠를 배치하고 관리하기 어려울 수도 있습니다.

이 간단한 수업에서 여러분은 이 문제를 완전히 피하는 다른 기술을 사용하는 방법을 배우게 될 것입니다.

2-2. Box Model: Content-Box

CSS의 많은 속성에는 기본값이 있으므로 스타일시트에서 명시적으로 설정할 필요가 없습니다.

예를 들어, 텍스트의 기본 글꼴 중량은 정상이지만 이 속성-값 쌍은 일반적으로 스타일시트에 지정되지 않습니다.

브라우저가 가정하는 박스 모델에 대해서도 같은 말을 할 수 있다. CSS에서 상자 크기 속성은 웹 페이지를 해석할 때 브라우저가 사용해야 하는 상자 모델의 유형을 제어합니다.

이 속성의 기본값은 콘텐츠 상자입니다. 이것은 경계 두께와 패딩의 영향을 받는 동일한 박스 모델입니다.

오른쪽 도표를 살펴보세요. 이 그림에는 브라우저인 콘텐츠 상자에 사용되는 기본 상자 모델이 나와 있습니다. 완료되면 다음 연습으로 진행합니다.

2-3. Box Model: Border-Box

다행히도 전체 상자 모델을 재설정하고 새 상자인 테두리 상자를 지정할 수 있습니다.

* {

box-sizing: border-box;

}

위 예의 코드는 모든 HTML 요소에 대한 상자 모델을 경계 상자로 재설정합니다. 이 새 상자 모델은 사용자가 학습한 이전 상자 모델에 존재하는 치수 문제를 방지합니다.

이 상자 모델에서 상자의 높이와 너비는 고정되어 있습니다. 테두리 두께와 패딩이 상자 내부에 포함되므로 상자의 전체 치수가 변경되지 않습니다.

<h1>Hello World</h1>

* {

box-sizing: border-box;

}

h1 {

border: 1px solid black;

height: 200px;

width: 300px;

padding: 10px;

}

위의 예에서 상자의 높이는 200픽셀이고 폭은 300픽셀이다. 국경의 두께와 패딩은 전적으로 상자 안에 있을 것이다.

오른쪽 도표를 살펴보세요. 새 상자 모델인 테두리 상자를 보여 줍니다.

2-4. The New Box Model

이제 새로운 박스 모델에 대해 알았으니 브라우저에 구현해 보겠습니다.

* {

box-sizing: border-box;

}

그렇게 간단해요! 위의 예에서 범용 선택기(*)는 웹 페이지의 모든 요소를 대상으로 하며 해당 상자 모델을 테두리 상자 모델로 설정합니다.

1.In style.css 웹 페이지의 모든 요소에 대한 상자 모델을 새 상자 모델로 변경합니다.

오른쪽 웹 페이지에서 차이를 보지 못했을 것입니다. 괜찮습니다! 새 상자 모델은 테두리 두께와 패딩에 관계없이 요소의 치수가 동일하게 유지되도록 합니다.

* {

box-sizing: border-box;

}

2-5. Review: Changing the Box Model

이 과정에서는 기본 상자 모델의 중요한 제한에 대해 배웠습니다. 상자 치수는 테두리 두께 및 패딩의 영향을 받습니다.

배운 내용을 복습해 보겠습니다.

1. 기본 상자 모델에서 상자 치수는 테두리 두께 및 패딩의 영향을 받습니다.

2. 상자 크기 조정 속성은 브라우저에서 사용하는 상자 모델을 제어합니다.

3. 상자 크기 조정 속성의 기본값은 콘텐츠 상자입니다.

4. 새 상자 모델의 값은 테두리 상자입니다.

5. 테두리 상자 모델은 테두리 두께 또는 패딩의 영향을 받지 않습니다.

잠시 시간을 내어 style.css의 상자 모델에 대한 새로운 지식을 실험해 보십시오. 작업이 완료되면 다음 유닛으로 이동하십시오.

3. Display and Positioning

1. CSS Display and Positioning

웹 페이지의 다양한 부분에 HTML 요소를 배치하는 방법에 대해 알아 보십시오.

1-1. Flow of HTML

브라우저는 왼쪽에서 오른쪽으로, 위에서 아래로 CSS가 없는 HTML 문서의 요소를 문서에 있는 것과 동일한 순서로 렌더링합니다. 이를 HTML에서 요소의 흐름이라고 합니다.

CSS에는 HTML 요소를 스타일 지정하기 위해 제공하는 속성 외에도 브라우저의 요소 위치 지정 방법을 변경하는 속성이 포함되어 있습니다. 이러한 속성은 요소가 다른 요소 및 기타 관련 특성과 선을 공유할 수 있는 경우 페이지의 요소가 위치한 위치를 지정합니다.

이 과정에서는 브라우저에서 HTML 요소의 위치를 조정하는 5가지 속성에 대해 설명합니다.

position

display

z-index

float

clear

이러한 각 속성을 사용하면 웹 페이지에서 요소를 배치하고 볼 수 있습니다. 사용자가 알고 있는 다른 스타일 특성과 함께 사용할 수 있습니다.

1-2. Position

아래 이미지의 블록 레벨 요소를 살펴보십시오.

이러한 상자와 같은 블록 레벨 요소는 상위 요소의 전체 폭을 차단하고 다른 요소가 동일한 수평 공간에 나타나지 않도록 합니다. 위 이미지의 상자는 다음 CSS를 사용하여 생성되었습니다.

.boxes {

width: 120px;

height: 70px;

}

및 다음 HTML

위의 이미지에서 블록 레벨 요소는 자체적인 공간을 차지하므로 서로 겹치지 않습니다. 오른쪽에 있는 브라우저에서는 브라우저 왼쪽에도 블록 레벨 요소가 일관되게 표시됩니다. 블록 레벨 요소의 기본 위치입니다.

요소의 기본 위치는 위치 특성을 설정하여 변경할 수 있습니다. 위치 속성은 다음 네 가지 값 중 하나를 취할 수 있습니다.

1. static(정적) - the default value (기본값으로 지정할 필요 없음)

2. relative(관련있는)

3. absolute(완전한)

4. fixed(고정된)

다음 몇 가지 연습에서는 위의 항목 2, 3 및 4의 값에 대해 배우게 됩니다. 지금은 HTML 요소의 기본 위치를 선호할 경우 위치 속성을 설정할 필요가 없다는 점을 이해하는 것이 중요합니다.

1. style.css에서 .questition의 위치를 static으로 설정합니다.

위치를 정적으로 설정하면 아무 작업도 수행되지 않습니다. 그 이유는 정적이란 단순히 기본 동작을 의미하기 때문이다.

.question {

text-align: center;

position: static;

}

1-3. Position: Relative

요소의 기본 위치를 수정하는 한 가지 방법은 위치 속성을 상대로 설정하는 것입니다.

이 값을 사용하면 웹 페이지에서 기본 정적 위치에 상대적인 요소를 배치할 수 있습니다.

.box-bottom {

background-color: DeepSkyBlue;

position: relative;

}

위 예의 코드는 브라우저에 div의 상대적인 위치를 예상하도록 지시하지만, 페이지에서 div가 위치해야 하는 위치를 명시하지는 않습니다.

.box-bottom {

background-color: DeepSkyBlue;

position: relative;

top: 20px;

left: 50px;

}

위의 예에서, <div>는 4개의 간격띄우기 특성 중 2개를 사용하여 배치되었습니다. 유효한 오프셋 속성은 다음과 같습니다.

1. top - 요소를 아래로 이동합니다.(요소 위에 공간이 생겨서 결국 요소가 아래로 이동하게 된다.)

2. bottom - 요소를 위로 이동합니다.(요소 아래 공간이 생긴다. 결국 위로 이동.)

3. left - 요소를 오른쪽으로 이동합니다.(이하동문.)

4. right - 요소를 왼쪽으로 이동합니다.(이하동문.)

위의 예에서, <div>는 기본 정적 위치에서 20픽셀 아래로 50픽셀 이동됩니다. 아래 이미지는 상자의 새 위치를 표시합니다. 점선은 정적 위치(기본값) 상자의 위치를 나타냅니다.

오프셋 속성의 단위는 픽셀, ems 또는 백분율로 지정할 수 있습니다. 요소 위치 속성의 값이 기본 정적이면 간격띄우기 특성이 작동하지 않습니다.

1.In style.css는 .question에서 위치를 상대에게 설정합니다.

2. 다음, 상단에서 .question 40픽셀을 오프셋합니다(style.css).

.question {

text-align: center;

position: relative;

top: 40px;

}

1-4. Position: Absolute

요소의 위치를 수정하는 또 다른 방법은 위치를 절대값으로 설정하는 것입니다.

요소의 위치가 페이지의 다른 모든 요소를 절대 상태로 설정하면 요소를 무시하고 페이지에 없는 것처럼 작동합니다. 요소는 가장 가까운 위치에 있는 상위 요소를 기준으로 배치됩니다.

.box-bottom {

background-color: DeepSkyBlue;

position: absolute;

top: 20px; left: 50px;

}

위 예제에서 .box-bottom div는 보기의 왼쪽 상단 모서리에서 아래 오른쪽으로 이동합니다. 간격띄우기 특성을 지정하지 않으면 상단 상자가 하단 상자에 완전히 포함됩니다. 아래의 항목을 살펴보십시오.

이 이미지의 아래쪽 상자(파란색)가 용기의 왼쪽 상단 모서리에서 대체됩니다. 그것은 상단 상자의 오른쪽에는 20픽셀 더 낮고 50픽셀이다.

다음 연습에서는 절대 요소의 스크롤을 고정 요소와 비교합니다.

1.In style.css 헤더 선택기 내부의 위치를 절대값으로 설정합니다. 웹 페이지를 위아래로 스크롤합니다. 뭐가 눈에 띄나요?

2.위치를 절대값으로 변경한 경우 헤더가 수평으로 축소되는 것을 알 수 있습니다.우리는 나중에 연습할 때 그 이유를 배울 것이다.지금은 헤더의 폭 속성을 100%로 설정합니다.

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: absolute;

width: 100%

}

1-5. Position: Fixed

마지막 연습에서처럼 요소의 위치가 절대로 설정된 경우, 사용자가 스크롤할 때 요소는 문서의 나머지 부분과 함께 스크롤됩니다.

요소를 고정된 위치로 설정하여(사용자 스크롤과 관계 없이) 페이지의 특정 위치에 요소를 수정할 수 있습니다.

.box-bottom {

background-color: DeepSkyBlue;

position: fixed;

top: 20px;

left: 50px;

}

위의 예에서, 아래 이미지와 같이 사용자가 페이지에서 스크롤하는 위치에 상관없이 .box-bottom <는 그 위치에 고정되어 있습니다.

1.In style.css 헤더 규칙 내부의 위치를 고정으로 변경합니다. 웹 페이지를 위아래로 스크롤합니다. 뭐가 눈에 띄나요?

# position을 고정(fixed)시키니까 div class인 welcome이 안보인다.

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%

}

2. 이제 "Welcome" 섹션의 일부분이 머리글으로 덮혀 있습니다.헤더의 위치를 고정으로 변경했을 때 html 문서의 흐름에서 제거했기 때문입니다.그것을 바로잡자..welcome 요소의 위치를 상대 위치로 변경합니다.

# 상대 위치로 바꾸니(position: relative;) 위 헤더가 보이다가 내리자마자 welcome이 보인다. 신기하다.

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

}

3. "Welcome" 섹션을 상단에서 200픽셀만큼 해제합니다. 모든 것이 아직 정확하게 표시되지 않을 수도 있습니다. 나중에 연습해 보겠습니다.

# 글씨가 겹쳐 보인다.

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 200px;

}

1-6. Z-index

웹 페이지의 상자에 서로 다른 위치가 조합되어 있는 경우 상자(및 그 내용)가 서로 겹칠 수 있으므로 콘텐츠를 읽거나 소비하기 어렵습니다.

.box-top {

background-color: Aquamarine;

}

.box-bottom {

background-color: DeepSkyBlue;

position: absolute;

top: 20px;

left: 50px;

}

위의 예에서 .box-bottom <div>는 .box-top <div>를 무시하고 사용자가 스크롤할 때 겹칩니다.

z-index 속성은 요소가 겹칠 때 요소가 웹 페이지에 나타나는 "뒤로" 또는 "앞으로" 표시되는 거리를 제어합니다. 이는 얕은 소자 뒤에 더 깊은 소자가 나타나는 요소의 깊이를 생각할 수 있다.

z-index 속성은 정수 값을 허용합니다. 값에 따라 정수는 웹 페이지에 요소를 표시해야 하는 순서에 따라 브라우저에 지시합니다.

.box-top {

background-color: Aquamarine;

position: relative;

z-index: 2;

}

.box-bottom {

background-color: DeepSkyBlue;

position: absolute;

top: 20px;

left: 50px;

z-index: 1;

}

위 예에서는 .box-top 위치를 상대 위치로 설정하고 z-index를 2로 설정합니다. z-index 속성이 정적 요소(static)에 대해 작동하지 않기 때문에 위치를 상대적인 위치로 변경했습니다. 2의 z-index는 .box-top 요소가 .box-bottom z-index보다 크므로 .box-top 요소가 앞으로 이동합니다. 아래 예제 이미지를 참조하십시오.

위 그림에서 맨 위 상자가 아래쪽 상자 앞에서 움직이는 것을 볼 수 있습니다.

1.In style.css는 헤더의 z-지수를 10으로 설정합니다. 스크롤할 때 헤더가 더 이상 다른 요소에 의해 가려지지 않습니다!

# z-index가 정말 좋은 도구인 것 같다. 코딩하는데 있어서 겹치는 부분을 z-index를 사용하면 서로 안겹치게 해준다.

header {

background-color: #466995;

border-bottom: 1px solid #466995;

position: fixed;

width: 100%;

z-index: 10;

}

1-7. Inline Display

모든 HTML 요소에는 수평 공간을 다른 요소와 공유할 수 있는지 여부를 나타내는 기본 표시 값이 있습니다. 일부 요소는 내용 크기에 관계없이 전체 브라우저를 왼쪽에서 오른쪽으로 채웁니다. 다른 요소는 컨텐츠에 필요한 만큼만 수평 공간을 차지하며 다른 요소 바로 옆에 있을 수 있습니다.

이 과정에서는 디스플레이 속성의 세 가지 값인 인라인, 블록 및 인라인 블록에 대해 설명합니다.

<em>, <strong> 및 <a>와 같은 일부 태그의 기본 디스플레이를 인라인이라고 합니다. 인라인 요소에는 내용물을 단단히 감싸는 상자가 있어 내용을 표시하는 데 필요한 공간만 차지하며 각 요소 뒤에 새 줄이 필요하지 않습니다. 이러한 요소의 높이와 너비는 CSS 문서에 지정할 수 없습니다. 예를 들어 앵커 태그의 텍스트(<a>)는 기본적으로 주변 텍스트와 동일한 줄에 표시되며, 해당 내용을 포함하는 데 필요한 만큼의 크기만 표시됩니다. 인라인 요소의 크기는 높이 또는 너비 CSS 속성으로 변경할 수 없습니다.

To learn more about <em>inline</em> elements, read <a href="#">MDN documentation</a>.

위의 예에서 <em> 요소는 앵커 태그를 포함하여 그 주변의 컨텐츠와 동일한 라인에 내용을 표시하므로 인라인 방식으로 작동합니다. 이 예는 다음과 같습니다.

인라인 요소에 대한 자세한 내용을 보려면 MDN 설명서를 클릭하십시오.

CSS 표시 속성은 요소를 인라인 요소로 만들 수 있는 기능을 제공합니다. 여기에는 기본적으로 단락, divs 및 머리글과 같이 인라인 상태가 아닌 요소가 포함됩니다.

h1 {

display: inline;

}

위의 예에서 CSS는 모든 <h1> 요소의 디스플레이를 인라인으로 변경합니다. 브라우저는 (h1> 요소를 다른 인라인 요소와 바로 앞 또는 뒤에 같은 줄에 표시합니다(있는 경우).

1.In index.html에서 "Welcome" 주변에 열기 및 닫기 "strong"/strong" 태그를 추가합니다. 요소는 움직이지 않습니다. 그것은 <강력> 요소가 인라인이기 때문에 다른 요소와 선을 공유할 수 있기 때문입니다.

# Welcome 부분 글씨가 굵게 강조된다.

<h1><strong>Welcome</strong> to our survey!</h1>

<p>We're looking forward to getting your answers so we can make sure our products and services are the best they can be!</p>

</div>

1-8. Block Display

일부 요소는 해당 요소의 내용과 동일한 줄에 표시되지 않습니다. 이러한 요소를 블록 레벨 요소라고 합니다. 이러한 요소는 기본적으로 페이지의 전체 너비를 채우지만 너비 속성도 설정할 수 있습니다. 달리 명시되지 않은 한, 해당 내용은 해당 콘텐츠를 수용하는 데 필요한 높이입니다.

기본적으로 블록 레벨인 요소에는 모든 수준의 머리글 요소(<h1> ~ <h6>), <p>, <div> 및 <footer>가 포함됩니다.블록 레벨 요소의 전체 목록은 MDN 설명서를 참조하십시오.

strong {

display: block;

}

위의 예에서 모든 <strong> 요소는 해당 내용이 대부분의 컴퓨터 화면 너비를 채우지 않더라도 어느 쪽에도 콘텐츠가 없는 자체 라인에 표시됩니다.

1.In index.html은 문서 하단의 닫힘 본문 태그</body> 바로 위에 있는 "footer" 요소를 추가합니다.

</body>

2. 하나도 변경되지 않았습니다! 그 이유는 <footer> 요소가 비어 있기 때문입니다."조사해 주셔서 감사합니다!"라고 말하는 바닥글에 <h3> 요소를 추가하십시오.

<h3>Thanks for taking our survey!</h3>

</body>

3. 웹 페이지의 모양을 개선하려면 style.css에서 바닥글의 높이를 100픽셀로 설정합니다.

footer {

background-color: #DBE9EE;

text-align: center;

height: 100px;

}

1-9. Inline-Block Display

디스플레이 속성의 세 번째 값은 인라인 블록입니다. 인라인 블록 디스플레이는 인라인 요소와 블록 요소의 기능을 결합합니다. 인라인 블록 요소는 서로 옆에 나타날 수 있으며 너비 및 높이 특성을 사용하여 치수를 지정할 수 있습니다. 이미지는 기본 인라인 블록 요소의 가장 좋은 예입니다.

예를 들어, 아래 CSS의 <div>는 지정된 치수와 동일한 라인에 표시됩니다.

<p>I’m a rectangle!</p>

</div>

</div>

<p>Me three!</p>

</div>

.rectangle {

display: inline-block;

width: 200px;

height: 300px;

}

위의 예에서, 각각 텍스트의 단락을 포함하는 세 개의 직사각형 디바가 있습니다. .rectangle <div>는 모두 인라인 형태로 나타나며 폭 200픽셀, 높이 300픽셀의 경우 텍스트에 300픽셀의 공간이 필요하지 않을 수 있습니다.

1.페이지 맨 위의 메뉴에 있는 <li> 태그의 표시를 수정해 봅시다. li 요소의 표시 속성을 인라인 블록으로 설정합니다.

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

}

2.li 요소의 너비를 80픽셀로 설정합니다.

li {

color: #FFF;

font-family: 'Oswald', sans-serif;

font-size: 16px;

font-weight: 300;

text-transform: uppercase;

display: inline-block;

width: 80px;

}

3. 이제 "환영" 섹션의 상단 오프셋을 줄일 수 있습니다. 50픽셀로 설정합니다. #top 200px에서 50px로 수정.

.welcome {

background-color: #DBE9EE;

box-sizing: border-box;

padding: 40px;

text-align: center;

width: 100%;

position: relative;

top: 50px;

}

4. .answer 요소의 표시 속성을 인라인 블록으로 설정합니다.

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

}

1-10. Float

지금까지 간격띄우기 특성을 사용하여 요소의 정확한 위치를 지정하는 방법을 배웠습니다. 페이지에서 요소를 왼쪽이나 오른쪽으로 이동하려는 경우 부동 특성을 사용할 수 있습니다.

float을 다음 두 값 중 하나로 설정할 수 있습니다.

1. 왼쪽 - 이 값은 요소를 최대한 왼쪽으로 이동하거나 부동합니다.

2. 오른쪽 - 이 값은 요소를 최대한 오른쪽으로 이동합니다.

.boxes {

width: 120px;

height: 70px;

}

.box-bottom {

background-color: DeepSkyBlue;

float: right;

}

위의 예에서, 우리는 .box-bottom 요소를 오른쪽으로 띄웁니다. 이 기능은 정적 및 상대 위치 요소에 적용됩니다. 아래 코드 결과를 참조하십시오.

위 예와 같이 플랜지 요소에는 너비가 지정되어 있어야 합니다. 그렇지 않으면 요소가 포함하는 요소의 전체 폭을 가정하여 플로트 값을 변경하면 가시적인 결과가 나타나지 않습니다.

1. .answer 요소의 float 속성을 왼쪽으로 설정합니다.

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

height: 150px;

width: 200px;

float: left;

}

1-11. Clear

부동(float) 특성을 사용하여 한 번에 여러 요소를 부동할 수도 있습니다. 그러나 여러 부동 요소의 높이가 다를 경우 페이지의 레이아웃에 영향을 줄 수 있습니다. 특히, 요소들은 서로 부딪힐 수 있고 다른 요소들이 적절하게 왼쪽이나 오른쪽으로 이동하지 못하게 할 수 있다.

Clear 속성은 페이지에서 요소가 서로 충돌할 때 어떻게 동작해야 하는지 지정합니다. 다음 값 중 하나를 사용할 수 있습니다.

1. left(왼쪽) - 요소의 왼쪽이 동일한 포함 요소 내의 다른 요소에 닿지 않습니다.

2. right(오른쪽) — 요소의 오른쪽이 동일한 포함 요소 내의 다른 요소에 닿지 않습니다.

3. both(양쪽): 요소의 어느 쪽도 동일한 포함 요소 내의 다른 요소에 닿지 않습니다.

4. none(없음) — 요소가 어느 쪽을 터치할 수 있습니다.

div {

width: 200px;

float: left;

}

div.special {

clear: left;

}

위 예에서 페이지의 모든 <div>는 왼쪽에 표시됩니다. 클래스 특수 요소가 있는 요소는 키 큰 <div>가 위치를 차단했기 때문에 완전히 왼쪽으로 이동하지 않았습니다. 명확한 속성을 왼쪽으로 설정하면 특수 <div>가 페이지 왼쪽 끝까지 이동합니다.

1.웹 페이지의 .answer dives를 보세요. 그것들은 왼쪽으로 떠있었지만, 질문의 디바들이 오른쪽의 .answer dives와 접촉하고 있습니다. 이것을 고쳐보죠.

.question Selector에서 Clear 속성을 왼쪽으로 설정합니다. 질문의 이동에 주목하십시오.

# 박스들만 왼쪽으로 정렬 되었다.

.question {

text-align: center;

position: relative;

top: 40px;

clear: left;

}

2. 다시 생각해 보니, 이 레이아웃이 보기 좋지 않아요. .answer에서 float 속성을 제거하고 .question에서 clear 속성을 제거합니다.

.question {

text-align: center;

position: relative;

top: 40px;

}

.answer {

border: 1px solid #466995;

margin: 20px;

display: inline-block;

height: 150px;

width: 200px;

}

1-12. Review: Layout

정말 잘했어! 이 과정에서는 웹 페이지에서 요소의 위치를 조정하는 방법을 배웠습니다.

지금까지 배운 내용을 복습해 보겠습니다.

1. Position(위치) 특성을 사용하면 세 가지 방법으로 요소의 위치를 지정할 수 있습니다.

2. relative(상대적 위치)로 설정하면 요소의 위치는 페이지의 기본 위치에 비례합니다.

3. absolute(절대)로 설정하면 요소의 위치는 가장 가까운 상위 요소에 상대적입니다. 웹 페이지의 어느 부분에나 고정될 수 있지만, 페이지를 스크롤해도 요소는 문서의 나머지 부분과 함께 이동합니다.

4. fixed(고정)으로 설정하면 웹 페이지의 모든 부분에 요소의 위치를 고정할 수 있습니다. 그 요소는 무슨 일이 있어도 시야에 남을 것이다.

5. 요소의 z-index은 다른 요소와 겹칠 때 요소가 페이지에 얼마나 뒤로 나타나는지 또는 앞으로 얼마나 멀리 표시되는지 지정합니다.

6. display(표시) 속성을 사용하면 요소가 문서를 세로 및 수평으로 이동하는 방법을 제어할 수 있습니다.

7. inline 요소는 가능한 한 적은 공간을 차지하며, 폭(width) 또는 높이(height)를 수동으로 조정할 수 없습니다.

8. block 요소는 용기의 폭을 차지하며 높이를 수동으로 조정할 수 있습니다.

9. inline-block 요소는 폭과 높이를 설정할 수 있지만 서로 옆에 나타날 수도 있고 전체 용기 너비를 차지하지 않습니다.

10. float 속성은 웹 페이지에서 요소를 왼쪽 또는 오른쪽으로 이동할 수 있습니다.

11. clear 특성을 사용하여 요소의 왼쪽 또는 오른쪽(또는 둘 다)을 지울 수 있습니다.

상자 모델에 대한 이해와 결합하면 위치 지정은 시각적으로 눈길을 끄는 웹 페이지를 만들 수 있습니다. 지금까지 웹페이지에 텍스트 형태의 컨텐츠를 추가하는 데 주력해 왔습니다. 다음 단원에서는 웹 페이지에 이미지를 추가하고 조작하는 방법을 배우게 됩니다.

4. Learn CSS: Colors

1. CSS Color

Hex, RGB 및 HSL과 같은 색상 값을 생성하는 방법에 대해 알아봅니다.

처음에 들어가기전에 1-1에서 HTML과 CSS 언어를 보면서 보이는 홈페이지 비교하는게 도움 되겠다.

1-1. Introduction to Color

CSS는 다양한 색상을 지원합니다. 여기에는 파란색, 검은색 및 LimeGreen과 같이 이름이 지정된 색상이 숫자 값으로 설명된 색상과 함께 포함됩니다. 숫자 시스템을 사용하면 브라우저가 지원하는 모든 색상의 범위를 활용할 수 있습니다. 이 과정에서는 CSS가 제공하는 모든 색상 옵션에 대해 알아보겠습니다.

CSS의 색상은 세 가지 방법으로 설명할 수 있습니다.

Named Color(명명된 색상) - 색을 설명하는 영어 단어, 키워드 색상이라고도 함

RGB(색상표 이용) - 빨간색, 녹색 및 파란색의 혼합을 나타내는 숫자 값

HSL - 색조, 채도 및 광도의 조합을 설명하는 숫자 값

이러한 각각의 이점에 대해 자세히 알아보겠습니다. 이름 있는 색만 사용하면 상자에서 라벨이 붙은 크레용을 선택하는 것처럼 느낄 수 있습니다. 이 수업이 끝날 때쯤이면, 화가들이 팔레트에 그림을 섞는 것처럼 느껴질 거예요.

시작할 준비가 되면 다음 연습으로 진행합니다.

1-2. Foreground vs Background (글자색과 배경색)

색상의 세부 사항을 토론하기 전에 색상에 대해 두 가지 구별을 하는 것이 중요하다. 색상은 다음과 같은 설계 측면에 영향을 미칠 수 있습니다.

1. 전경색(글자색)

2. 배경색

전경색은 요소가 나타나는 색입니다. 예를 들어, 머리글이 녹색으로 보이도록 스타일을 지정할 때 머리글의 전경 색상이 스타일 지정되었습니다.

반대로, 헤딩의 배경이 노란색으로 보이도록 스타일을 지정할 때 헤드의 배경색이 스타일 지정되었습니다.

CSS에서 이러한 두 가지 설계 측면은 다음 두 가지 속성으로 스타일을 설정할 수 있습니다.

1. 색상 - 이 속성은 요소의 전경색을 스타일을 지정합니다.

2. 배경 색상 - 이 속성은 요소의 배경색을 스타일을 지정합니다.

h1 {

color: Red;

background-color: Blue;

}

1.In style.css는 h1 헤딩의 전경색을 MidnightBlue로 설정합니다.

2. 다음으로, H1의 배경색을 Aqua로 설정합니다.

배경색 속성은 전체 페이지의 배경색을 변경하지 않았습니다. 대신, 표제 뒤의 배경 영역만 바뀌었습니다. 이 문제가 왜 이 과정의 후반부에서 더 자세히 설명하겠습니다.

참고: 머리글의 배경색이 커피 이미지를 차단합니다.

h1 {

color: MidnightBlue;

font-family: 'Covered By Your Grace', sans-serif;

font-size: 100px;

line-height: 76px;

margin: 0;

position: relative;

text-align: center;

top: 20%;

background-color: Aqua;

}

1-3. Hexadecimal

색상을 지정하는 데 사용할 수 있는 구문 중 하나는 16진수입니다.이 시스템을 사용하여 지정한 색상을 16진수 색상이라고 합니다.16진수 색상은 해시 문자(#)로 시작하고 이어서 3~6자로 시작합니다.문자는 빨간색, 파란색 및 녹색 값을 나타냅니다.

DarkSeaGreen: #8FBC8F

Sienna: #A0522D

SaddleBrown: #8B4513

Brown: #A52A2A

Black: #000000 or #000

White: #FFFFFF or #FFF

Aqua: #00FFFF or #0FF

위의 예제에서는 값에 문자와 숫자가 모두 있음을 알 수 있습니다. 이는 사용한 것처럼 10자리(0-9) 대신 16자리(0-15)를 가지기 때문입니다.10-15를 나타내려면 A-F를 사용합니다. 다음은 다양한 색상과 16진수 값의 목록입니다.

검정, 흰색 및 아쿠아는 모두 3자 및 6자로 표시됩니다. 이는 숫자 쌍이 동일한 16진수 색상으로 수행할 수 있습니다.위의 예에서, Aqua는 처음 두 문자는 모두 0이고 두 번째와 세 번째 문자는 모두 F이므로 #0FF로 나타낼 수 있습니다. 세 가지 문자 16진수 색상은 모두 6자(각 문자를 두 번 반복함)로 나타낼 수 있지만, 역순은 동일하지 않습니다.

# 두 개의 숫자나 문자가 같으면 하나의 문자로 작성해도 작동된다는 것 같다.

이름이 지정된 색상을 포함하듯이 16진수 색상을 포함할 수 있습니다. bockground-color: #9932cc;

1. 브라우저에는 이름이 지정된 색과 16진수 색상을 사용하는 웹 페이지가 있습니다. 우리는 좀 더 일관성을 유지하기 위해 이름이 붙은 색을 16진법으로 바꿀 것입니다. 색상은 아직 시각적으로 변하지 않을 것이다.

style.css에서, 이름이 다크서그린인 CSS 규칙을 찾아 8FBC8F의 16진수 값으로 변경합니다.

.green {

background-color: #8FBC8F;

}

# 1번이나 2번이나 다른 것이 없다. 다만 Named color에서 RGB로 표현만 바뀌었을 뿐이다.

2. 로스트 유형의 다른 네 가지 색상을 찾아 다음과 같이 16진수 값으로 변환합니다.

시에나: #A0522D

새들 브라운: #8B4513

갈색: #A52A2A

검정: #000000

.light {

background-color: #A0522D;

}

.city {

background-color: #8B4513;

}

.vienna {

background-color: #A52A2A;

}

.italian {

background-color: #000;

}

1-4. RGB Colors

십진수를 사용하는 RGB 값을 나타내는 다른 구문이 있습니다. 다음과 같습니다.

h1 {

color: rgb(23, 45, 23);

}

여기서, 세 가지 값 각각은 색상 성분을 나타내며, 각각 0부터 255까지의 십진수 값을 가질 수 있습니다. 첫 번째 숫자는 빨간색, 두 번째 숫자는 녹색, 세 번째 숫자는 파란색을 나타냅니다. 이러한 색상은 16진수 색상과 동일하지만 구문이 다르며 숫자 시스템이 다릅니다.

일반적으로 16진수 및 10진수 색상 표시는 동일합니다. 당신이 선택하는 것은 개인적인 취향의 문제이다. 즉, 16진수에서 16진수 및 10진수에서 10진수를 비교하기가 더 쉽기 때문에 CSS 전체에서 하나를 선택하고 일관성을 유지하는 것이 좋습니다.

1.In style.css, 16진수 값 #8FBC8F를 찾아 rgb(143, 188, 143)로 변경합니다.

2.In style.css에서 16진수 값 #A0522D를 찾아 rgb(160, 82, 45)로 변경합니다.

3.In style.css, 16진수 값 #8B4513을 찾아 rgb(139, 69, 19)로 변경합니다.

.green {

background-color: rgb(143, 188, 143);

}

.light {

background-color: rgb(160, 82, 45);

}

.city {

background-color: rgb(139, 69, 19);

}

1-5. Hex and RGB

16진수 및 RGB 색상은 CSS 명명된 색상의 작은 집합보다 더 많은 색상을 나타낼 수 있습니다. 우리는 이 새로운 색 세트를 사용하여 웹 페이지의 스타일을 구체화할 수 있습니다.

16진수 및 10진수 모두 색상별로 하나씩 세 가지 값이 있습니다. 각 값은 256개 값 중 하나일 수 있습니다. 구체적으로 256 * 256 * 256 = 16,777,216. 그것은 우리가 지금 표현할 수 있는 색의 양이다. CSS라는 이름의 147과 비교해 보세요!

명명된 색상으로 시작해서 16진법으로 변환한 다음 16진수 색 중 일부를 10진수로 변환했습니다. 우리가 실수를 하지 않는 한, 모든 색상은, 시각적으로 똑같아야 합니다. 확대된 팔레트를 사용하여 보다 정교한 색상을 선택할 수 있습니다.

1. style.css 형식의 .green 규칙은 배경색을 #9EB599로 변경합니다.

코드를 실행합니다. 맛의 차이를 느낄 수 있는가?

2. style.css의 .light 규칙을 사용하여 배경색을 #683C2C로 변경합니다.

3. style.css 형식의 .city 규칙은 배경색을 #4C352D로 변경합니다.

4. .vienna의 스타일.css 규칙은 배경색을 #352926으로 변경합니다.

5. style.css 형식의 .italian 규칙은 배경색을 #141212로 변경합니다.

코드를 한 번 더 실행하십시오. 이 새로운 색깔들은 각 커피의 실제 색깔과 훨씬 더 가깝다. 미묘한 차이가 어떻게 느껴지나요?

.green {

background-color: #9EB599;

}

.light {

background-color: #683C2C;

}

.city {

background-color: #4C352D;

}

.vienna {

background-color: #352926;

}

.italian {

background-color: #141212;

}

1-6. Hue, Saturation, and Lightness(색조, 포화도, 밝기)

RGB 색 구성표는 컴퓨터가 내부적으로 색을 나타내는 방식과 매우 유사하기 때문에 편리합니다. CSS에는 hue-saturation-lightness 색상표라고 불리는 또 다른 강력한 시스템이 있는데, HSL로 줄여집니다.

HSL의 구문은 RGB의 10진수 형식과 유사하지만 중요한 방식으로 다릅니다. 첫 번째 숫자는 색조의 정도를 나타내며 0에서 360 사이일 수 있습니다. 두 번째 숫자와 세 번째 숫자는 각각 포화도와 밝기를 나타내는 백분율입니다. 다음은 예입니다.

color: hsl(120, 60%, 70%);

Hue가 첫 번째 숫자입니다. 그것은 색상 휠의 각도를 가리킨다. 빨강은 0도, 초록은 120도, 파랑은 240도, 그리고 나서 다시 빨강으로 360도. 아래에서 색상 휠의 예를 볼 수 있습니다.

포화도는 색의 강도와 순도를 나타냅니다. 색상 휠의 중심에서 둘레까지 그려진 선 세그먼트를 상상하면 포화가 해당 선 세그먼트의 한 점입니다. 이 선 세그먼트를 다른 각도로 돌리면 해당 포화도가 다른 색조를 어떻게 보이는지 알 수 있습니다. 점이 가장자리에 가까워질수록 채도는 100%까지 증가합니다(색상은 더 농후해집니다). 점이 중심에 가까워질수록 채도는 0%까지 감소합니다(색상은 회색이 됩니다).

밝기는 색이 얼마나 가볍거나 어두운지를 나타냅니다. 절반인 50%는 보통 밝음이다. 중간에서 시작되는 전등 스위치에서 슬라이딩 조광기를 상상해 보십시오. 조광기를 100%까지 밀면 색이 흰색에 가깝게 더 가벼워진다. 조광기를 0%로 낮추면 색이 더 어둡고 검은색에 가깝게 됩니다.

HSL은 색상 조정에 편리하다. RGB에서 색상을 약간 더 어둡게 만들면 세 가지 색 구성 요소에 모두 영향을 미칠 수 있습니다. HSL에서는 광도 값을 바꾸는 것만큼이나 쉽습니다. HSL은 또한 밝기와 채도가 같지만 색조가 다른 다양한 색상을 선택하여 함께 잘 작동하는 색상 세트를 만드는데 유용하다.

1. 브라우저는 다른 색상의 사각형이 있는 간단한 페이지입니다.

style.css에서 클래스 선택기 .midround의 배경색 밝기를 25%로 수정합니다.

.midground {

background-color: hsl(225, 100%, 25%);

}

2.전방 클래스 선택기의 포화도를 50%로 변경합니다.

.foreground {

background-color: hsl(325, 50%, 50%);

}

3. 차체 셀렉터의 배경색을 240도로 변경하십시오.

body {

background-color: hsl(240, 100%, 80%);

}

1-7. Opacity and Alpha (불투명도 및 알파)

지금까지 본 모든 색상은 불투명하거나 투명하지 않습니다. 두 개의 불투명 요소를 겹치면 맨 아래 요소를 통해 아무것도 표시되지 않습니다. 이 연습에서는 일부 색상의 불투명도 또는 투명도를 변경하여 일부 또는 모든 하단 요소가 덮개 요소를 통해 보이도록 합니다.

HSL 색상표에서 불투명도를 사용하려면 hsl 대신 hsla를 사용하고 3개 대신 4개의 값을 사용합니다. 예를 들면 다음과 같다.

color: hsla(34, 100%, 50%, 0.1);

처음 세 값은 hsl과 동일하게 작동합니다. 네 번째 값(이전에 우리가 보지 못한 값)은 알파입니다. 이 마지막 값은 불투명도라고도 합니다.

알파는 0부터 1까지의 십진법이다. 알파가 0이면 색이 완전히 투명해집니다. 알파가 1이면 색이 불투명합니다. 반투명 값은 0.5입니다.

알파 값은 "전경에 혼합할 배경의 양"으로 생각할 수 있습니다. 색상의 알파가 1보다 작으면 뒤에 있는 모든 색이 혼합됩니다. 각 픽셀에 대해 혼합이 수행되고 흐림 현상이 발생하지 않습니다.

RGB 색상표에는 불투명도에 대한 유사한 구문인 rgba가 있습니다. 다시, 처음 세 값은 rgb와 동일하게 작동하고 마지막 값은 알파입니다. 다음은 예입니다.

color: rgba(234, 45, 98, 0.33);

알파는 HSL 및 RGB 색상에만 사용할 수 있으며, 알파 값을 color: green, color: #FFFFF에 추가할 수 없습니다.

그러나 named of color도 투명도를 위해 이름이 지정된 색상 키워드가 있습니다. rgba(0, 0, 0, 0)와 같습니다. 다른 색상 키워드처럼 사용됩니다.

color: transparent;

1. 원소를 클래스 .전면 알파 값 0.6으로 변경합니다. hsl를 hsla로 변경해야 합니다.

.foreground {

background-color: hsla(325, 50%, 50%, 0.6);

}

2. hsla를 사용하여 요소를 .midground로 알파 값 0.4를 입력합니다. 코드를 실행하고 겹치는 방법에 따라 모든 색상이 어떻게 섞이는지 확인합니다.

.midground {

background-color: hsla(225, 100%, 25%, 0.4);

}

3. 차체 셀렉터의 배경색을 rgba(0, 255, 0, 0.5)로 수정하십시오.

body {

background-color: rgba(0, 255, 0, 0.5);

}

4. 이제 문서 본문의 알파를 0.1로 설정합니다. 불투명도가 배경을 어떻게 바꾸는가?

body {

background-color: rgba(0, 255, 0, 0.1);

}

# 신기 색이 참 잘 바뀌네.

1-8. Color Review

CSS의 광범위한 색상 투어를 마쳤습니다! 지금까지 학습한 주요 정보를 살펴봅시다.

CSS에는 색상을 나타내는 네 가지 방법이 있습니다.

명명된 색상(Named Colors): 여기서 검토할 수 있는 147개의 이름이 지정된 색상이 있습니다.

16진수 또는 16진수 색

16진수는 16자리 숫자이고 0에서 9 뒤에 "A"에서 "F"가 붙습니다.

16진수 값은 항상 #로 시작하고 #23F41A와 같은 16진수 숫자를 사용하여 빨간색, 파란색 및 녹색 값을 지정합니다.

RGB

RGB 색상은 rgb() 구문을 하나의 빨간색 값, 초록색 값, 파란색 값으로 사용합니다.

RGB 값은 0 ~ 255이며, rgb(7, 210, 50)와 같습니다.

HSL

HSL은 색조(색상 자체), 채도(색채 강도) 및 밝기를 나타냅니다(색상 밝거나 어두운 상태).

Hue 범위는 0 - 360이며, 포화도 및 광도는 모두 hsl(200, 20%, 50%)과 같이 백분율로 표시됩니다.

RGB 및 HSL에서 네 번째 값인 a를 백분율로 표시하여 불투명도를 색상에 추가할 수 있습니다. hsla(200, 20%, 50%, 0.5)

정말 잘했어! 각 프로젝트에 약간의 색상을 추가할 수 있습니다!

계속할 준비가 되면 계속하세요!

5. Learn CSS: Typhography

1. CSS Typhography

이 과정에서는 웹 페이지의 텍스트 모양을 편집하는 데 사용할 수 있는 중요한 CSS 속성에 대해 알아봅니다.

1-1. Typhography

이 수업에서는, 우리는 한 페이지에 텍스트를 배열하는 기술인 타이포그래피에 초점을 맞출 것입니다. 특히 CSS로 글꼴을 스타일링하여 읽기 쉽고 매력적으로 만드는 방법과 웹 페이지에 외부 글꼴을 추가하는 방법에 대해 알아봅니다.

사용자가 웹 페이지에서 볼 수 있는 가장 중요한 정보 중 일부는 텍스트일 것이다. 텍스트를 스타일링하여 페이지 콘텐츠에 접근하고 흥미를 유발하면 사용자 환경을 크게 개선할 수 있습니다. 시작합시다!

브라우저에는 다양한 크기와 스타일의 글꼴이 있는 블로그 사이트가 있습니다. 다음 연습에서는 글꼴을 조작하여 연결 인터페이스를 만드는 방법을 배울 것입니다.

페이지의 일반적인 레이아웃에 대해 알고 나면 다음 연습으로 진행합니다.

1-2. Font Family

포맷된 워드 프로세서를 사용한 적이 있는 경우, 입력하는 "글꼴 유형"을 변경할 수 있는 기능도 사용했을 가능성이 높습니다. "글꼴"이라는 문구는 기술 용어 유형 또는 글꼴 패밀리를 나타냅니다

웹 페이지의 텍스트 유형을 변경하려면 글꼴 집합 속성을 사용할 수 있습니다.

h1 {

font-family: Garamond;

}

위의 예에서 모든 주요 머리글 요소의 글꼴 패밀리가 가리몬드로 설정되었습니다.

웹 페이지에서 서체를 설정할 때는 다음 사항에 유의하십시오.

1. 사용자가 웹 페이지를 방문할 때 글꼴을 표시하려면 스타일시트에 지정된 글꼴을 사용자의 컴퓨터에 설치해야 합니다. 이 문제를 해결하는 방법은 나중에 연습할 것입니다.

2. 여러분은 아마 우리가 이 과정의 이전 연습에서 활자를 명시하지 않았다는 것을 눈치챘을 것이다. 웹 페이지를 표시할 때 사용할 서체를 브라우저가 정확히 어떻게 알 수 있습니까? 대부분의 브라우저의 기본 서체는 Times New Roman입니다. 포맷된 워드 프로세서를 사용한 적이 있는 경우 이 서체를 잘 알고 있을 수 있습니다.

3. 웹 페이지에 사용되는 서체 수를 2 또는 3으로 제한하는 것이 좋습니다.

4. 서체 이름이 둘 이상의 단어로 구성된 경우 다음과 같이 큰따옴표로 묶어야 합니다(그렇지 않으면 인식되지 않음).

h1 {

font-family: "Courier New";

}

1.In style.css, h1 및 h2 요소의 글꼴 패밀리를 조지아로 변경합니다.

h1 {

color: white;

font-size: 28px;

font-family: Georgia;

}

h2 {

font-size: 24px;

font-weight: 700;

line-height: 2.5;

font-family: Georgia;

}

2. 다음으로 단락의 글꼴 패밀리를 Helvetica로 변경합니다.

p {

margin: 16px 0;

font-family: Helvetica;

}

1-3. Font Weight

사용하는 웹 사이트, 특히 뉴스 또는 텍스트가 많은 사이트에서 볼드 텍스트를 볼 수 있습니다. 일반적으로 굵게 표시된 제목이나 키워드는 일반적입니다. CSS에서는 글꼴 중량 특성을 사용하여 굵게 텍스트를 스타일을 설정할 수 있습니다.

웹 페이지에서 텍스트를 굵게 표시하려면 글꼴 무게를 굵게 설정할 수 있습니다.

p {

font-weight: bold;

}

텍스트가 굵지 않게 하려면 글꼴 가중치를 보통으로 설정할 수 있습니다.

p {

font-weight: normal;

}

기본적으로 대부분의 텍스트 요소의 글꼴 중량은 보통으로 설정됩니다. 헤더와 같은 일부 요소에는 굵은 글꼴이 내장되어 있습니다. 텍스트 요소에 기본 스타일이 있는지 확인하고 그에 따라 글꼴 가중치 속성을 사용하는 것이 좋습니다.

1.브라우저의 웹페이지를 보면, 당신은 내비게이션 메뉴 바로 아래의 파란색 부분인 "배너" 섹션이 보일 것이다.

style.css에서 스타일시트의 배너 섹션에서 클래스 배너 내의 문단의 글꼴 중량을 굵게 설정합니다. 웹 페이지의 단락에 있는 글자가 두꺼워지는 것을 볼 수 있습니다.

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

padding: 10px;

color: #ffffff;

font-weight: bold;

}

1-4. Font Weight ll

글꼴 중량 속성에는 100 ~ 900 범위의 숫자 척도에서 스타일 텍스트에 숫자 값을 할당할 수도 있습니다. 유효한 값은 이 범위 내에서 200 또는 500의 배수입니다.

숫자 가중치를 사용할 때 여러 가지 기본 글꼴 가중치를 사용할 수 있습니다.

1. 400은 대부분의 텍스트의 기본 글꼴 중량입니다.

2. 700은 굵은 글꼴 무게를 나타냅니다.

3. 300은 가벼운 글꼴 무게를 나타냅니다.

숫자 글꼴이 사용되는 예를 살펴보겠습니다.

header {

font-weight: 800;

}

footer {

font-weight: 200;

}

여기서 머리글은 굵은 볼트로 표시되는 반면 바닥글은 약간 밝게 표시됩니다.

일부 글꼴에는 숫자 글꼴이 할당되지 않습니다. 사용 중인 글꼴을 검색하여 사용 가능한 글꼴 중량 값을 확인할 수 있습니다.

1.웹 페이지의 머리글 섹션에는 탐색 메뉴가 있습니다. 그것은 페이지 맨 위에 있다.

style.css의 헤더 섹션에서 클래스 헤더가 있는 요소의 글꼴 무게를 900으로 설정합니다. 내비게이션의 목록 요소가 두꺼워지는 것을 볼 수 있습니다.

.header {

font-family: "Arial", sans-serif;

font-size: 14px;

line-height: 1.25;

background-color: #fff;

position: fixed;

top: 0;

width: 100%;

font-weight: 900;

}

1-5. Font Style

글꼴 유형 특성을 사용하여 텍스트를 기울일 수도 있습니다.

h3 {

font-style: italic;

}

기울임꼴 값은 텍스트를 기울임꼴로 표시합니다. 글꼴 유형 속성에도 기본값인 일반 값이 있습니다.

1. 웹 페이지에는 "Garamond", "Helvica", "Space Mono"의 세 가지 섹션이 있습니다. 각 섹션에는 "Claude Garamond"와 같은 글꼴 작성자의 이름이 있는 줄이 포함됩니다.

이 카드들을 가지고 창조자의 이름을 이탤릭체로 만들어 봅시다. style.css의 글꼴 카드 섹션에서 .font-card .creator의 글꼴 스타일을 기울임꼴로 설정합니다.

웹 페이지에서 글꼴이 정상에서 기울임꼴로 변경됩니다.

.font-card .creator {

font-size: 20px;

line-height: 1.25;

font-style: italic;

}

1-6. Word Spacing

기술적으로 단어 간격이라고 하는 텍스트 본문에 있는 단어 사이의 간격을 늘릴 수도 있습니다.

이렇게 하려면 단어 간격 속성을 사용할 수 있습니다.

h1 {

word-spacing: 0.3em;

}

단어 사이의 기본 공간은 일반적으로 0.25em입니다. 위의 예에서 단어 간격은 0.3em으로 설정되어 있으며, 단어 간격은 단어 간격에서 0.05em만 증가했음을 나타냅니다.

단어 사이의 간격을 늘리는 것은 흔한 일이 아니지만, 굵은 글씨 또는 확대된 글자의 가독성을 향상시키는 데 도움이 될 수 있다. 다시 한 번, 기본 단위는 ems입니다.

1.In style.css는 h2 요소의 단어 간격을 0.05em으로 설정합니다.

h2 {

font-size: 24px;

font-weight: 700;

line-height: 2.5;

font-family: Georgia;

word-spacing: 0.05em;

}

1-7. Letter Spacing

여러분은 텍스트와 단어 사이의 간격을 늘리는 방법을 배웠지만, 훨씬 더 자세한 것은 개별 문자 사이의 간격을 늘리는 것입니다.

문자 사이의 간격을 조정하는 기술적 용어를 "Kerning"라고 합니다. CSS의 문자 간격 속성으로 커닝을 조정할 수 있습니다.

h1 {

letter-spacing: 0.3em;

}

단어 간격과 마찬가지로 텍스트의 커닝을 늘리는 것은 일반적이지 않지만 때때로 대문자의 가독성을 향상시킵니다.

1.In style.css에서 h2 요소의 문자 간격을 0.02em으로 설정합니다.

h2 {

font-size: 24px;

font-weight: 700;

line-height: 2.5;

font-family: Georgia;

word-spacing: 0.05em;

letter-spacing: 0.02em;

}

1-8. Text Transformation

텍스트는 텍스트 변환 속성과 함께 모든 대문자 또는 소문자로 표시되도록 스타일을 설정할 수도 있습니다.

h1 {

text-transform: uppercase;

}

위의 예의 코드는 HTML 코드 내의 제목에 사용된 사례에 관계없이 모든 <h1> 요소를 대문자로 표시합니다. 또는 소문자 값을 사용하여(lowercase) 모든 소문자의 텍스트를 포맷할 수 있습니다.

HTML 파일 내의 모든 대문자 또는 소문자로 텍스트를 직접 입력할 수 있으므로, 문자 대소문자를 포맷할 수 있는 CSS 규칙의 포인트는 무엇입니까?

웹 페이지에 표시되는 콘텐츠 유형에 따라 항상 모든 대문자 또는 소문자로 특정 요소의 스타일을 지정하는 것이 좋습니다. 예를 들어, 뉴스 속보를 보고하는 웹 사이트는 위의 예와 같이 모든 대문자로 항상 표시되도록 모든 <h1> 제목 요소를 포맷하기로 결정할 수 있습니다. 또한 코드를 읽기 어렵게 만들 수 있는 HTML 파일의 대문자를 사용하지 않습니다.

1.In style.css, 주 제목(h1)의 텍스트를 대문자로 표시합니다.

h1 {

color: white;

font-size: 28px;

font-family: Georgia;

text-transform: uppercase;

}

1-9. Text Alignment

텍스트에 스타일링 적용 여부와 상관없이(형식, 크기, 무게 등) 텍스트는 항상 브라우저 왼쪽에 표시됩니다.

문자를 이동하거나 정렬하려면 텍스트 정렬 속성을 사용할 수 있습니다.

h1 {

text-align: right;

}

텍스트 정렬 속성은 다음 세 가지 값 중 하나로 설정할 수 있습니다.

1. 왼쪽 - 텍스트를 브라우저의 왼쪽에 정렬합니다.

2. 가운데 - 텍스트를 가운데에 배치합니다.

3. 오른쪽 - 텍스트를 브라우저의 오른쪽에 정렬합니다.

이 과정 후반부에서는 브라우저가 HTML 요소를 기본적으로 어떻게 배치하는지 정확히 배울 것입니다. 이 요소는 브라우저가 "정렬" 텍스트를 어떻게 "정렬"하는지를 이해하는 데 도움이 됩니다. 현재로서는 웹 페이지의 왼쪽, 가운데 또는 오른쪽으로 텍스트를 이동할 수 있습니다.

1.In style.css는 메인 제목(h1)의 텍스트 정렬 속성을 왼쪽으로 표시되도록 설정합니다.

2. 다시 생각해 보니, 표제가 중심에서 더 나아 보여요. 중앙에 정렬되도록 헤딩을 재설정합니다.

h1 {

color: white;

font-size: 28px;

font-family: Georgia;

text-transform: uppercase;

text-align: center;

}

1-10. Line Height Anatomy

우리가 텍스트에 대해 설정할 수 있는 또 다른 속성은 줄 높이입니다.이 속성은 텍스트의 선행 부분을 수정합니다.

오른쪽의 다이어그램은 "선행"과 "선 높이"라는 용어가 무엇을 의미하는지 정확하게 설명하는 데 도움이 됩니다.

1-11. Line Height

우리는 종종 웹 페이지의 텍스트를 읽기 쉽게 만들기 위해 줄 높이를 수정합니다. 텍스트가 더 크게 보이도록 스타일을 지정할 경우 텍스트 행 사이의 수직 간격이 줄어들 수 있으며 특히 단락에서 읽기 어려운 텍스트를 만들 수 있습니다.

텍스트의 높이에 관계없이 선 높이 특성을 사용하여 텍스트가 포함된 선의 높이를 설정할 수 있습니다. 선 높이는 다음 값 중 하나를 사용할 수 있습니다.

1. 단위가 없는 번호(예: 1.2). 이 숫자는 글꼴 크기의 비율로 선 높이를 계산하는 절대값입니다.

2. 단위별로 지정된 번호(예: 12px)입니다. 이 숫자는 픽셀, 백분율, ems 또는 렘과 같은 유효한 CSS 단위일 수 있습니다.

일반적으로 단위 미포함 비율 값이 선호되는 방법은 반응성이 뛰어나고 현재 글꼴 크기에만 기초하기 때문이다. 즉, 글꼴 크기를 변경하면 픽셀 값이 정적 상태를 유지하는 동안 단위 없는 선 높이가 자동으로 재조정됩니다.

p {

line-height: 1.4;

}

1.배너에 있는 텍스트의 줄 높이를 변경합니다.

style.css에서 배너 클래스 내의 단락 요소의 선 높이를 1.4로 설정합니다. 라인 높이가 증가하는 것을 볼 수 있습니다.

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

padding: 10px;

color: #ffffff;

font-weight: bold;

line-height: 1.4;

}

1-12. Serif and Sans Serif

웹 페이지에서 텍스트를 수정하는 데 필요한 많은 속성을 배웠습니다!

다음 연습에서는 일부 텍스트를 세리프로 설정하고 일부 텍스트를 산세리프로 설정합니다.이 단어들이 정확히 무슨 뜻이죠?

1. Serif: 각 문자의 끝에 추가 세부 정보가 있는 글꼴입니다. 예를 들면, Times New Roman or Georgia, among others.

2. Sans-Serif: 각 문자의 끝에 대한 추가 세부 정보가 없는 글꼴입니다. 대신에, 글자들은 Arial or Helvetica 같은 직선적이고 평평한 가장자리를 가지고 있다.

1-13. Fallback Fonts

스타일시트에 사용자의 컴퓨터에 설치되지 않은 글꼴이 필요한 경우 어떻게 됩니까? 대부분의 컴퓨터에는 작은 크기의 서체가 미리 설치되어 있습니다. 이 작은 세트에는 타임스 뉴로마 같은 세리프 글꼴과 에이리얼 같은 산세리프 글꼴이 포함되어 있습니다.

스타일시트가 사용자의 컴퓨터에 설치되지 않은 글꼴을 지정하는 경우 미리 설치된 글꼴은 폴백 글꼴로 사용됩니다.

폴백 글꼴을 사용하려면 다음 구문이 필요합니다.

h1 {

font-family: "Garamond", "Times", serif;

}

위의 CSS 규칙은 다음과 같습니다.

1. 웹 페이지의 모든 <h1> 요소에 대해 Garamond 글꼴을 사용합니다.

2. Garamond를 사용할 수 없는 경우 Times 글꼴을 사용하십시오.

3. Garamond 및 Times를 사용할 수 없는 경우, 사용자의 컴퓨터에 미리 설치된 모든 세리프 글꼴을 사용하십시오.

가라몬드 뒤에 지정된 글꼴은 폴백 글꼴(타임즈, 세리프)입니다. Fallback 글꼴은 사이트를 방문하는 다양한 사용자의 일관된 환경을 보장하는 데 도움이 됩니다.

1. 배너 아래 웹 페이지는 세리프, 산세리프, 몬세나우스의 세 가지 주요 글꼴 섹션으로 구성되어 있습니다. 각 섹션에는 각각 Garamond, Helvetica 및 Space Mono의 예제가 나와 있습니다.

여기서는 가람드 세티온 스타일을 중점적으로 설명하겠습니다. style.css의 "Font Card" 섹션에서 선택 도구 .garamond .sample .text를 만듭니다.

.font-card .garamond .sample .text {

background-color: #ffffff;

margin: 50px 0;

padding: 20px 50px;

}

2. 방금 만든 선택기를 사용하여 글꼴을 가리몬드로 설정하고 세리프를 폴백 글꼴로 추가합니다.

.font-card .garamond .sample .text {

background-color: #ffffff;

margin: 50px 0;

padding: 20px 50px;

font-family: "Garamond", serif;

}

3.In style.css, 마지막 선택 도구 아래에 선택 도구 .helvetica .sample .text를 만듭니다.

.helvetica .sample .text {

}

4. 방금 만든 선택기를 사용하여 글꼴을 Helvetica로 설정하고 sans-serif를 폴백 글꼴로 추가합니다.

.helvetica .sample .text {

font-family: "Helvetica", sans-serif;

}

1-14. Linking Fonts l

현대식 타이포그래피로 이용 가능한 폰트의 수가 있기 때문에, 사용자들이 컴퓨터에 모든 폰트를 설치하기를 기대하는 것은 비현실적이다. 새 글꼴은 종종 공용용으로 만들어진 디렉토리에 중앙 집중화됩니다. 이러한 글꼴은 사용자가 아닌 글꼴로 지칭됩니다.

Google 글꼴은 수천 개의 오픈 소스 글꼴의 디렉토리 중 하나이며, 무료로 사용할 수 있습니다.Google 글꼴을 사용하면 글꼴 중량 및 글꼴 스타일 속성을 사용하여 단일 글꼴, 여러 글꼴 또는 여러 글꼴에 대한 링크를 검색할 수 있습니다.

다음 연습에서는 이 링크를 추가할 위치를 보여 드리겠습니다.

1. 이 연습의 비디오를 봅니다.

이 비디오에서는 단일 글꼴, 여러 글꼴 및 다양한 숫자 글꼴 및 글꼴 스타일의 다중 글꼴에 대한 링크를 검색하는 방법을 보여 줍니다.

2. 비디오를 본 후 데스크톱 컴퓨터의 브라우저에서 이 단계를 반복하여 일반(400) 및 굵은(700) 글꼴을 모두 지정하는 스페이스 모노 글꼴을 선택합니다.

준비가 되었으면 '다음'을 클릭하여 계속하십시오.

https://fonts.google.com

1-15. Linking Fonts ll

선택한 글꼴에 대한 링크가 있으면 [link] 태그와 href를 사용하여 HTML 문서의 [head] 섹션에 글꼴을 추가할 수 있습니다.

몇 가지 예를 살펴보겠습니다.

1. Droid Serif를 예제로 사용하는 단일 링크된 글꼴:

<head>

</head>

2. Droid Serif 및 Playfair Display 글꼴을 예로 들어 여러 개의 연결된 글꼴

<head>

</head>

3. 여러 개의 연결된 글꼴과 가중치 및 스타일 여기서 Droid Serif의 글꼴 중량은 400, 700, 700i이며 Playfair Display의 글꼴 중량은 400, 700, 900i입니다.

<head>

</head>

글꼴이 연결되면 다른 글꼴과 마찬가지로 대상 요소에 대한 CSS 선택기를 만들 수 있습니다.

Hint 링크 태그에서 참조할 URL은 다음과 같습니다.

https://fonts.googleapis.com/css?family=Space+Mono:400,700

1. 이전 연습에서는 일반(400) 및 굵은(700) 글꼴 중량을 모두 지정하는 Space Mono 글꼴에 대한 링크를 표면화했습니다.

색인에서 .html은 <link> 태그를 사용하여 프로젝트에 이 글꼴을 포함합니다.

# index.html <head></head> 사이 부분에 추가했다.

2. style.css의 "Font Card" 섹션에서 선택 도구 .space .sample .text를 만듭니다.

.space .sample .text {

}

3. 방금 만든 선택기를 사용하여 글꼴을 "스페이스 모노"로 설정하고 mon mon를 폴백 글꼴로 추가합니다.

.space .sample .text {

font-family: "Space Mono", monospace;

}

1-16. Font-Face l

HTML 문서에서 [link] 태그를 사용할 필요가 없는 비사용자 글꼴을 연결하는 다른 방법이 있습니다. CSS는 @font-face 속성을 사용하여 글꼴을 스타일시트로 직접 가져오는 방법을 제공합니다.

@font-face 속성을 사용하여 글꼴을 로드하려면:

1. HTML 문서에서 글꼴 링크를 사용하는 대신 브라우저의 URL 표시줄에 링크를 입력합니다.

2. 브라우저가 CSS 규칙을 로드합니다. /* latin */로 직접 레이블이 지정된 규칙에 초점을 맞추어야 합니다. 일부 라틴 규칙은 별도의 줄에 있습니다. 이거 각각이 필요할 거예요.

3. latin이라는 레이블이 지정된 각 CSS 규칙을 복사하고 브라우저에서 style.css의 맨 위로 규칙을 붙여넣습니다.

프로젝트에 글꼴을 올바르게 로드하려면 스타일시트 상단에 @font-face 규칙을 복사해야 합니다.

1. 이 연습의 비디오를 봅니다.

이 비디오에서는 이전에 검색한 Space Mono 글꼴 링크를 브라우저로 입력하는 방법을 보여 줍니다. 브라우저는 글꼴에 사용할 규칙을 차례로 표시합니다.

2. 비디오를 보고 나면, 일반(400) 및 굵은 글꼴(700)의 스페이스 모노 글꼴 링크를 사용하여 데스크톱 컴퓨터의 브라우저에서 다음 단계를 반복합니다. 여기서 글꼴에 대한 직접 링크를 찾을 수 있습니다.

데스크톱 브라우저에 규칙이 표시되면 '다음'을 클릭하여 계속하십시오.

링크 : https://fonts.googleapis.com/css?family=Space+Mono:400,700/

1-17. Font-Face ll

그런 다음 다른 글꼴을 사용하는 것처럼 스타일시트의 글꼴을 사용할 수 있습니다. @font-face 속성을 사용하여 스타일시트에 외부 글꼴을 로드하고 해당 글꼴을 사용하여 페이지 스타일을 지정하는 연습을 해보겠습니다.

1. index.html에서 이전 연습에서 추가한 Space Mono 글꼴에 대한 링크를 제거합니다.

2. 이제 latin이라는 레이블이 붙은 @font-face 규칙을 사용하여 동일한 글꼴을 style.css에 추가합니다.

이를 위해, 우리는 스페이스 모노 폰트에 대해 브라우저에 반환된 것과 동일한 CSS 규칙을 사용하고, 라틴 @font-페이스 규칙을 스타일시트 상단에 복사합니다.

적절한 글꼴에 대한 링크를 검색하는 데 도움이 필요한 경우 여기를 클릭하십시오.

글꼴을 추가하면 Space Mono 글꼴의 스타일 요소가 올바른 글꼴 스타일을 유지하는 것을 알 수 있습니다.

# style.css 위에다 2번 복사해 넣음.

@font-face {

font-family: 'Space Mono';

font-style: normal;

font-weight: 400;

src: local('Space Mono'), local('SpaceMono-Regular'), url(https://fonts.gstatic.com/s/spacemono/v1/adVweg3BJhE6r8jYmXseHQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

1-18. Font-Face lll

Google 글꼴 및 기타 리소스는 글꼴 선택을 확대할 수 있지만 완전히 다른 글꼴을 사용하거나 외부 서비스의 글꼴 사용을 중지할 수 있습니다.

로컬 글꼴 파일도 사용하도록 @font-face 규칙을 수정할 수 있습니다. 우리는 사용자에게 원하는 글꼴 패밀리를 제공하고 다른 사이트에 의존하는 대신 호스트할 수 있습니다.

@font-face {

font-family: "Roboto";

src: url(fonts/Roboto.woff2) format('woff2'),

url(fonts/Roboto.woff) format('woff'),

url(fonts/Roboto.tff) format('truetype');

}

여기서 다음 사항을 확인할 수 있습니다.

1. 주요 차이점은 웹 URL 대신 상대 파일 경로를 사용하는 것입니다.

2. 사용할 글꼴을 지정하는 각 파일의 형식을 추가합니다. 브라우저마다 다른 글꼴 유형을 지원하므로 여러 글꼴 파일 옵션을 제공하면 더 많은 브라우저를 지원할 수 있습니다.

현재 .woff2는 파일 크기가 크게 줄고 성능이 향상되었기 때문에 미래의 방식인 것으로 보이지만 많은 브라우저가 여전히 이를 지원하지 않습니다. 글꼴 다람쥐와 같이 로컬에서 사용할 글꼴을 찾는 데 유용한 소스가 많이 있습니다.

1. 글꼴/디렉토리에서 여러 개의 로컬 글꼴 파일을 추가했음을 알 수 있습니다.

로컬 글꼴 파일을 사용하여 배너의 인쇄본을 변경하겠습니다. 코드 편집기에서 파일 탐색기를 사용하여 글꼴/디렉토리를 열면 로컬 글꼴 파일 Glegoo-Regular.tf 및 Glegoo-Bold.ttf를 추가했음을 알 수 있습니다.

style.css에서 @font-face 속성을 사용하여 선택기를 만들고 글꼴 제품군 Glegoo를 지정합니다.

2. @font-face 규칙에서 src 속성을 Glegoo-Regular.tf 파일의 상대 경로와 트루타입 형식으로 추가합니다. 이 경로를 URL() 괄호 안에 포함해야 합니다.

# ../ 이게 상대경로 알려주는 표시

@font-face {

font-family: 'Glegoo';

src: url(../fonts/Glegoo-Regular.ttf) format('truetype');

}

3. 배너 클래스 내에 내포된 단락을 대상으로 하는 선택기를 사용하여 글꼴 제품군 Glegoo와 글꼴 크기 20px를 추가합니다.

페이지를 다시 로드하여 브라우저의 변경 사항을 확인합니다.

.banner p {

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

padding: 10px;

color: #ffffff;

font-weight: bold;

line-height: 1.4;

font-family: "Glegoo";

font-size: 20px;

}

1-19. Review

정말 잘했어! 사용자 경험, 인쇄술의 중요한 측면을 다루는 방법을 배웠습니다.

지금까지 배운 내용을 복습해 보겠습니다.

0. 활자체는 페이지의 텍스트를 배열하는 기술이다.

0. 텍스트는 글꼴 가중치 속성과 함께 임의의 수의 가중치에 나타날 수 있습니다.(font-weight)

0. 텍스트는 글꼴 유형 속성과 함께 기울임꼴로 나타날 수 있습니다.(font-style)

0. 텍스트 줄 사이의 수직 간격은 선 높이 특성을 사용하여 수정할 수 있습니다.(line-height)

0. 세리프 글꼴에는 각 문자의 끝에 대한 추가 세부 정보가 있습니다. 산세리프 글꼴은 그렇지 않다.

0. 사용자 컴퓨터에 특정 글꼴이 설치되지 않은 경우 폴백 글꼴이 사용됩니다.

0. Google 글꼴은 <link> 태그 또는 @font-face 속성으로 HTML 파일에 사용할 수 있는 무료 글꼴을 제공합니다.

0. 로컬 글꼴은 @font-face 속성과 글꼴 원본 경로를 사용하여 문서에 추가할 수 있습니다.(상대 경로는 ../ 붙이고 사용!)

0. 단어 간격 속성은 개별 단어가 얼마나 멀리 떨어져 있는지 변경합니다.(word-spacing)

0. 문자 간격 특성은 개별 문자 간의 거리를 변경합니다.(letter-spacing)

0. 텍스트 정렬 속성은 텍스트의 수평 정렬을 변경합니다.(text-align)

6. Learn CSS: Grid

1. CSS Grid Essentials

이 과정에서는 CSS 그리드를 사용하여 웹 페이지를 완전히 작성하는 데 필요한 필수 CSS 그리드 속성에 대해 설명합니다.

1-1. Introduction to Grids

CSS를 사용하면 웹 페이지에 요소를 우아하게 배치할 수 있습니다. 이 작업을 가장 잘 수행하는 방법에 대한 간단한 대답은 없습니다. 표시하려는 콘텐츠에 따라 여러 가지 다른 기술이 잘 작동할 수 있습니다. Codecademy의 상자 모델, Flexbox 및 CSS 디스플레이와 위치 지정 특성에 대한 교훈은 배치에 접근하는 세 가지 가능한 방법을 설명합니다.

이 과정에서는 CSS 그리드라는 새로운 강력한 도구를 소개합니다. 그리드를 사용하여 전체 웹 페이지를 배치할 수 있습니다. Flexbox는 1차원 레이아웃에서 항목을 배치하는 데 주로 유용한 반면, CSS 그리드는 2차원 레이아웃에 가장 유용하며, 행과 열에 걸쳐 요소를 정렬하고 이동하기 위한 많은 도구를 제공합니다.

이 과정에서는 다음 속성을 사용하여 그리드 레이아웃을 만드는 방법을 설명합니다.

grid-template-columns(격자판-열)

grid-template-rows(격자판 행)

grid-template(격자무늬)

grid-template-area(격자판 영역)

grid-gap(격식을 차리다)

grid-row-start / grid-row-end(그리드-로-시작/그리드-행-끝)

grid-column-start / grid-column-end(그리드-열 시작/그리드-열 끝 )

grid-area(격자판)

배울 게 많네요. 하지만 결국, 여러분은 그리드 포지셔닝의 달인이 될 것입니다. 배워봅시다!

참고: CSS 그리드는 많은 브라우저의 최신 버전에서 지원되지만 보편적으로 지원되지는 않습니다. 이 과정을 최대한 활용하려면 브라우저 버전을 확인하고 해당 버전이 CSS 그리드를 지원하는지 확인하십시오. 브라우저에서 CSS 그리드가 지원되지 않는 경우 지원되는 브라우저 및 버전으로 전환하거나 업데이트해야 합니다.

CSS 그리드에 뛰어들 준비가 되면 다음 연습으로 이동합니다.

1-2. Creating a Grid

그리드를 설정하려면 그리드 컨테이너와 그리드 항목이 모두 있어야 한다. 그리드 컨테이너는 어린이로서 그리드 항목을 포함하고, 그들에게 가장 중요한 스타일과 위치를 적용하는 상위 요소가 될 것이다.

HTML 요소를 그리드 컨테이너로 변환하려면 요소의 디스플레이 속성을 그리드(블록 레벨 그리드의 경우) 또는 인라인 그리드(인라인 그리드의 경우)로 설정해야 한다. 그런 다음 그리드를 배치할 다른 속성을 할당할 수 있다.

1. To을 시작하려면 index.html을 보고 그리드에 있는 7가지 항목을 모두 확인하십시오. 그리드 컨테이너는 클래스 그리드 입니다.

class grid가 있는 요소의 규칙 집합에서 style.css로 표시 속성을 그리드로 설정하십시오.

지금 당장은 그리드에 행 또는 열의 수를 지정하지 않았으므로 모든 항목이 새 행에 놓여 있다. 우리는 다음 몇 가지 연습에서 격자 무늬와 열을 구성하는 방법을 배울 것이다.

# 작았던 박스들이 알맞게끔 커졌다.

.grid {

border: 2px blue solid;

width: 400px;

height: 500px;

display: grid;

}

1-3. Creating Columns

기본적으로 그리드는 하나의 열만 포함한다. 만약 당신이 아이템을 추가하기 시작한다면, 각각의 아이템은 새로운 열에 놓이게 될 것이다. 그것은 그리 큰 그리드가 아니다! 이를 변경하려면 그리드에서 행과 열의 수를 명시적으로 정의해야 한다.

우리는 CSS 속성 grid-template-columns을 사용하여 우리의 그리드의 열을 정의할 수 있다. 다음은 실행 중인 이 속성의 예:

.grid {

display: grid;

width: 500px;

grid-template-columns: 100px 200px;

}

이 속성은 두 가지 변화를 만든다. 첫째, 그리드의 열 수를 정의한다. 이 경우, 두 개가 있다. 둘째, 각 기둥의 폭을 설정한다. 첫 번째 열은 너비가 100픽셀이고 두 번째 열은 너비가 200픽셀이다.

우리는 또한 기둥의 크기를 전체 격자 폭의 백분율로 정의할 수 있다.

.grid {

display: grid;

width: 1000px;

grid-template-columns: 20% 50%;

}

이 예에서 그리드의 너비는 1000픽셀이다. 따라서 첫 번째 열은 그리드 너비의 20%로 설정되므로 폭이 200픽셀이 된다. 두 번째 열은 폭이 500픽셀이 될 것이다.

우리는 또한 이 두 단위를 섞어서 일치시킬 수 있다. 아래 예에서 너비가 20픽셀, 40픽셀, 60픽셀인 세 개의 열이 있다.

.grid {

display: grid;

width: 100px;

grid-template-columns: 20px 40% 60px;

}

이 예에서 열의 총 폭(120픽셀)이 그리드 폭(100픽셀)을 초과한다는 점에 유의하십시오. 이것은 우리의 그리드가 페이지의 다른 요소들을 덮게 할 수도 있다. 나중에 연습할 때 우리는 어떻게 하면 넘치지 않을 수 있는지 토론할 것이다.

1.Grid-template-columns 속성을 사용하여 세 개의 열을 만드십시오. 첫 번째 열은 너비가 100px이고, 두 번째 열은 그리드의 50%, 세 번째 열은 200px 너비로 설정하십시오.

이로 인해 그리드 항목이 그리드 경계를 벗어나게 된다는 점에 유의하십시오. 우리는 이것을 고치는 법을 곧 배울 거야!

#박스가 밖으로 나가서 이상해졌다.

.grid {

border: 2px blue solid;

width: 400px;

height: 500px;

display: grid;

grid-template-columns: 100px 50% 200px;

}

1-4. Creating Rows

우리는 우리의 그리드에 있는 열의 수를 명확하게 정의하는 방법을 배웠다. 행의 수와 크기를 지정하려면 grid-template-rows 속성을 사용하십시오.

이 속성은 grid-template-columns과 거의 동일하다. 아래 코드를 검토하여 두 속성이 모두 작동하는 것을 확인하십시오.

.grid {

display: grid;

width: 1000px;

height: 500px;

grid-template-columns: 100px 200px;

grid-template-rows: 10% 20% 600px;

}

이 그리드에는 두 개의 열과 세 개의 행이 있다. 격자-템플릿 행은 행의 수를 정의하고 각 행의 높이를 설정한다. 이 예에서는 첫 번째 행이 50픽셀(500의 10%)이고, 두 번째 행은 100픽셀(500의 20%)이고, 세 번째 행은 600픽셀이다.

이 두 속성에서 백분율을 사용할 때 행(rows)은 그리드 높이(height)의 백분율로 정의되고 열(columns)은 너비(width)의 백분율로 정의된다는 점을 기억하십시오.

1. 기본적으로 행은 그리드 내부에 균일하게 맞도록 크기가 지정된다.

우리 행의 크기를 수동으로 바꾸자. grid-template-rows를 사용하여 첫 번째 행을 테이블 높이의 40%로 설정하십시오. 두 번째 열은 전체 높이의 50%여야 한다. 세 번째 행은 50px여야 한다.

# 행(rows)이 높이(height), 열(columns)이 부피(width)

.grid {

display: grid;

border: 2px blue solid;

width: 400px;

height: 500px;

grid-template-columns: 100px 50% 200px;

grid-template-rows: 40% 50% 50px;

}

1-5. Grid Template

속성 그리드-템플릿은 이전의 두 CSS 속성을 대체할 수 있다. 격자-템플릿-열과 격자-템플릿-기둥 모두 다음 코드에서 찾을 수 없다!

.grid {

display: grid;

width: 1000px;

height: 500px;

grid-template: 200px 300px / 20% 10% 70%;

}

그리드-템플릿을 사용할 때 슬래시 앞의 값은 각 행의 크기를 결정한다. 슬래시 뒤의 값은 각 열의 크기를 결정한다. 이 예에서, 우리는 다양한 크기의 두 행과 세 개의 열을 만들었다.

적용 전 사용한 것과 동일한 규칙. 행을 설정하는 데 백분율을 사용할 경우 각 행은 그리드의 전체 높이에 대한 백분율이 된다. 기둥은 여전히 전체 폭의 백분율이다.

1.그리드-템플릿을 사용해서 우리의 그리드를 다시 작동시키자. 그리드-템플릿 행과 그리드-템플릿-열을 사용하지 말고 행과 열을 동일하게 유지하십시오!

.grid {

display: grid;

border: 2px blue solid;

width: 400px;

height: 500px;

grid-template: 40% 50% 50px / 100px 50% 200px;

}

1-6. Fraction

백분율(%), ems 및 rem과 같은 몇 가지 유형의 응답 단위를 이미 잘 알고 있을 수 있다.CSS Grid는 분수와 같은 새로운 상대적 크기 조정 단위를 도입했다.

fr 단위를 사용하여 열과 행의 크기를 그리드 길이(height)와 너비(width)의 일부로 정의할 수 있다.이 유닛은 CSS 그리드에서 사용하기 위해 특별히 만들어졌다. fr을 사용하면 그리드 항목이 그리드 경계를 넘나드는 것을 보다 쉽게 방지할 수 있다. 아래 코드를 고려하십시오.

# 한마디로 자동으로 등분 해줌.

.grid {

display: grid;

width: 1000px;

height: 400px;

grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr;

}

이 예에서 그리드는 세 개의 행과 세 개의 열을 가질 것이다. 행이 400픽셀의 높이를 네 부분으로 나누고 있다. 첫 번째 행은 두 개의 부분 중 하나를, 두 번째 열은 하나를, 세 번째 열은 하나를 가진다. 따라서 첫 번째 행은 높이가 200픽셀이고, 두 번째 행과 세 번째 행은 높이가 100픽셀이다.

각 열의 너비는 사용 가능한 공간의 일부분이다. 이 경우 사용 가능한 공간은 다섯 부분으로 나뉜다. 첫 번째 열은 공간의 5분의 1을, 두 번째 열은 3/5를, 마지막 열은 5분의 1이 된다. 총 폭은 1000픽셀이므로 각 폭은 200픽셀, 600픽셀, 200픽셀이다.

다른 유닛에서도 fr을 사용할 수 있다. 이 경우 각 fr은 사용 가능한 공간의 일부를 나타낸다.

.grid {

display: grid;

width: 100px;

grid-template-columns: 1fr 60px 1fr;

}

이 예에서 두 번째 열은 60픽셀이다. 따라서 첫 번째 열과 세 번째 열은 40개의 열 사이를 분리할 수 있다. 각각 1분의 1을 차지하기 때문에, 둘 다 20픽셀이 된다.

Hint 남은 공간을 4분의 1로 나누기 때문에, fr 앞에 있는 숫자는 4로 합산해야 한다! 각 행에는 1fr의 공간이 있어야 한다.

1.중앙이 여전히 그리드의 50%가 되도록 그리드를 변경하되, 첫 번째 열은 나머지 공간의 4분의 3을 차지하며, 마지막 열은 4분의 1을 차지한다.

.grid {

display: grid;

border: 2px blue solid;

width: 400px;

height: 500px;

grid-template: 40% 50% 50px / 3fr 50% 1fr;

}

2.각 행이 사용 가능한 공간의 정확히 동일한 부분을 차지하도록 행을 변경하십시오.

.grid {

display: grid;

border: 2px blue solid;

width: 400px;

height: 500px;

grid-template: 1fr 1fr 1fr / 3fr 50% 1fr;

}

1-7. Repeat

그리드에서 행과 열의 수를 정의하는 속성은 함수를 값으로 사용할 수 있다. repeat()은 이러한 기능 중 하나이다. 반복() 함수는 특별히 CSS 그리드를 위해 생성되었다.

.grid {

display: grid;

width: 300px;

grid-template-columns: repeat(3, 100px);

}

반복 함수는 주어진 횟수만큼 행 또는 열의 사양을 복제한다. 위의 예에서 반복 기능을 사용하면 그리드의 너비가 각각 100픽셀인 세 개의 열이 있다. 이것은 다음과 같다.

grid-template-columns: 100px 100px 100px;

반복은 특히 fr과 함께 유용하다. 예를 들어 반복(5, 1fr)은 테이블을 5개의 동일한 행 또는 열로 분할할 수 있다.

마지막으로 repeat()의 두 번째 매개변수는 복수의 값을 가질 수 있다.

grid-template-columns: repeat(2, 20px 50px)

이 코드는 첫 번째와 세 번째 열의 너비가 20픽셀, 두 번째와 네 번째 열은 50픽셀이 되는 네 개의 열을 만든다.

1.반복() 함수를 사용할 행의 크기를 다시 지시한다.

# 이거 좋네!

grid-template: repeat(3, 1fr) / 3fr 50% 1fr;

1-8. minmax

지금까지 우리가 작업한 모든 그리드는 일정한 크기였습니다. 우리의 예에서 그리드는 너비가 400픽셀이고 높이는 500픽셀이다. 그러나 때때로 당신은 당신의 웹 브라우저의 크기에 따라 그리드의 크기를 조정하기를 원할 수 있다.

이러한 상황에서는 행이나 열이 너무 크거나 작아지는 것을 방지할 수 있다. 예를 들어, 만약 당신이 당신의 그리드에 100픽셀의 넓은 이미지를 가지고 있다면, 당신은 아마도 그것의 기둥이 100픽셀보다 더 얇아지는 것을 원하지 않을 것이다! minmax() 함수는 이 문제를 해결하는데 도움을 줄 수 있다.

.grid {

display: grid;

grid-template-columns: 100px minmax(100px, 500px) 100px;

}

이 예에서 첫 번째와 세 번째 열은 그리드 크기에 관계 없이 항상 100픽셀이다. 그러나, 두 번째 열은 전체 그리드의 크기에 따라 크기가 달라진다. 두 번째 열은 항상 너비가 100픽셀에서 500픽셀 사이여야 한다.

1. 최소값()을 참조하십시오. 먼저 그리드의 폭은 가변적이어야 한다. 너비 속성을 .grid에서 삭제하십시오. 브라우저의 크기를 조정하면 창의 그리드 크기를 변경할 수 있다.

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

grid-template: repeat(3, 1fr) / 3fr 50% 1fr;

}

2. minmax()를 사용하여 두 번째 열을 50픽셀에서 300픽셀 사이로 변경하십시오.

브라우저 창의 크기를 조정해 보십시오. 두 번째 열이 300 픽셀 한계에 도달하면 다른 열에 어떤 일이 발생하는가?

# 이거 이해 안감. 정독 다시 하기!

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

grid-template: repeat(3, 1fr) / 3fr minmax(50px, 300px) 1fr;

}

1-9. Grid Grap

지금까지 우리의 모든 격자에는, 우리의 격자 안에 있는 항목들 사이에 어떤 공간도 없었다. CSS 속성 grid-row-gap과 grid-column-gap은 그리드의 모든 행과 열 사이에 빈 공간을 둘 것이다.

.grid {

display: grid;

width: 320px;

grid-template-columns: repeat(3, 1fr);

grid-column-gap: 10px;

}

그리드 간격은 그리드의 시작 또는 끝에 공간을 추가하지 않는다는 점을 유념해야 한다. 예제 코드에서, 우리의 그리드는 그들 사이에 두 개의 10픽셀 간격을 가진 세 개의 컬럼을 가질 것이다.

이 기둥의 너비를 빨리 계산해 봅시다. fr을 사용하면 사용 가능한 공간이 모두 고려된다는 점을 기억하십시오. 그리드는 너비가 320픽셀이고 그 픽셀 중 20개는 두 개의 그리드 갭에 의해 사용된다. 따라서 각 열은 300개의 사용 가능한 픽셀 중 일부를 차지한다. 각 열은 1fr이 되므로 열은 3분의 1(각각 100픽셀)로 균일하게 나뉜다.

# 320px 중 3개의 그리드가 생성되니 2개의 갭만 만들어진다. 20px 사용하고나서 3개로 나누니 100씩 3등분 되어 3등분.

마지막으로 행과 열 간격을 동시에 설정할 수 있는 CSS 속성 격자가 있다. grid-gap: 20px 10px; 행 사이의 거리는 20픽셀로, 열 사이의 거리는 10픽셀로 설정한다. 다른 CSS 그리드 속성과는 달리, 이 속기는 값 사이에 /-를 사용하지 않는다. 한 값만 주어진 경우, 열 간격과 행 갭은 그 값으로 설정된다.

1.grid-row-gap을 사용하여 그리드 행 사이에 20px의 간격을 만드십시오.

# div class="grid"로 만들고 그 안에 box 클래스들이 있다. 박스 사이 행이 생기는 것은 그리드는 전체를 관리하는 것이고 박스는 박스마다의 값을 관리하는 것이기 때문이다.

grid-row-gap: 20px;

2.그리드 기둥-갭을 사용하여 그리드 열 사이에 5px의 간격을 만드십시오.

# 위에서 말했던 것과 동의하다.

grid-column-gap: 5px;

3. 앞의 두 가지 특성을 단일 묶음 그리드-갭(grid-gap)으로 되돌리십시오.

grid-gap: 20px 5px;

1-10. Grid Items

이 수업에서 우리는 그리드 컨테이너를 정의하는 방법을 배웠다. 그리드를 명시적으로 정의할 때는 행과 열의 양과 각각의 크기를 선언해야 한다.

우리의 모든 예에서, 그리드에 있는 항목들은 항상 정확히 한 칸을 차지해왔다. 이것이 항상 그럴 필요는 없다; 우리는 격자 품목이 한 줄과 한 칸 이상을 차지하도록 함으로써 우리의 격자 모양을 급격하게 바꿀 수 있다. 오른쪽의 도표에 이것을 볼 수 있다. A, B, C, E 항목은 둘 이상의 행에 걸쳐 있음!

다음 연습에서는 그리드 항목의 크기와 페이지에 표시되는 위치에 영향을 주는 CSS 속성을 배우십시오. 부모와 자식 모두를 조작함으로써, 우리는 아름다운 레이아웃을 쉽게 만들 수 있다.

격자 아이템에 대해 알아보자!

1-11. Mupltiple Row Items

CSS 속성 grid-row-start 및 grid-row-end를 사용하여 단일 그리드 항목이 여러 행을 차지하도록 할 수 있다. 외부 그리드 컨테이너에 더 이상 CSS를 적용하지 않는다는 점을 기억하십시오. 그리드 내부에 있는 요소에 CSS를 추가하고 있는 겁니다.

.item {

grid-row-start: 1;

grid-row-end: 3;

}

이 예에서, 클래스 항목의 HTML 요소는 그리드에서 행 1과 행 2를 차지한다. grid-row-start과 grid-row-end이 허용하는 값은 격자선이다.

행 그리드 선과 열 그리드 선은 1에서 시작하여 그리드에 있는 행 또는 열의 수보다 1 큰 값으로 끝난다.예를 들어 그리드에 5개의 행이 있는 경우 그리드 행의 범위는 1에서 6까지입니다.그리드에 8개의 열이 있는 경우 그리드 행의 범위는 1에서 9까지입니다.

grid-row-start은 그리드 항목을 시작할 행이어야 한다.grid-row-end 값은 그리드 항목이 종료될 행보다 더 커야 한다. 2, 3, 4 행을 포함하는 요소는 다음과 같은 선언이 있어야 한다. grid-row-start: 2 및 grid-row-end: 5.

그리드-row-start의 값이 그리드-row-end의 값보다 클 수 있다. 또한 두 속성 모두 음수 값을 가질 수 있다. 이러한 기능을 사용하는 방법에 대한 자세한 내용은 설명서를 참조하십시오.

1.클래스 그리드에 대한 CSS 규칙을 살펴 보십시오. 완전히 채워지면 어떻게 보일지 생각해봐.

이 첫 번째 항목이 다섯 번째와 여섯 번째 줄을 차지하도록 합시다. 클래스 a 규칙에서 항목이 다섯 번째 행에서 시작되도록 그리드-row-start를 설정하십시오.

# 다섯 번째 행에 생겼다.

.a {

grid-row-start: 5;

}

2.그 항목이 다섯 번째 및 여섯 번째 행을 차지하도록 그리드-화면을 설정하십시오.

# end는 내가 설정한 값 보다 하나 커야 한다. 난 5~6행만 만들려고 하니 end 값은 7로 설정. 두 행 칸이 생겼다.

.a {

grid-row-start: 5;

grid-row-end: 7;

}

1-12. Grid Row

우리는 grid-row-start와 grid-row-end의 속기로서 속성 grid-row를 사용할 수 있다. 다음 두 코드 블록은 동일한 출력을 생성한다.

.item {

grid-row-start: 4;

grid-row-end: 6;

}

.item {

grid-row: 4 / 6;

}

이 코드는 grid-template이 grid-template-row grid-template-columns의 속기인 방식과 유사하게 보여야 한다. 이 경우, 시작 행은 "/" 앞에 가고 끝 행은 그 뒤에 온다. 다시, 마지막 행은 배타적이다; 이 그리드 항목은 4행과 5행을 차지할 것이다.

한 항목이 이러한 속성을 사용하여 여러 행이나 열에 걸쳐 있을 때, 존재하는 경우 그리드 간격도 예를 들어, 어떤 항목이 100픽셀의 두 행에 걸쳐 있고 10픽셀 grid-gap이 있는 경우, 그 항목의 총 높이는 210픽셀이 된다.

1.마지막 연습에서 당신의 코드를 다시 언급하시오. grid-row-start 및 grid-row-end을 grid-row으로 교체한다. 품목이 5열과 6열로 계속 올라가는지 확인하십시오.

.a {

grid-row: 5 / 7;

}

1-13. Grid Column(: span 사용법)

이전의 세 가지 특성은 열에도 존재한다. grid-column-start, grid-column-end 및 grid-column 속성에서 동일한 작업을 한다. 이러한 속성은 그리드 항목이 여러 열에 걸쳐 있도록 한다.

이러한 속성을 사용할 때, 우리는 키워드 스팬을 사용하여 다른 쪽 끝을 기준으로 열이나 행을 시작하거나 종료할 수 있다. 아래 코드에서 스팬이 어떻게 사용되는지 살펴보십시오.

# 사용법은 이렇다. 시작이 4고 span 2면 시작이 4로 했으니 2칸을 가는 거다. 그럼 6. 그래서 4 / 6 == 4 / span 2

# 반대로 끝이 6이고 시작이 span 2면 6에서 2번만 내리면 된다. 그럼 4 그래서 span 2 / 6 == 4/ 6

.item {

grid-column: 4 / span 2;

}

이것은 항목 요소가 4열에서 시작하여 두 열의 공간을 차지하도록 말하고 있다. 그래서 아이템은 4열과 5열의 자리를 차지할 것이다. 다음과 같은 코드 블록과 동일한 결과를 생성한다.

.item {

grid-column: 4 / 6;

}

.item {

grid-column-start: 4;

grid-column-end: span 2;

}

.item {

grid-column-start: span 2;

grid-column-end: 6;

}

스팬은 요소의 끝 그리드 선을 결정할 때 만들 수 있는 off-by-one 오류를 방지하기 때문에 유용한 키워드다. 그리드 항목을 시작할 위치와 기간을 알고 있다면 스팬을 사용하십시오!

1.우리의 그리드에 다른 아이템을 추가하자. index.html에서 grid div 내부에 class box와 b의 다른 div를 추가한다.

</div>

2.박스 b를 6열로 만들자. style.css에서 클래스 b 요소에 대한 규칙을 만드십시오. 그리드 열을 사용하여 시작 열을 2로 설정하십시오. 스팬을 사용하여 항목이 6개의 열을 차지하도록 하십시오.

.b {

grid-column: 2 / span 6;

}

3. Box b도 몇 줄씩 가게 합시다. 항목을 2행에서 4행까지 수행하도록 하려면 스팬의 그리드-row를 사용하십시오.

.b {

grid-column: 2 / span 6;

grid-row: 2 / span 3;

}

4. 이제 박스 a로 돌아가서 키워드 범위를 사용하여 그리드-기둥 속성 값을 다시 표시해 봅시다.그리드 항목은 여전히 첫 번째 열과 두 열에 걸쳐 있어야 한다.

.a {

grid-row: 5 / 7;

grid-column: 1 / span 2;

}

1-14. Grid Area

우리는 이미 grid-row, grid-column, grid-row-start, grid-row-end과 같은 성질을 속기 위한 속기로 사용할 수 있었다. 우리는 grid-area을 이용하여 훨씬 더 재측정할 수 있다. 이 속성은 항목의 행과 열의 시작 위치와 끝 위치를 모두 설정한다.

.item {

grid-area: 2 / 3 / 4 / span 5;

}

grid-area은 슬래시로 구분된 4개의 값을 취한다. 순서가 중요해! 이것이 그리드 영역이 그러한 값을 해석하는 방법이다.

1. grid-row-start

2. grid-column-start

3. grid-row-end

4. grid-column-end

위의 예에서, 그 항목은 2열과 3열과 3열에서 8열까지 차지할 것이다.

그리드 영역을 사용하면 원하는 위치에 항목을 쉽게 배치할 수 있다.

1. index.html에서 그리드에 세 번째 항목을 추가하십시오. 이 품목이 class box인지 확인한다.

2. style.css에서 클래스 c에 대한 규칙 집합을 만드십시오. 격자 영역을 사용하여 이 항목이 6행, 7행, 8행으로 구성되도록 하십시오. 두 종료 값에 모두 스팬을 사용하십시오.

.c {

grid-area: 6 / 8 / span 3 / span 1;

}

3. 그리드에 있는 다른 두 개의 항목에 대한 우리의 코드를 다시 쓰자. 항목 a로 시작. 그리드 행과 그리드 열을 그리드 영역으로 대체한다. 다시, 스팬을 사용하여 행과 열의 끝을 설정하십시오.

.a {

grid-area: 5 / 1 / span 2 / span 2;

}

4. 그리드 영역을 사용하여 항목 b에 대해 동일한 재접촉을 수행하십시오. 품목이 동일한 공간을 차지하는지 확인하십시오.

.b {

grid-area: 2 / 2 / span 3 / span 6;

}

1-15. Review

이 시점에서, 우리는 흥미로운 레이아웃을 만들기 위해 그리드와 그 안에 있는 항목들을 조작하는 많은 다양한 방법들을 다루었다.

grid-template-columns은 그리드 열의 수와 크기를 정의한다.

grid-template-row은 그리드 행의 수와 크기를 정의한다.

grid-template은 grid-template-columns과 grid-template-row 모두를 하나의 선으로 정의하기 위한 속편이다.

grid gap - 행 및/또는 그리드 열 사이에 빈 공간 배치

grid-row-start 및 grid-row-end 요소가 그리드의 특정 행에 걸쳐 있도록 함

grid-column-start 및 grid-column-end으로 요소의 특정 열에 걸쳐 있도록 함

grid-area은 grid-row-start, grid-column-start, grid-row-end, grid-column-end에 속편이며 모두 한 줄로 되어 있다.

그리드를 설정하고 채우는 방법을 확인했으며 이제 툴킷에 추가할 CSS 위치 지정 기술을 한 가지 더 추가하셨습니다! 이 기술들을 굳히기 위해 몇 가지 연습을 해봅시다.

1.이 많은 디바들을 격자판으로 만드는 것으로 시작합시다. 클래스 그리드를 사용하여 div의 표시 속성을 CSS 그리드로 만드는 데 필요한 값으로 설정하십시오.

Hint: style.css에서 디스플레이 속성을 .grid 요소에 추가하고 그리드로 설정하십시오.

# box 칸 알 맞게 커졌다.

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

width: 500px;

}

2. 그리드를 네 개의 열로 구성한다. 즉, 처음 두 개는 전체 너비의 25%를 차지하며, 세 번째 열은 나머지 공간의 3분의 2를 차지하며, 마지막 열은 나머지 공간의 마지막 3분의 1을 차지함.

Hint: 처음 두 개의 파라미터로 25%의 그리드-템플릿-열을 사용한 다음, fr을 사용하여 나머지 두 열을 적절히 분할하십시오.

# 열로 나누었으니 A, B, E 박스가 25% 25%, C 는 2fr, D는 1fr

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

width: 500px;

grid-template-columns: 25% 25% 2fr 1fr;

}

3. 그리드에 200px의 크기를 2행으로 지정하십시오.

Hint: grid-template-rows 속성을 사용하여 이를 수행할 수 있다.

# box 높이가 전체적으로 줄었다.

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

width: 500px;

grid-template-columns: 25% 25% 2fr 1fr;

grid-template-rows: 200px 200px;

}

4. 그리드의 행 사이에 10px의 간격을 두고 그리드의 열 사이에 15px의 간격을 둔다.

Hint: 격자-row-갭 속성을 사용하여 행과 열-기둥-갭을 열 사이에 간격을 둘 수 있다.

.grid {

display: grid;

border: 2px blue solid;

height: 500px;

width: 500px;

grid-template-columns: 25% 25% 2fr 1fr;

grid-template-rows: 200px 200px;

grid-row-gap: 10px;

grid-column-gap: 15px;

}

5. 클래스가 포함된 a 상자를 그리드의 처음 두 열에 끼우십시오.

Hint: 그것은 1열에서 시작하여 2열로 확장되어야 한다.

# 이건 쫌더 이해해 보도록 해보자.

.a {

grid-column-start: 1;

grid-column-end: 2 span;

}

6. 강습이 있는 상자를 격자판의 처음 두 줄로 만드세요.

Hint: 1행부터 시작해서 3행 전에 끝나야 한다.

.a {

grid-column-start: 1;

grid-column-end: span 2;

grid-row-start: 1;

grid-row-end: 3;

}

7. 좋아! 이제 우리가 만든 레이아웃을 변경하지 않고 style.css 파일을 얼마나 짧게 만들 수 있는지 확인하려면 refactoring을 사용해 보십시오. 준비가 되었으면 다음 수업으로 넘어가십시오. 다음 수업에서는 CSS 그리드를 더욱 스타일링하기 위한 몇 가지 고급 기술을 배울 것이다.

2. Advanced CSS Grid

이 과정에서는 CSS Grid의 고급 특성을 배울 것이다.

2-1. Introduction

이전 과정에서는 웹 페이지에 대한 2차원 그리드 기반 레이아웃을 만드는 데 필요한 모든 기본 특성을 배웠습니다! 이 과정에서는 CSS 그리드 레이아웃의 힘을 활용하는 데 사용할 수 있는 다음과 같은 추가 속성에 대해 알아보십시오.

grid-template-areas

justify-items

justify-content

justify-self

align-items

align-content

align-self

grid-auto-rows

grid-auto-columns

grid-auto-flow

또한 명시적 및 암묵적 그리드 및 그리드 축에 대해 알아보십시오.

오른쪽 브라우저의 코드를 검사하십시오.localhost:8000 옆에 있는 대각선 화살표를 클릭하여 브라우저를 확장하십시오.

이 수업을 진행하면서 가상의 요리 사이트를 업데이트하게 될 거야! 준비가 되면 다음 운동을 계속하십시오.

2-2. Grid Template Areas

grid-template-areas 속성은 당신이 grid-col-start, grid-col-end, grid-row-start,grid-row-end 및 grid-template 속성에서 값으로 사용할 웹 페이지의 섹션 이름을 지정할 수 있게 해준다.

<header>Welcome!</header>

<nav>Links!</nav>

<section class="services">Services!</section>

<footer>Contact us!</footer>

</div>

.container {

display: grid;

max-width: 900px;

position: relative;

margin: auto;

grid-template-areas: "head head"

"nav nav"

"info services"

"footer footer";

grid-template-rows: 300px 120px 800px 120px;

grid-template-columns: 1fr 3fr;

}

header {

grid-area: head;

}

nav {

grid-area: nav;

}

.info {

grid-area: info;

}

.services {

grid-area: services; }

footer {

grid-area: footer;

}

웹 사이트의 이 섹션을 확장하여 위의 코드를 보다 명확하게 볼 수 있다.

1. 위의 예에서, HTML은 5개의 분리된 부분으로 된 웹 페이지를 만든다.

2. .container 규칙 집합의 grid-template-areas 선언은 4행, 2열 레이아웃을 만든다.

3. grid-template-row 선언은 300픽셀, 120픽셀, 800픽셀 및 120픽셀의 각 행의 높이를 지정한다.

4. grid-template-col 선언은 fr 값을 사용하여 왼쪽 열이 페이지의 사용 가능한 공간의 4분의 1을 사용하도록 하고 오른쪽 열은 페이지의 사용 가능한 공간의 3/4을 사용하도록 한다.

5. .container 아래의 각 규칙 집합에서, 우리는 grid-area 속성을 사용하여 지정된 페이지의 일부를 커버하는 섹션을 알려준다. 헤더 요소는 첫 번째 행과 두 열에 걸쳐 있다. 네비게이션 요소는 두 번째 열과 두 열에 걸쳐 있다. 클래스가 .info인 요소는 세 번째 행과 왼쪽 열에 걸쳐 있다. 클래스 .services가 있는 요소는 세 번째 열과 오른쪽 열에 걸쳐 있다. 바닥글 요소는 맨 아래 행과 두 열에 걸쳐 있다.

6. 지금까지 참을 만큼 참았다 40줄의 코드로 된 페이지 전체가 펼쳐졌다.

이 속성은 그리드 컨테이너에 선언된다.

이 연습에서는 무엇을 만들 것인지를 볼 수 있다.

# 이해를 돕기 위한 글.

# grid-template-areas : 1행1열 1행2열

2행1열 2행2열

3행1열 3행2열

4행1열 4행2열

# 4행 2열의 grid-template-areas를 선언했다. 이 공간을 사용하기 위해선 style.css에서 클래스나 태그 선택기에 grid-area: 1행1열, grid-area: 3행2열 이렇게 사용해서 쓰면 된다.

1. style.css에서 .container 규칙 집합에 그리드-템플릿-areas 속성을 추가하십시오.

이 값은 다음과 같은 영역에 2열, 4행 레이아웃을 생성해야 한다.

머리글(첫 번째 행에 두 개의 열을 사용)

탐색(두 번째 행에 두 개의 열 사용)

왼쪽(세 번째 행의 왼쪽에 한 열씩 쓰기)

오른쪽(세 번째 행의 오른쪽에 있는 열을 한 개씩 사용)

바닥글(4열에서 두 개의 열 사용)

Hint grid-template-areas: "a a"

"b b"

"c d"

"e e";

grid-template-areas: "header header"

"nav nav"

"left right"

"footer footer";

2. style.css의 헤더 규칙 집합에서 그리드 영역 속성을 헤더로 설정하십시오.

# Header Nav 바뀜-> Header

# Left Right 바뀜 -> Nav Left

# Footer 바뀜 -> Right Footer

header {

background-color: dodgerblue;

grid-area: header;

}

3. style.css의 navigation, .left, .right 및 footer 규칙 집합에 대해 동일한 패턴을 따르십시오.

nav {

background-color: beige;

grid-area: nav;

}

.left {

background-color: dodgerblue;

grid-area: left;

}

.right {

background-color: beige;

grid-area: right;

}

footer {

background-color: dodgerblue;

grid-area: footer;

}

4. 그리드-템플릿-열 속성을 사용하여 첫 번째 열의 너비가 200픽셀이고 두 번째 열의 너비가 400픽셀이 되도록 하십시오.

# .container에 추가

grid-template-columns: 200px 400px;

5. .container 규칙 집합에서 grid-template-rows 속성을 사용하여 행을 150픽셀, 200픽셀, 600픽셀 및 200픽셀 크기로 만드십시오.

grid-template-rows: 150px 200px 600px 200px;

# 최종적 .container

.container {

display: grid;

max-width: 900px;

position: relative;

margin: auto;

grid-gap: 10px;

grid-template-areas: "header header"

"nav nav"

"left right"

"footer footer";

grid-template-columns: 200px 400px;

grid-template-rows: 150px 200px 600px 200px;

}

2-3. Overlapping Elements

CSS 그리드 레이아웃의 또 다른 강력한 특징은 쉽게 요소를 겹치는 능력이다.

요소가 중복될 때 일반적으로 그리드 선 이름과 그리드 영역 속성을 사용하는 것이 가장 쉽다.

<div class="services">Services!</div>

</div>

.container {

display: grid;

grid-template: repeat(8, 200px) / repeat(6, 100px);

}

.info {

grid-area: 1 / 1 / 9 / 4;

}

.services {

grid-area: 1 / 4 / 9 / 7;

}

img {

grid-area: 2 / 3 / 5 / 5;

z-index: 5;

}

위의 예에서, 8개의 행과 6개의 열이 있는 그리드 컨테이너가 있다. 용기 안에는 세 가지 그리드 항목이 있다. 즉, 클래스 정보가 있는 <div>, 클래스 서비스가 있는 <div> 및 이미지.

정보 섹션은 8개의 행과 처음 3개의 열을 모두 포함한다. 서비스 섹션은 8개 행과 마지막 3개 열을 모두 포함한다. 이미지는 두 번째, 세 번째 및 네 번째 행과 세 번째 및 네 번째 열에 걸쳐 있다.

z-index 속성은 브라우저에 서비스 및 정보 섹션 위에 이미지 요소를 표시되도록 렌더링하도록 지시한다.

1.In style.css로 설정된 .left 규칙은 그리드 영역 속성을 추가하고 그 값을 4 / 1 / 9 / 5로 설정하십시오.

.left {

background-color: dodgerblue;

grid-area: 4 / 1 / 9 / 5;

}

2.In style.css로 설정된 .right 규칙은 그리드 영역 속성을 추가하고 그 값을 4 / 5 / 9 / 7로 설정하십시오.

.right {

background-color: beige;

grid-area: 4 / 5 / 9 / 7;

}

3. style.css의 .overlap 규칙 집합에서 그리드 영역 속성을 추가하십시오.

중첩 요소가 6번째 및 7번째 행과 4번째 및 5번째 열에 걸쳐 있도록 값을 설정하십시오.

그리드 영역 속성은 그리드-열-시작, 그리드-열-시작, 그리드-열-끝 및 그리드-열-끝의 4가지 값을 허용한다.

.overlap {

background-color: lightcoral;

grid-area: 6 / 4 / 8 / 6;

}

4. 겹치는 요소가 올바른 요소로 덮여 있다는 점에 유의하십시오. z겹침 요소의 z-지수를 5로 설정하십시오.

# z-index는 뭐랄까 겹칠 때 발생하는 읽기 에러 방지? 사용하니 더 커짐.

.overlap {

background-color: lightcoral;

grid-area: 6 / 4 / 8 / 6;

z-index : 5;

}

5.In style.css로 설정된 바닥글 규칙은 그리드 영역 속성을 추가하고 그 값을 9 / 1 / 13 / 7로 설정하십시오.

# 9행에서 시작해 12행에 끝나고 1열에서 시작해 6열에서 끝난다.

footer {

background-color: dodgerblue;

grid-area: 9 / 1 / 13 / 7;

}

grid-template-areas에선 행 열의 의미가 수학에서 쓰이는 의미가 맞지만

grid-template-rows, grid-template-columns에서 쓰이는 행 열의 의미는 rows는 위 아래(height)로 늘어나고 columns는 옆으로(width)늘어난다.

row는 길게 늘어서 있는 사람 줄을 생각하면 된다. 그래서 행.

column은 기둥을 뜻하니 기둥을 생각해보면 열이다. 박스 사이사이에 기둥을 세우는 것이나 다름이 없으니까.

Box Model image : https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/diagram-boxmodel.svg

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Choose your path - Codecademy (0)	2020.04.26
Ruby - Codecademy (0)	2020.04.26
Python 개념 - Codecademy (0)	2020.04.26
Codecademy란? (0)	2020.04.26

Cyberworld

Everything is connected, connection is power.

Ruby - Codecademy

스스로 코딩/Codecademy 2020. 4. 26. 11:18

2018, 4, 1 일 ~ 2018, 8, 17 금 (10 hours) : 4개월간

코드카데미 Ctrl + Enter 실행함.

객체지향 스크립트 언어
RubyonRails 웹 프레임워크

코스 결과
이 과정에서는 변수, 루프, 제어 흐름, 그리고 가장 중요한 객체 지향 프로그래밍을 포함한 기본 프로그래밍 개념에 대해 Ruby에 친숙해 질 것이다. 현지에서 제작할 최종 프로젝트에 대한 이해도를 테스트할 수 있는 기회가 주어집니다.

Ruby는 여전히 시장에서 큰 수요를 가진 범용 언어이며 Rails응용 분야에서 일반적으로 사용된다. 간결하고 읽기 쉽게, 집어 올리기 쉽지만 또한 강력하다. Twitter, Soundcloud, Goodreads및 Kickstarter와 같은 회사는 Ruby를 통해 그들의 제품을 시장에 내놓았다.

Ruby에선 순서가 중요하다.

=====
gets는 사용자로부터 입력을 받는 Ruby방법입니다. 입력을 받을 때마다 Ruby가 자동으로 입력 후 빈 줄(또는 새 라인)을 추가하고, chomp은 그 줄을 제거한다.

rev=false 비즈니스란 무엇입니까?
이것이 루비에게 말하는 것은 사용자가 두개의 인수를 입력하지 않으면 기본적으로 false로 변하는 두번째 매개 변수인 rev(reverse)를 가지고 있다는 것이다. (2-3 참고)

루비에서의 느낌표 ! 는 "이 방법은 위험하거나 예기치 못한 일을 할 수 있다!"는 뜻을 상기하라. 이 경우에는 새로운 배열을 만드는 대신에 원래의 배열을 변형시킵니다.

루비에서는 인스턴스(instance)변수임을 나타내기 위해 변수 앞에@를 사용합니다. 이는 변수가 클래스의 인스턴스에 연결됨을 의미합니다.

메서드를 쓰고 꼭 end로 닫아주고 if문을 써도 end를 반드시 써서 닫아줘야 한다.

메서드 : 프로그램에서 특정 작업을 수행하기 위해 작성된 코드를 재사용할 수 있는 섹션입니다. def를 포함하여 사용한다.
인수 : 인수는 메서드를 호출할 때 메서드의 괄호 사이에 실제로 넣은 코드 조각
매개 변수 : 메서드의 괄호 사이에 정의할 때 입력하는 이름.
예) def A(n) # def를 사용한 A가 메서드가 된다.
puts n + 1 # 여기선 n이 매개 변수다.

A(3) # 여기선 3이 인수가 된다.
>> 4
=====

관례적으로 변수는 소문자로 시작한다. 문자열은 대문자로 쓸 수 있지만 변수는 모두 소문자로 쓰도록 한다.
ex) variable = "XkkkX"
단어는 counter와 masterful_method와 같이 밑줄로 구분되어야 한다.

'.length' : 문자열의 길이(문자, 숫자, 기호, 공간)를 반환해준다.
ex) puts "BA BK".length
>> 5

.include? : 무엇을 포함하고 있는지 조건문 형태로 사용 된다.
ex) if variable.include? "AK"
print "AK가 포함되어 있다."
>> AK가 포함되어 있다.

.times : 특정 횟수만큼 작업을 수행하려는 경우, 같은걸 반복해서 출력할 때 사용.
ex) 20.times {print "a"}
>> aaaaaaaaaaaaaaaaaaaa

우리가 포함시키고 싶은 숫자의 범위를 알고 있다면, .upto .downto를 사용할 수 있습니다.
.upto : 오름차순
95.upto(100) { |num| print num, " " }
>> 95 96 97 98 99 100

.downto : 내림차순
95.downto(100) { |num| print num, " " }
>> 100 99 98 97 96 95

.respond_to? : 객체가 해당 메서드를 수신할 수 있으면 기호를 사용하여 true를 반환하고 그렇지 않으면 false를 반환합니다.
방법을 참조하는데 symbol이 유용하여 사용한다. 한마디로 사용 여부 판단.
ex) [1, 2, 3].respond_to?(:push)
어레이 개체를 누르면 호출할 수 있으므로(.push) true가 반환됩니다. 하지만
[1, 2, 3].respond_to?(:to_sym)
배열을 기호로 변환할 수 없으므로 거짓으로 반환합니다.

.select: 해시에서 특정 값을 가져오는 방법을 알고 있지만 특정 조건을 충족하는 값의 해시를 필터링 하려면 어떻게 해야 할까? 특정 조건의 값을 찾을 때 사용한다. ex) 3가지 방법. 조건 걸기, 특정 키 찾기, 조건 불러와서 사용하기

#조건 불러와서 사용하기
# 여기서 ages는 정수를 담은 숫자들이다. under_100은 100 미만의 정수를 찾아주는 조건이다.
# 사용 방법: 다른 값 집합체.select(&조건 있는 변수)
ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new { |x| x < 100 }

puts ages.select(&under_100)

>> [23, 7, 11, 94, 70, 44]

.sort_by : 복사본 생성
.sort .sort! 차이 : .sort는 복사본을 정렬하나 .sort! 는 정렬한다. .sort는 원래 어레이는 그대로 두고 정렬된 어레이만 반환합니다. 두번째 방법인. sort!는 실제 어레이를 수정합니다.
.to_s : 값을 문자열로 변환시켜 준다.(.to_string)
.to_sym : 값을 기호로 변환시켜 준다.(.to_symbol)
.to_i : 값의 정수버전을 돌려준다.
.to_f : 실수버전 돌려준다.
.nil : nil은 사전적 의미 (전혀)없는, 존재하지 않는. 0을 의미한다. 참으로 절대적이게 같지 않으면 true. 같거나 다르면 false? false 와 nil은 다르다. 사실이 아니다와 아무것도 아닌 것과는 다른 말이다.
.next : .next은 해당 정수를 호출하는 즉시 다음 수의 정수를 반환합니다. 즉, 4.next 가 5를 반환합니다.
.collect : 수집이란 뜻. 원본 배열을 복사하여 다른 조건문을 사용하여 원본을 훼손하지 않고 사용 가능. (참고: 1-2. Collect 'Em All)
.map : .collect와 이름은 다르지만 정확히 똑같은 일을 한다. .collect == .map
.floor : 부동 소수 점 이하의 최대 정수를 반환합니다.
& : 변환 해주는 장치? ex) Symbol을 프로세스로 변환시켜줄 수도 있다. 어디에 사용하느냐에 따라 변환해주는 듯.
lambda 와 proc 차이? : 1-14. Lambdas vs. Procs 참고!!
.is_a? : 이 방법은 개체가 이름이 지정된 개체 유형이면 true이고 그렇지 않으면 false이면 반환됩니다.( method, which returns true if an object is the type of object named and false otherwise:) 추가설명: 클래스가 obj의 클래스이면 true를 반환합니다. 또는 클래스가 obj또는 obj에 포함된 모듈의 superclass중 하나일 경우.
Integer : 정수를 의미한다. 아마 정수로 표현하거나 정수를 표현하려 할 때, 정수만을 불러오려 할 때? (.is_a? Integer 구문을 많이 사용하는 듯 하다.)

splat : splat 인수는 * 가 선행하는 인수로, 방법이 하나 이상의 인수를 수신할 수 있음을 프로그램에 알려 줍니다.
메서드의 몇개의 인수를 받을지 정확히 모를 때 *을 인수에 붙여주어 사용한다. 입력한 만큼 출력된다.
ex) 1-6. Splat!
def what_up(greeting, *friends)
friends.each { |friend| puts "#{greeting}, #{friend}!" }
end

what_up("What up", "Ian", "Zoe", "Zenas", "Eleanor")
>> What up, Ian!
>> What up, Zoe!
>> What up, Zenas!
>> What up, Eleanor!

.push 와 concatenation 연산자 <<
.push 대신 << 연산자를 쓰는 것이 훨씬 편리하다.

ex.1) .push와 += 을 사용.
alphabet = ["a", "b", "c"]
alphabet.push("d")

caption = "A giraffe surrounded by "
caption += "weezards!" # .push를 사용하여 추가할 수 없다. 그릇이 배열 형태가 아니기 때문이다.

puts alphabet
puts caption

>> ["a", "b", "c", "d"]
>> A giraffe surrounded by weezards!

ex.2) << 연산자 사용.
alphabet = ["a", "b", "c"]
alphabet << "d"

caption = "A giraffe surrounded by "
caption << "weezards!"

puts alphabet
puts caption

>> ["a", "b", "c", "d"]
>> A giraffe surrounded by weezards!

문자열 보간 (참고: 1-14. String Interpolation)
+ 나 << 을 사용하여 문자열이나 정수를 변수에 추가할 수 있다.
그러나 문자열이 아닌 정수 값을 합칠 때 정수를 .to_s로 문자열로 변환 시켜 주어야 한다.

하지만 문자열 보간을 사용하면 정수든 문자열이든 변수 이름을 문자열 안에 넣기만 하면 된다.

Ternary 연산자 (참고 : 1-4. One Good Trun Deserves a Ternary, 1-16. The Ternary Operator)
if / else 보다 간결한 조건적 표현이다.
문법 형식

ex.1)
if 1 > 5
puts "true~~"
else
puts "false~~~"
end
>> false~~~

if를 ternary 연산자를 사용하여 표현하였을 때,

puts 1 > 5 ? "true~~" : "false~~~"
>> false~~~

if 표현법
1. 한 줄에 표현하기: if가 뒤에 있어야 함. (참고: 1-2. A Simpler 'if')
puts "Hello!" if true
2. 여러 줄 표시:
if true
   puts "Hello!"
end

unless 한 줄 표현하기 if와 같음.

산술 연산자
> : 왼쪽이 더 커야 한다. 초과.
< : 오른쪽이 더 커야 한다. 미만.
>= : 왼쪽이 더 크거나 같아야 한다. 이상
<= : 오른쪽이 더 크거나 같아야 한다. 이하.

부울 연산자, 논리 연산자
&& : And 연산자. 둘다 참(true) 이어야 한다.
|| : Or 연산자. 둘 중 하나만 참(true)이면 된다.
! : Not 연산자. true, flase를 뒤집는다. !true면 false가 되고 !false면 true가 된다.

결합 비교 연산자 <=>
첫번째 피연산자(비교할 항목)가 두번째 피연산자와 같은 경우 0,
첫번째 피연산자가 두번째 피연산자보다 큰 경우 1,
첫번째 피연산자가 두번째 피연산자보다 작은 경우 -1

조건부 할당 연산자 ||= (참고. 1-6. Conditional Assignment )
연산자를 사용하여 변수에 값을 할당할 수 있습니다. 하지만 변수가 아직 할당되지 않은 경우에만 할당하려면 어떻게 해야 할까요?
이를 위해 조건부 할당 연산자를 사용할 수 있습니다.
||= 논리 연산자(||)와 일반 할당 연산자(=)로 구성되어 있습니다. 합쳐져 있다.

favorite_book = nil # favorite_book 변수가 nil로 설정되어 있다. 아무것도 아님을 뜻하는 것이기 때문에
puts favorite_book 출력 결과가 없다.

favorite_book ||= "Cat's Cradle" # 조건부 할당 연산자를 사용하여 조건을 걸어 Cat's Cradle 이라고 값을 주었다.
puts favorite_book # Cat's Cradle 이라고 출력된다.

favorite_book ||= "Why's (Poignant) Guide to Ruby" # Why's (Poignant) Guide to Ruby 라는 새로운 값을 주었다.
puts favorite_book # 그러나 Cat's Cradle 이라는 값이 출력된다. 조건을 걸었기 때문이다.

favorite_book = "Why's (Poignant) Guide to Ruby" # 이번엔 일반 할당 연산자를 사용하여 값을 주었다.
puts favorite_book # 아무 이상 없이 변경 되었다. Why's (Poignant) Guide to Ruby 출력.
>> 아무것도 출력되지 않음.
>> Cat's Cradle
>> Cat's Cradle
>> Why's (Poignant) Guide to Ruby

변수 설명과 사용 기호
$ ← 전역 변수(global variables) : 클래스를 처리할 때는 어디에서나 사용할 수 있는 변수
지역 변수(local variables) : 특정 메서드 내에서만 사용할 수 있는 변수
@@ ← 클래스 변수(class variables) : 특정 클래스에서 사용할 수 있는 변수
@ ← 인스턴스 변수(instance variables) : 특정 인스턴스(인스턴스 변수)에만 사용할 수 있는 변수

변수를 사용하는데 있어서 기본적으로 글로벌 변수가 편하다. 그렇지만 프로그래밍을 하다 보면 많은 변수들을 만들어야 하기 때문에 변경될 우려가 많다. 그래서 일부 위치에서만 변경할 수 있는 범위가 제한된 변수를 생성하는 것이 나중에 관리하기가 훨씬 용이하다!

정렬 방법(.sort)으로 전달되는 블록은 1,0또는-1중 하나를 반환해야 합니다.
첫번째 블록 매개 변수가 두번째 블록보다 먼저 와야 하는 경우-1,
반대로 가중치가 같은 경우에는 1이 다른 값보다 앞에 있지 않음을 의미하는 경우 0을 반환해야 합니다.

반복문
for문에서 점이 두개일 때와 세개일 때 출력이 다르다. 세개일 경우에는 그 전까지의 숫자만 출력된다.
for "키" in "컨테이너"
ex)1
for num in 1..15
  puts num
end
>> 1
>> 2
>> # 숫자가 계속 이어짐.
>> 14
>> 15
ex)2
for num in 1...15
  puts num
end
>> 1
>> 2
>> # 숫자가 계속 이어짐.
>> 13
>> 14

each, each do 사용법

집합의 모든 요소에 대해 작업을 반복하려는 경우

적용해보기.

둘의 차이점. 첫 번째 방법은 { |item| 요 안에다 코드를 다 써야 한다.
}
두 번째 방법은 item이라는 가상의 변수 이름을 할당 받아 자유롭게 불러와서 사용할 수 있다.

해쉬 사용법(값으로 문자가 오든, 정수가 오든, 불린 값이 오든 상관 없다. key는 달라야 하나 value는 같을 수 있다.)

ex)
my_hash = { "name" => "Eric",
"age" => 26,
"hungry?" => true
}
puts my_hash["name"]
puts my_hash["age"]
puts my_hash["hungry?"]
>> Eric
>> 26
>> true

Hash.new를 사용하면 빈 해시를 생성한다.
my_hash = Hash.new
print my_hash
>> {}

Hash.new는 다음과 같이 사용합니다.

기호(Symbol)
문자열, 기호 변환 방법
기호 ==> 문자열

문자열 ==> 기호

문자열 기호로 초기화 하는 방법 .intern 을 사용한다.
"hello".intern
>> :hello

Symbol을 Key 로 사용하는 것이 좋은 이유.
기호를 사용하면 다음과 같은 몇가지 이유로 Hash Key 가 유용합니다.
1. 그것들은 불변한다. 즉, 그것들이 일단 만들어지면 그것들은 바뀔 수 없다는 것을 의미한다.
2. 지정된 시간에 하나의 기호만 존재하므로 메모리를 절약합니다.
3. 위의 두가지 이유 때문에 키를 돌리는 것이 키를 누르는 것보다 빠릅니다.

Ruby 1.8 버전
numbers = {
  :one => 1,
  :two => "two",
  :three => 3,
}

위 해시 구문(키와 값 사이에 => 기호가 있는 해시 구문)은 해시 로켓 스타일이라고도 합니다. 이것은 => 이 작은 로켓처럼 생겼기 때문이다.

Ruby 1.9 버전 부터 구문 변경 되었음.
new_hash = {
one: 1,
two: 2,
three: 3
}
두가지 변경 사항은 다음과 같습니다.
1. 기호의 처음이 아니라 끝에 콜론을 찍습니다.
2. 너는 더 이상 해시 로켓(=>) 이 필요 없어.

case when 사용법
case language
when "JS"
puts "Websites!"
when "Python"
puts "Science!"
when "Ruby"
puts "Web apps!"
else
puts "I don't know!"
end
그러나 다음과 같이 접을 수 있습니다.
case language
  when "JS" then puts "Websites!"
   when "Python" then puts "Science!"
   when "Ruby" then puts "Web apps!"
   else puts "I don't know!"
end

문자열 포맷(?)을 보기 위해 #{변수} 구문 형식을 사용한다.

next if는 조건값이 참이면 next(다음)으로 넘어가는 기능을 한다.

Ruby의 next는 c, python의 continue랑 같다. 루프를 그 자리에서 한번 스킵한다. 실행을 바로 종료하고 다음 루프로 진행.

Block, Process, Lambda 요약
1. 블록은 단지 도 사이의 코드를 말한다. do..end or {}. 그것은 그 자체로는 물건이 아니지만, .each 또는 .select 같은 방법으로 전달될 수 있습니다.
2. proc은 반복해서 사용할 수 있는 저장된 블록입니다.
3. 람다는 프로세서와 같으며, 단지 인수되는 인수 개수에만 신경을 쓰고 즉시 반환하지 않고 호출 방법으로 돌아갑니다.
블록, 프로세스 및 Lambda가 유사한 작업을 수행할 수 있는 경우는 많지만 프로그램의 정확한 상황은 사용할 항목을 결정하는 데 도움이 됩니다.

Proc 사용 방법(참고: 1-18. Creating a Proc)
이제 프로세스를 살펴보겠습니다. 첫번째 단계:새로 만들기!

Hint
my_proc = Proc.new { # block }
또는
my_proc = Proc.new do
  # block
end

1.Under_100이라는 프로세스를 생성하여 번호가 100미만인지 확인합니다. 아직 준비되지 않았습니다.)

# 첫 번째 방법
ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new { |x| x < 100 }

puts ages.select(&under_100)

>> [23, 7, 11, 94, 70, 44]

# 두 번째 방법
ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new do |x|
  x < 100
end

puts ages.select(&under_100)
>> [23, 7, 11, 94, 70, 44]

Lambda 구문
my_lambda = lambda { |k,v| # code }
또는
my_lambda = lambda do |k,v|
# code
end

상속 구문(참고: 1-12. Inheritance Syntax (상속 구문))
class DerivedClass < BaseClass
# Some stuff!
end
DerivedClass는 상속 받는 클래스이자 새로운 클래스이다. 하위 클래스라 함.(자식)
BaseClass는 상속 주는 클래스이자 기존에 있던 클래스이다. 상위 클래스라 함.(부모)
"<" 기호로 상속 받을 수 있습니다.

예제 : 1-13. Override! 을 참고하면 알기 쉽게 상속에 대해 알 수 있다.

1. Introduction to Ruby

1-1. Overview & Sneak Peek
Ruby는 당신이 웹에서 사용할 수 있는 강력하고 유연한 프로그래밍 언어이며, 텍스트를 처리하고, 게임을 만들고, 인기 있는 RubyonRails의 웹 프레임워크의 일부이다. Ruby는 다음과 같다.
고급스러움, 루비 읽기, 쓰기는 정말 쉬워요. 보통 영어와 많이 닮았다고 합니다!
삽입됨. 루비를 쓰고 실행하는 데 컴파일러가 필요 없음을 의미한다. 여기 코더 카데미나 여러분 자신의 컴퓨터에서도 쓸 수 있어요.
객체 지향, 즉 사용자가 프로그램을 만들고 실행하기 위해 개체라는 데이터 구조를 조작할 수 있음을 의미합니다. 나중에 어떤 것에 대해 더 배우겠지만, 지금으로서는 루비의 모든 것이 물체라는 것만 알면 됩니다.
사용하기 쉽다. 루비는 1995년에 마쓰모토 유키히로에 의해 디자인되었다. 매츠는 사람들이 컴퓨터보다 더 많이 사용하는 언어를 디자인하기 시작했습니다. 그래서 루비는 쉽게 습득할 수 있죠.
이 과정에서는 Ruby에 대한 지식이 없거나 일반적으로 . 컴퓨터 공학에 대한 지식이 없다고 가정한다.

1-2. Data Types: Numbers, Strings, Booleans
Ruby에서, 당신의 정보(또는 데이터)는 다른 종류로 올 수 있다. 루비의 데이터는 숫자, boolean(참 또는 거짓일 수 있음), 스트링("Ruby!"와 같은 문자열)세가지가 있다.
데이터를 빠르게 분석하고 조작하기 위해 컴퓨터 프로그램이 존재한다. 따라서 프로그램에서 사용할 수 있는 다양한 데이터 유형을 이해하는 것이 중요합니다.
알림:Booleans에게 따옴표(또는")를 사용하지 마십시오. Ruby는 여러분이 참 또는 거짓 대문자로 될 수 있는 값 대신 문자열(단어 또는 구)에 대해 말한다고 생각합니다.

my_num = 25
my_boolean = true
my_string = "Ruby"

puts my_num
puts my_boolean
puts my_string
>> 25
>> true
>> Ruby

1-3. Variables
컴퓨터 프로그래밍의 가장 기본적인 개념 중 하나는 변수이다. 변수를 단일 값을 파악하는 단어 또는 이름으로 생각할 수 있습니다. 예를 들어, 우리의 마지막 예에서 숫자 25가 필요했지만, 지금 당장은 사용하지 않을 거라고 합시다. my_volume과 같이 변수를 설정하여 25값을 파악하여 다음과 같이 나중에 사용할 수 있도록 유지할 수 있습니다.
Ruby에서 변수를 선언하는 것은 쉽습니다. my_num과 같은 이름을 쓰고,=를 사용해 값을 할당하면, 끝이다. 변수를 변경해야 할 경우에는 다음과 같이 하십시오. 변수를 다시 입력한 후 입력하면=를 눌러 새 값을 할당할 수 있습니다.
my_num = 100
puts my_num
>> 100

1-4. Math
Ruby는 나의_num=100과 같은 간단한 숙제 표현에 제한되지 않고, 당신이 학교에서 배운 모든 수학을 할 수 있다.
우리는 다음과 같은 6가지 산술 연산자에 초점을 맞출 것입니다.
Addition (+) 더하기
Subtraction (-) 빼기
Multiplication (*) 곱하기
Division (/) 나누기 몫의 값
Exponentiation (**) 제곱
Modulo (%) 나누기 나머지 값
당신에게 이상하게 보이는 유일한 것들은 아마도 외향적인 것과 이상한 것들일 것이다. exponentiation은 한 숫자(기준)를 다른 숫자(지수)의 제곱으로 올립니다. 예를 들어, 2**3은 "2*2*2"를 의미하기 때문에(2곱하기 3), 2*3은 8입니다. 3**2는 9(3*3)등입니다.
남은 분할 항목을 반환합니다. 예를 들어, 25%7은 4가 될 것이다. 왜냐하면 7은 4가 남아 있을 때 25에 세번 들어가기 때문이다.

1-5. 'puts' and 'print'
print 명령은 당신이 주는 것은 무엇이든지 가져가서 화면에 출력한다. "put string"는 약간 다릅니다. 즉, 인쇄할 항목 뒤에 새(공백)줄을 추가하는 것입니다. 다음과 같이 사용합니다.
puts "What's up?"
print "Oxnard Montalvo"
괄호나 세미 콜론은 필요 없음!
puts "Hello!"
print "Halo!"
puts "What's up?"
puts "the say"
puts "I'm Okay"

# print 뒤에 puts가 붙는다. 반면 puts 끼리는 붙지 않는다.

>> Hello!
>> Halo!What's up?
>> the say
>> I'm Okay

1-6. Everything in Ruby is an Object
루비의 모든 것은 객체(나중에 더 많은 것)이기 때문에 Ruby의 모든 것은 Method라는 특정한 기능을 내장하고 있다. 특정 개체가 가지고 있는 기술이라고 생각할 수 있습니다. 예를 들어 문자열(words or phrases)에는 문자열의 길이, 역 방향 등을 알려 주는 기본 제공 방법이 있습니다. 우리는 또한 당신에게 통역사에 대해 더 많은 것을 말해 주기로 약속했습니다.
인터프리터는 당신이 쓰는 코드를 받아 실행하는 프로그램이다.

1-7. The '.length' Method
방법은 다음을 사용하여 호출한다. 만약 여러분이 "에스프레소의 길이를 좋아합니다"라는 문자열을 가지고 있다면, 루비는 그 문자열의 길이(즉, 문자 수, 숫자, 기호, 공간)를 반환할 것입니다. 확인해 보십시오.
"I love espresso".length
# ==> 15
(#로 시작하는 작은 줄은 쓸 내용의 일부가 아닙니다. Ruby가 제공하는 출력을 보여 줍니다. 더 자세한 내용은 다음 섹션을 참조하십시오!) 예를 들어, 신용 카드 결제가 가능한 웹 사이트를 만들려는 경우에는 입력한 길이를 확인하는 것이 유용할 수 있습니다. Ruby가 신용 카드 번호가 유효한지 확인할 수 있습니다.
1. 이름에. length method를 호출한다(이름 주위에 따옴표를 사용하는 것을 기억한다).
값을 보려면 콘솔에 응답을 입력합니다.

puts "Jamie".length
>> 5

1-8. The '.reverse' Method
.reverse 방법은 같은 방법입니다. 길이가 같습니다. 하지만 Ruby에게 문자열의 길이를 알려 달라고 부탁하는 대신, 그것은 문자열의 백 워드 버전을 뱉어 낸다.
"Eric".reverse
will result in
"cirE"
역 방향 입력은 가장 낮은 값에서 가장 낮은 값으로 값 목록을 정렬하려는 경우에 유용할 수 있다. (차후에 배울 내용을 정리하겠습니다.)
1. 이름에. 역 방향 방식을 호출합니다. 문자열로 만들기 위해 이름 주위에 따옴표가 있는 것을 잊지 마십시오!
값을 보려면 콘솔에 응답을 입력합니다.

puts "Good!".reverse
>> !dooG

1-9. '.upcase' & '.downcase'
한가지 방법을 더 시도해 봅시다(예:두가지 방법). 짐작했듯이. upcase및. down케이스 방법을 사용하면 문자열이 각각 모든 UPPERCASE또는 더 낮은 케이스로 변환됩니다.
1. 이름을 All CAPS로 만들고 다음과 같이 화면에 인쇄하기 위해 사용하기 위해 이름을 위로 불러 옵니다.
puts "eric".upcase # ==> ERIC
다음 줄에는, 이름을 소문자로 바꾸기 위해.downcase에 전화하세요. 인쇄물을 볼 수 있도록 반드시 화분을 사용하세요!

puts "ALL CAPS".upcase
puts "ALL CAPS".downcase
>> ALL CAPS
>> all caps

1-10. Single-Line Comments
여러분은 아마도 우리가 초기 운동에#표시를 몇번 사용하는 것을 보았을 것이다. #기호는 Ruby에서 설명을 합니다. 코멘트는 Ruby가 읽지 않고 단지 사람들이 읽을 수 있도록 하는 약간의 텍스트입니다. 좋은 논평을 쓰는 것은 그것을 읽을 수 있는 다른 사람들을 위해 여러분의 코드를 명확하게 할 뿐만 아니라 여러분이 코드 일을 쓸 때 무엇을 하고 있었는지를 상기시켜 준다.
#기호는 여러분의 의견 앞에 와야 하고, 여러분이 한줄로 서 있는 한, 그것 이후에 쓰는 모든 것에 영향을 주어야 합니다. (몇줄로 된 의견을 작성하는 방법을 곧 보여 드리겠습니다.)다음 예를 확인해 보십시오.
# I'm a full line comment!
"Eric".length # I'm a comment, too!
두번째 예시에서는 Ruby가 실행할 코드 다음에 설명이 있으므로 4개를 반환할 것이다.
1. 편집기에 설명을 씁니다. 네가 좋아하는 거라면 뭐든지 될 수 있어!
# The things I really want to be good at are math and coding and English. I'll do my best to be good at coding.

1-11. Multi-Line Comments
각 행을#로 시작하여 여러줄에 걸쳐 설명을 작성할 수 있지만 더 쉬운 방법이 있습니다. 시작과 끝을 각각=begin, =end로 시작하면 이 두 표현 사이의 모든 것이 코멘트가 됩니다. 다음 예를 살펴보겠습니다.
=begin
I'm a comment!
I don't need any # symbols.
=end
수화와 단어 사이에 공백을 두지 마라. 여러분은 수학으로 그렇게 할 수 있어요. 시작과 끝 모두 위에 표시된 것처럼 스스로 서 있어야 합니다.
1. 오른쪽의 에디터에서 다중 선 코멘트를 작성하세요. 시작과 끝이 같은지 확인하세요!
=begin
Comment
not bad
kkk
=end

1-12. Naming Conventions
이 과정을 진행하면서 여러분이 접하게 될 많은 다른 종류의 변수들이 있지만, 현재 우리는 단지 보통의 오래 된 지역적 변수에 관심이 있을 뿐입니다. 관례적으로 이러한 변수는 소문자로 시작해야 하고 단어는 카운터와 masterful_method와 같이 밑줄로 구분되어야 한다. 루비는 대문자,$s,@s등의 다른 기호로 로컬 변수를 시작하지 못하게 하지 않습니다. 하지만 관례에 따라 Ruby커뮤니티가 하는 것과 같은 다른 의미를 가집니다.
1. 편집기에서 변수 이름을 만들고 이를 문자열로 설정합니다(인용문 사이의 간격:"에릭"). 문자열은 대문자로 쓸 수 있지만 이름은 모두 소문자로 되어 있습니다!

name = "Eric"
puts name
>> Eric

1-13. Variables & Data Types
변수를 선언하고 설정하는 방법을 빨리 검토해 봅시다. 변수의 이름을 말하는 것만으로 변수를 선언하고 =로 설정할 수 있습니다. 도움이 더 필요하시면 아래 힌트를 확인하실 수 있습니다.
1.my_name이라는 변수를 생성하여 이름과 동일하게 문자열로 설정합니다. my_gee라는 두번째 변수를 만들어 사용자의 연령에 해당하는 숫자로 설정합니다(숫자 주위에 따옴표를 사용하지 않음).
변수 선언문은 다음과 같습니다.
variable_name
변수를 설정하는 방법은 다음과 같습니다.
name = "Eric"
age = 26
hungry = true

my_name = "my_name"
my_age = 20

1-14. Math
편집기에서 변수를 설정합니다.
13+377의 액수이다
923*15와 동등한 제품
13209/17과 같은 몫
결과를 보려면 Set(저장)을 사용하여 각 변수를 콘솔에 인쇄합니다.

sum = 13 + 379
product = 923 * 15
quotient = 13209 / 17

puts sum
puts product
puts quotient

>> 392
>> 13845
>> 777

1-15. Strings and String Methods
잘 했다! String 방법에 대해 조금 살펴봅시다. 을 사용하여 메서드를 호출합니다. 이런 식으로 작업자는 "string".methods.
1. 변수 이름을 지정하고 이름이 포함된 문자열과 동일하게 설정합니다. 모든 소문자를 소문자로 바꾸려면. 모두 거꾸로 돌려 이름을 뒤로 바꿉니다.
Ruby에서는 다음 두가지 방법으로 할 수 있다. 각 메서드는 별도의 줄로 호출하거나, 다음과 같이 두 메서드를 함께 연결할 수 있다.
name.method1.method2.method3
결과를 보고 싶으면 메서드 호출을 지정합니다.
Hint 예를 들어 이름이 "스티브"라면
name = "Steve".downcase
to convert your name to "steve".

name = "NAME"
puts name.downcase.reverse.upcase #소문자로 바꾼 후 역순으로 만든 다음 다시 대문자로 만들었다.
>> EMAN

1-16. Comments
잘 했어요! 이 과의 마지막 복습 실습을 위해 단선 및 다중 행 의견을 살펴보겠습니다.
# I'm so sleepy.
=begin
I'll go to bed anyway.
Music is my life.
=end

2. Putting the Form in Formatter

2-1. What you'll Be Building
이 프로젝트는 사용자의 입력을 읽고 대문자를 수정하는 작은 프로그램을 만드는 것을 도와 줄 것이다. 사용자는 거의 무한한 범위의 입력을 제공할 수 있기 때문에 프로그래머로서 우리의 삶을 더 쉽게 만들어 줍니다.
에디터에 있는 코드를 확인해 봐요. 우리가 가르칠 새로운 것들을 추가했어요. 뭘 하는지 알겠어요? 자세한 내용을 보려면 실행을 클릭하십시오! 각 질문에 답하고 입력(키보드로 돌아감)을 누릅니다.
print "What's your first name? "
first_name = gets.chomp
first_name.capitalize!

print "What's your last name? "
last_name = gets.chomp
last_name.capitalize!

print "What city are you from? "
city = gets.chomp
city.capitalize!

print "What state or province are you from? "
state = gets.chomp
state.upcase!

puts "Your name is #{first_name} #{last_name} and you're from #{city}, #{state}!"
>> 입력 칸이 생기고 각 항목을 입력하면 출력된다.

2-2. Prompting the User
먼저, 우리가 이미 잘 알고 있는 코드를 입력해 봅시다. 사용자의 입력을 얻으려면, 먼저 화면에 메시지를 인쇄해야 할 것입니다.
1."이름이 무엇입니까?"라는 질문을 화면에 인쇄합니다. 구문 분석이 필요하면 자유롭게 첫번째 연습 문제를 다시 살펴보세요.
print "What's your first name?"
>> What's your first name?

2-3. Getting Input
좋아! 이제 새로운 것을 시도해 봅시다. 이 예에서 반복되는 이상한 코드 줄을 보시면 아실 수 있을 겁니다.
variable_name = gets.chomp
gets는 사용자로부터 입력을 받는 Ruby방법입니다. 입력을 받을 때마다 Ruby가 자동으로 입력 후 빈 줄(또는 새 라인)을 추가하고, chomp은 그 줄을 제거한다. (프로그램은 선택하지 않아도 잘 작동하지만, 빈 줄이 더 많이 생깁니다.)
1. 변수 lastnamefirst_name님을 설명하고 gets.chomp와 동등하게 설정하십시오.
이 체크 포인트는 영구적으로 실행되는 것처럼 보이지만, 오른쪽의 터미널은 gets.chomp때문에 실제로 입력을 기다리고 있습니다. 단자의 질문에 답하고"Enter"또는"Return"을 눌러 점검을 마칩니다.

print "What's your first name? "

first_name = gets.chomp

2-4. Repeat for More Input
좋아! 이제 성, 시, 주 마지막에 우리가 한 일을 반복해야 한다.
1. 사용자의 성, 도시 및 상태 .province에 대한 인쇄 프롬프트, 변수 및 gets를 추가합니다. last_namefirstname님을 사용자의 성, 시/군/도에 대한 구/군/시 변수로 사용하십시오. (힌트:사용자에게 주/도(예:"NY")라는 뉴욕의 약어를 입력하도록 요청합니다. 이것은 우리가 자연스럽게. upcase를 나중에 사용하도록 유도할 수 있습니다!)

print "What's your first name? "
first_name = gets.chomp
print "What's your last name? "
last_name = gets.chomp
print "What city are you from? "
city = gets.chomp
print "What state or province are you from? "
state = gets.chomp

2-5. Printing the Output
여러분들도 아시다 시피 루비는 우리에게 아무런 피드백도 주지 않습니다. 우리는 우리의 문자열 포맷을 볼 수 있기를 바랍니다! 이렇게 하려면, 우리는 하나의 새로운 구문이 더 필요하다.
변수 원숭이를 "호기심 많은 조지"라는 문자열과 동일하게 정의하고"나는 동물원에#{원숭이}를 데려갔다"라는 문자열이 있다면 Ruby는 "문자열 보간"이라는 것이다. 우리도 여기서 같은 걸 할 수 있어! 예를 들어:
first_name = "Kevin"
puts "Your name is #{first_name}!"
"네 이름은 케빈이야!"라고 인쇄될 것이다.
1. 이 구문을 사용하여#{}구문을 사용하여 first_name, last_namefirst_state의 값을 인쇄하십시오.

print "What's your first name? "
first_name = gets.chomp
print "What's your last name? "
last_name = gets.chomp
print "What city are you from? "
city = gets.chomp
print "What state or province are you from? "
state = gets.chomp

puts "#{first_name} #{last_name} #{city} #{state}"

2-6. Formatting with String Methods
좋았어! 이제 우리는 우리의 결과물을 얻었지만, 보시다시피, 우리는 아직 모든 것을 적절히 자본화하기 위해 끈 방식을 사용하지 않았습니다.
print "This is my question?"
answer = gets.chomp
answer2 = answer.capitalize
answer.capitalize!
먼저 우리는 대문자로 쓰는 새로운 방법을 소개한다. 그것은 끈의 첫번째 문자를 대문자로 바꾸기 때문에, 나머지 문자들은 소문자로 만든다. 우리는 그 결과를 answer2에 할당했다.
다음 줄은 조금 이상하게 보일 수도 있습니다. 우리는 변수에 대문자를 사용한 결과를 할당하지 않습니다. 대신에 당신은 그것을 알아챌지도 모른다! 대문자로 이 값은 가변 응답 자체에 포함된 값을 수정합니다. 다음에 이 가변 응답을 사용하면 answer.capitalize의 결과를 얻게 됩니다.
# !를 왜 붙이는 걸까? 이게 있어야 하긴 하는데..?
print "What's your first name? "
first_name = gets.chomp
first_name2 = first_name.capitalize!

print "What's your last name? "
last_name = gets.chomp
last_name2 = last_name.capitalize!

print "What city are you from? "
city = gets.chomp
city2 = city.capitalize!

print "What state or province are you from? "
state = gets.chomp
state2 = state.upcase!

puts "#{first_name} #{last_name} #{city} #{state}"

2-7. Great Work!
완벽해! 몇개의 간단한 단계로, 당신은 당신만의 Ruby프로그램을 실제 어플리케이션으로 만들었다. 당신의 프로그램에 얼마든지 추가하거나 바꾸고 싶은 만큼 바꾸세요.

2. Control Flow in Ruby

1. Control Flow in Ruby

1-1. How It Works
여러분은 우리가 루비에서 지금까지 써 온 종류의 프로그램들이 그렇게 유연하지 않다는 것을 눈치 챘을지도 모릅니다. 물론, 사용자 입력을 받을 수는 있지만 항상 해당 입력에 기반한 동일한 결과를 생성하며 환경에 대한 대응으로 동작( 주어진 시간에 프로그램에 존재하는 모든 변수와 값의 집합)을 변경하지 않는다.
흐름을 조절하면 우리가 원하는 융통성을 얻을 수 있다. 우리는 사용자 유형, 연산의 결과, 프로그램의 다른 부분에 의해 반환되는 값에 따라 다른 결과를 선택할 수 있다.
1. 에디터에서 코드를 확인한다. 몇개의 새로운 구문이 있지만, 우리는 그것이 무엇을 하는지 짐작할 수 있을 것이라고 확신한다. 실행을 클릭하여 실행 중인 프로그램을 확인하세요! (계속해서 루비에 정수, 즉 소수가 없는 양수나 음수를 입력해 주세요.)

print "Integer please: "
user_num = Integer(gets.chomp)

if user_num < 0
  puts "You picked a negative integer!"
elsif user_num > 0
  puts "You picked a positive integer!"
else
  puts "You picked zero!"
end

1-2. if
Ruby의 말이 표현을 취한다면, 진실이나 거짓으로 평가되는 가치를 지닌 어떤 것을 일컫는 멋진 말이 될 것이다. 이 표현이 참이면 Ruby가 다음과 같은 코드 블록을 실행한다. 만일 그것이 사실이 아니라면(거짓)루비는 그 코드 블록을 실행하지 않습니다. 코드를 건너뛰고 다음 것으로 넘어가죠.
다음은 실제 작동 중인 경우의 예입니다.
if 1 < 2
print "I'm getting printed because one is less than two!"
end
루비는 화이트 스페이스(공백과 빈 선)에 대해서는 신경을 쓰지 않기 때문에 인쇄물에 새겨질 필요가 없습니다. 하지만, 그것은 루비 애호가들이 따르는 관습이기 때문에, 지금은 습관을 들이는 것이 좋습니다. 다음에 오는 코드 블록은 두 공간을 더 들여 써야 합니다. 만약의 경우가 끝나면, 루비 입력으로 알려 주셔야 합니다.
1. 편집기에 설명을 직접 작성합니다. 원하는 식을 입력할 수는 있지만(오직 true!)로 평가되어야 합니다. 그렇게 하면 사용자가 선택한 문자열을 콘솔에 인쇄하거나 넣어야 합니다.

if true
  print "Extension of You"
end
>> Extension of You

1-3. Else
만약 진술에 대한 동반자는 거짓 진술이다. Ruby에게 만약 이 표현이 사실이라면, 이 코드 블록을 실행하고, 그렇지 않으면, else문 뒤에 코드를 실행하라고 말하는 사람이 있다면, 여기에 한가지 예가 있다.
if 1 > 2
print "I won't get printed because one is less than two."
else
print "That means I'll get printed!"
end
1. 편집장님이 직접 해 보세요! 사용자가 원하는 표현을 사용하여 설명서를 작성하되, 두 분기 모두 원하는 문자열을 콘솔에 인쇄해야 합니다.

if false
  print "Extension of You"
else
  print "I'm real"
end
>> I'm real

1-4. Elsif
하지만 두개 이상의 옵션을 원하는 경우에는 어떻게 합니까? 구조를 요청한다! elsif성명은 만약 다음과 같은 경우에 어떤 대안도 추가할 수 있습니다:
if x < y # Assumes x and y are defined
puts "x is less than y!"
elsif x > y
puts "x is greater than y!"
else
puts "x equals y!"
end
1. 편집기에 설명이 있는 경우, elsif블록을 추가합니다. # 입력한 값을 받아 조건 비교해서 출력.
print "Enter number x >> "
x = gets.chomp
print "Enter number y >> "
y = gets.chomp

if x > y
  puts "Extension of You"
elsif x < y
  puts "I'm real"
else
  puts "Not bad"
end

1-5. Unless #if의 부정형. 거짓이여야 실행이 됨.
때로는 어떤 것이 거짓인지 확인하기 위해 제어 흐름을 이용하기도 합니다. 만일 그것이 사실이라면 Ruby가 더 잘 해 줄 것입니다.
배 고프지 않으면 먹고 싶지 않다고 합시다. 즉, 배 고프지 않을 때는 프로그램을 만듭니다. 하지만 배 고플 때는 먹습니다. 루비에서의 프로그램은 이렇게 써 놓으시겠지요.
unless hungry # Write some sweet programs
else # Have some noms
end
1. 편집장님께 시작했어요. 설명 코드가 없는 경우에는 "Ruby프로그램을 쓰고 있어요!"라고 인쇄하여 사용자의 프로그램을 올바르게 교체한다.

hungry = false

unless hungry #거짓의 조건이여야 실행.
  puts "I'm writing Ruby programs!"
else # 참의 조건이여야 실행.
  puts "Time to eat!"
end

>> I'm writing Ruby programs!

1-6. Equal or Not?
Ruby에서, 우리는 값을;에 할당 연산자를 사용하여 변수에 할당합니다. 하지만 우리가 이미 과제에 사용했다면 두가지 사항이 같은지 어떻게 확인해야 할까요? 음, 우리는==을 사용하는데, 이것은 대조군(관계 연산자라고도 함)입니다. ==는 " 같음"을 의미합니다.
x = 2
y = 2
if x == y
print "x and y are equal!"
end
즉,"x가 y와 같으면,'x와 y가 같다!"를 인쇄하십시오. 또한 != 비교기를 사용하여 두 값이 같지 않은지 여부를 확인할 수 있습니다.
1. 편집기에는 is_true및 is_fault이라는 두가지 변수가 있습니다. ___________________ 을(를)==또는!=로 바꾸어 is_true를 평가하고 false로 평가하게 합니다.

is_true = 2 != 3
is_false = 2 == 3

1-7. Less Than or Greater Than
또한 한 값이 다른 값보다 작거나, 작거나, 같거나, 크거나, 같은지 또는 같은지 확인할 수 있습니다. 이러한 운영자는 다음과 같습니다.
Less than: < 미만
Less than or equal to: <= 이하거나 같음.
Greater than: > 초과
Greater than or equal to: >= 이상이거나 같음
1. 편집기에 몇가지 변수를 설정했습니다. 우리는 그것들이 모두 참이기를 바란다.

test_1 = 17 > 16
test_2 = 21 <= 30
test_3 = 9 >= 9
test_4 = -11 < 4

1-8. Practice Makes Perfect
지금까지 잘 했어요! 연습이 완벽을 만든다는 말이 있잖아요. 몇가지 대조군을 더 시도해 보아요.
1. 이 라운드에서는 표현식이 반환될 것으로 예상되는 값에 따라 비교기를 표시하고 각 변수를 true또는 false로 설정합니다. 기억하세요:진실과 거짓 주위에 인용문이 없다는 것을!

# test_1 = 77 != 77
test_1 = false

# test_2 = -4 <= -4
test_2 = true

# test_3 = -44 < -33
test_3 = true

# test_4 = 100 == 1000
test_4 = false

1-9. And(그리고 는 둘다 참 이어야 한다.)
루비에서는 비교할 만한 연산자가 많지 않습니다. 논리적 연산자 또는 부울 연산자를 사용할 수도 있습니다. Ruby는 3개가 있어요, 그리고. 불 리언 연산자는 True또는 False인 부울 값을 발생시킵니다.
불 리언 연산자와 이니스는 1980년대의 어느 한쪽의 두 표현이 모두 참일 때만 참이 될 수 있습니다.
true && true # => true
true && false # => false
false && true # => false
false && false # => false
1 < 2 && 2 < 3 is true. true && true이기 때문.
1. 좀 더 연습해 봅시다. 부울 표현식을 선택하여 표현식이 반환될 것으로 예상되는 값에 따라 각 변수를 true또는 false로 설정합니다.

# boolean_1 = 77 < 78 && 77 < 77
boolean_1 = false

# boolean_2 = true && 100 >= 100
boolean_2 = true

# boolean_3 = 2**3 == 8 && 3**2 == 9
boolean_3 = true

1-10. Or(또는 둘 중 하나만 참이면 된다.)
Ruby는 또한 연산자를 가지고 있어요. Ruby의.....이 모든 것이 하나의 표현이 사실이거나 두개의 표현이 사실일 때, 진실을 평가하기 때문에, 이것을 확인해 보세요.
true || true # => true
true || false # => true
false || true # => true
false || false # => false
1. 표현식이 반환될 것으로 예상되는 값에 따라 각 변수를 true또는 false로 설정합니다.

# boolean_1 = 2**3 != 3**2 || true
boolean_1 = true

# boolean_2 = false || -10 > -9
boolean_2 = false

# boolean_3 = false || false
boolean_3 = false

1-11. Not
마지막으로 Ruby는 Boolean 연산자가 없다.(!) ! 참 값을 거짓으로, 그 반대로 하여 값을 거짓으로 만듭니다.
!true # => false
!false # => true
1. 표현식이 반환될 것으로 예상되는 값에 따라 각 변수를 true또는 false로 설정합니다.
# boolean_1 = !true
boolean_1 = false

# boolean_2 = !true && !true   # and 연산자는 둘다 참 이어야 한다.
boolean_2 = false

# boolean_3 = !(700 / 10 == 70)
boolean_3 = false

1-12. Combining Boolean Operators
표현식에 부울 연산자를 결합할 수 있습니다. 같은 조합
(x && (y || w)) && z
법적 표현일 뿐만 아니라 프로그램에 매우 유용한 도구입니다.
이러한 표현에 익숙해지는 데는 약간의 시간이 걸릴 수 있지만 평가 순서를 제어하기 위해 항상 괄호를 사용할 수 있습니다. 괄호 안의 식은 항상 괄호 밖의 모든 것에 앞서 평가됩니다.
1. 마지막으로 표현식이 반환될 것으로 예상되는 값에 따라 각 변수를 true또는 false로 설정합니다.

# boolean_1 = (3 < 4 || false) && (false || true)
boolean_1 = true

# boolean_2 = !true && (!true || 100 != 5**2)
boolean_2 = false

# boolean_3 = true || !(true || false)
boolean_3 = true

1-13. Nice Work!
잘 했어요! 지금까지 학습한 내용: 연산자
if, else, 또는 elsif인 경우 사용 방법
대조군/관계 연산자와 같은 대조군,!=, <, <, >, >=, <= 및 &&, ||, !,
어떻게 불 리언/논리 연산자를 사용할 수 있을까?
지금까지 배운 내용을 잠깐 생각해 보세요. 준비가 되었으면 다음을 눌러 검토 연습을 시작하십시오.

> : 왼쪽이 더 커야 한다. 초과.
< : 오른쪽이 더 커야 한다. 미만.
>= : 왼쪽이 더 크거나 같아야 한다. 이상
<= : 오른쪽이 더 크거나 같아야 한다. 이하.
&& : And 연산자. 둘다 참(true) 이어야 한다.
|| : Or 연산자. 둘 중 하나만 참(true)이면 된다.
! : Not 연산자. true, flase를 뒤집는다. !true면 false가 되고 !false면 true가 된다.

1-14. If, Else, and Elsif
좋아! 외로워 하시는군요 (글쎄, 꼭 그렇지는 않아. 이 예는 여기에 남겨 두겠습니다.)
a = 10
b = 11
if a < b
print "a is less than b!"
elsif b < a
print "b is less than a!"
else
print "b is equal to a!"
end
1. 편집기에 설명서를 작성한다. 하나 이상의 elsif를 포함해야 합니다. 전표의 각 분기는 콘솔에 항목을 인쇄해야 합니다.
Hint
if/elsif/else 이면 구문은 다음과 같습니다.
if expression
# Do something
elsif expression
# Do something else
else # Do yet another thing
end
a = 2 * 4
b = 3 ** 2

if a > b
  print "over"
elsif a < b
  print "and over"
else
  print "Lemon"
end

1-15. Unless
좋아! 그럼 다음 문장을 검토해 보겠습니다.
problem = false
print "Good to go!" unless problem
기억하세요, 이것은 기본적으로 짧은 글입니다. 조건이 참이 아니라면 당신이 요구하는 것은 무엇이든지 할 것입니다. 우리의 예로는, 문제는 거짓이기 때문에 우리는 아무 문제가 없습니다. 인쇄할 준비 완료!
이 조건이 거짓으로 평가되는 경우 실행 됩니다.
unless condition
# Do something!
end
over = false

unless over
  print "~~~~"
end

1-16. Dare to Compare
이제 대조군/관계 연산자를 검토하겠습니다. 우리가 형세를 조금 역전시켰어요!
대조군은 진실 또는 거짓을 초래하기 위해 두 값을 서로 비교해야 한다는 점을 기억한다.
10 > 8 // true
8 > 10 // false
8 == 10 // false
8 != 10 // true
1. 우리는 우리가 각 변수에 어떤 값(참 또는 거짓)을 원하는지 알려 주고 있으며, 당신의 직업은 대조군을 사용하여 정확한 값으로 평가하는 표현을 추가하는 것이다.
비교 자료는 다음과 같습니다. ==, !=, >, >=, <, and <=.
# test_1 should be false
test_1 = 1 != 1

# test_2 = should be false
test_2 = 22 <= 20

# test_3 = should be true
test_3 = 7 > 6

1-17. Billions of Booleans
( 1 == 1 ) && ( 2 == 2 ) # true
( 1 == 2 ) || ( 2 == 2 ) # true
!( false ) # true
1. && 는 둘다 참 이어야 한다. true true 아니면 다 false.
2. || 는 둘 중 하나만 참이면 true다. true false는 true.
3. !는 뒤집는다 보면 된다. true면 false. false면 true.
1. 편집기의 코드는 원하는 값(참 또는 거짓)을 나타내며, 사용자의 작업은 부울 연산자(x0,!x!),를 사용하여 올바른 값으로 평가하는 식을 추가하는 것입니다.

# test_1 should be true
test_1 = (2 ** 4 == ((3 ** 2) * 2 - 2)) && (16 == 16)

# test_2 = should be true
test_2 = (4 != 2) || (2 != 2)

# test_3 = should be false
test_3 = !(true)

2. Thith Meanth War!

제어 흐름을 사용하여 사용자의 입력을 수정하여 사용자에게 반환할 수 있습니다. 이 프로젝트에서는, 우리는 그들을 대피 덕으로 만들 것입니다!

2-1. What You'll Be Building
이제 우리는 만일/etc/문을 사용해서 프로그램의 방향을 정할 수 있으므로, 우리는 다른 사용자의 입력에 기초해 다른 결과를 생산할 수 있다.
이 프로젝트에서는 제어 흐름을 몇가지 새로운 Ruby스트링과 결합하고, 사용자의 스트링을 DaffyDuckify로 결합하고, 각"s"를 "th"로 교체할 것이다.
# gets.chomp로 입력을 받게 하고 대문자를 소문자로 바꿔준다. downcase! 또한 s가 들어간 것을 th로 교체해준다.

print "Thtring, pleathe!: "
user_input = gets.chomp
user_input.downcase!

if user_input.include? "s"
  user_input.gsub!(/s/, "th")
else
  puts "Nothing to do here!"
end

puts "Your string is: #{user_input}"

2-2. Getting User Input
먼저 사용자에게 입력을 요구하는 문장을 인쇄한 다음 gets.chomp을 사용하여 해당 입력을 변수에 설정해야 한다.
1. 인쇄물을 사용하여 사용자에게 입력을 요청합니다.
User_input이라는 변수를 선언하고 gets.chomp를 사용하여 사용자의 입력에 동등하게 설정하십시오.
print "Input: "
user_input = gets.chomp

2-3. Downcase!
우리는 우리가 사용자의 입력에 있는 "S"와 "s"모두를 캡처했는지 확인하고 싶다. 만일 이것을 처리하기 위해 if / else 다른 진술들을 따로 쓸 수도 있지만, 우리는 또한. downcase!를 사용할 수도 있습니다. 사용자 입력을 모든 소문자로 변환합니다. 그런 식으로, 우리는 "s"를 검색하기만 하면 된다.
1. 다운 케이스를 불러 오세요! user_input방법 꼭 포함시켜 주세요! 사용자 문자열이 인 플레이스 방식으로 수정되도록 하기 위해 Ruby가 user_input의 복사본을 생성하고, 대신 수정할 수 있도록 한다.

print "Pleathe enter a thtring: "
user_input = gets.chomp
user_input.downcase!

2-4. Setting Up the 'If' Branch, Part 1
좋아! 제어 흐름을 약간 추가할 시간입니다.
분기의 절반에 해당하는 경우 사용자의 입력에 "s"가 포함되어 있는지 확인하려고 합니다.
if string_to_check.include? "substring"
루비를 사용해서 할 수 있어요. .include? 방법을 사용하여 원하는 것을 찾았는지 여부를 확인하고, 그렇지 않으면 거짓인지 평가합니다.(true or false)
(루비 방법은 일반적으로 어떻게 끝이 납니까? 값이 참인지 거짓인지 평가하십시오.)
1.user_input에 하위 문자열"s"가 있는지 확인하고자 합니다.
만일의 경우에는 편집자에게 성명서를 쓰시오. user_input에 "s"가 포함되어 있는지 확인해야 한다.
현재로서는 선택한 문자열로 "s"를 발견하면 콘솔에 출력한다.

print "Pleathe enter a thtring: "
user_input = gets.chomp
user_input.downcase!

if user_input.include? "s"
  print "s"
else
  print "Does not include s."
end

2-5. Setting Up the 'if' Branch, Part 2
좋아! 이제 우리의 진술을 완성합시다.
우리가 "s"를 발견했을 때, 루비가 발견한 모든"s"인스턴스를 "th"로 대체했으면 합니다. 우리는 이것을 .gsub!로 할 수 있어 이 방법은 전 지구적 대체를 나타낸다. global substitution.
구문은 다음과 같습니다.
string_to_change.gsub!(/s/, "th")
나중에 배울 내용을 배울 때는 왜 /s/가 따옴표 대신 slash사이에 있어야 하는지 설명해 드리겠어요. 참고:gsub 사이에 공백을 둘 수 없습니다! 그리고 괄호 안의 비트.
기억해, 너는 그 것을 원한다는 것을! 메서드 이름의 끝에서 Ruby가 문자열 인 플레이스를 변경하도록 합니다.
1. 설명문에 추가한 인쇄 문구를 제거하고 .gsub!에 대한 호출로 대체합니다. user_input에. /s/를 "th"로 교체하도록 합니다.
# .gsub(/목표 단어/, "목표 단어 바꿀 것")
print "Pleathe enter a thtring: "
user_input = gets.chomp
user_input.downcase!

if user_input.include? "s"
  user_input.gsub!(/s/, "th")
end

print user_input
>> Pleathe enter a thtring: asb # Input
>> athb # Ouput

2-6. Setting Up the 'Else' Branch
어려운 부분은 끝났어! 이제 사용자에게 문자의 인스턴스를 찾을 수 없으면 알려 주기만 하면 됩니다.
1. 사용자에게 문자열이 있는지 여부를 알려 주는 추가 설명을 추가합니다.

print "Pleathe enter a thtring: "
user_input = gets.chomp
user_input.downcase!

if user_input.include? "s"
  user_input.gsub!(/s/, "th")
else
  print "Does not include s."
end

2-7. Returning the Final String—Er, "Thtring"
HomeStretch—이제 DaffyDuckified문자열이 사용자에게 표시됩니다. 앞서 배운 문자열 보간을 사용하여 다음을 수행할 수 있습니다.
my_string = "muchachos"
print "Adios, #{my_string}!"
# ==> "Adios, muchachos!"

1. 문자열 보간을 사용하여 사용자에게 변환된 문자열이 표시되도록 하는 퍼팅 문을 추가합니다.
print "Pleathe enter a thtring: "
user_input = gets.chomp
user_input.downcase!

if user_input.include? "s"
  user_input.gsub!(/s/, "th")
  puts "Ahai~, #{user_input}!"
else
  print "Does not include s."
end

2-8. Congratulationth!
잘 했어요!
이 프로젝트를 어떻게 개선할 것인가? 다음과 같은 이점이 있습니다.
아무것도 입력하지 않은 경우 사용자의 입력을 다시 처리하기 위한 설명을 추가합니다.
문자"c"가 "s"와 같이 들리는 단어를 설명하는 방법에 대해 생각해 보세요.
사용자의 원래 대문자를 보존하는 방법에 대해 생각해 보십시오.
1. 일단 심사 숙고해 보세요. 준비가 되었으면 실행을 클릭하여 이 프로젝트를 완료하십시오.

print "Pleathe enter a thtring: "
user_input = gets.chomp

if user_input.include? "s"
  user_input.gsub!(/s/, "th")
  puts "Ahai~, #{user_input}!"
elsif user_input.include? "S"
  user_input.gsub!(/S/, "th")
  puts "Ahai~, #{user_input}!"
elsif user_input == ""
  print "Pleathe enter a thtring: "
  user_input = gets.chomp
else
  print "Does not include s."
end

3. Looping with Ruby

1. Loops & Iterators

루프 및 일정을 사용하여 Ruby가 쉽고 빠르게 반복 작업을 자동화할 수 있습니다.

1-1. The 'While' Loop
어떤 상황이 참일 때 Ruby에서 어떤 동작을 몇번이나 반복하고 싶을 때, 당신은 얼마나 많이 그 동작을 반복해야 할지 모른다. 한가지 좋은 예는 사용자에게 특정 유형의 입력을 요구하는 것입니다. 즉, 사용자가 잘못된 정보를 제공해야 하는 경우에는 찾으려는 입력 정보를 얻기 전에 여러번 다시 입력해야 할 수 있습니다.
이를 위해 우리는 '일시 루프'라고 하는 것을 사용합니다. 이 기능은 특정 조건이 참인지 여부를 확인하고, 그렇게 하는 동안 루프가 계속 실행되는지 확인합니다. 이 상태가 참이 되지 않으면 루프가 멈춥니다!
편집자의 코드를 확인해 보세요. 그것이 무엇을 할 것인지 알아맞힐 수 있나요? 알고 있다고 생각되면 Run을 눌러 결과를 확인하십시오.

counter = 1
while counter < 11
  puts counter
  counter = counter + 1
end
>> 1 ~ 10 까지 연속적으로 출력.

1-2. Danger: Infinite Loops!
너 방금 그거 봤니? 루프는 1에서 10까지 숫자를 출력한 다음 멈췄다. 이것은 카운터가 11미만일 때 루프의 상태가 계속되도록 지시되었기 때문입니다;카운터가 루프를 통해 1씩 증가하기 때문에, 카운터가 11을 칠 때 루프가 멈추었습니다.
카운터를 늘리는 걸 까먹었으면 어떻게 하죠? 루프가 1에 유지되고, 루프가 11보다 작은지, 그리고 1이 항상 11보다 작은지 계속 점검했을 것이며, 루프가 결코 끝나지 않았을 것입니다. 이를 무한 루프라고 하며 프로그램 충돌을 유발합니다. 어떤 일이 있어도 그것들을 피하세요!
1. 편집기의 루프는 현재 무한 루프입니다. 끝이 나도록 고쳐 주세요! (주의하십시오. 바로 실행을 클릭하면 무한 루프가 시작되고 페이지를 새로 고쳐야 합니다.)

i = 0
while i < 5
  puts i
  i = i + 1
end

1-3. The 'Until' Loop
시간 루프에 대한 보완은~ 까지 루프입니다. 그건 일종의 퇴보인 셈이죠
i = 0
until i == 6
i = i + 1
end
puts i
1. 위의 예에서는 변수 i를 생성하여 0으로 설정합니다.
2. 그러면 내가 6살이 될 때까지 우리는 코드 블록을 실행한다. 그 코드 블록은 i를 증가시킨다.
3. 내가 6과 같을 때, 그 블록은 끝난다.
4. 마지막으로, 콘솔에 i의 값인 6개를 인쇄합니다.

2번 라인에서, 카운터가 10보다 클 경우 루프가 끊어지도록 공백을 채우십시오.
5호선에서는 위의 예와 같이 카운터를 늘립니다.
루프 모양이 다음과 같아야 합니다.

1.On라인 2는 카운터가 10보다 클 경우 루프가 끊어지도록 __________________ 공백을 채웁니다.
5호선에서는 위의 예와 같이 카운터를 늘립니다.

until # Counter is greater than 10
puts counter
#Increment counter
end

counter = 1
until counter > 10
  puts counter
  counter = counter + 1
end
>> 10 까지 출력

until counter == 10
>> 9 까지 출력.

1-4. More Assignment Operators
counter = counter + 1 과 같은 구문을 사용해 왔지만 루비에서의 사용이 늘어나면서 항상 다른 방법이 있습니다.
바로 가기는 할당 연산자를 사용하는 것입니다. 하나의 할당 연산자, 즉 변수를 설정하는=를 이미 알고 있습니다. 그러나+=, -=, *=및/=를 포함하는 추가 할당 연산자를 사용하여 변수를 업데이트할 수 있습니다. 예를 들어, 입력할 때
counter += 1
Ruby에게 이렇게 말합니다."1을 추가하고, 다시 카운터에 새로운 값을 할당하세요."이것은 우리의 프로그램에서 변수 값을 업데이트하는 간결한 방법을 제공합니다.
일부 언어에는 증가 연산자 ++ 가 있으며 --(값에서 1을 추가 또는 차감하기도 함), Ruby에는 없다. 당신은 +로 해야 할 것이다.
1. 첫번째 연습의 루프가 편집기에 있습니다. 적절한 할당 연산자를 사용하여 다시 쓰십시오.

counter = 1
while counter < 11
  puts counter
  counter += 1
end

1-5. The 'For' Loop
하지만, 때때로 여러분은 여러분이 얼마나 많이 루프를 반복하는지 알게 됩니다.
편집기에서 루프의 예를 살펴보십시오. 여러분은 이것이 무엇을 하는지 추측할 수 있나요? 실행을 클릭하여 작업을 확인하십시오.
for num in 1...10
  puts num
end
>> 1
>> 2
>> ...
>> 9   #1~9 까지 연속적으로 출력.

1-6. Inclusive and Exclusive Ranges
이전 연습에서 1...10의 num에 대한 약간의 새로운 구문을 보았습니다. Ruby가 말하는 것은 다음과 같습니다."1~10범위의 변수 num은 다음과 같습니다. puts"#{num}"은(는)1부터 10까지의 값을 입력하는 콘솔입니다.
이 프로그램이 10이 아닌 9까지 계산된 이유는 우리가 범위 안에 점 세개를 사용했기 때문이다. 루비는 1.10에 숫자를 마지막으로 넣지 않았다고 한다.
1. 편집기의 루프를 두가지 방법으로 업데이트합니다.
15를 포함해 1에서 15까지 인쇄하게 하세요.
사용하려면 변경하십시오. 대신에...
for num in 1..15
  puts num
end
>> 1 ~ 15 까지 출력.

for num in 1...15
  puts num
end
>> 1 ~ 14 까지 출력.

1-7. Building Your Own
잘 했어요! 여러분은 자신만의 루프를 만들 준비가 되어 있습니다.
20을 포함하여 숫자 1을 20에 이르게 하는 루프는 다음 중 하나를 사용하여 쓰기 바랍니다. 또는....구문을 새로 고쳐야 할 경우 힌트를 확인하십시오.
루프는 다음과 같아야 합니다.
for variable in range #.. or ...
puts variable
end
for num in 1..20
  puts num
end
>> 1 ~ 20 까지 출력.

for num in 1...21
  puts num
end
>> 1 ~ 20 까지 출력.

1-8. The Loop Method
지금까지 루비에서의 동작을 반복하는 한가지 방법에 대해 배웠는데, 바로 루프입니다. 루비의 경우가 흔히 그렇듯, 주어진 임무를 완수하는 데는 여러가지 방법이 있다. 이 경우에, 이터레이터를 사용하여 동작을 반복할 수도 있습니다.
이터레이터는 Ruby방식으로 몇번이고 코드 블록을 불러 온다. 코드 블록은 반복될 지시 사항을 포함하고 있는 비트에 불과하고, 그러한 지시는 여러분이 좋아하는 어떤 것이든지 될 수 있어요!
가장 간단한 온도 조절기는 루프 방법입니다. 단순히 입력하여( 하지만 무한대!)기본 루프를 만들 수 있습니다.
loop { print "Hello, world!" }
Ruby에서는, flook브레이스({})가 일반적으로 키워드 do(블록을 열기 위해)및 end(닫기 위해)과 호환됩니다. 이것을 알면 위에 있는 것보다 더 똑똑한 루프를 만들 수 있습니다.
i = 0
loop do
i += 1
print "#{i}"
break if i > 5
end
1. 편집기의 ____파일을 적절한 키워드로 바꿉니다. 도움이 필요하시면 힌트를 확인하세요!
누락된 키워드는 루프, 실행 및 분할입니다. 예제를 통해 올바른 순서로 정렬되었는지 확인하십시오.

i = 20
loop do
  i -= 1
  print "#{i}"
  break if i <= 0
end
>> 191817161514131211109876543210

1-9. Next!
다음 키워드를 사용하여 루프의 특정 단계를 건너뛸 수 있습니다. 예를 들어 짝수를 인쇄하지 않으려면 다음을 수행할 수 있습니다.
for i in 1..5
next if i % 2 == 0 #짝수인 참의 값이 스킵된다.
print i
end
1. 위의 예에서는 1~5의 범위를 순환하여 각 숫자를 i에 차례로 할당합니다.
2. i/2의 나머지가 0이면 루프의 다음 반복으로 이동합니다.
3. 그런 다음 i값을 인쇄합니다. 이전 줄로 인해 이 줄은 1,3,5개의 라인만 인쇄됩니다.

1. 인쇄 문구 전에 루프에 줄을 추가하십시오. 숫자 i가 홀수인 경우 다음 반복으로 건너뛸 수 있도록 다음 키워드를 사용하십시오.
위의 예는 도움이 필요한 경우에도 사용할 수 있지만, 위의 예에서는 짝수를 건너뜁니다.

i = 20
loop do
  i -= 1
  next if i % 2 != 0
  puts "#{i}"
  break if i <= 0
end
>> 181614121086420

1-10. Saving Multiple Values
변수에 일련의 숫자를 저장한다고 합시다. 어떻게 하면 될까요? 변수는 하나의 값만 가질 수 있습니다, 그렇죠?
Ruby에서는, 우리는 여러 값들을 하나의 배열을 사용해 하나의 변수로 묶을 수 있다. 배열은 대괄호 사이에 있는 항목의 목록일 뿐입니다:[1,2,3,4]. 이러한 항목은 주문할 필요가 없습니다.[10,31,19,400]만큼 쉽게 주문할 수 있습니다.
1.my_array라는 변수를 만들어 1부터 5까지 순차적으로 설정합니다.

my_array = [1, 2, 3, 4, 5]

1-11. The .each Iterator
잘 했어요! 당신은 정말 이것의 요령을 터득하고 있어요.
루프 이터레이터는 가장 간단하지만 가장 강력하지 않은 것 중 하나이기도 합니다. 더 유용한 것은. 각 방법이며, 이것은 한번에 하나씩 개체의 각 요소에 표현을 적용할 수 있다. 구문은 다음과 같습니다.
object.each { |item|
# Do something
}
{}대신 다음과 같은 작업 키워드를 사용할 수도 있습니다. do
object.each do |item|
# Do something
end
여러분이 좋아하는 것은 무엇이든지 다양한 이름이 될 수 있어요:그것은 여러분이 사용하고 있는 물체의 각 요소에 대한 자리 표시자에 불과합니다.

array = [1,2,3,4,5]

array.each do |x|
  x += 10
  puts "#{x}" # 이 형식 중요. "#{}" 그래야 제대로 출력 됨.
end
>> 11 12 13 14 15

1-12. Try It Out!
멋지지 않아? 이제 당신이 각 방법을 시험 주행에 사용할 차례입니다.
numbers = [1, 2, 3, 4, 5]

# one way to loop
numbers.each { |item| puts item }

# another way to loop
numbers.each do |item|
puts item
end
1. 위의 예에서는 숫자라는 배열을 생성합니다.
2. 그런 다음 각 항목을 콘솔에 숫자로 인쇄하는 두가지 방법을 보여 줍니다.

1. 배당률 어레이의. 각 방법을 사용해 어레이의 각 항목 값의 두배를 인쇄한다. 다시 말해, 각 항목에 2를 곱합니다. 그러면 출력이 한줄에 나타납니다.
막히면 힌트를 확인하세요!

odds = [1,3,5,7,9]

odds.each do |placeholder|
  placeholder *= 2
  puts placeholder
end

1-13. The .times Iterator
.times메서드는 슈퍼 콤팩트 루프와 같습니다. 이것은 지정된 횟수만큼 개체의 각 항목에 대해 작업을 수행할 수 있습니다.
예를 들어, 우리가 " 두툼한 베이컨"을 인쇄하고 싶었다면,
10.times { print "Chunky bacon!" }
우리가 왜 그것을 타이핑해야 하는지 모르겠지만, 우리는 할 수 있었어요!
1. 원하는 횟수만큼 원하는 문자열을 인쇄하는 데. time연산자를 사용하십시오. 도움이 필요하면 위 텍스트에 있는 코드를 가이드로 사용하십시오.

10.times { print "Black " }
>> Black Black Black Black Black Black Black Black Black Black

1-14. Looping with 'While'
자, 바퀴를 떼어 내세요. 네 물건을 좀 보자!
i = 3
while i > 0 do
print i
i -= 1
end
위의 예에서는 i라는 변수를 생성하여 3으로 설정합니다.
그럼 우리가 긍정적으로 생각하는 한 루프를 실행하기 때문에 3,2,1번을 출력합니다.
1. 1번부터 50번까지의 숫자를 인쇄하기 위해 약간의 루프를 사용한다. 위의 예는 계산하기 힘들지만, 여러분은 숫자를 세고 싶을 거예요.

i = 1
while i <= 50 do
  puts i
  i += 1
end
>> 1 ~ 50 까지 출력.

1-15. Looping with 'Until'
i = 3
while i > 0 do
  print i
  i -= 1

end
j = 3
until j == 0 do
  print j
  j -= 1
end
위의 예에서, 우리는~ 까지 사용하는 동안 같은 루프를 썼습니다.
1. 루프를 사용하여 을(를)다시 쓰지 마십시오. 여전히 1번부터 50번까지의 숫자를 출력해야 합니다.

i = 1
until i == 51
  puts i
  i += 1
end
>> 1 ~ 50까지 출력.

1-16. Looping with 'For'
루비가 어떤 일을 하든 상관 없이 수백만가지의 방법으로 한다는 주제를 잘 이해하지 못하시는 분들을 위해, 우리 루프를 다시 한번 변환해 봅시다.
for k in 1..3
print k
end
위의 예에서는 루프를 통해 1에서 3까지 123을 인쇄합니다.
1. 이제 until 가 아닌 for 를 사용하여 1~50범위의 숫자를 출력하십시오.

i = 1
for i in 1..50
  print i
  i += 1
end
>> 1 ~ 50 까지 출력.

1-17. Loop the Loop with Loop
잘 했어요! 우리가 숫자 맞추기 게임에서 잠시 빠져 볼게요.
m = 0
loop do
m += 1
print m
break if m == 10
end
위의 예에서는 루프를 10번 수행한 후 12345678910이 인쇄되어 있습니다.

1. loop iterator를 사용하여"Ruby!"라는 문자열을 30회 출력합니다.
문자열이 그림과 같이 정확히 입력되도록 하십시오!
loop는 다음과 같아야 합니다.
counter = 0
loop do
counter += 1
print "Ruby"
break if counter > # The value to stop at
end

counter = 0
loop do
  counter += 1
  print "Ruby!"
  break if counter == 30
end

1-18. Iterating with .times
마지막으로, 우리 루프를. timestoerator로 교체합시다.
1."Ruby!"를 콘솔에 30번 인쇄할 때는. times를 사용하세요. 코드를 확인하러 뛰어가서 이 수업을 마치세요!

30.times { print "Ruby!" }

2. Redacted!

이 프로젝트에서는 여러분의 이름을 찾기 위해 한줄의 텍스트를 찾아서"수정된 "이라는 단어로 바꾸는 프로그램을 만들 거예요.

2-1. What You'll Be building
정보를 숨기는 것은 암호를 보호하고, 보안 연결을 설정하고, 모든 정보에 대한 액세스 제어에 의존하는 무단 변경으로부터 프로그램을 보호하는 프로그램의 주요 부분입니다.
이후의 과정에서 해시를 다룰 때까지 실제로 정보를 검색할 수는 없지만, 지금까지 사용한 툴, 즉 배열과 일정을 사용하여 사용자의 입력을 변경하는 간단한 프로그램을 작성할 수 있습니다.

puts "Text to search through: "
text = gets.chomp
puts "Word to redact: "
redact = gets.chomp

words = text.split(" ")

words.each do |word|
  if word != redact
    print word + " "
  else
    print "REDACTED "
  end
end

2-2. Getting the User's Input
제일 먼저 해야 할 일은 사용자의 입력 정보를 얻는 것입니다.
1. 사용자에게 두번 입력하라는 메시지를 표시합니다. 첫번째 puts의 경우 텍스트라 불리는 변수를 선언하고 gets.chomp을 통해 사용자의 입력과 동등하게 설정합니다.
두번째로, redact라고 하는 변수를 선언하고 gets.chomp를 사용하여 사용자의 입력과 동등하게 설정합니다.

puts "Please enter it twice."
text = gets.chomp
puts "Please enter it twice."
redact = gets.chomp

2-3. The .split Method
그 다음에는 사용자의 입력을 개별 단어로 나누어 보겠습니다.
Ruby는. split이라는 내장 방법을 사용하며, 문자열로 배열을 반환한다. 괄호 안에 있는 약간의 텍스트를 전달하면,. split는 구분 기호라고 불리는 해당 텍스트를 보는 곳마다 문자열을 나눕니다. 예를들면
text.split(",")
Ruby에게 쉼표를 볼때마다 문자열을 나누라고 합니다.
1. 단어라 불리는 변수를 표시하고 텍스트에 .split메서드를 호출한 결과와 동일하게 설정합니다. 구분 기호로 사용할 공백(")을 분할하여 텍스트에서 단어 배열을 만들 수 있도록 합니다.

puts "Please enter it twice."
text = gets.chomp
puts "Please enter it twice."
redact = gets.chomp

words = text.split(" ")

2-4. Redacted!
좋아! 사용자의 텍스트를 검토할 일정을 작성할 시간입니다.
letters = ['a', 'b', 'c', 'd']
letters.each do |letter|
print letter
end
위의 예는 문자 배열에 각각. 의 사용을 상기시켜 주는 역할을 할 뿐이다.

Remember, the syntax for .each is
array.each { |placeholder| #action }
or
array.each do |placeholder|
# action
# another action
# yet another action!

end
1. 간단하게 시작해 봅시다:단어를 반복해서 쓰고 발견한 단어를 하나씩 출력해 보세요.

puts "Enter some text: "
text = gets.chomp

puts "Enter words to redact: "
redact = gets.chomp

words = text.split(" ")
words.each { |word| print word }

2-5. Control Flow Know-How
좋아! 하지만 우리의 결과에는 두가지 문제가 있었습니다. 우리의 말 사이에 간격이 없었고, 우리의 프로그램은 우리가 수정하고자 하는 단어를 "업데이트 됨"으로 바꾸지 못 했습니다.
if var == 10
print "Variable is 10"
else
print "Variable is something else"
end
마법이라도 부리면 그걸 고칠 수 있어! if/else 블록이 어떻게 작동하는지 상기시켜 주는 위의 예시
1. 각자의. 안에 성명을 추가한다.
현재 단어와 다시 선택할 단어가 같으면 추가 공백과 함께"REDATECTED"를 인쇄합니다.
그렇지 않으면( 다른),+""를 인쇄합니다.
두 경우에 모두 공백이 있으면 단어가 함께 실행되지 않습니다.

puts "Enter some text: "
text = gets.chomp

puts "Enter words to redact: "
redact = gets.chomp

words = text.split(" ")
words.each { |word|
  if word == redact
    print "REDACTED "
  else
print word + " "
  end
  }

2-6. Great Work!
완벽해! 당신이 어떤 결과를 얻을 수 있는지 보려면 당신의 Redactor와 어울리지 말아라. 다음에 대해 생각해 보십시오.
당신의 리덕터가 대문자와 소문자를 구분하지 않고 단어를 다시 설명하도록 하기 위해 당신은 무엇을 할 수 있는가?
어떻게 하면 당신의 프로그램이 여러개의 단어를 별도로 RedaCT로 가져가게 만들 수 있는가?
새 수정된 문자열을 생성하여 콘솔에 인쇄하는 것이 아니라 변수로 저장하는 방법은 무엇입니까?
이것들이 질문입니다. 그동안 실행을 클릭하여 이 업데이트됨을 완료합니다.

4. Arrays and Hashes

1. Data structures

이미 어레이에 대해 조금 알고 있습니다. 이 과정에서는 어레이, 해시라는 새로운 데이터 구조, 더 나은 프로그램을 구축하기 위해 두가지 모두에서 Ruby가 어떻게 반복할 수 있는지에 대해 더 많은 것을 배울 것이다.

1-1. Creating Arrays
앞에서 단일 변수의 값 목록을 저장하는 데 어레이를 사용할 수 있음을 보았습니다. 여러분은 그 안에 있는 어떤 숫자든지 입력할 수 있고, 여러분은 숫자를 반복할 수 있고, 그것들은 숫자 순서대로 있을 필요가 없어요!
1. 편집기에서 변수 my_array를 선언하고 선택한 배열과 같게 설정합니다. 구문 세척이 필요한 경우 Hint(힌트)를 확인합니다.
my_array = [70, 24, 1]

1-2. Access by Index
어레이에 대해 흥미로운 점이 있습니다. 어레이의 각 요소에 인덱스라는 것이 있습니다. 첫번째 요소는 인덱스 0이고, 다음 요소는 인덱스 1이며, 다음 요소는 인덱스 2입니다. 다음과 같은 대괄호를 사용하여 어레이의 요소에 직접 액세스 할 수 있습니다.
array = [5, 7, 9, 2, 0]
array[2]
# returns "9", since "9" # is at index 2
아래 다이어그램은 이러한 지수가 당사의 샘플 어레이인[5,7,9,2,0]에 대해 어떻게 작동하는지를 보여 줍니다. 첫번째 요소는 인덱스 0이고, 다음 요소는 1, 다음 요소는 2등입니다.
+---+---+---+---+---+
array | 5 | 7 | 9 | 2 | 0 |
+---+---+---+---+---+
index 0 1 2 3 4
(이것은 다소 지나친 단순화이지만, 현재로서는 이해가 됩니다.)
다음과 같이 인덱스를 대괄호로 묶어서 어레이라고 하는 어레이의 항목 요소에 액세스 할 수 있습니다:array[i]. 어레이[0]는 첫번째 요소를 얻고 어레이[1]는 두번째 요소를 얻는 식입니다. 이것을 색인별 액세스라고 합니다.
1. 사각 괄호 표기법을 사용하여 demo_array의 세번째 값을 콘솔에 인쇄합니다.
세번째 값은 인덱스 3이 아니라 인덱스 2입니다. 우리는 제로부터 지수를 계산하기 시작한다.

demo_array = [100, 200, 300, 400, 500]
print demo_array[2]
>> 300

1-3. Arrays of Non-Numbers
여기 여러분이 알지 못 했을 수도 있는 것들이 있습니다. 루비 객체들의 모음을 만들 수 있습니다. 여러분은 보울린을 다발로 만들 수 있어요! 줄이 늘어서 있어요! 가능성은 무궁무진하다
1.string_array라는 새 어레이를 생성합니다. strings(문자열)으로 묶어 놔!
string_array = ["These", "are", "some", "strings"]

1-4. Arrays of Arrays
여러분은 이렇게 자문할 수도 있어요."만약 내가 어떤 것을 배열할 수 있다면, 배열할 수 있을까?"정답은:네!
우리가 편집기에 가지고 있는 배열을 확인해 보세요. 어레이를 더 추가하는 작업을 수행하면 어레이를 스프링 같은 형태로 확장하여 다차원 어레이라고 합니다. 예를 들어 편집기의 배열은 2차원 배열입니다.
우리가 프린트하면 이 2차원 배열이 어떤 모습일지 아시겠어요? 보려면 실행을 클릭하십시오.

multi_d_array = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]

multi_d_array.each { |x| puts "#{x}\n" }

>> [0, 0, 0, 0]
>>
>> [0, 0, 0, 0]
>>
>> [0, 0, 0, 0]
>>
>> [0, 0, 0, 0]

1-5. Create Your Own
한줄에 요소 수와 전체 행이 동일한 2차원 배열이 어떻게 정사각형인지 확인하시겠습니까? 배열( 선 같은)은 1차원이며 배열(정사각형 같은)은 2차원입니다.

1. 편집기에서 my_2D_array라고 하는 자신만의 2차원 배열을 만듭니다. 내부 배열의 요소는 숫자, 문자열, 불 리언 등과 같이 원하는 대로 지정할 수 있습니다. 도움이 필요하면 힌트를 확인하세요.
Hint 단순한 2D어레이는 다음과 같습니다.
array = [[thing, thing], [thing, thing]]

my_2d_array = [[1, 2, 3, 4], [5, 6, 7, 8]]

print my_2d_array
>> [[1, 2, 3, 4], [5, 6, 7, 8]]

1-6. Introduction to Hashes
우리는 어레이가 0으로 시작하여 어레이 길이에서 1을 뺀 숫자로 인덱싱 되어 있다는 것을 알고 있습니다. (생각해 보세요. 네개의 요소가 있는 배열에 0,1,2,3이라는 지수가 있습니다.)
하지만 0부터 배열 끝까지 순서대로 배열되지 않는 숫자 색인을 사용하려는 경우에는 어떻게 할까요? 만일 우리가 숫자를 전혀 지수로 사용하지 않길 원한다면? 해시라는 새 배열 구조가 필요해
해시는 JavaScript개체나 Python사전과 비슷합니다. 이러한 언어를 공부하지 않았다면 해시는 키-값 쌍 모음이라는 것만 알면 됩니다. 해시 구문은 다음과 같습니다.
hash = {
key1 => value1,
key2 => value2,
key3 => value3
}
값은 => 를 사용하여 키에 할당됩니다. 모든 Ruby개체를 키 또는 값으로 사용할 수 있다.
오른쪽 편집기에 해시를 만들었습니다. 키와 값으로 어떻게 구성되어 있는지 보시겠습니까? 밑에 있는 코드를 확인해 보세요. 어딘가 익숙하게 보일 겁니다. 어떻게 되는지를 보려면 Run(실행)을 클릭하십시오!

my_hash = { "name" => "Eric",
  "age" => 26,
  "hungry?" => true
}

puts my_hash["name"]
puts my_hash["age"]
puts my_hash["hungry?"]
>> Eric
>> 26
>> true

1-7. Using Hash.new
방금 보여 드린 건 해시 문자 표기법이에요 우리는 이것을 글자 그대로 해시에 원하는 것을 묘사하기 때문에 그렇게 부릅니다:이름을 붙이고 그것을 곱슬한 버팀대 안에 있는 하나 이상의 key => value 쌍과 동등하게 설정합니다.
해시. new를 사용하여 다음과 같이 해시를 생성할 수도 있습니다.
my_hash = Hash.new
변수를 hash.new와 동일하게 설정하면 새로운 빈 해시가 생성됩니다. 이는 변수를 비어있는 {} 에 동일하게 설정하는 것과 같습니다.
1. Hash.new를 사용하여 애완 동물이라고 하는 새로운 해시를 생성합니다. 해시는 대문자로 쓰지 않으면 Ruby한테 무슨 말을 하는지 못 들을 거야!
pets = Hash.new

print pets
>> {}

1-8. Adding to a Hash
우리는 두가지 방법으로 해시에 추가할 수 있습니다. 만약 우리가 문자 표기법을 사용하여 해시를 만든다면, 우리는 새로운 키-값 쌍을 곱슬 머리 치열 교정기 사이에 바로 추가합니다. 해시. new를 사용할 경우 괄호 표기법을 사용하여 해시에 추가할 수 있습니다.
pets = Hash.new
pets["Stevie"] = "cat"
# Adds the key "Stevie" with the
# value "cat" to the hash
1. 애완 동물 해시에 애완 동물을 추가합니다. 여러분이 좋아하는 어떤 키 값 쌍도 될 수 있습니다!

pets = Hash.new
pets["blackhole"] = "cat"

1-9. Accessing Hash Values
어레이와 마찬가지로 해시의 값에 액세스 할 수 있습니다.
pets = { "Stevie" => "cat",
"Bowser" => "hamster",
"Kevin Sorbo" => "fish"
}

puts pets["Stevie"]
# will print "cat"

1. 위의 예에서는 pets 이라는 해시를 만듭니다.
2. 그리고 나서 우리는 pets 해시에 있는 Key "Stevie"에 접속하여 cat를 인쇄한다.

1. 위 예의 2단계와 같이 애완 동물에 추가한 키 값 쌍에 액세스 합니다.
이 값을 콘솔에 인쇄하려면 삽입을 사용합니다.

pets = Hash.new
pets["blackhole"] = "cat"

puts pets["blackhole"]
>> cat

1-10. (Re)Introduction to Iteration
우리가 루프와 여행기를 다룰 때 기억 나요? 우리는 프로그램을 반복하기 위해 아주 다양한 방법을 사용할 수 있습니다. 우리가 어레이나 해시를 반복할 때, 우리는 그것을 반복한다고 말합니다.
이 섹션에서는. 각 항목을 사용하여 어레이 및 해시를 반복합니다. 편집기에서 코드를 확인하여 이 문제를 어떻게 해결할지 한가지 예를 들어 보십시오.

friends = ["Milhouse", "Ralph", "Nelson", "Otto"]

family = { "Homer" => "dad",
  "Marge" => "mom",
  "Lisa" => "sister",
  "Maggie" => "sister",
  "Abe" => "grandpa",
  "Santa's Little Helper" => "dog"
}

friends.each { |x| puts "#{x}" }
family.each { |x, y| puts "#{x}: #{y}" }

1-11. Iterating Over Arrays
어레이를 통해 스트리밍 하는 것은 보기보다 쉽습니다.
numbers = [1, 2, 3, 4, 5]
numbers.each { |element| puts element }
위의 예제에서는 5개의 요소가 있는 숫자라는 배열을 생성합니다.
그리고 나서 우리는 "이 배열을 가지고 각 요소에 대해 콘솔에 프린트하세요."라고 말합니다. 평소처럼, 2|문자 사이의 어떤 자리 표시자 이름도 사용할 수 있습니다.
1. 언어 배열의 각 요소를 표시하려면. iterator를 사용합니다.
각 요소가 고유한 선에 있도록 인쇄하는 대신 반드시 배치를 사용하십시오.

languages = ["HTML", "CSS", "JavaScript", "Python", "Ruby"]

languages.each { |element| print element + " "}
>> HTML CSS JavaScript Python Ruby

1-12. Iterating Over Multidimensional Arrays
이제 다차원 배열을 반복하는 방법을 살펴보겠습니다.
2-D어레이를 만들었습니다("sandwiches"). 우리는 각 요소를 배열로 출력하지 않고["ham","swiss"]와 같은 방식으로 반복하고 싶지만, 각 하위 범주에 속하는 각 요소는 목록에 포함됩니다.
"swiss"에 액세스 하려면
s[0][1]
즉,"첫번째 요소의 두번째 요소를 가져다 주세요.""스위스"라는 뜻입니다.
array.each { |element| action }
그렇다면 스토리지 어레이를 어떻게 반복해야 할까요?

Hint 중첩된 항목 .each는 다음과 같아야 합니다.
s.each do | sub_array |
sub_array.each do | y |
  puts y
end
end

1. 하위 영역 내부의 모든 요소를 지정합니다.
배열의 각 요소를 반복합니다. 요소 sub_array를 호출합니다.
그런 다음 각각 sub_array를 반복하여 항목을 출력합니다.
s = [["ham", "swiss"], ["turkey", "cheddar"], ["roast beef", "gruyere"]]

s.each do | sub_array |
  sub_array.each do | y |
    puts y
  end
end

>> ham
>> swiss
>> turkey
>> cheddar
>> roast beef
>> gruyere

# .each do 반복문을 한번만 사용할 때는 그대로 출력이 되는데 한번 더 엮어서 사용하니 개개인이 출력된다.

1-13. Iterating Over Hashes
해시를 반복할 때 각 키/값 쌍을 나타내는 자리 표시자 변수가 두개 필요합니다.
restaurant_menu = {
"noodles" => 4,
"soup" => 3,
"salad" => 2
}
restaurant_menu.each do |item, price|
puts "#{item}: #{price}"
end
위의 예에서는 restaurant_menu 이라는 새 해시를 생성합니다.
그런 다음 restaurant_menu 해시를 순환하여 항목에 대한 키와 각 반복 가격에 값을 할당합니다.
마지막으로, 다음과 같은 기능을 제공합니다.
noodles: 4
soup: 3
salad: 2

1. 각각 secret_identies해시를 반복합니다.
위의 예제와 같이 콘솔에 키-값 쌍을 콜론과 공백(:)으로 구분하여 각각 인쇄할 때 사용합니다.

secret_identities = {
  "The Batman" => "Bruce Wayne",
  "Superman" => "Clark Kent",
  "Wonder Woman" => "Diana Prince",
  "Freakazoid" => "Dexter Douglas"
}

secret_identities.each do |sec, name|
  puts "#{sec}: #{name}"
end
>> The Batman: Bruce Wayne
>> Superman: Clark Kent
>> Wonder Woman: Diana Prince
>> Freakazoid: Dexter Douglas

1-14. Multidimentional Arrays
잘했어! 이번 수업을 통해 많은 것을 배웠습니다. 여러분이 정말 여러분의 물건을 알고 있는지 확인하기 위해 약간의 검토를 해 봅시다.
1. 편집기에서 my_array라는 다차원 배열을 만듭니다. 가장 안쪽에 있는 배열의 요소는 숫자, 문자열, 경계 등 원하는 모든 것일 수 있습니다. 도움이 필요하면 힌트를 얻으세요.

my_array = [[1, 2, 3, 4, 5], ["Another", "multidimensional", "array!"], [false, true]]

puts my_array[0]
puts my_array[1]
puts my_array[2]
puts my_array[0, 0]
puts my_array[0, 1]
puts my_array[0, 2]
puts my_array[0, 3]
puts "================="
puts my_array[1, 0]
puts my_array[1, 1]
puts my_array[1, 2]

>> [1, 2, 3, 4, 5]
>> ["Another", "multidimensional", "array!"]
>> [false, true]
>> []
>> [[1, 2, 3, 4, 5]]
>> [[1, 2, 3, 4, 5], ["Another", "multidimensional", "array!"]]
>> [[1, 2, 3, 4, 5], ["Another", "multidimensional", "array!"], [false, true]]
>> =================
>> []
>> [["Another", "multidimensional", "array!"]]
>> [["Another", "multidimensional", "array!"], [false, true]]

1-15. Hashes
해시 표기법 2가지.
좋아! 이제 해시를 생성하겠습니다. 해시 리터럴 표기법 또는 Hash.new를 사용하십시오.
prices = {
"apple" => 0.52,
"banana" => 0.23,
"kiwi" => 1.42
}
sounds = Hash.new
sounds["dog"] = "woof"
sounds["cat"] = "meow"
Hint 해시 리터럴 표기법은 다음과 같습니다.
hash_name = {
key1 => value1,
key2 => value2,
key3 => value3
}
Hash.new는 다음과 같이 사용합니다.
hash_name = Hash.new
# 새 키-값 쌍을 지정할 때 괄호 표기법을 사용합니다.
hash_name[key1] = value1

1. 편집기에서 my_hash라는 해시를 만듭니다.
키-값 쌍을 하나 이상 지정하십시오.

my_hash = {
  "sleepy" => 450,
  "eat" => 300,
  "game" => 200,
  "health" => 270
  }

1-16. Iterating Over a Hash
어레이에 대해 상당히 많은 반복 작업을 수행했으므로, 마지막으로 해시를 반복하는 방법을 검토해 보겠습니다.
numbers = [1, 2, 3, 4, 5]
numbers.each { |element| puts element }
1. 각각의 키/값 쌍을 lunch_Order에 입력합니다.
각 쌍의 값을 표시하십시오(키가 아닌 값만 표시).

lunch_order = {
  "Ryan" => "wonton soup",
  "Eric" => "hamburger",
  "Jimmy" => "sandwich",
  "Sasha" => "salad",
  "Cole" => "taco"
}

lunch_order.each { |name, food| puts food }
>> wonton soup
>> hamburger
>> sandwich
>> salad
>> taco

2. Create Histogram

이 프로젝트에서는 텍스트 블록을 읽고 각 단어가 몇번 나타나는지 알려 주는 프로그램을 작성할 것입니다.

2-1. What You'll Be Building
이 프로젝트에서는 사용자의 입력을 받은 다음 해당 입력에서 해시를 작성하는 프로그램을 작성합니다. 해시의 각 키는 사용자의 단어가 됩니다. 각 값은 해당 단어가 발생하는 횟수입니다. 예를 들어, 만약 우리의 프로그램이 "the rain in Spain falls mainly on the plain,"라는 문자열을 얻는다면, 그것은 돌아올 것이다.
the 2
falls 1
on 1
mainly 1
in 1
rain 1
plain 1
Spain 1
이와 같은 데이터의 시각적 표현을 히스토그램이라고 합니다.
실행해 보세요!

puts "Text please: "
text = gets.chomp

words = text.split(" ")
frequencies = Hash.new(0)
words.each { |word| frequencies[word] += 1 }
frequencies = frequencies.sort_by {|a, b| b }
frequencies.reverse!
frequencies.each { |word, frequency| puts word + " " + frequency.to_s }
# why not 이라고 입력 했을 시
>> not? 1
>> why 1

2-2. You Know the Drill
지금까지 우리는 어떻게 시작할지 알고 있습니다. 우리는 사용자로부터 입력을 받아야 합니다.
1. 사용자에게 입력할 것을 요구하는 문장을 사용합니다. gets.chomp을 사용하여 텍스트라는 변수에 이 입력을 저장합니다.

puts "Write: "
text = gets.chomp

2-3. Building the Words Array (단어 배열(Array) 만들기)
다음으로, 우리는 사용자의 문자열을 우리가 반복할 수 있는 것으로 바꾸고 싶을 것이다. 모든 요소들로 이루어진 데이터 구조가 한줄에 있다고 말할 수 있나요? 그건 마치 배열처럼 들리네요!
텍스트에 있는 .split 메서드를 호출하여 배열로 변환할 수 있습니다.
1. words 라고 하는 변수를 구분하여 text 에 .split 을 호출한 결과와 동일하게 설정합니다.

puts "Write: "
text = gets.chomp

puts "Write: "
text2 = gets.chomp

words = text.split(",")

2-4. Creating the Frequencies Hash (빈도 해시(Hash) 만들기)
좋아! 이제 해시를 사용하여 단어 수를 세어 보겠습니다.
해시에 기본 값이 있는지 확인합니다.
h = Hash.new("nothing here")

puts h
# {}

puts h["kitty"]
# nothing here

1. 위의 예에서는 기본 값이 " 없음"인 빈 해시 h를 새로 생성합니다.
2. 그런 다음 h 값인 {} 을(를)인쇄하여 h이(가) 비어 있음을 보여 줍니다.
3. 그런 다음 "키티"가 저장한 값에 액세스 하려고 할 때 여기에 아무것도 인쇄하지 않습니다.

1. 편집기에서 주파수라는 해시를 만듭니다. 기본 값 0을 지정합니다.

puts "Write: "
text = gets.chomp

puts "Write: "
text2 = gets.chomp

words = text.split(",")

frequencies = Hash.new(0)

2-5. Iterating Over the Array (배열 (Arrays)반복시키기)
완벽해! 다음으로, 우리는 한번에 하나씩 각 단어를 frequencies 해시에 추가하기 위해 단어를 반복하고자 합니다.
colors = { "red" => 2, "blue" => 3 }
colors["blue"] += 1
puts colors["blue"]

1. 위의 예에서는 먼저 해시 매핑 문자열을 정수로 생성합니다.
2. 그런 다음" blue"으로 저장된 값을 1씩 증가시킵니다.
3. 마지막으로 " blue"으로 저장된 값인 4개를 인쇄합니다.

1. 단어 배열을 반복하려면 each. 를 사용합니다.
우리가 찾은 각 단어에 대해, 단어 자체가 빈도의 핵심이며 그 값을 1씩 증가시킨다고 가정하자.
이것이 우리의 기본 값이 0인 이유입니다. 처음으로 단어를 찾으면 1씩 증가시킬 수 있는 0x0의 기본 값이 있습니다.
도움이 필요하시면 힌트를 보세요.

우리가 원하는 작업은 해시를 단어와 동일한 키로 업데이트한 다음 값을 1씩 증가시키는 것입니다. 각 키는 빈도가 있으며+=1을 사용하여 증가할 수 있습니다.

puts "Enter a phrase you'd like to analyze: "
text = gets.chomp

words = text.split

frequencies = Hash.new(0)

words.each { |word| frequencies[word] += 1 }

2-6. Sorting the Hash (해시 정렬하기)
좋았어! 워드/주파수 키-값 쌍이 가득 찬 해시가 있습니다. 이제 우리는 정보를 원하는 순서대로 얻을 수 있는 방법을 찾아야 합니다.
colors = {
"blue" => 3,
"green" => 1,
"red" => 2
}
colors = colors.sort_by do |color, count|
  count
end
colors.reverse!
1. 위의 예제에서는 색상 문자열을 숫자에 매핑 하는 색상이라는 해시를 먼저 만듭니다.
2. 그리고 나서, 우리는 색을 숫자별로 가장 작은 것부터 가장 큰 것까지 초록색, 빨간 색, 파란 색으로 분류합니다. 알다시피,. sort_by함수는 배열을 반환하지만, 우리의 목적에는 괜찮습니다.
3. 마지막으로 배열 순서를 반대로 적용하여 계수가 가장 큰 색상을 먼저 선택합니다.
주파수 해시에도 동일한 작업을 수행할 수 있습니까?

1. 위의 2단계와 같이, .sort_by을 사용하여 워드 카운트별로 주파수 해시를 정렬합니다. 결과를 주파수로 다시 저장합니다.
사용하세요. 후진! 정렬된 주파수 배열을 반전시킵니다.
자세한 내용은 힌트를 확인하십시오!

첫번째 단계는 frequencies를 정렬된 버전에 재할당하는 것입니다(. sort_by해시 인 플레이스 정렬 안 함—정렬된 복사본 생성).
frequencies = frequencies.sort_by { |k, v| v }
그러면 실제로 값 배열이 반환되며, 이 값을 역 방향으로 되돌릴 수 있습니다!
frequencies.reverse!

puts "Enter a phrase you'd like to analyze: "
text = gets.chomp

words = text.split

frequencies = Hash.new(0)

words.each { |word| frequencies[word] += 1 }

frequencies = frequencies.sort_by do |word, count|
  count
end

frequencies.reverse!
print frequencies

2-7. Iterating Over the Hash (해시 반복 시키기)
거의 다 왔어! 마지막으로, 콘솔에 각 키-값 쌍을 인쇄하려면 어레이를 반복해야 합니다.
fruit = {
"apple" => 2,
"banana" => 3,
"cherry" => 5
}
fruit.each do |name, count|
puts name + " " + count.to_s
end

1. 위의 예에서, 우리는 과일의 이름을 우리가 가지고 있는 양에 매핑 하는 과일이라고 불리는 해시를 만듭니다.
2. 그런 다음 각 키/값 쌍에 키를 이름으로 저장하고 값을 카운트로 저장합니다.
3. 마지막으로, 키와 가치를 공간으로 구분하여 인쇄합니다. 값을 연결하려면 먼저 .to_s를 사용하여 값을 숫자에서 문자열로 변환해야 합니다.

1. 반복합니다. 각 키/값 쌍은 주파수 해시에 있습니다.
그런 다음 위의 예제와 같이 각 단어, 공백 및 빈도를 콘솔에 넣습니다.

puts "Enter a phrase you'd like to analyze: "
text = gets.chomp

words = text.split

frequencies = Hash.new(0)

words.each { |word| frequencies[word] += 1 }

frequencies = frequencies.sort_by do |word, count|
  count
end

frequencies.reverse!

frequencies.each do |word, count|
  puts word + " " + count.to_s
end

# count를 그냥 출력하면 출력되지 않기에 .to_s를 사용하여 문자열로 변환시켜 준다.

2-8. You Did It!
잘 만들었다! 프로그램이 완료되었습니다. 몇번 실행하여 문자열에 있는 각 단어의 발생 개수를 계산하는 방법을 확인합니다.
실행을 클릭하면 끝납니다! 다음 프로그램 모험을 시작하기 전에 잠시 시간을 내어 승리의 빛을 만끽하십시오.

5. Blocks and Sorting

1. Methods, Blocks, &Sorting

이 과에서는 루비에서 자신만의 방법을 정의하는 방법과 블록을 사용하여 강력한 정렬 알고리즘을 개발하는 방법에 대해 알아보겠습니다.

1-1. Why Methods?
메서드는 프로그램에서 특정 작업을 수행하기 위해 작성된 코드를 재사용할 수 있는 섹션입니다. 여러분은 왜 모든 것을 하나의 큰 덩어리로 작성하는 것이 아니라 여러분의 코드를 방법으로 분리해야 하는지 궁금해 할지도 모릅니다. 프로그램을 방법으로 나누는 몇가지 좋은 이유가 있습니다.
1. 코드에 문제가 있으면 프로그램을 잘 구성한 경우 버그를 찾아 수정하는 것이 훨씬 쉽습니다. 특정 작업을 별도의 방법에 할당하는 것이 이 조직에 도움이 됩니다.
2. 특정 작업을 별도의 방법(컴퓨터 과학자가 우려 사항 분리라고 함)에 할당하면 프로그램이 중복되지 않고 코드를 재사용할 수 있습니다.
3. 객체에 대해 자세히 알게 되면 루비의 메소드를 사용하여 많은 흥미로운 것들을 배울 수 있습니다.

편집자가 작성한 방법을 확인하십시오. 여러분은 그것이 무엇을 할 것인지 추측할 수 있나요? 알고 있다고 생각되면 Run(실행)을 클릭합니다!

def prime(n)
  puts "That's not an integer." unless n.is_a? Integer
  is_prime = true
  for i in 2..n-1
    if n % i == 0
      is_prime = false
    end
  end
  if is_prime
    puts "#{n} is prime!"
  else
    puts "#{n} is not prime."
  end
end

prime(2)
prime(9)
prime(11)
prime(51)
prime(97)

>> 2 is prime!
>> 9 is not prime.
>> 11 is prime!
>> 51 is not prime.
>> 97 is prime!

1-2. Method Syntax
메소드는 키워드 def를 사용하여 정의됩니다("define"의 약자). 방법에는 세 부분이 있습니다.
1. def키워드, 메서드 이름 및 메서드에 사용되는 인수가 포함된 헤더입니다. (다음 섹션에서 논의하겠습니다.)
2. 본문-방법이 수행하는 절차를 설명하는 코드 블록입니다. 본문은 규칙에 따라 두개의 공간을 들여 놓습니다(예:for, if, elseif, else및 다른 문).
3. 메소드는 end 키워드로 끝납니다.
다음은 "루비에 오신 것을 환영합니다!"라고 콘솔에 인쇄하는 간단한 기능의 구문 예입니다.
def welcome
puts "Welcome to Ruby!"
end

1. 편집기에서 오른쪽에 있는 방법을 시작했는데, 완전하지가 않아요. ___를 올바른 키워드로 교체하여 이 방법이 제대로 작동하도록 하십시오!

def puts_1_to_10
  (1..10).each { |i| puts i }
end

puts_1_to_10 # 지금은 이것을 무시하세요. 곧 설명해 드릴게요!

1-3. Create Your Own
이제는 독자 분이 독자적인 방법을 찾아야 할 때입니다. 구문은 다음과 같습니다.
def method_name
  # Do something!
end
1. 편집기에서 메서드, 인사말을 작성합니다. 콘솔에 인사말을 인쇄할 때는 puts을 사용해야 합니다.

def greeting
  puts "Hello~"
end

greeting # 지금은 이것을 무시하세요. 곧 설명해 드릴게요!

1-4. Call It!
방법을 정의하는 것은 좋지만, 방법을 호출하거나 프로그램에서 실행하도록 지시하지 않는 한 그다지 유용하지 않습니다. 예를 들어 cartoon_fox라는 메서드를 호출하면 프로그램이 해당 이름의 메서드를 찾기 시작하고 해당 메서드 내에서 코드를 실행하려고 시도합니다.
cartoon_fox라는 메서드를 찾지 못하면 NameError가 반환됩니다. 우리는 또 다른 수업 시간에 오류를 다룰 것이다.
이름만 입력하여 메서드를 호출합니다. 지난 두번의 연습에서 puts_1_to_10을 입력하거나 메서드 정의를 마친 후에 인사말을 입력한 것을 기억하십니까? 그건 우리가 우리의 방법을 부른 거야!
1. 편집기 오른쪽에 array_of_10 함수를 설정했습니다. 5번으로 전화하세요!

def array_of_10
  puts (1..10).to_a
end

print array_of_10

>> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
>> 40

1-5. Parameters And Arguments
만약 어떤 방법이 논쟁을 한다면, 우리는 그것이 그러한 주장을 받아들이거나 기대한다고 말한다.
다음과 같은 함수를 정의할 수 있습니다.
def square(n)
puts n ** 2
end
그리고 다음과 같이 부르세요:
square(12)
# ==> prints "144"
인수는 메서드를 호출할 때 메서드의 괄호 사이에 실제로 넣은 코드 조각이며 매개 변수는 메서드의 괄호 사이에 정의할 때 입력하는 이름입니다. 예를 들어, 위의 제곱을 정의할 때는 n매개 변수("number")를 지정하고 12라는 인수를 전달했습니다.
매개 변수를 자리 표시자로 생각할 수 있습니다. 메서드 정의는 인수가 어떤 인수를 얻을지 정확히 미리 알지 못하기 때문입니다.
루비에서는 괄호를 선택할 수 있지만 읽기 쉽도록 괄호 안에 변수와 인수를 넣어 두는 것이 좋습니다.

1. 편집자에게 Cubertino 메서드를 호출하고 8의 인수를 전달합니다.

def cubertino(n)
  puts n ** 3
end

cubertino(8)
>> 512

1-6. Splat!
무엇을 기대해야 할 지 모른다는 말입니다. 여러분의 방법은 그들이 어떤 주장을 미리 해야 할지 뿐만 아니라 때로는 얼마나 많은 논쟁이 있을지도 모릅니다.
예를 들어 사용자로부터 받은 인수를 사용하는 방법이 있다고 가정해 봅시다. 다음과 같이 보일 수 있습니다.
def friend(name):
puts "My friend is " + name + "."
end
이것은 한명의 친구에게만 좋은 일이지만, 사용자가 몇명의 친구 이름을 미리 입력할지 모른 채 모든 사용자의 친구를 인쇄하고 싶다면 어떻게 해야 할까요?
해결책은 분할 원칙입니다. splat 인수는 * 가 선행하는 인수로, 방법이 하나 이상의 인수를 수신할 수 있음을 프로그램에 알려 줍니다.
코드를 실행합니다. 자유롭게 놀고 싶은 만큼 친구를 불러 주세요!

def what_up(greeting, *friends)
  friends.each { |friend| puts "#{greeting}, #{friend}!" }
end

what_up("What up", "Ian", "Zoe", "Zenas", "Eleanor")
>> What up, Ian!
>> What up, Zoe!
>> What up, Zenas!
>> What up, Eleanor!

메서드의 인수 friend에 붙어 있는 *을 때보면
wrong number of arguments (given 5, expected 2) 라고 뜬다. 잘못된 인수. 주어진건 5인데 예상되는건 2란다.

1-7. Let's Learn Return
콘솔에 어떤 것을 인쇄하는 방법을 원하지 않을 때도 있지만 실제로는 그 방법을 사용하여 가치를 다시 전달하고 싶습니다. 그것을 위해 우리는 반품을 사용한다.
def double(n)
  return n * 2
end

output = double(6)
output += 2
puts output
1. 위의 예에서, 우리는 n이라고 불리는 하나의 인수를 수용하는 더블이라는 새로운 방법을 정의한다.
2. 그 방법 안에서 우리는 두번 돌아온다.
3. 그 후에, 우리는 6의 인수를 가진 우리의 새로운 이중 방법을 부르고 12의 결과를 결과에 저장한다.
4. 그런 다음 출력을 14개로 늘리고 콘솔에 출력합니다.

1. 두 숫자를 인수로 사용하는 추가라는 새 메서드를 정의합니다.
메소드 내에 해당 숫자의 합계를 반환합니다.

def add(a, b)
  return c = a + b
end

print add(3, 5)
>> 8

1-8. Practice Makes Perfect
방법을 엉망으로 만들기 전까지는 당신은 마스터 메서드 메이커가 되지 않을 것이다. (그것을 3배 빨리 말하세요.)
def by_five?(n)
return n % 5 == 0
end
위의 예는 방법을 정의하는 방법을 상기시키는 것입니다.
1. 단일 문자열 매개 변수를 사용하여 이름을 지정하고 해당 문자열을 반환하는 녹색 문자열 방법을 정의합니다.
반드시 return 을 사용하고 인쇄물이나 인쇄물을 사용하지 마십시오.
2. a를 by_3으로 정의하시겠습니까? 단일 정수 매개 변수, 숫자를 사용하고 이 숫자가 3으로 균등하게 구분되면 true를 반환하고 그렇지 않으면 false를 반환하는 방법입니다.

def greeter(name)
  return "Hello, #{name}!" #.to_s 사용도 괜찮지 않나?
end

def by_three?(number)
  if number % 3 == 0
    return true
  else
    return false
  end
end

1-9. Blocks Are Like Nameless Methods (블록은 이름 없는 방법(메서드)과 같다.)
사용자가 작업한 대부분의 방법은 사용자 또는 다른 사용자가 지정한 이름을 정의합니다(예:[array].sort(), "string".downcase(),등). 블록을 이름이 없는 메서드를 만드는 방법으로 생각할 수 있습니다. (이는 JavaScript의 익명 기능이나 Python의 Lambdas와 유사합니다.)
블록은 키워드를 사용하여 정의할 수 있습니다.
편집자의 예를 보세요. 낯이 익으세요? 코드를 실행하여 블록이 해당 코드를 실행하는지 확인합니다.
# 반복문 do와 .each에서 본 구문 모양 같다.

1.times do
  puts "I'm a code block!"
end

1.times { puts "As am I!" }
>> I'm a code block!
>> As am I!

1-10. How Blocks Differ from Methods (블록과 메서드 차이)
그러나 블록과 방법에는 약간의 차이가 있다.
편집기에서 코드를 확인합니다. 대문자로 쓰는 방법은 단어를 대문자로 바꾸고, 우리는 계속해서 이름으로 대문자로 쓰는 방법을 사용할 수 있다. 우리는 우리가 좋아하는 어떤 문자열을 우리의 마음의 내용에 이용할 수 있습니다.
하지만, 우리가 정의하는(각각을 따르는)블록은 우리가 반복하는 배열의 맥락에서 단 한번만 불릴 것입니다. 그것은 각각의 일을 할 만큼 충분히 길어 보이고, 그리고 나서 밤이 되면 사라진다.
이해했어? 방법과 블록의 마법적인 결합을 보려면 코드를 실행하십시오.

# 단어를 대문자로 쓰는 방법
def capitalize(string)
  puts "#{string[0].upcase}#{string[1..-1]}"
end

capitalize("ryan") # prints "Ryan"
capitalize("jane") # prints "Jane"

# 배열의 각 문자열을 대문자로 표시하는 블록
["ryan", "jane"].each {|string| puts "#{string[0].upcase}#{string[1..-1]}"} # prints "Ryan", then "Jane"

>> Ryan
>> Jane
>> Ryan
>> Jane

1-11. Using Code Blocks
메소드가 블록을 매개 변수로 사용할 수 있습니다. 그것이 바로 그 점입니다. 각각은 지금까지 계속 해왔습니다. 매개 변수로서 블록을 가져다가 그것으로 무언가를 하는 것입니다. 우리가 선택적 괄호를 사용하지 않았기 때문에 너는 알아차리지 못 했다. 우리는 교활하다.
메소드에 블록을 전달하는 것은 메서드에서 특정 작업을 추상화하고 메서드를 호출할 때 해당 작업을 정의하는 좋은 방법입니다. 추상화는 컴퓨터 공학에서 중요한 아이디어입니다. 여러분은 이것을 "단순한 무언가를 만드는 것"이라고 생각할 수 있습니다. 만약 여러분이 사냥을 하고 싶다면, "하우스"라고 말하는 것처럼 블록을 사용하여 원하는 작업(예:각각)을 정의하면 구성 요소 목록 작성이 간소화됩니다.

현재, 두번째입니다. 각각 다섯번씩 인쇄됩니다(어레이의 각 항목에 대해 5번 인쇄되고 5개 항목이 있기 때문에). 블록을 수정하여 배열의 각 항목을 5배로 인쇄합니다.
# 사람이 어렵게 생각하면 안된다. 눈 앞에 쉽게 풀라고 답을 적어 놨는데 어렵게 생각하면 돌아간다. 덧셈을 고등 방식으로 풀려하 는건 어리석을 짓!
[1, 2, 3, 4, 5].each { |i| puts i }
[1, 2, 3, 4, 5].each { |i| puts 5*i }
>> 1
>> 2
>> 3
>> 4
>> 5
>> 5
>> 10
>> 15
>> 20
>> 25

1-12. Introduction to Sorting
배열을 정렬하는 것은 컴퓨터 과학에서 매우 흔한 문제이며, 그러한 이유로 잘 연구되고 있다. 단계별로 잘 정의된 여러 알고리즘이 있으며, 이를 통해 각 알고리즘의 장단점도 확인할 수 있습니다.
알고리즘을 정렬하는 것은 이론적인 훈련으로써 컴퓨터 과학에 대한 좋은 소개가 될 수 있지만, 지금은 루비의 내장된 분류 라이브러리를 사용하는 방법에 초점을 맞출 것입니다.

1. .sort! 정렬을 사용하세요! my_array의 값을 정렬하는 방법입니다. 마법이죠?
콘솔에 my_array를 표시합니다.
.sort는 my_array의 복사본을 정렬하는 반면 .sort!는 정렬합니다 는 my_array (즉, 원래 어레이를 삭제하고 정렬된 버전으로 대체)을 정렬합니다.

my_array = [3, 4, 8, 7, 1, 6, 5, 9, 2]

print my_array.sort!
>> [1, 2, 3, 4, 5, 6, 7, 8, 9]

1-13. Foundations
책 다섯권을 나눠 드리고 제목별로 정렬해 달라고 한다면 어떻게 하시겠어요?
대부분의 분류 알고리즘은 우리가 배열에 있는 두개의 항목을 비교하고 어떤 것이 먼저 와야 하는지 결정하는 것을 포함하는 항목들의 배열을 분류한다고 가정한다.
예를 들어, 만약 우리가 알파벳에서 제목이 가장 먼저 나오는 책을 항상 고른다면, 우리는 분류 전략을 고안할 수 있을 것이다. 이러한 "전략"은 앞의 예제에서 언급한 정렬 알고리즘입니다. 우리가 할 일은 목록에 있는 두개의 항목을 비교하고 루비가 어떤 전략을 사용할지 결정하는 것입니다.

1. 책 목록을 알파벳 순으로 정렬하기 위해 어떤 루비 방법으로 책을 찾을 수 있을까요? 편집자가 해 보세요.
books = ["Charlie and the Chocolate Factory", "War and Peace", "Utopia", "A Brief History of Time", "A Wrinkle in Time"]

print books.sort!
>> ["A Brief History of Time", "A Wrinkle in Time", "Charlie and the Chocolate Factory", "Utopia", "War and Peace"]

1-14. The Combined Comparison Operator
우리는 또한 두 루비 객체를 비교하기 위해 결합 비교 연산자라는 새로운 연산자를 사용할 수 있습니다. 조합된 비교 연산자는 다음과 같습니다. <=> 첫번째 피연산자(비교할 항목)가 두번째 피연산자와 같은 경우 0, 첫번째 피연산자가 두번째 피연산자보다 큰 경우 1, 첫번째 피연산자가 두번째 피연산자보다 작은 경우 -1

정렬 방법으로 전달되는 블록은 1,0또는-1중 하나를 반환해야 합니다. 첫번째 블록 매개 변수가 두번째 블록보다 먼저 와야 하는 경우-1, 반대로 가중치가 같은 경우에는 1이 다른 값보다 앞에 있지 않음을 의미하는 경우 0을 반환해야 합니다.

1. 조합된 비교 연산자를 사용하여 book_1과 bok_2를 비교합니다(순서대로). 코드를 실행하기 전에 결과에 대해 생각해 보십시오.

book_1 = "A Wrinkle in Time"

book_2 = "A Brief History of Time"

print book_1 <=> book_2
>> 1

1-15. Getting Technical
책을 제목별로 정렬하고 Z-A또는 내림차순으로 정렬하려면 어떻게 해야 합니까? 루비의 분류 법은 A–Z또는 오름차순으로만 사용할 수 있는 것으로 보입니다.
정렬 방법은 기본적으로 오름차순으로 정렬하는 것으로 가정하지만 두 항목을 비교하는 방법을 지정하는 프로그래머(프로그래머)의 선택적 인수로 블록을 사용합니다.

1. 8번 줄에서 책을 내림차순으로 정렬하십시오. 4행의 오름차순 정렬 예를 참고하십시오.
콘솔에 결과를 표시합니다.

조합된 비교 연산자를 사용할 필요는 없습니다. 이 코드는 다음과 같은 경우에도 작동합니다.
books.sort do |first, second|
  if first < second # first book before second alphabetically
  -1
  elsif first > second # first after second
  1
else # first and second are the same
  0
end
end

books = ["Charlie and the Chocolate Factory", "War and Peace", "Utopia", "A Brief History of Time", "A Wrinkle in Time"]
# 오름차순
books.sort! { |firstBook, secondBook| firstBook <=> secondBook }
puts books
# 내림차순
books.sort! { |firstBook, secondBook| secondBook <=> firstBook }
puts books
>> ["A Brief History of Time", "A Wrinkle in Time", "Charlie and the Chocolate Factory", "Utopia", "War and Peace"] ["War and Peace", "Utopia", "Charlie and the Chocolate Factory", "A Wrinkle in Time", "A Brief History of Time"]

# 간단하게 생각해서 {} 안에서 첫번째 두번째가 있는데 첫번째는 변수 선언 그대로 가니 오름차순이고 두번째는 결합 비교 연산자에 서로 바꿔서 했으니 오름차순이 바껴서 내림차순이 된 것 같다.

1-16. Basic Methods
기본 루비를 만드는 방법에 대해 간단히 복습해 보겠습니다.
def double(n)
  return n * 2
end
위의 예는 구문 주의 사항에 불과합니다.
1."루비에 오신 것을 환영합니다!"라고 적힌 방법을 만들고 난 후에 전화 주세요.

def welcome
  puts "Welcome to Ruby!"
end

welcome
>> Welcome to Ruby!

1-17. Methods With Arguments
좋아! 이제 우리의 방법을 좀 더 복잡하게 만들어 봅시다.
1. 환영 방법 정의를 변경합니다. 이름이라는 단일 문자열을 추가합니다.
puts문을 제거하고"Hello,#{name}"(으)로 바꿉니다.

def welcome(name)
  return "Hello, #{name}"
end

print welcome("happy")
>> Hello, happy

1-18. Blocks
블록에 대해 배웠던 것을 다시 살펴봅시다.
numbers = [5, 2, 8]
sum = 0
numbers.each do |n|
  sum += n
end
puts sum
위의 예는 구문에 대한 주의 사항입니다. 우리는 숫자 목록의 합계를 계산한다.
1. 각 항목을 자체적으로 제곱 하고 결과를 콘솔에 저장하는 다음 블록을 추가합니다.

my_array = [1, 2, 3, 4, 5]

my_array.each do |num|
  puts num * num
end
>> 1
>> 4
>> 9
>> 16
>> 25

1-19. Sorting
마지막으로, 우리가 분류에 대해 배웠던 것을 복습해 봅시다.
books.sort! do |firstBook, secondBook|
  firstBook <=> secondBook
end
위의 예는 우리가 알파벳 순으로 정렬한 방법을 기억하라.
1. 사용하세요. 정렬하세요! 과일 배열을 내림차순(즉, 역순)으로 정렬합니다. 결합된 비교 연산자(위 예와 같음)또는 가능한 경우 if, elsif, else 문을 사용할 수 있습니다.

fruits = ["orange", "apple", "banana", "pear", "grapes"]

fruits.sort! { |first, second| second <=> first }

print fruits
>> ["pear", "orange", "grapes", "banana", "apple"]

2. Ordering Your Library

이 프로젝트에서는 많은 양의 데이터를 오름차순 또는 내림차순으로 정렬할 수 있는 단일 루비 방식을 설계합니다.

2-1. What You'll Be Building (무엇이 될 것인가)
우리는 지난 수업에서 그것을 알아챘다. 알파벳 역순으로 정렬을 처리하는 기본 제공 방법이 없습니다. 이제 루비 기술을 직접 쓸 수 있게 되었으니 고칠 수 있겠네요!
1. 편집자의 코드는 가족처럼 보여야 합니다. 새로운 아이디어가 하나밖에 없습니다. 준비가 되었으면 실행을 클릭하여 코드를 실행하고 고유한 방법을 작성합니다.

def alphabetize(arr, rev=false)
  if rev
    arr.sort { |item1, item2| item2 <=> item1 }
  else
    arr.sort { |item1, item2| item1 <=> item2 }
  end
end

books = ["Heart of Darkness", "Code Complete", "The Lorax", "The Prophet", "Absalom, Absalom!"]

puts "A-Z: #{alphabetize(books)}"
puts "Z-A: #{alphabetize(books, true)}"

>> A-Z: ["Absalom, Absalom!", "Code Complete", "Heart of Darkness", "The Lorax", "The Prophet"]
>>Z-A: ["The Prophet", "The Lorax", "Heart of Darkness", "Code Complete", "Absalom, Absalom!"]

2-2. Defining Our Method (방법을 정의)
우선, 우리는 우리의 알파벳 표기법을 정의해야 할 것이다.
1. 편집자의 오른쪽에 정의 알파벳이 있습니다. 그것은 아직 어떤 논쟁도 필요로 하지 않으며, 방법의 구성에 어떤 것도 필요하지 않다.
Hint 잊지 마세요:
def method_name(optional parameters)
  # Do something
end

def alphabetize()

end

2-3. Default Parameters (기본 매개 변수)
연습 1에서 보았던 새로운 코드를 살펴보겠습니다.
def alphabetize(arr, rev=false)
첫번째 부분은 의미를 부여한다. 우리는 방법을 정의하고, 알파벳을 표기하고 있다. 첫번째 매개 변수는 어레이라고 추측할 수 있지만, rev=false 비즈니스란 무엇입니까?
이것이 루비에게 말하는 것은 사용자가 두개의 인수를 입력하지 않으면 기본적으로 false로 변하는 두번째 매개 변수인 rev(reverse)를 가지고 있다는 것이다. 당신은 연습 1에서 우리가 처음으로 알파벳을 부른 것이
alphabetize(books)
루비는 rev를 보지 못 해서 기본 값인 false를 주었습니다.
1. 전달할 배열을 나타내는 Arr매개 변수와 기본적으로 false로 설정된 부울 매개 변수를 사용하여 영숫자 지정 방법을 업데이트합니다.

def alphabetize(arr, rev=false)

end

2-4. Sorting
좋았어! 이제 우리의 방법에 약간의 논리를 추가해 봅시다.
numbers = [5, 1, 3, 8]
numbers.sort!
puts numbers
1. 위의 예에서는 숫자라는 새 어레이를 생성합니다.
2. 그리고 나서, 우리는 배열을 분류합니다.
3. 마지막으로, 정렬된 배열을 1,3,5,8개 인쇄합니다.
루비에는 두가지의 분류 방법이 있어요. 첫번째 방법인 .sort는 원래 어레이는 그대로 두고 정렬된 어레이만 반환합니다. 두번째 방법인. sort!는 실제 어레이를 수정합니다.

1. 방법에 따라, 호출할 줄을 추가합니다. 정렬! 수목에 이 행이 메서드의 마지막 행이므로 정렬된 배열이 반환됩니다.
이제 시험해 보세요! 방법을 마친 후 위 예제와 같은 몇개의 숫자가 포함된 숫자라는 새 배열을 만듭니다.
숫자 배열과 함께 알파벳 순으로 된 방법을 매개 변수로 불러서 콘솔에 넣으세요.

def alphabetize(arr, rev=false)
  arr.sort!

end

numbers = [9, 20, 6, 1, 7]

puts alphabetize(numbers)
>> [1, 6, 7, 9, 20]

2-5. Sorting With Control Flow (제어 흐름으로 정렬)
좋았어! 이제 우리는 우리의 방법에 올바른 논리를 추가할 필요가 있다.
numbers = [1, 2, 3, 4, 5]
numbers.reverse!
puts numbers
1. 위의 예제에서는 숫자라고 하는 배열을 생성합니다.
2. 그리고 나서, 우리는 배열을 뒤집었습니다. 예를 들면...
느낌표는 실제 배열을 수정하는 것을 의미합니다.
3. 마지막으로 5,4,3,2,1을 인쇄합니다.

1. 당신의 .sort! 부르고, 필요한 경우를 추가합니다. rev가 true이면 reverse를 호출합니다! arr에, 그렇지 않으면(else) arr를 반환합니다.
당신의 작업이 실제로 이루어지는 것을 볼 수 있도록 당신의 숫자 체계와 인용문을 유지하세요!

def alphabetize(arr, rev=false)
  arr.sort!
  if rev == true
    arr.reverse!
  else
    return arr
  end
end

numbers = [9, 20, 6, 1, 7]

puts alphabetize(numbers)
>> [1, 6, 7, 9, 20]

2-7. You Did It! (For Real This Time)
잘 했다! 이제 루비가 가지고 있지도 않은 기능을 추가하는 독자적인 방법이 생겼습니다.
고유한 방법을 만드는 것은 프로그램을 다시 입력하지 않고도 코드를 반복해서 사용할 수 있으며 프로그램을 추상화하거나 단순화하는 데도 유용합니다. 일단 알파벳 순(alphabetize)으로 쓰면 그것이 어떻게 작동하는지 생각할 필요가 없다. 필요할 때 부르기만 하면 된다.
Run을 클릭하여 이 프로젝트를 마치고 RubyMethodMastery로 이동합니다.

6. Hashes and Symbols

1. Hashes and Symbols

보시다시피 해시는 루비의 중요한 데이터 구조입니다. 여기서는 베이컨에서 해시 달걀:기호에 대해 알아보겠습니다!
1-1. The Story So Far (지금까지 이야기)
해시는 키-값 쌍의 수집이며, 고유 키가 일부 값과 연관되어 있음을 기억하십시오. 예:
breakfast = {
"bacon" => "tasty",
"eggs" => "tasty",
"oatmeal" => "healthy",
"OJ" => "juicy"
}
키는 고유해야 하지만 값이 반복될 수 있습니다. 따라서" 맛있는 "이라는 값을 둘 이상의 키로 공유할 수 있습니다.)
해시를 생성할 수 있는 방법은 여러가지가 있지만
1. 해시 리터럴 표기법
new_hash = { "one" => 1 }
2. 해시 생성자 표기법
new_hash = Hash.new

1. 원하는 방법으로 my_hash라는 해시를 만듭니다.
my_hash = Hash.new

1-2. Iterating Over Hashes
또한 각 방법을 사용하여 해시를 반복할 수도 있습니다. 예를 들어, 우리는 할 수 있다
my_hash.each do |key, value|
  puts my_hash[ ]
end
이렇게 하면 각각 고유한 my_hash의 키와 값 목록이 인쇄됩니다.

1. matz 해시를 검토하고 각 값을 배치를 사용하여 콘솔에 인쇄합니다.

matz = { "First name" => "Yukihiro",
  "Last name" => "Matsumoto",
  "Age" => 47,
  "Nationality" => "Japanese",
  "Nickname" => "Matz"
}

matz.each do |key, value|
  puts "#{value}"

end
>> Yukihiro
>> Matsumoto
>> 47
>> Japanese
>> Matz

1-3. Nil: a Formal Introduction (공식 소개)
하지만 존재하지 않는 키에 액세스 하려고 하면 어떻게 됩니까?
많은 언어로, 당신은 어떤 종류의 오류를 얻을 것이다. 루비에서는 그렇지 않아요. 대신에 특별한 가치는 0이 될 겁니다.
거짓과 함께, 루비에서는 0이 두개의 실제가 아닌 값 중 하나이다. ( 다른 모든 오브젝트는 "truthy"로 간주되며, if 2를 입력하거나"if bacon"를 입력할 경우 문을 실행할 때 코드가 표시됩니다.)
거짓(false)과 아무것도 같지 않다는 것을 깨닫는 것이 중요합니다. 거짓(false)은 "사실이 아니다"라는 뜻이고, 루비는 "아무것도 아니다"라고 말하는 법이 없습니다.

1. 존재하지 않는 생명체의 열쇠에 접근해 보세요.
creatures = { "weasels" => 0,
  "puppies" => 6,
  "platypuses" => 3,
  "canaries" => 1,
  "Heffalumps" => 7,
  "Tiggers" => 1
}

puts creatures["cat"]
>> 출력 결과 없음. 실행은 되고 오류는 없음.

1-4. Setting Your Own Default (기본 값 설정)
하지만 기본 값으로 0에 만족할 필요는 없습니다. Hash.new구문을 사용하여 해시를 생성하는 경우 다음과 같이 기본 값을 지정할 수 있습니다.
my_hash = Hash.new("Trady Blix")
이제 my_hash에 존재하지 않는 키에 액세스 하려고 하면"TradyBlix"가 표시됩니다.
당신은 공식 루비 문서에서 항상 더 많은 친절함을 읽을 수 있습니다.

1. 그 사이에 no_nil_hash라는 해시를 만들고 0이외의 기본 값을 지정합니다.

no_nil_hash = Hash.new("kimchi") # kimchi 는 key 이다.

puts no_nil_hash["what the"]
>> kimchi

1-5. A Key of a Different Color (다른 색의 키)
우리는 확실히 루비 해시 키로 문자열을 사용할 수 있습니다. 루비에서는 항상 한가지 이상의 방법이 있습니다. 그러나, Rubyist의 접근법은 상징(symbols)을 사용하는 것이 될 것이다.

편집기에서 코드를 확인합니다. 콜론으로 시작하는 웃기게 생긴 변수들은 상징이다. 기호 런 다운을 보려면 다음 섹션에서 다음을 클릭합니다.

menagerie = { :foxes => 2,
  :giraffe => 1,
  :weezards => 17,
  :elves => 1,
  :canaries => 4,
  :ham => 1
}

1-6. What's a Symbol? (기호가 뭐죠?)
루비 기호는 일종의 이름이라고 생각하시면 됩니다. 기호는 문자열이 아닙니다.
"string" == :string # false
다른 구문의 위와 뒤에는 기호를 문자열과 다르게 만드는 주요 동작이 있습니다. 모든 문자열에 동일한 값이 있을 수 있지만 지정된 시간에 특정 기호의 복사본은 하나만 있습니다.

.object_id 메서드는 객체의 ID를 얻습니다. 이를 통해 두 객체가 동일한 객체인지 알 수 있습니다. 편집기에서 코드를 실행하여 두"문자열"이 실제로 다른 개체인지 확인하고,:기호는 두번 나열된 동일한 개체입니다.

# 문자열 값은 계속 변하지만 기호(symbol)의 값은 변하지 않는다.
puts "string".object_id
puts "string".object_id

puts :symbol.object_id
puts :symbol.object_id
>> 21736580
>> 21734660
>> 802268
>> 802268

1-7. Symbol Syntax (기호 구문)
기호는 항상 콜론(:)으로 시작합니다. 유효한 루비 변수 이름이어야 하므로 콜론 뒤의 첫번째 문자는 문자 또는 밑줄(_)이어야 합니다. 그 다음에는 문자, 숫자 및 밑줄을 조합할 수 있습니다.
기호 이름에 공백을 두지 마십시오. 공백을 입력하면 루비가 혼동됩니다.
:my symbol # Don't do this!
:my_symbol # Do this instead.

1. 모두 맞아요! 첫번째 기호를 만들 시간입니다. my_first_symbol이라는 일반적인 오래 된 변수를 만들고 원하는 올바른 기호와 동일하도록 설정하십시오!

my_first_symbol = :starjinx

Hint 이렇게 하면 됩니다.
my_first_symbol = :starmonkey

1-8. What are Symbols Used For? (기호는 무엇에 사용됩니까?)
루비에서는 기호가 여러곳에서 나타나지만, 주로 해시 키나 메서드 이름을 참조할 때 사용됩니다. (이후 단원에서 기호가 어떻게 방법을 참조할 수 있는지 알아보겠습니다.)
sounds = {
  :cat => "meow",
  :dog => "woof",
  :computer => 10010110,
}
기호를 사용하면 다음과 같은 몇가지 이유로 해시 키가 유용합니다.
1. 그것들은 불변한다. 즉, 그것들이 일단 만들어지면 그것들은 바뀔 수 없다는 것을 의미한다.
2. 지정된 시간에 하나의 기호만 존재하므로 메모리를 절약합니다.
3. 위의 두가지 이유 때문에 키를 돌리는 것이 키를 누르는 것보다 빠릅니다.

1. symbol_hash 해시에 _____ 빈 자리를 바꾸는 키를 두개 이상 추가합니다.
키는 모두 기호여야 합니다. 키와 연결된 값은 원하는 것이면 무엇이든 될 수 있습니다.

symbol_hash = {
  :one => 1,
  :two => 2,
  :three => 3,
}

1-9. Converting Between Symbols and Strings (기호와 문자열 변환)
문자열과 기호를 변환하는 것은 식은 죽 먹기입니다.
:sasquatch.to_s
# ==> "sasquatch"

"sasquatch".to_sym
# ==> :sasquatch
.to_s및. to_sym메서드를 찾고 있습니다!
1. 나중에 해시 키로 사용할 문자열이 여러개 있지만 기호로 사용하는 것이 좋습니다.
1. 새 변수, 기호를 생성하고 빈 배열을 저장합니다.
2. 문자열 배열을 반복하려면 .each를 사용합니다.
3. 문자열의 각 s에 대해.to_sym을 사용하여 s를 기호로 변환하고를 사용합니다.를 눌러 새 기호를 기호에 추가합니다.
4. 기호 배열을 인쇄합니다.
각 및...푸시에 대한 주의 사항을 확인하십시오.

Hint
각각.each를 사용하여 배열을 순환할 수 있습니다. .push 방법을 사용하면 배열 끝에 요소를 추가할 수 있습니다!
numbers = [1, 2, 3, 4, 5, 6]
evens = []
numbers.each do |number|
if number % 2 == 0
evens.push(number)
end
end
print evens # prints '[2, 4, 6]'

strings = ["HTML", "CSS", "JavaScript", "Python", "Ruby"]
symbols = []

strings.each do |s|
symbols.push(s.to_sym)
end
print symbols
>> [:HTML, :CSS, :JavaScript, :Python, :Ruby]
# symbols 라는 빈 배열을 만들고 strings를 .each를 사용하여 symbols에 기호로 변환시켜 넣으라는 얘기.

1-10. Many Paths to the Same Summit (많은 경로로 가는 정상)
루비에서 무언가를 성취하는 데는 항상 많은 방법이 있다는 것을 기억하세요. 문자열을 기호로 변환하는 것도 다르지 않습니다!
.to_sym 사용 외에도. intern 을 사용하실 수 있습니다. 이렇게 하면 문자열이 기호로 초기화되고. to_sym처럼 작동합니다.
"hello".intern
# ==> :hello
다른 사용자의 코드를 볼 때 문자열을 기호로 변환할 때. to_sym또는. intern(또는 둘 다!)가 표시될 수 있습니다.
1... 마지막 연습에서 .to_sym 대신 .intern를 사용하도록 코드를 업데이트합니다.
strings = ["HTML", "CSS", "JavaScript", "Python", "Ruby"]
symbols = []

strings.each do |s|
symbols.push(s.intern)
end
print symbols
>> [:HTML, :CSS, :JavaScript, :Python, :Ruby]

1-11. All Aboard the Hash Rocket! (모두들 해시 로켓!)
지금까지 보신 해시 구문(키와 값 사이에 => 기호가 있는 해시 구문)은 해시 로켓 스타일이라고도 합니다.
numbers = {
  :one => 1,
  :two => "two",
  :three => 3,
}
이것은 => 이 작은 로켓처럼 생겼기 때문이다.
기호를 키로 사용하여 처음부터 해시를 작성해 보겠습니다.

1. 기호가 있는 동영상이라는 해시를 키로, 문자열을 값으로 만듭니다.
해시 안에 키 2값 쌍 2개를 추가합니다.
열쇠는 영화의 이름이어야 한다.
값은 빠른 설명 또는 검토이어야 합니다.
시작할 수 있는 예를 들어 보려면 힌트를 확인하십시오!

movies = {
  :jinx => "hahaxxx",
  :Darkin => "kill",
}

1-12. The Hash Rocket Has Landed (해시 로켓이 장착됨)
그러나 루비 1.9에서는 해시 구문이 변경되었습니다. 네가 편안해 지고 있을 때!
다행히도 변경된 구문은 이전 해시 로켓 구문보다 입력하기가 더 쉽고 JavaScript개체 또는 Python사전에 익숙한 경우 매우 익숙하게 보일 것입니다.
new_hash = {
one: 1,
two: 2,
three: 3
}
두가지 변경 사항은 다음과 같습니다.
1. 기호의 처음이 아니라 끝에 콜론을 찍습니다.
2. 너는 더 이상 해시 로켓(=>) 이 필요 없어.

비록 이 열쇠들이 처음이 아닌 끝에 콜론을 가지고 있지만, 그것들은 여전히 상징입니다!

puts new_hash # => { :one => 1, :two => 2, :three => 3 }
지금부터 예제를 제공하거나 기본 코드를 제공할 때 1.9해시 구문을 사용하겠습니다. 여러분은 다른 사람들의 코드를 읽을 때 해시 로켓 스타일에 친숙해 지고 싶을 거예요.

1. 이전 해시 로켓 구문 대신 새로운 1.9해시 구문을 사용하도록 이전 연습에서 해시를 업데이트합니다.

movies = {
  jinx: "hahaxxx",
  Darkin: "kill"
}

puts movies
>> {:jinx=>"hahaxxx", :Darkin=>"kill"} # 출력은 이전 구문 형식으로 출력 된다. 보기 좋아 보여서?

1-13. Dare to Compare (타 제품과 비교가 안됨)
해시 조회는 문자열 키보다 기호 키를 사용할 때 더 빠릅니다. 자, 우리가 증명해 보자!
편집기의 코드는 새로운 구문을 사용하므로 아직은 모든 것을 이해하는 것에 대해 걱정하지 마세요. 문자열과 알파벳 문자의 위치 ( "a" with 1, "b" with 2...)를 쌍으로 하는 문자와 기호(:a with 1, :b with 2...)를 사용하는 문자 해시를 구성합니다. 어떤 프로세스가 더 빨리 실행되는지 알아보기 위해 문자"r"을 100,000번 검색할 것입니다!
여러분이 보실 수 있는 숫자들은 단지 몇분의 일밖에 안된다는 것을 기억하는 것이 좋습니다. 그리고 우리는 해시 룩을 각각 100,000번씩 했습니다. 이 경우에 상징을 사용하는 것이 성능 향상에 큰 도움이 되지는 않지만, 분명 있습니다!
숫자는 거짓말이 아니다. 직접 확인하려면 실행을 클릭하십시오!

require 'benchmark'

string_AZ = Hash[("a".."z").to_a.zip((1..26).to_a)]
symbol_AZ = Hash[(:a..:z).to_a.zip((1..26).to_a)]

string_time = Benchmark.realtime do
  100_000.times { string_AZ["r"] }
end

symbol_time = Benchmark.realtime do
  100_000.times { symbol_AZ[:r] }
end

puts "String time: #{string_time} seconds."
puts "Symbol time: #{symbol_time} seconds."
# 2번 출력한 결과 미세한 차이더라도 확실히 차이가 있다. 시스템의 효율성을 위해.
>> String time: 0.014318784698843956 seconds.
>> Symbol time: 0.008909519761800766 seconds.

>> String time: 0.01439235545694828 seconds.
>> Symbol time: 0.009139424189925194 seconds.

1-14. Becoming More Selective (더욱 선택적이 되기)
연결된 키를 지정하여 해시에서 특정 값을 가져오는 방법을 알고 있지만 특정 조건을 충족하는 값의 해시를 필터링 하려면 어떻게 해야 합니까? 이를 위해 사용할 수 있습니다.

grades = { alice: 100,
bob: 92,
chris: 95,
dave: 97
}
grades.select { |name, grade| grade < 97 }   # 조건 걸기
# ==> { :bob => 92, :chris => 95 }
grades.select { |k, v| k == :alice }     # 특정 키 찾기.
# ==> { :alice => 100 }

1. 위의 예제에서는 기호를 정수로 매핑 하는 등급 해시를 먼저 생성합니다.
2. 그런 다음. Select메서드를 호출하고 코드 블록을 전달합니다. 이 블록에는 일치 키/값 쌍을 선택하기 위한 표현식이 포함되어 있습니다. 이것은 밥과 체리를 포함한 해시를 반환합니다.
3. 마지막으로. Select메서드를 다시 호출합니다. 우리 블록은 열쇠만 찾아요:앨리스. 키/값 쌍을 가져오는 데는 비효율적인 방법이지만 이를 보여 줍니다.를 선택하면 해시가 수정되지 않습니다.

(여기서는 "name"또는"k"를 사용하여 키를 나타내고,"grade"또는"v"를 사용하여 값을 나타내지만, 블록에서는 원하는 대로 변수를 호출할 수 있습니다.)

1. 새로운 변수인 good_movies를 만들고 호출 결과와 동일하게 설정합니다. movie_ratings를 선택하고 등급이 3보다 큰 동영상만 선택합니다.

movie_ratings = {
  memento: 3,
  primer: 3.5,
  the_matrix: 5,
  truman_show: 4,
  red_dawn: 1.5,
  skyfall: 4,
  alex_cross: 2,
  uhf: 1,
  lion_king: 3.5
}

good_movies = movie_ratings.select {|movie, rating| rating > 3} #선언과 동시에 선택적 조건을 달았다.

puts good_movies
>> {:primer=>3.5, :the_matrix=>5, :truman_show=>4, :skyfall=>4, :lion_king=>3.5}

1-15. More Methods, Mor Solutions (더 많은 방법, 더 많은 해결책)
잘했어!
키/값 쌍과 관련된 키 또는 값만 원하는 경우가 많은데, 블록에 둘 다 입력하고 하나만 사용하는 것은 다소 고통스러운 일입니다. 키만 사용하거나 값만 반복할 수 있습니까?
루비입니다. 물론 우린 할수 있어요.
루비에는 두가지 해시 방법인 .each_key와 .each_value가 포함되어 있으며, 이는 예상하는 바와 같습니다.
my_hash = { one: 1, two: 2, three: 3 }
my_hash.each_key { |k| print k, " " }
# ==> one two three
my_hash.each_value { |v| print v, " " }
# ==> 1 2 3
루비 해시와 기호에 대한 연구는 이 방법들을 시험해 보면서 마치도록 하겠습니다.
1. 계속해서 저희 영화 제목만 출력하세요.

movie_ratings = {
  memento: 3,
  primer: 3.5,
  the_matrix: 3,
  truman_show: 4,
  red_dawn: 1.5,
  skyfall: 4,
  alex_cross: 2,
  uhf: 1,
  lion_king: 3.5
}

movie_ratings.each_key {|k| puts k}
>> memento
>> primer
>> the_matrix
>> truman_show
>> red_dawn
>> skyfall
>> alex_cross
>> uhf
>> lion_king

2. A Night at the Movies

이 프로젝트에서는 루비 해시 및 기호에 대한 지식을 활용하여 동영상 등급을 표시, 추가, 업데이트 및 제거하는 프로그램을 구성할 것입니다!

2-1. What You'll Be Building (무엇이 될 것인가)
디지털 라이프의 모든 부분을 기록하는 것은 고통스러운 일이다. 하지만 루비를 쓸 줄 알게 되었으니 이제 여러분 스스로 일을 쉽게 할 수 있겠군요! 먼저 영화 등급을 추적할 프로그램을 만드는 것으로 시작하겠습니다.

해시에 새 동영상 추가, 기존 동영상의 등급 업데이트, 해시에 이미 있는 동영상 및 등급 표시 또는 해시에서 동영상 삭제 등 네가지 작업 중 하나를 수행합니다. 이러한 네가지 명령 중 하나가 수신되지 않으면 프로그램에서 일부 오류 메시지를 출력합니다.

이 프로젝트는 여러분에게 창의성을 위한 많은 공간을 제공할 것입니다. 하지만 우리는 때때로 엄격한 지시를 따르지 않는 것이 약간 혼란스러울 수 있다는 것을 알고 있습니다. 만약 여러분이 상실감을 느낀다면, 주저하지 말고 여러분을 도와 주기 위해 이 연습에서 예시 코드를 확인하세요!

movies = {
  Memento: 3,
  Primer: 4,
  Ishtar: 1
}

puts "What would you like to do?"
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp.downcase
case choice
when 'add'
  puts "What movie do you want to add?"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "What's the rating? (Type a number 0 to 4.)"
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
    puts "#{title} has been added with a rating of #{rating}."
  else
    puts "That movie already exists! Its rating is #{movies[title.to_sym]}."
  end
when 'update'
  puts "What movie do you want to update?"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "Movie not found!"
  else
    puts "What's the new rating? (Type a number 0 to 4.)"
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
    puts "#{title} has been updated with new rating of #{rating}."
  end
when 'display'
  movies.each do |movie, rating|
    puts "#{movie}: #{rating}"
  end
when 'delete'
  puts "What movie do you want to delete?"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "Movie not found!"
  else
    movies.delete(title.to_sym)
    puts "#{title} has been removed."
  end
else
  puts "Sorry, I didn't understand you."
end

#코드가 길다고 어렵게 생각할 필요 없다. 자세히 조금조금 읽어 보면 이해가 된다. 전부 이해가 안가더라도 이렇게 이렇게 작동하는구나 정도만 알아도 나중에 쌓이면 도움이 된다.

2-2. Setting Up (설정)
먼저 영화와 등급을 저장할 해시를 만들고 사용자에게 입력 메시지를 표시하여 동영상 및 등급 쌍을 해시에 저장하겠습니다.

favorite_foods = {
'vegetable' => 'broccoli'
}
puts "Do you like coding in Ruby?"
answer = gets.chomp

1. 해시는 숫자로만 정렬할 수 있는 배열이 아니라 지정 가능한 키로 데이터를 저장하는 방법입니다. 위의{}과( 와)같이 생성됩니다.
2. puts 에서는 명령줄에 질문이 있습니다. 루비 코딩을 좋아하는지 물어 보겠습니다.
3. 사용자 입력을 얻기 위해서는 gets.chomp를 사용해야 한다.

시작합시다.
1. 해시를 만들고 변수가 있는 동영상에 할당합니다. 가장 좋아하는 영화를 가치에 대한 등급을 매기는 열쇠로 넣으세요.
2. 사용자에게 입력을 입력하도록 프롬프트하고 선택이라는 변수에 입력을 저장합니다.

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

2-3. The Case Statement (사례 설명)
잘 했어요! 이제 사용자가 입력하는 내용에 따라 수행할 조치를 결정하는 사례 설명이라는 프로그램의 주요 부분을 생성하겠습니다.
만약 다른 것들이 강력하다면, 우리는 우리가 점검해야 할 많은 조건들이 있다면, 가정과 추측들 속에 수렁에 빠질 수 있다. 감사하게도 루비는 우리에게 사례 진술이라는 간단한 대안을 제시해 주었습니다. 구문은 다음과 같습니다.
case language
when "JS"
puts "Websites!"
when "Python"
puts "Science!"
when "Ruby"
puts "Web apps!"
else
puts "I don't know!"
end
또 다른 방법은 사례에 대한 문장(이 경우 언어의 가치)과 일치하는 문장이 하나도 없는 경우에 적용됩니다.
1. 기존 코드를 확인하여 조건이 다음과 같은 경우 선택 변수에 대한 사례 문을 만듭니다.
1."추가"시"추가됨!"을 입력하십시오.
2. "업데이트"시"업데이트!"를 입력하십시오.
3. "표시"시에는 "동영상!"을 넣으십시오.
4. "삭제"시"삭제됨!"을 입력하십시오.
5. 그렇지 않으면(예:),"오류!"라고 써 주세요.

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
  when "add"
   puts "Added!"
  when "update"
   puts "Updated!"
  when "display"
   puts "Movies!"
  when "delete"
   puts "Deleted!"
else
  puts "Error!"
end

# 문자를 입력했을 시 case when 문에 의해 입력 조건을 비교하여 출력한다.
>> add 입력시
>> Added!
>> what 입력시
>> Error!

2-4. Prompting: Redux!
좋았어! 사건의 각 부분을 한번에 한 단계씩 작성해 봅시다. "add"분기부터 시작하겠습니다.
1."add"블록을 열때"Added!"문을 제거합니다.
대신 사용자에게 동영상 제목을 입력하도록 요청합니다. 결과를 제목이라는 새 변수에 저장합니다. (코드에 이미 이 작업을 수행하는 방법의 예가 나와 있습니다!)
그런 다음 사용자에게 동영상 등급을 묻습니다. 등급이라는 새 변수에 저장합니다.
movies 해시에 movie/rating쌍을 추가하고 쌍이 추가되었음을 나타내는 메시지를 추가합니다. (아직to_sym또는to_i를 사용할 필요가 없습니다!)
도움이 필요하면 힌트를 확인하세요!
입력창 만드는 법.
puts "Enter a number"
number = gets.chomp

키/값 쌍 해시에 추가하는 방법.
numbers = {}
numbers["one"] = 1
puts 3 + numbers["one"]
# prints out "4"

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
when "add"
  puts "movies name"
  title = gets.chomp
  puts "movies rating?"
  rating = gets.chomp
  movies[title] = rating
when "update"
  puts "Updated!"
when "display"
  puts "Movies!"
when "delete"
  puts "Deleted!"
else
  puts "Error!"
end

2-5. Not My Type (내 취향은 아니다)
완벽해! 우리 프로그램은 정말 잘 되어 가고 있어요.
여러분은 어떻게 하면 영화를 기호로, 등급을 정수로 만들고 싶은 해시에 사용자로부터 영화와 등급을 가져올지 궁금해 하셨을 것입니다. 루비 마법사 내장!
루비의 .to_sym방법은 문자열을 기호로 변환할 수 있으며,. i에서 문자열을 정수로 변환합니다.

1. 영화 제목이 해시에 기호로 저장되고 관련 등급이 정수로 저장되도록 제목의 .to_sym과 등급의 .to_i를 입력합니다.

원하신다면 .to_sym 대신 .intern을 사용하실 수도 있습니다.

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
when "add"
  puts "movies name"
  title = gets.chomp
  puts "movies rating?"
  rating = gets.chomp
  movies[title.to_sym] = rating.to_i   #여기다 .to_sym .to_i 만 추가해 줌.
when "update"
  puts "Updated!"
when "display"
  puts "Movies!"
when "delete"
  puts "Deleted!"
else
  puts "Error!"
end

2-6. Error! Error!
좋아! 우리는 우리 사건의 "추가"부분을 거의 끝냈다. 추가할 동영상이 이미 해시에 있는지 확인하기 위해 마지막으로 수행할 작업입니다.
이렇게 하기 위해 가능한 if/else 경우 문을 추가합니다.
1. if/else 문을 사례의 추가 분기에 추가합니다. 동영상이 아직 해시에 있지 않은 경우(즉,movies[title.to_sym]이 nil 이면
동영상/등급 쌍을 추가해야 합니다. 그렇지 않으면 동영상이 이미 존재하며 해시에 아무것도 추가하지 않아야 합니다.) 꼭 시험해 보세요!
Hint
아무것도? 호출된 객체가 0이면 메서드가 true를 반환하고 그렇지 않으면 false를 반환합니다.
nil_variable = nil
age = 26

nil_variable.nil? # true
age.nil? # false

movies = { # movies 에는 symbol로 동영상 등급인 값과 묶었다.
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp # 어떻게 추가할 건지 선택권을 주고 입력한 것을 choice 라는 새 변수에 담는다.

case choice # 입력한 값을 저장한 choice를 case when문으로 열어 알맞게 비교하여 넣는다.
when "add"
  puts "movies name"
  title = gets.chomp # add 에 영화 제목을 받을 수 있게 title이라는 변수에 담는다.
  if movies[title.to_sym].nil? # if 문으로 movies를 내가 입력한 값(title)과 비교하기 위해 .to_sym으로 변환시킨다.
    puts "movies rating?" .nil? 로 참이면 절대적이게 같지 않기 때문에 추가할 수 있게 영화 등급까지 rating 변수
    rating = gets.chomp 에 받게 하고 movies에 title을 symbol 값으로 저장받아 rating.to_i 로 값을 넣어둔다.
    movies[title.to_sym] = rating.to_i   (.to_i는 값을 정수버전으로 바꿔준다.)
  else
    puts "video already exists. #{movies[title.to_sym]}" #nil이 거짓이기 때문에 절대적이게 같다는 거다. 이 경우 영화가 이미 end   존재하기에 #{} 으로 movies에 값을 불러와 준다.
when "update"
  puts "Updated!"
when "display"
  puts "Movies!"
when "delete"
  puts "Deleted!"
else
  puts "Error!"
end

2-7. Update (갱신하다)
완벽해! 해시의 기존 동영상 업데이트를 처리하는 사례 설명의 다음 분기로 이동하겠습니다. ("추가"지점에서 수행한 작업과 매우 유사할 것입니다!)이 작업은 세가지 단계로 수행합니다.

1."업데이트"블록을 열때"업데이트됨!"설명문을 제거합니다.
사용자에게 동영상 제목을 입력하도록 요청합니다. 제목으로 저장하세요.
if the movies[title] is nil, 그러면 그 영화는 문제가 되지 않는다. 사용자에게 오류를 알리는 문자열을 입력하십시오.
그렇지 않으면 동영상 해시를 업데이트해야 합니다. 사용자에게 새 등급을 지정하도록 요청합니다. 동영상 등급을 새 값으로 설정합니다.
꼭 테스트해 보세요!

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
when "add"
  puts "What movie would you like to add? "
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "What rating does the movie have? "
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
  else
    puts "That movie already exists! Its rating is #{movies[title.to_sym]}."
  end
when "update"   #choice에서 update를 입력하면 when 조건으로 들어온다.
  puts "movies name"
  title = gets.chomp # 제목을 입력하게 하고 title 변수에 담는다.
  if movies[title.to_sym].nil? # 내가 입력한 값과 movies 가 참이면 절대적이게 같지 않기 때문에 입력 값이 다르다는 거다.
    puts "error" 에러 메시지 호출.
  else
    puts "Please specify a new video rating." # nil 조건이 거짓이면 절대적이게 같기 때문에 새로운 등급을 쓰도록 한다.
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i #rating movies 변수에 알맞은 제목을 찾게 하여 새로 입력한 rating 값을 갱신한다.
    puts "It was successfully changed => #{movies[title.to_sym]}"
  end
when "display"
  puts "Movies!"
when "delete"
  puts "Deleted!"
else
  puts "Error!"
end

2-8. Display (표시하다)
대단해! 이제 동영상 해시의 내용을 표시하는 작업을 처리하겠습니다. 이는 "추가"및"업데이트"분기와 약간 다를 것입니다.
1. 첫째, 사용자가 "표시"를 입력할 때"동영상!"을 제거한다.
다음으로, 해시를 사용하여 .each를 사용하고 각 movie/rating쌍을 배치합니다. 형식은 "#{Movie}:#{rating}. 테스트해야 합니다!
Hint
간격을 잘 두세요! 출력 형식은 다음과 같아야 합니다. #{Movie}:#{rating}, 이 경우 아래와 같은 결과가 발생합니다.
Memento: 3
Primer: 4
Ishtar: 1

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
when "add"
  puts "What movie would you like to add? "
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "What rating does the movie have? "
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
  else
    puts "That movie already exists! Its rating is #{movies[title.to_sym]}."
  end
when "update"
  puts "movies name"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "error"
  else
    puts "Please specify a new video rating."
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
    puts "It was successfully changed => #{movies[title.to_sym]}"
  end
when "display"
  movies.each {|movie, rating| puts "#{movie}: #{rating}"}
when "delete"
  puts "Deleted!"
else
  puts "Error!"
end

display 입력시
>> warcraft: 8
>> avengers: 7.2
>> ironman: 4.0

# puts를 앞에 써도 출력이 된다. 여기선 정답은 아니지만.
puts movies.each {|movie, rating| "#{movie}: #{rating}"}
{:warcraft=>8, :avengers=>7.2, :ironman=>4.0}

2-9. Delete
거의 다 왔어! 사용자가 해시에서 지정한 키를 모두 제거하는 "삭제"부분을 처리해 보겠습니다. (이는 "추가"및"업데이트"와 매우 유사합니다.)
루비를 사용하면 해시에서 movie/rating 쌍을 쉽게 제거할 수 있습니다. 우리는 그냥 movies.delete(제목)만 쓰면 됩니다!

1."삭제"를 입력하면"삭제됨!"을 제거합니다.
사용자로부터 제목을 가져옵니다.
동영상이 해시에 없는 경우 오류가 발생하는 경우를 포함합니다. 동영상이 있으면을 사용하여 삭제하여 위에 표시된 대로 제거하십시오. 테스트해 보십시오!
Hint
각 분기에서 title.to_sym을 변환하는 것을 잊지 마십시오. 항상 문자열이 아닌 해시에 기호를 저장, 검사 및 업데이트하려고 합니다.

movies = {
  warcraft: 8,
  avengers: 7.2,
  ironman: 4.0
  }

puts "What would you like to do? "
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp

case choice
when "add"
  puts "What movie would you like to add? "
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "What rating does the movie have? "
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
  else
    puts "That movie already exists! Its rating is #{movies[title.to_sym]}."
  end
when "update"
  puts "movies name"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "error"
  else
    puts "Please specify a new video rating."
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
    puts "It was successfully changed => #{movies[title.to_sym]}"
  end
when "display"
  movies.each {|movie, rating| puts "#{movie}: #{rating}"}
when "delete"
  puts "enter movie title"
  title = gets.chomp
  if movies[title.to_sym].nil?
    puts "error"
else
   puts movies.delete(title)
end

2-10. Nice Work!
훌륭하다! 당신은 단지 수십줄의 코드를 가진 작은 앱을 만들었다. 감명 깊지?
프로그램에서 알고 있는 4개의 동사(추가, 표시, 업데이트 및 삭제)는 보편적입니다. 이 약어는(각각 생성, 읽기, 업데이트 및 삭제를 위해 사용되는 create, read, update, delete CRUD)로 더 잘 알려져 있습니다. 데이터베이스에서 항목을 업데이트하거나, 웹 사이트에 정보를 요청하거나, 블로그 게시물을 작성할 때 수행하는 작업입니다. API호출부터 RubyonRails와 같은 웹 프레임워크에 이르기까지 이 설정에 익숙해지는 것은 좋습니다.

마음에 드는 대로 프로그램을 실행할 수 있을 때까지 얼마든지 프로그램을 사용하십시오. ("오류!"보다 더 구체적인 메시지를 추가할 수 있습니까?)
준비가 되었으면 실행을 클릭하여 이 프로젝트를 완료하십시오!

movies = {
  warcraft: 8,
  avengers: 7.2, # movies라는 변수에 기호(symbol)로 정수 값과 묶었다.
  ironman: 4.0
  }

puts "What would you like to do? " # 입력할 수 있는 조건들을 표시해 두었다.
puts "-- Type 'add' to add a movie."
puts "-- Type 'update' to update a movie."
puts "-- Type 'display' to display all movies."
puts "-- Type 'delete' to delete a movie."

choice = gets.chomp # 사용자로부터 입력 받은 것을 choice 변수에 담는다.

case choice # case when문으로 choice 값을 비교한다. when에 맞춰서 값을 찾아간다.
when "add"
  puts "What movie would you like to add? " # 사용자로부터 추가하라는 입력을 받게 한다.
  title = gets.chomp
  if movies[title.to_sym].nil? # if문으로 영화와 내가 입력한 값을 .nil로 검사한다. 절대적이게 같지 않아야 한다.
    puts "What rating does the movie have? "
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i
  else # else로 온 경우 사용자가 입력한게 movies에 담긴 영화가 있다는 거다.
    puts "That movie already exists! Its rating is #{movies[title.to_sym]}."
  end
when "update"
  puts "movies name"
  title = gets.chomp
  if movies[title.to_sym].nil? # 절대적이게 같지 않아야 한다. 여기선 영화 제목이 같지 않으면 업데이트 할 수 없기 때문에
    puts "error" # error 메시지를 보내준다.
  else
    puts "Please specify a new video rating." # 같다면 rating을 업데이트 하라 한다.
    rating = gets.chomp
    movies[title.to_sym] = rating.to_i # movies 변수에 내가 입력한 title 값을 sym볼로 바꾸어 rating과 추가한다.
    puts "It was successfully changed => #{movies[title.to_sym]}"
  end
when "display" # .each를 사용하여 표시한다.
  movies.each {|movie, rating| puts "#{movie}: #{rating}"}
when "delete"
  puts "enter movie title"
  title = gets.chomp
  if movies[title.to_sym].nil? # 절대적이게 같지 않기 때문에 입력한 값과 movies에 담긴게 다르니 에러 메시지.
    puts "error"
  else # 입력한 값과 같다면 삭제를 진행한다. .delete(입력한 값)
    puts movies.delete(title)
    puts "clear"
  end
else # add, update, display, delete를 안골랐다면 이 메시지 호출.
  puts "bye bye~"
end

7. Refactoring

1. The Zen of Ruby

이 과정에서는 루비를 독특하게 만드는 모범 사례와 규약에 대해 알아보겠습니다.

1-1. Ruby is a Delight
루비는 언어로 프로그램 최적화보다는 프로그래머 생산성을 우선시합니다. 이는 루비가 항상 프로그램을 가장 빠르게 실행하는 것은 아니지만 프로그래머들이 쉽고 재미 있게 사용할 수 있는 언어가 되기 위해 노력하고 있다는 것을 의미합니다. 언어의 구문이 직관적일수록 사용자의 생산성이 높아집니다. 네가 조종할 수 있는 거야, 기계가 아니라!
편집기에서 코드를 확인합니다. 그것은 거의 영어처럼 보이지 않나요?
출력 결과를 알고 있다고 생각되면 Run을 클릭합니다.

ruby_is_eloquent = true
ruby_is_ugly = false

puts "Ruby is eloquent!" if ruby_is_eloquent
puts "Ruby's not ugly!" unless ruby_is_ugly   #unless if의 부정형. 거짓이어야 실행 됨.

>> Ruby is eloquent!
>> Ruby's not ugly!

1-2. A Simpler 'if'
다음과 같은 경우 루비를 보셨을 겁니다.
if
condition
  # Do something!
end
그러나"do something"이 짧고 간단한 표현이라면 한줄로 이동할 수 있습니다(마지막 연습에서 보신 것처럼). 구문은 다음과 같습니다.
expression if boolean
루비는 부울이 뒤에 오면 다음에 표현이 올 겁니다. 순서는 중요하다. 다음 작업을 수행할 수 있습니다.
puts "It's true!" if true

그러나 이것은 아니다.
if true puts "It's true!"
if 당신이 한줄에 모든 것을 적을 때 당신의 말을 끝낼 필요가 없다는 것(end) 또한 중요하다.

Hint
한 줄에 표현하기:
puts "Hello!" if true
다음과 같습니다:
if true
   puts "Hello!"
end

1. 한번 해 보세요! 오른쪽에 있는 편집기에 문장을 입력합니다. 그것은 당신이 좋아하는 무엇이든지 될 수 있다.

puts "one-line expression" if true
>> one-line expression

1-3. The One-Line Unless
진술이 없으면 똑같은 일을 할 수 있다. 루비가 할 수 있는 것, 키워드가 없는 것, 그리고 진실과 거짓을 평가하는 표현 등의 순서는 전과 동일합니다.
단 한줄로 쓸 때도, 쓰지 않을 때도 end가 필요 없다는 것을 기억하라!

Hint
다음과 같은 간단한 원 라인을 사용해 볼 수 있습니다:
puts "Hello!" unless false
이는 다음과 같습니다:
unless false
  puts "Hello!"
end
1. 편집기 오른쪽에 있는 unless를 사용하여 한줄만 입력합니다. 그것은 당신이 좋아하는 무엇이든지 될 수 있다.

puts "The use of negative statements" unless false # unless 가 거짓이여야 실행됨. 그래서 false
>> The use of negative statements

1-4. One Good Trun Deserves a Ternary (눈물을 자아내는 한번의 좋은 반전?)
루비 모험을 하는 동안, 여러분은 어떤 하나의 목표를 달성하는데 있어서 많은 선택권이 있다는 것을 보았습니다. 예외가 아닌 경우! if/else 이면 더욱 더 간결한 형태가 ternary조건적 표현이다. 이를 "ternary"라고 하는 이유는 세가지 인수가 필요하기 때문입니다. 부울, 부울이 참인지 여부를 평가하는 식이, 부울이 거짓인지를 평가하는 식입니다.
구문은 다음과 같습니다:
boolean ? Do this if true: Do this if false
예를 들어
puts 3 < 4 ? "3 은 4보다 작다 4!" : "3 은 4보다 작지 않다 4."
기억하세요: 논쟁의 순서는 중요하고 end는 필요하지 않다. 이 버전의 경우 if/else
Hint
다음과 같은 간단한 요약 설명을 사용해 볼 수 있습니다.
puts true ? "True!" : "False!"
이는 다음과 같습니다.
if true
  puts "True!"
else
  puts "False!"
end

1. 편집기에서 순간적인 표현을 지웁니다. 도움이 필요하면 언제든지 힌트를 보세요!

puts true ? "True!" : "False!"
>> True!

puts false ? "True!" : "False!"
>> False!

puts 3 < 4 ? "3 is less than 4!" : "3 is not less than 4."
>> 3 is less than 4!

puts 3 > 4 ? "3 is less than 4!" : "3 is not less than 4."
>> 3 is not less than 4.

1-5. When and Then: The Case Statement(시기 및 시기: 사례 설명)
if/else 가 강력한 것 같지만, 만약 우리가 점검해야 할 조건이 많다면 우리는 if/elseif 에 빠져 버릴 수도 있다.
감사하게도 루비는 우리에게 case문 이라는 간단한 대안을 제시해 주었습니다. 구문은 다음과 같습니다.
case language
when "JS"
puts "Websites!"
when "Python"
puts "Science!"
when "Ruby"
  puts "Web apps!"
  else
  puts "I don't know!"
end
그러나 다음과 같이 접을 수 있습니다.
case language
  when "JS" then puts "Websites!"
  when "Python" then puts "Science!"
  when "Ruby" then puts "Web apps!"
  else puts "I don't know!"
end

1. 사용자의 입력을 유도하기 위해 몇가지 코드를 추가했습니다.
case greeting(어느 스타일이든!)을 편집자에게 추가합니다. 다음 작업을 수행해야 합니다.
사용자가 "영어"를 입력할 때, 프로그램은 "Hello!"를 입력해야 합니다.
사용자가 "프랑스어"를 입력할 때, 프로그램은 "봉주르!"를 넣어야 한다.
사용자가 "독일어"를 입력할 때 프로그램은 "Guten태그!"를 표시해야 합니다.
사용자가 "핀란드어"를 입력할 때 프로그램은 "Haloo!"를 입력해야 한다.
그렇지 않으면, 프로그램은 "나는 그 언어를 몰라!"라고 써야 해.

puts "Hello there!"
print "Choice >> English, French, German, Finnish: "
greeting = gets.chomp

case greeting
  when "English" then puts "Hello!"
  when "French" then puts "Bonjour!"
  when "German" then puts "Guten Tag!"
  when "Finnish" then puts "Haloo!"
else puts "I don't know that language!"
end

>> Hello there!
>> Choice >> English, French, German, Finnish: # Finnish 입력.
>> Haloo!

>> Hello there!
>> Choice >> English, French, German, Finnish: # now 입력.
>> I don't know that language!

1-6. Conditional Assignment (조건부 할당)
연산자를 사용하여 변수에 값을 할당할 수 있습니다. 하지만 변수가 아직 할당되지 않은 경우에만 할당하려면 어떻게 해야 할까요?
이를 위해 조건부 할당 연산자를 사용할 수 있습니다. ||= (||) 논리 연산자와 일반 = 할당 연산자로 구성되어 있습니다.

편집기에서 코드를 실행합니다. 다음과 같은 상황이 발생했습니다.
1. 변수 favorite_book는 아무것도 아님을 뜻하는 nil로 설정되어 있습니다. 이 상태에서 해당 변수를 출력하면 말 그대로 화면에 아무것도 표시되지 않을 겁니다.
2. 이제 해당 변수는 조건적으로 "Cat's Cradle"라고 지정됩니다. 이전엔 변수가 비어있었기 때문에(nil), 해당 변수에 "Cat's Cradle"이 할당되는 것이고, 따라서 해당 변수를 출력하면 "Cat's Cradle"이 출력될 겁니다.
3. 이제 다시 조건부 할당을 시도합니다. 이번에는 "Why's (Poignant) Guide to Ruby"를 변수에 할당하려 합니다. 하지만 잠깐! 해당 변수는 이미 "Cat's Cradle"라는 값을 가지고 있으므로, 새로운 값을 할당하지 않고 기존의 값을 계속 변수에 유지합니다. 따라서 변수를 출력해도 "Cat's Cradle"이 출력될 겁니다.
4. 마지막으로, 일반적인 할당 연산자를 사용해서 변수 favorite_book의 값으로 "Why's (Poignant) Guide to Ruby"를 할당할 겁니다. 따라서 변수를 출력하면 변경된 값이 출력됩니다.

favorite_book = nil
puts favorite_book

favorite_book ||= "Cat's Cradle"
puts favorite_book

favorite_book ||= "Why's (Poignant) Guide to Ruby"
puts favorite_book

favorite_book = "Why's (Poignant) Guide to Ruby"
puts favorite_book

>> Cat's Cradle
>> Cat's Cradle
>> Why's (Poignant) Guide to Ruby

1-7. Now You Try!
이제 네 차례야!
1. 변수, favorite_language를 만들고 그리고 조건부로 당신이 가장 좋아하는 프로그래밍 언어에 맞추세요.

favorite_language = nil

favorite_language ||= "Ruby"

puts favorite_language

1-8. Implicit Return (암시적 반환)
루비에서의 방법이 값을 반환할 수 있다는 것을 알고 있으며, 프로그램의 다른 부분에서 값을 사용하고자 할 때 값을 반환하는 방법을 요청(return) 합니다. 하지만, 만약 우리가 우리의 방법 정의에 반환문을 붙이지 않는다면 어떻게 될까요?
예를 들어, JavaScript기능에 반환할 내용(return)을 정확하게 알려 주지 않으면 정의되지 않은 상태(undefined)로 반환됩니다. Python의 경우 기본 반환 값은 없음(None)입니다. 루비의 경우는 좀 다릅니다. 루비의 방법은 마지막으로 평가한 표현의 결과를 보여 줍니다.

# 한 마디로 return 대신 ruby는 end 사용한다는거 아닐까? return도 사용이야 하겠지만.

이는 다음과 같은 루비 방식을 사용하고 있을 경우:
def add(a,b)
  return a + b
end
다음과 같이 간단하게 쓸 수 있습니다.
def add(a,b)
  a + b
end
어느 쪽이든 add(1,1)를 누르면 2가 나옵니다.

1. 암시적 반환을 사용하도록 편집기의 코드를 수정합니다.
Hint 한 단어만 빼면 돼!

def multiple_of_three(n)
   n % 3 == 0 ? "True" : "False"
end

puts multiple_of_three(7)
puts multiple_of_three(396)

>> False
>> True

1-9. Short-Circuit Evaluation (단락 회로 평가)
루비에는 부울 연산자 and(&&) 그리고 or(||)로 구성된 연산자가 있다는 것을 상기하십시오. && 연산자는 연산자의 양쪽에 있는 식을 모두 참일 때만 true를 반환합니다. || 관련된 식 중 하나 또는 둘 다가 참이면 true를 반환합니다.

루비는 이것을 단락 평가를 통해 한다. 루비가 두 표현을 다 보지 않는 한 둘 다 보지 않는다는 뜻입니다.
false && true
&&은 무엇이든 거짓임(false)을 알기 때문에 &&이 읽는 것을 보자마자 멈춘다.

루비가 마지막으로 평가한 표현식의 결과를 어떻게 반환하는지 기억하세요? 우리는 그것을 사용하여 실제 단락 평가를 보여 줄 수 있다.

편집기에서 코드를 확인한 다음 실행을 클릭합니다. 루비에서는 false와 nil이 모두 거짓 값이기 때문에 두 문자열이 모두 true으로 간주된다. 루비는 뭐든지 사실(true ||)이라는 걸 알고 있어요. 그래서 a || b는 a만 평가해요. 하지만 b의 a && b부분에서 거짓(false)이 발견될 수도 있기 때문에 b를 평가해야 해요.

ex.1) a == true, b == true
def a
  puts "A was evaluated!"
  return true
end

def b
  puts "B was also evaluated!"
  return true
end

puts a || b # or 연산자 이기 때문에 둘 중 하나만 보면 된다. a가 바로 true이기 때문에 a만 출력한다.
puts "------"
puts a && b # and 연산자 이기 때문에 둘 다 참 이어야 한다.

>> A was evaluated!
>> true # 여기까지 || 연산자.
>> ------
>> A was evaluated! # && 연산자 이기에 둘다 출력. a
>> B was also evaluated! # 당연 b도 검사.
>> true # 결론은 둘다 참이기에 true

ex.2) a == true, b == false
def a
  puts "A was evaluated!"
  return true
end

def b
  puts "B was also evaluated!"
  return false
end

puts a || b
puts "------"
puts a && b

>> A was evaluated!
>> true # or 연산자 부분이다. 둘 중 하나만 참이면 된다. a가 참이니 바로 사실을 확인하고 종료한다.
>> ------
>> A was evaluated! # and 연산자 부분이다. 둘 다 참 이어야 한다. a 가 참이니 넘어간다.
>> B was also evaluated! # b puts 부분까지는 출력한다.
>> false # b가 false 이기에 false를 반환하고 종료한다.

ex.3) a == false, b == true
def a
  puts "A was evaluated!"
  return false
end

def b
  puts "B was also evaluated!"
  return true
end

puts a || b # or 연산자. a가 false 이다.
puts "------"
puts a && b

>> A was evaluated! # a의 puts은 출력된다.
>> B was also evaluated! # b의 puts도 출력된다.
>> true # or 연산자는 둘 중 하나만 참이면 되기 때문에 b로 인해 true가 반환.
>> ------
>> A was evaluated! # and 연산자 부분이다. 둘 다 참이어야 한다. a의 puts은 출력된다.
>> false # a가 false 이기 때문에 볼 것도 없이 중단시킨다. false가 나오면 중단된다.

1-10. The Right Tool for the Job (업무에 적합한 도구)
조만간, 여러분은 프로그램에서 반복적인 작업을 해야 할 것입니다. 많은 프로그래밍 언어는 루프에 대한 for를 사용하여 이 작업을 수행할 수 있도록 해 주며, 루비에는 루프에 대한 기능이 포함되어 있지만, 더 나은 도구가 있습니다.

특정 횟수만큼 작업을 수행하려는 경우 .times방법을 다음과 같이 사용할 수 있습니다.
5.times { puts "Odelay!" }
# Prints 5 "Odelay!"s on separate lines
집합의 모든 요소에 대해 작업을 반복하려는 경우 다음을 각각 사용할 수 있습니다.
[1, 2, 3].each { |x| puts x * 10 }
# Prints 10, 20, 30 on separate lines

1. 좀 창의적으로 해 봅시다. my_array의 짝수 값만 넣는 루프를 작성합니다.. (한줄만 사용할 경우 보너스 포인트!)

ex.1)
my_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
my_array.each do |x|
  if x % 2 == 0
    puts x
  end
end

ex.2)
my_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
my_array.each { |x| puts x if x % 2 == 0 }

ex.3)
my_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
my_array.each { |num| puts num unless num % 2 !=0 }
# num % 2 != 0 설명. my_array의 값들을 각각 2로 나누었을때 나머지가 0과 다르다면 홀수란 의미. unless를 사용하여 거짓일 때 실행되게 한다. 거짓일 때는 조건이 0과 같을 때다. 고로 짝수 값을 찾게 해준다.

>> 2
>> 4
>> 6
>> 8
>> 10

1-11. Up the Down Staircase (위쪽 계단)
우리가 포함시키고 싶은 숫자의 범위를 알고 있다면, .upto .downto를 사용할 수 있습니다. 이것은 카운터 변수가 특정 값에 도달할 때 중지되는 루프(for)에 사용하는 것보다 훨씬 더 Rubyist솔루션입니다.

.upto를 사용하여 특정 범위의 값을 인쇄할 수 있습니다.
95.upto(100) { |num| print num, " " }
# Prints 95 96 97 98 99 100
그리고. downto를 사용하여 내림차순으로 동일한 작업을 수행할 수 있습니다.

당신은 .upto 그리고 .downto를 알파벳으로 사용하는 것에 대해 생각합니까? 알아 낼 수 있는 유일한 방법!

Hint
전체 알파벳을 사용하려면 다음을 수행합니다.
"A".upto("Z") { |letter| puts letter }

1. 대문자"L"을 "P"로 표시할 때까지 사용합니다.
(puts은 사용하고 print는 하지 마십시오. 따라서 각 문자는 독자적으로 사용할 수 있습니다!)

"L".upto("P") { |letter| puts letter}

>> L
>> M
>> N
>> O
>> P

1-12. Call and Response (통화 및 응답)
방법 이름을 참조하는 데 기호(Symbol)가 유용하다고 언급한 것을 기억하십니까? 음, .respond_to? 객체가 해당 메서드를 수신할 수 있으면 기호를 사용하여 true를 반환하고 그렇지 않으면 false를 반환합니다. 예를들면
[1, 2, 3].respond_to?(:push)
어레이 개체를 누르면 호출할 수 있으므로(.push) true가 반환됩니다. 하지만
[1, 2, 3].respond_to?(:to_sym)
배열을 기호로 변환할 수 없으므로 거짓으로 반환합니다.

1. age 변수가 정수인지 확인하는 것보다 확인하는 것이 좋습니다. .respond_to? 다음의 방법 (.next은 해당 정수를 호출하는 즉시 정수를 반환합니다. 즉, 4.next가 5를 반환합니다.)

age = 26

puts age.respond_to?(:next)
>> true

1-13. Being Pushy
어레이로 푸시 하는 것에 대해 말하자면, 루비는 일반적인 방법을 사용하기 위한 몇가지 좋은 지름길을 가지고 있습니다. 운 좋게도, 하나는… .push!

.Push메서드 이름을 입력하는 대신 concatenation 연산자인 << 를 사용하여 배열 끝에 요소를 추가할 수 있습니다.
[1, 2, 3] << 4
# ==> [1, 2, 3, 4]
좋은 소식:그것은 또한 문자열에도 작용합니다! 다음 작업을 수행할 수 있습니다.
"Yukihiro " << "Matsumoto"
# ==> "Yukihiro Matsumoto"

1. .push와 + 대신 concatenation 연산자를 사용하도록 편집기의 코드를 업데이트합니다. (puts the caption)

alphabet = ["a", "b", "c"]
alphabet << "d"

caption = "A giraffe surrounded by "
caption << "weezards!"

puts alphabet
puts caption

>> ["a", "b", "c", "d"]
>> A giraffe surrounded by weezards!

1-14. String Interpolation
항상 이전 + 또는 << 를 사용하여 문자열에 변수 값을 추가할 수 있습니다.
drink = "espresso"
"I love " + drink
# ==> I love espresso
"I love " << drink
# ==> I love espresso

그러나 문자열이 아닌 값을 사용하려면. to_s를 사용하여 문자열로 만들어야 합니다.
age = 26
"I am " + age.to_s + " years old."
# ==> "I am 26 years old."
"I am " << age.to_s << " years old."
# ==> "I am 26 years old."

이것은 복잡하고, 복잡한 것은 루비 방식이 아닙니다. 더 나은 방법은 문자열 보간입니다. 구문은 다음과 같습니다.
"I love #{drink}."
# ==> I love espresso.
"I am #{age} years old."
# ==> I am 26 years old.
변수 이름을 문자열 안에 넣기만 하면 됩니다!

1. concatenation 연산자를 제거하고 #{thing}을사용하도록 코드를 다시 작성하십시오. 6번 선에 하나의 완전한 문자열을 넣어야 합니다.

favorite_things = ["Ruby", "espresso", "candy"]

puts "A few of my favorite things:"

favorite_things.each do |thing|
  puts "I love #{thing}!"
end

>> A few of my favorite things:
>> I love Ruby!
>> I love espresso!
>> I love candy!

1-15. One-Liners
좋아! 기존 코드를 수정하여 새로운 지식을 적용할 시간입니다. 개조는 우리가 실제로 하는 것을 바꾸지 않고 우리의 코드의 구조나 외관을 개선하고 있다고 말하는 화려한 방법일 뿐이다.
이전 연습의 모든 구문을 다루지는 않겠지만, 요점을 짚어 보겠습니다. 준비됐나요

Hint action if boolean
1. 편집기의 내용을 코드 행 한줄로 수정합니다.

puts "One is less than two!" if true
>> One is less than two!

1-16. The Ternary Operator
three = 3
puts three == 3 ? "Of course." : "What?"
# ==> puts "Of course."
좋아! Ternary 연산자를 이용해서 우리의 암호를 좀 더 능률적으로 만들자.
위의 예는 구문 주의 사항에 불과합니다.

Hint
다음은 실제 사용 중인 원격 조작자의 다른 예입니다.
name = "Matz"
puts name == "Matz" ? "Hi Dad!" : "Who are you?"
>> Hi Dad!

1. 편집기의 문장을 수정하여 ternary연산자를 사용하여 올바른 문장을 작성합니다.

# 주어진 문장
if 1 < 2
  puts "One is less than two!"
else
  puts "One is not less than two."
end
>> One is less than two!

# 수정하여 만든 문장
puts 1 < 2 ? "One is less than two!" : "One is not less than two."
>> One is less than two!

1-17. In Case of Many Options (다양한 옵션의 경우)
훌륭합니다. 만약에 우리가 수정할 수 있는 것이 일반적인 것이 아니라,
if/elsif/else 이면, 그 진술은 정말 좋게 깨끗할 수 있다!

1.편집기에서 가능하면 if/elsif/else 문을 수정하여 명확한 대 소문자를 구분합니다.

Hint
사례 설명을 구성하는 한가지 방법은 다음과 같습니다.
case variable
when value1 then #Do something!
when value2 then #Do something else!
...
when value9 then #Do another thing!
else
# Do the default thing!
end

#바꾸기 전
puts "What's your favorite language?"
language = gets.chomp

if language == "Ruby"
  puts "Ruby is great for web apps!"
elsif language == "Python"
  puts "Python is great for science."
elsif language == "JavaScript"
  puts "JavaScript makes websites awesome."
elsif language == "HTML"
  puts "HTML is what websites are made of!"
elsif language == "CSS"
  puts "CSS makes websites pretty."
else
  puts "I don't know that language!"
end

================================
#바꾼 후
puts "What's your favorite language?"
language = gets.chomp

case language
when "Ruby" then puts "Ruby is great for web apps!"
when "Python" then puts "Python is great for science."
when "JavaScript" then puts "JavaScript makes websites awesome."
when "HTML" then puts "HTML is what websites are made of!"
when "CSS" then puts "CSS makes websites pretty."
else
puts "I don't know that language!"
end

1-18. Conditional Assignment (조건부 할당)
완벽해! 그럼 이번에는 조건부 과제를 검토해 보겠습니다. 엄격한 편집 모드에서 잠시 벗어나 필기를 좀 더 할 수 있도록 하겠습니다.
1.favorite_animal이라는 변수를 만들고 조건에 따라 좋아하는 동물의 이름이 포함된 문자열을 할당합니다.

favorite_animal ||= "cat"

1-19. Implicit Return (암시적 반환)
다음으로, 우리의 코드에서 불필요한 반품을 제거함으로써 우리의 미친 방법을 단순화하자.

Hint
Ruby메서드는 자동으로 마지막으로 평가한 표현식의 값을 반환하므로 square 에 올바른 표현식을 넣으면 됩니다. 반환할 필요가 없습니다!
다음 중 하나를 입력하여 n의 제곱을 계산할 수 있습니다.
n * n
또는
n ** 2

1. 메서드 사용, 변수로 숫자를 사용하고 해당 숫자의 제곱을 암시적으로 반환하는 제곱 법을 작성합니다.
def square(num)
  num ** 2
end

1-20. 'For' Shame! (애석한 for)
좋아! 마지막으로, 편집자의 루프에 대해 확실히 알 수 없는 것을 해 봅시다.
10.times do
puts "Knock knock." puts "Who's there?"
end

1. 마지막으로 for문을 대체하여 .times를 사용하여 루프를 사용하도록 합니다.

#바꾸기 전
for i in (1..3)
  puts "I'm a refactoring master!"
end

#바꾼 후
3.times do
  puts "I'm a refactoring master!"
end

둘다 출력 결과는 같음.
>> I'm a refactoring master!
>> I'm a refactoring master!
>> I'm a refactoring master!

2. The Refactor Factory

이 프로젝트에서는 프로그램의 가독성과 구조를 크게 개선하기 위해 단계별 리폼을 사용할 것이다.

2-1. What You'll Be Fixing (수정할 사항)
기존의 몇몇 코드를 수정하여 루비 베스트 프랙티스에 대한 지식을 강화하겠습니다. 위에서 언급한 바와 같이 리팩토링은 코드의 전반적인 동작을 수정하지 않고 코드의 구조, 모양 및/또는 성능을 개선하는 프로세스입니다.

편집기의 코드는 루비 메서드(first_n_primes)로, 번호 n을 입력하고 처음 n개의 주요 번호 목록을 생성합니다. 불행하게도, 우리의 가난한 작가는 루비에서 사용 가능한 모든 도구를 아직 다 익히지 못 했습니다. 하지만 우리는 그것을 고칠 수 있어요!

일을 시작하고 프로그램의 이 괴물을 다시 만들어 봅시다!

$VERBOSE = nil    #수업이 끝나면 이것을 설명하겠습니다.
require 'prime'   #모듈입니다. 곧 처리할게요!

def first_n_primes(n)

  unless n.is_a? Integer
    return "n must be an integer."
  end

  if n <= 0
    return "n must be greater than 0."
  end

  prime_array = [] if prime_array.nil?

  prime = Prime.new
  for num in (1..n)
    prime_array.push(prime.next)
  end
  return prime_array
end

first_n_primes(10)

2-2. Omit Needless Words (말 없이 생략)
글쓰기에 있어서 가장 일반적인 제안 중 하나는 불필요한 단어를 생략하는 것이고 루비가 쓰는 이야기에도 똑같이 적용됩니다.

여기에서는 두가지 제어 구조를 변경할 수 있습니다.
1. The unless on line 6
2. The if on line 10

Hint
진술의 형식이 다음과 같아야 합니다.
action if boolean
action unless boolean
기억하세요, end는 필요 없다. 싱글 라인에 if 또는 unless를 사용하라.

1.편집기에서 코드를 수정하여 단일 행 가정 및 unless를 사용합니다.

바꾸기 전
require 'prime'   # This is a module. We'll cover these soon!

def first_n_primes(n)

  unless n.is_a? Integer
    return "n must be an integer."
  end

  if n <= 0
    return "n must be greater than 0."
  end

  return Prime.first n
end

first_n_primes(10)

바꾸기 후
require 'prime'   # This is a module. We'll cover these soon!

def first_n_primes(n)
return "n must be an integer." unless n.is_a? Integer
return "n must be greater than 0." if n <= 0

return Prime.first n
end

puts first_n_primes(10)
>> [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]

2-3. Less is More (적을수록 낮다)
잘했어! 이 코드가 이미 더 나아 보이네요.
하지만 우리는 훨씬 더 제거할 수 있다. 이 코드에는 명시적인 것에서 암시적인 것으로 변경할 수 있는 하나의 반환 문구가 있습니다!
루비는 마지막으로 평가한 표현식의 값을 자동으로 반환합니다.

힌트:마지막입니다!
처음 두개의 return 신고서가 필요합니다. 입력 값이 양의 숫자가 아니면 빨리 반환해야 할 수도 있습니다. 조기에 돌아오는 유일한 방법은 명시적인 회신 문구를 사용하는 것이다.

1.불필요한 return 키워드를 찾아 제거합니다.

require 'prime'   # This is a module. We'll cover these soon!

def first_n_primes(n)
  return "n must be an integer." unless n.is_a? Integer
  return "n must be greater than 0." unless n > 0
  Prime.first n
end

first_n_primes(10)

2-4. Nice Work!
훌륭하다! 당신은 정말로 그 코드를 향상시켰고, 그 모든 것이 루비 같은 노하우였습니다.
원하는 만큼 코드를 가지고 자유롭게 이동한 다음 실행을 클릭하여 이 프로젝트를 완료하십시오!
# 소수를 구하는 프로그램!
require 'prime'   # This is a module. We'll cover these soon!

def first_n_primes(n)
  return "n must be an integer." unless n.is_a? Integer
  return "n must be greater than 0." unless n > 0
  Prime.first n
end

first_n_primes(10)

8. Blocks, Procs, and Lambdas

1. Blocks, Procs, and Lambdas

이 과정에서는 루비 프로그래밍 언어의 가장 강력한 세가지 측면, 즉 블록, 프로커스, 람다에 대해 살펴보겠습니다.

1-1. You Know This!
우리는 Loops&Iterator 그리고 Method, Block&Sorting에서 블록에 대해 조금 배웠다. 우리는 앞서 한 블록이 이름 없는 방법과 같다고 말했지만, 그것은 사실이 아니다. (이 과의 후반부에서는 이름 없는 실제 방법인 람다 라고 하는 방법에 대해 알아보겠습니다.)
루비 블록은 실행할 수 있는 코드입니다. 블록 구문은 다음 중 하나를 사용합니다. do..end 또는 ( {} )
예)
[1, 2, 3].each do |num|
  puts num
end
# ==> Prints 1, 2, 3 on separate lines

[1, 2, 3].each { |num| puts num }
# ==> Prints 1, 2, 3 on separate lines
블록을 각각. .each 그리고 .times 결합하여 집합의 각 요소에 대한 명령을 실행할 수 있습니다(예:해시 또는 배열).

1.복습을 좀 합시다! "나는 블록이다!"라는 문자열을 다섯번 사용한다.

5.times {puts "I'm a block!"}
>> I'm a block!
>> I'm a block!
>> I'm a block!
>> I'm a block!
>> I'm a block!

1-2. Collect 'Em All
좋아! 블록을 떼어 내는 정말 유용한 루비 방법들이 많이 있습니다. 우리가 아직 다루지 않은 것은 수집이다.

수집(collect) 방법은 블록을 사용하고 블록의 표현식을 배열의 모든 요소에 적용합니다. 확인해 보십시오.
my_nums = [1, 2, 3]
my_nums.collect { |num| num ** 2 }
# ==> [1, 4, 9]
그러나 my_nums의 가치를 살펴보면 변하지 않았다는 것을 알 수 있습니다.
my_nums
# ==> [1, 2, 3]
collect를 사용하면 my_nums 복사본이 반환되지만 원래 my_nums 배열은 변경되지 않기 때문입니다.

원본을 바꾸려면 느낌표와 함께 .collect! 를 사용할 수 있습니다.
my_nums.collect! { |num| num ** 2 }
# ==> [1, 4, 9]
my_nums
# ==> [1, 4, 9]
루비에서의 ! 는 "이 방법은 위험하거나 예기치 못한 일을 할 수 있다!"는 뜻을 상기하라. 이 경우에는 새로운 배열을 만드는 대신에 원래의 배열을 변형시킵니다.

1.우리는 배열과 거짓말을 만들었고 처음 10개의 피보나치 숫자를 거기에 넣었다.
새 변수인 duubled_fibs를 생성한 다음 file.collect 호출 결과와 동일하게 설정합니다. 당신이. 수집한 블록은 위의 예와 같이 각 피보 나찌의 수를 두배로 늘려야 한다.
배열의 최종 내용을 보려면 duubled_fibs를 넣습니다.

fibs = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

doubled_fibs = fibs.collect { |num| num * 2}

puts doubled_fibs
>> [2, 2, 4, 6, 10, 16, 26, 42, 68, 110]

# 번외
fibs.each { |key|
  key = key * 2
  puts key
  }

1-3. Learning to Yield (양보 학습)
일부 방법은 블록을 허용하지만 다른 방법은 허용하지 않는 이유는 무엇입니까? 블록을 수용하는 방법은 통화 방법에서 블록으로 제어권을 다시 전송하고 다시 되돌리는 방법을 가지고 있기 때문입니다. 우리는 이것을 우리가 정의하는 방법으로 만들 수 있다.

편집기에서 코드를 확인합니다. 우리가 block_test방법에 있을 때와 블록에 있을 때 그것을 전달할 수 있도록 일련의 puts문을 설정했습니다. 실행을 클릭하여 결과를 확인하십시오!

def block_test
  puts "We're in the method!"
  puts "Yielding to the block..."
  yield
  puts "We're back in the method!"
end

block_test { puts ">>> We're in the block!" }

# 출력 결과 yield문에 들어간 출력문은 맨 마지막에 출력되는 모습을 보여주고 있다.
We're in the method!
Yielding to the block...
>>> We're in the block!
We're back in the method!

1-4. Yielding With Parameters
또한 매개 변수를 수율로 전달할 수도 있습니다! 편집자에게 예를 들어 보세요.

1. yield_name 방법은 매개 변수, name 하나로 정의됩니다.
2. 9행에서, 우리는 yield_name 법을 호출하고 name 매개 변수에 대한 인수"Eric"을 제공한다. yield_name에 출력 문이 있으므로 블록도 제공해야 합니다.
3. 그 방법 안에, 2행에, 우리는 먼저 머리말을 출력합니다.
4. 그리고 나서 우리는 그 블록에 yield 하고"Kim"을 패스한다.
5. 이 블록에서, n은 이제"Kim"과 같고, 출력 결과로 "My name is Kim"을 내놓는다.
6. 다시 그 방법으로 출력한다. yield 사이에
7. 그리고 나서 우리는 다시 한번 그 블록에 굴복한다. 이번에는 이름 매개 변수에 저장된 "Eric"을 전달합니다.
8. 이 블록에서, n은 이제"Eric"과 같아요. 그리고 우리는 "My name is Eric."
9. 마지막으로, 우리는 statement를 닫습니다.

Hint
당신의 코드는 9번 선의 코드와 동일하게 보여야 하며, 당신의 이름만 괄호 사이에 있어야 한다.

1.사용자의 이름을 매개 변수로 yield_name을(를)호출합니다. "내 이름은#{여기에 당신의 이름}!"이라는 블록을 꼭 통과해야 합니다.

def yield_name(name)
  puts "In the method! Let's yield."
  yield("Kim")
  puts "In between the yields!"
  yield(name)
  puts "Block complete! Back in the method."
end

yield_name("Eric") { |n| puts "My name is #{n}." }
puts "============================================"
yield_name("hahaXX") { |x| puts "My name is #{x}"}

>> In the method! Let's yield.
>> My name is Kim.
>> In between the yields!
>> My name is Eric.
>> Block complete! Back in the method.
>> ============================================
>> In the method! Let's yield.
>> My name is Kim
>> In between the yields!
>> My name is hahaXX
>> Block complete! Back in the method.

1-5. Try It Yourself!
그렇죠?비록 이 블록 버스터 사업이 우리가 생각했던 것보다 더 큰 문제를 안고 있지만, 여전히 꽤 간단합니다.

방법이 수율 키워드를 사용하여 블록을 수용하는 방법을 알았으니 이제 자체 방법을 정의하고 블록을 전달해 봅시다!

Hint
코드는 다음과 같아야 합니다. (Your code should look something like this:)
def method_name(parameter)
  yield parameter
end

method_name(argument) { block }

1. 단일 파라미터를 허용하고 블록에 수율을 산출하는 방법을 정의합니다. 그런 다음 숫자 파라미터를 2로 곱하는 블록으로 호출합니다. 원하는 숫자를 두배로 늘릴 수 있어요!
여러분의 생산량이 활동하는 것을 보기 위해 결과를 보여 주세요!

def double(number)
  yield(number)
end

double(7) { |x| puts x *= 2}
>> 14

1-6. Keeping Your Code DRY (코드를 반복해서 사용하지 마세요)
루비의 물건이라고 했을 때 기억 나? 음, 우린 좀 속은 것 같아. 블록은 객체가 아니며 루비의 "모든 것은 객체"규칙에서 몇가지 예외 중 하나입니다.
이것 때문에 블록은 변수에 저장될 수 없고 실제 객체의 모든 힘과 능력을 가지고 있지 않습니다. 그러기 위해선... 프로스!
프로세스를 "저장된 "블록이라고 생각할 수 있습니다. 코드 이름을 지정하고 메서드로 변환하는 것처럼 블록 이름을 지정하여 proc으로 변환할 수 있습니다. 프로세스는 코드를 건조하게 유지하는 데 매우 유용합니다. 블록을 사용하면 필요할 때마다 코드를 작성해야 합니다. proc을 사용하면 코드를 한번 작성하여 여러번 사용할 수 있습니다.
Don't Repeat Yourself DRY
편집기에서 코드를 확인해 보세요. 프로스에요! 여러분은 그것이 무엇을 하는지 추측할 수 있나요? 알고 있다고 생각되면 실행을 클릭합니다.

multiples_of_3 = Proc.new do |n|
  n % 3 == 0
end

print (1..100).to_a.select(&multiples_of_3)
>> [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 63, 66, 69, 72, 75, 78, 81, 84, 87, 90, 93, 96, 99]

1-7. Proc Syntax
프로세스는 정의하기 쉽습니다! 프로세스. new에 전화해서 저장할 블록을 전달하면 된다. 다음은 숫자를 제곱하는 큐브라고 하는 프로세서를 만드는 방법입니다(세번째 전원으로 올림).
cube = Proc.new { |x| x ** 3 }
그러면 우리는 proc을 블록을 다른 블록을 사용할 수 있는 메서드로 전달할 수 있으며, 블록을 반복해서 다시 작성할 필요가 없습니다.
[1, 2, 3].collect!(&cube)
# ==> [1, 8, 27]
[4, 5, 6].map!(&cube)
# ==> [64, 125, 216]
(. collect! 와.map!은 정확히 같은 일을 한다.)
맵은 큐브 프로세서를 블록으로 변환하는 데 사용됩니다(.collect!그리고. map!보통 블록을 가져간다.).
&는 변환하는데 사용 됩니다. 여기선 cube를 블록으로 만든다. 우리는 proc을 블럭이 예상되는 방식으로 변환할 때마다 이 작업을 수행합니다.

1. 바닥 방법은 부동 소수 점 이하 숫자를 가장 가까운 정수로 반올림합니다. round_down이라는 프로세스를 작성하여 반올림합니다(floats.collect에 전달하기 위해 코드를 추가했습니다).

floats = [1.2, 3.45, 0.91, 7.727, 11.42, 482.911]

round_down = Proc.new { |x| x.floor }

ints = floats.collect(&round_down)
print ints
>> [1, 3, 0, 7, 11, 482]

# 설명 floats 라는 변수에 소수 값이 들어 있다.
round_down이라는 변수에 새로운 프로세서를 만들고 블록을 담는 곳을 만든다.
ints 라는 변수에 floats 변수를 컬렉트로 만들어 새로운 곳에다 round_down을 끌어다 쓴다.
그럼 실수 값을 .floor로 인해 부동 소수점 이하의 최대 정수 값을 반환하게 된다.

1-8. Why Procs?
왜 굳이 블록을 프로세스로 저장하려고 합니까? 다음과 같은 두가지 주요 이점이 있습니다.
1. 프로세스는 완전한 개체이므로 모든 개체의 기능과 능력을 가지고 있습니다. (블럭은 그렇지 않습니다.)
2. 블록과 달리 프로세스는 다시 작성하지 않고도 계속 호출될 수 있습니다. 따라서 특정 코드 비트를 실행해야 할 때마다 블록의 내용을 다시 입력할 필요가 없습니다.

1. 편집기에서 코드를 확인합니다. 이런, 우리는 그 블록을 여러번 다시 써야 했어! 블록을 제거하고 블록의 코드를 한번만 기록할 수 있도록 over_4_feet이라는 프로세서로 교체합니다.

# 여기 놀이 공원에서, 너는 키가 4피트가 되어야 한다.
# 롤러 코스터를 타기 위해#혹은 더 키가 크다. 사용합시다.
# 각 그룹은 키가 4피트 이상인 그룹만 가질 수 있다.

group_1 = [4.1, 5.5, 3.2, 3.3, 6.1, 3.9, 4.7]
group_2 = [7.0, 3.8, 6.2, 6.1, 4.4, 4.9, 3.0]
group_3 = [5.5, 5.1, 3.9, 4.3, 4.9, 3.2, 3.2]

over_4_feet = Proc.new {|height| height >= 4}

can_ride_1 = group_1.select(&over_4_feet)
can_ride_2 = group_2.select(&over_4_feet)
can_ride_3 = group_3.select(&over_4_feet)

puts can_ride_1
puts can_ride_2
puts can_ride_3

>> [4.1, 5.5, 6.1, 4.7]
>> [7.0, 6.2, 6.1, 4.4, 4.9]
>> [5.5, 5.1, 4.3, 4.9]

1-9. Create Your Own!
좋아!연습용 바퀴를 뗄 시간이야.
cube = Proc.new { |x| x ** 3 }
[1, 2, 3].map(&cube)
# [1, 8, 27]

여러분만의 프로세스를 만들 수 있습니다. 우리는 이것을 두 단계로 나눌 것이다. 위의 예제를 구문 미리 알림으로 사용하십시오.

Hint
yield 방법은 다음과 같아야 합니다.
def method_name
  yield
end
프로세스는 다음과 같아야 합니다.
proc_name = Proc.new do
  puts "Text"
end

1. 인수를 사용하지 않고 블록에 산출되는 메서드, Greeter를 만듭니다.
"Hello!"를 표시하는 Proc, 구문을 작성합니다. 이것을 블록 대신 그린 터에 넘겨라. (문구 대신에 문구를 쓰는 것을 잊지 마세요!)

def greeter
  yield
end

phrase = Proc.new { puts "Hello there!"}

greeter(&phrase)

>> Hello there!

1-10. Call Me Maybe
잘 만들었다! proc을 method로 호출하는 것은 그리 까다롭지 않다. 하지만, 훨씬 더 쉬운 방법이 있습니다.
블록과 달리 루비의 통화 방식으로 직접 프로스를 호출할 수 있습니다. 한번 보세요!

test = Proc.new { # does something }
test.call # does that something!

루비에는 항상 여러가지 방법이 있습니다.

1. 계속해서 hell이라고 불리는 proc을 만들어"Hello!"를 입력한 다음, 호출하십시오!

hi = Proc.new { puts "Hello!" }

hi.call

> Hello!

1-11. Symbols, Meet Procs (기호 프로세스 충족)
루비 언어의 좀 더 복잡한 부분들을 배우고 있으니, 그것들을 결합하여 정말 신비로운 마법을 부릴 수 있습니다. 예를 들어, 루비 메서드 이름을 기호와 함께 전달할 수 있다고 했을 때 기억 나세요? 음, 당신은 또한 그 편리한 작은 것을 이용하여 상징을 프로세스로 변환할 수 있습니다.

strings = ["1", "2", "3"]
nums = strings.map(&:to_i)
# ==> [1, 2, 3]

모든 문자열 요소에 대해 매핑 &:to_i 를 통해 우리는 각 문자열을 정수로 변환했습니다.

Hint
당신의 코드는 예시와 똑같이 보여야 하며, 단지 그것이 단지 &:to_s 대신에 &:to_i를 호출해야 한다.

1. 지침서의 예제를 가이드로 사용하여 수집 또는 매핑을 사용하여 number_array에서 strings_array를 만듭니다. strings_array의 각 요소는 number_array의 해당 요소의 문자열 버전이어야 합니다(즉,["1","2","3"..."). "10"]).

numbers_array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

strings_array = numbers_array.map(&:to_s)

puts strings_array

>> ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

1-12. The Ruby Lambda
procs와 마찬가지로 lambda는 객체이다. 유사점들은 거기서 끝나지 않습니다. 약간의 구문과 몇가지 행동적인 실마리를 제외하면, Lambda는 Proc와 같습니다.

편집기에서 코드를 확인해 보세요. 람다 비트가 보입니까? 타이핑을 치는 건 너무 쉬워요.
lambda { puts "Hello!" }
거의 같다
Proc.new { puts "Hello!" }
오른쪽 예에서 람다를 lambda_demo로 전달하면 람다가 호출되고 람다 코드가 실행됩니다.

이제 블록과 프로세스가 어떻게 작동하는지 알았으니 람다가 콘솔에 어떤 영향을 미칠지 추측할 수 있습니다. 의심스러운 내용을 확인하려면[실행]을 클릭하십시오.

def lambda_demo(a_lambda)
  puts "I'm the method!"
  a_lambda.call
end

lambda_demo(lambda { puts "I'm the lambda!" })
>> I'm the method!
>> I'm the lambda!

1-13. Lambda Syntax
Lambdas는 다음 구문을 사용하여 정의됩니다.
lambda { |param| block }
lambda는 proc를 사용하는 것과 같은 상황에서 유용하다. 다음 연습에서는 Lambda와 procs의 차이를 다룰 것이다. 그 동안 람다 구문을 사용하여 약간의 연습을 해 보자.

Hint
.to_sys또는. 인턴을 사용하여 문자열을 기호로 변환할 수 있습니다.
코드는 다음과 같아야 합니다.
symbolize = lambda { |x| x.magic! }
여기서 x.magic!는 배열의 각 요소를 기호로 변환하는 곳입니다.

1. 편집자에게 줄 수 있는 문자열이 있는데, 상징이 여러개 필요합니다.
4라인 에서 상징이라고 불리는 새로운 변수를 만들어 내세요. 기호에서 매개 변수 하나를 사용하여 해당 매개 변수에. to_sym을 호출하는 람다를 저장합니다.
그리고 나서 우리는. collect방법으로 문자열에 있는 항목을 기호로 변환하기 위해 심볼을 사용한다!

strings = ["leonardo", "donatello", "raphael", "michaelangelo"]

symbolize = lambda {|x| x.to_sym}

symbols = strings.collect(&symbolize)
print symbols

>> [:leonardo, :donatello, :raphael, :michaelangelo]

1-14. Lambdas vs. Procs
만약 여러분이 프로스와 람브다가 매우 비슷하게 생겼다고 생각한다면, 그것은 그들이 그렇기 때문이다! 오직 두가지의 주요 차이점이 있다.
먼저 람다는 람다에 전달되는 인수 수를 확인하는 반면 프로세서는 확인하지 않습니다. 즉, 람다가 잘못된 인수를 통과하면 오류가 발생하는 반면, proc은 예기치 않은 인수를 무시하고 누락된 인수에 0을 할당합니다.
둘째, 람다가 반환되면 제어를 호출 방법으로 전달하고, proc이 반환되면 호출 방법으로 돌아가지 않고 즉시 제어를 수행합니다.
어떻게 작동하는지 보려면 편집기의 코드를 살펴보십시오. 우리의 첫번째 방법은 proc, 두번째 방법은 람다라고 합니다.

실행을 클릭하여 반환 값을 확인하십시오. proc이 배트맨이 이길 것이라고 말하는 것을 봤나요? 이것은 batman_ironman_proc메서드로 돌아가지 않고 즉시 반환되기 때문입니다.
그러나 람다는 호출된 후에 메서드로 돌아가므로 이 방법은 마지막으로 평가한 코드를 반환합니다."아이언 맨이 이길 것입니다.

def batman_ironman_proc
  victor = Proc.new { return "Batman will win!" }
  victor.call
  "Iron Man will win!1"
end

puts batman_ironman_proc

def batman_ironman_lambda
  victor = lambda { return "Batman will win!" }
  victor.call
  "Iron Man will win!2"
end

puts batman_ironman_lambda
>> Batman will win!
>> Iron Man will win!2

1-15. Now You Try!
잘했어! 너는 너 자신의 람다를 적었고 어떻게 그것을 방법으로 전달하는지 보았다. 이제 람다를 작성하여 방법으로 전달해야 합니다!
만약 당신이 이것이 당신이 이미 프로스를 가지고 했던 것과 많이 비슷할 것이라고 생각한다면, 당신이 정확하게 옳다. procs과 마찬가지로, 메서드로 전달할 때 람다 이름의 시작 부분에 & 를 넣어야 합니다. 왜냐하면 람다가 람다를 메서드에서 예상하는 블록으로 변환하기 때문입니다.
람다의 상징은 꽤 시원했다. 어레이의 각 요소가 기호인지 확인하는 람다로 이 값을 조정합니다. .is_a?메서드를 사용하여 이 확인을 수행할 수 있습니다. 이 방법은 개체가 이름이 지정된 개체 유형이면 true이고 그렇지 않으면 false이면 반환됩니다.
:hello.is_a? Symbol
# ==> true
.is_a?확인하려면 기호가 대문자로 표시되어야 합니다!

1. 람다(symbol_filter)를 생성하여 매개 변수 하나를 사용하고 해당 매개 변수가 .is_a?기호인지 확인합니다.
기호라는 새 변수를 생성하고 my_array를 호출한 결과를 저장합니다.람다 값을 선택하여 전달합니다.
파일 끝에 기호를 넣어 배열의 최종 내용을 확인합니다.

my_array = ["raindrops", :kettles, "whiskers", :mittens, :packages]

symbol_filter = lambda {|x| x.is_a? Symbol}

symbols = my_array.select(&symbol_filter)

puts symbols
>> [:kettles, :mittens, :packages]

1-16. Quick Review
이 모든 블록, 프로스 그리고 람바다에 대한 이야기들은 당신의 머리를 회전시킬지도 모른다. 잠시 시간을 내어 각각에 대해 정확히 설명해 보겠습니다.
1. 블록은 단지 도 사이의 코드를 말한다. do..end or {}. 그것은 그 자체로는 물건이 아니지만, .each 또는 .select 같은 방법으로 전달될 수 있습니다.
2. proc은 반복해서 사용할 수 있는 저장된 블록입니다.
3. 람다는 프로세서와 같으며, 단지 인수되는 인수 개수에만 신경을 쓰고 즉시 반환하지 않고 호출 방법으로 돌아갑니다.
블록, 프로세스 및 Lambda가 유사한 작업을 수행할 수 있는 경우는 많지만 프로그램의 정확한 상황은 사용할 항목을 결정하는 데 도움이 됩니다.

이해했어? 좋습니다!준비가 되었으면 다음을 클릭하여 최종 검토 섹션을 시작하십시오.

1-17. Been Around the Block a Few Times
이 시점에서 당신은 루비 블록 마스터입니다. 이것은 꽤 쉬워야 해요!

Hint
ints = odds_n_ends.select { block }

1. 대기 열은 모든 종류의 개체로 가득 차 있지만 정수(10진수 비트가 없는 숫자)만 원합니다.
새 변수 ints를 만들고 요소가 is._a?정수인지 확인하는 블록을 사용하여 idds_n_ends.selected메서드를 호출한 결과를 저장합니다.
파일 끝에 점을 배치하여 배열의 최종 내용을 확인합니다.

odds_n_ends = [:weezard, 42, "Trady Blix", 3, true, 19, 12.345]

ints = odds_n_ends.select { |x| x.is_a? Integer}

puts ints
>> [42, 3, 19]

1-18. Creating a Proc
이제 프로세스를 살펴보겠습니다. 첫번째 단계:새로 만들기!

Hint
my_proc = Proc.new { # block }
또는
my_proc = Proc.new do
  # block
end

1.Under_100이라는 프로세스를 생성하여 번호가 100미만인지 확인합니다. 아직 준비되지 않았습니다.)

# 첫 번째 방법
ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new { |x| x < 100 }

puts ages.select(&under_100)

>> [23, 7, 11, 94, 70, 44]

# 두 번째 방법
ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new do |x|
  x < 100
end

puts ages.select(&under_100)
>> [23, 7, 11, 94, 70, 44]

1-19. Passing Your Proc to a Method (메서드로 프로세스 전달)
완벽해! 이제 우리의 프로세스를 하나의 방법으로 전달해 봅시다.

Hint
구문은 다음과 같아야 합니다.
youngsters = ages.select(&your_proc)

1. 이제 연령층을 사용하게 됩니다. young이라고 하는 변수를 생성하여 호출과 동일하게 설정합니다. age를 선택하고 under_100proc을 전달하여 100미만의 시간을 필터링 합니다. 프로세서를 블록으로 변환하려면_100을(를)패스해야 합니다!
마지막 내용을 보기 위해 젊은이들을 파일의 끝에 둔다.

ages = [23, 101, 7, 104, 11, 94, 100, 121, 101, 70, 44]

under_100 = Proc.new { |x| x < 100 }

youngsters = ages.select(&under_100)

puts youngsters
>> [23, 7, 11, 94, 70, 44]

1-20. Creating a Lambda
2절:1절과 같음! 어서 람다를 만들자.

Hint 구문은 다음과 같아야 합니다.
my_lambda = lambda { |k,v| # code }
또는
my_lambda = lambda do |k,v|
# code
end
여기서#코드는 해시 값이<"M"인지 확인하는 비트입니다.

1. 해시 값이 "M"보다 작은지(초기 알파벳에서)확인하는 첫번째_절반 람다를 만듭니다. 대문자 M은 꼭 사용해야 합니다. 그것은 해시를 체크하는 것이기 때문에, 당신의 람다는 단지 가치|대신|키, 가치|를 포함해야 합니다.

crew = {
  captain: "Picard",
  first_officer: "Riker",
  lt_cdr: "Data",
  lt: "Worf",
  ensign: "Ro",
  counselor: "Troi",
  chief_engineer: "LaForge",
  doctor: "Crusher"
}

first_half = lambda { |h,v| v < "M" }

1-21. Passing Your Lambda to a Method (메소드에 람다 전달)
스트레칭! 이제 람다도 방법으로 전달해 보자.

1. 마지막으로, a_to_m라는 변수를 생성하고 호출과 동일하게 설정한 다음, first_half람다를 입력하여"M"이전 이름을 필터링 합니다.내기. 람다를 블록으로 전환하려면 먼저 통과해야 한다는 것을 기억하세요!
어레이의 최종 내용을 보려면 a_to_m를 파일 끝에 배치합니다.

crew = {
  captain: "Picard",
  first_officer: "Riker",
  lt_cdr: "Data",
  lt: "Worf",
  ensign: "Ro",
  counselor: "Troi",
  chief_engineer: "LaForge",
  doctor: "Crusher"
}

first_half = lambda { |h,v| v < "M" }

a_to_m = crew.select(&first_half)

puts a_to_m
>> {:lt_cdr=>"Data", :chief_engineer=>"LaForge", :doctor=>"Crusher"}

9. Object-Oriented Programming. Part l

1. Object-Oriented Programming l

루비는 객체 지향 언어입니다. 이 과정에서는 객체, 클래스 및 프로그램에서 정보와 동작을 구성하는 데 사용되는 방법에 대해 설명합니다.

1-1. Why Classes?
루비는 객체 지향 프로그래밍 언어로, 객체라 불리는 프로그래밍 구조를 조정한다는 뜻입니다. 루비의 모든 것은 물건이야! 당신은 그것들을 줄곧 사용해 왔기 때문에 그것들은 매우 친숙할 것이다. 개체에는 이전에 보았던 방법과 속성이 있습니다.
"Matz".length # ==> 4
예를 들어"Matz"개체는 길이가. length method이고 길이 속성이 4인 문자열이다. 다음 몇가지 실습에서는 고유한 방법과 내부 변수를 사용하여 개체를 만드는 방법에 대해 알아보겠습니다.
하지만"마츠"가 줄을 이루는 것은 정확히 무엇일까요? 문자열 클래스의 한 인스턴스라는 사실입니다. 클래스는 유사한 특성과 방법을 가진 객체를 구성하고 생산하는 방법일 뿐입니다.

오른쪽에 있는 편집기에서 코드를 확인하세요. 우리는 우리의 클래스, 언어를 정의하고 루비, 파이썬 및 자바 스크립트 인스턴스를 생성했습니다. 어떻게 작동하는지 보려면 코드를 실행하십시오!
이제 여러분만의 클래스와 객체를 만들기 시작할 준비가 되었으면 다음 단계로 넘어가십시오.

class Language
  def initialize(name, creator)
    @name = name
    @creator = creator
  end

  def description
    puts "I'm #{@name} and I was created by #{@creator}!"
  end
end

ruby = Language.new("Ruby", "Yukihiro Matsumoto")
python = Language.new("Python", "Guido van Rossum")
javascript = Language.new("JavaScript", "Brendan Eich")

ruby.description
python.description
javascript.description
>> I'm Ruby and I was created by Yukihiro Matsumoto!
>> I'm Python and I was created by Guido van Rossum!
>> I'm JavaScript and I was created by Brendan Eich!

1-2. Class Syntax
기본 클래스는 클래스 키워드와 클래스 이름으로만 구성됩니다. 확인해 보십시오.
class NewClass
  # Class magic here
end
NewClass는 새로운 루비 객체 클래스를 만들 수 있습니다. 규칙에 따라 클래스 이름은 대문자로 시작하고 relying_on_underscores대신 CamelCase를 사용합니다.

1. 편집기에서[사용자]라는 클래스를 만듭니다. 아직은 class와 end만 만들어라.

class Person

end

1-3. Classing It Up
우리는 우리의 수업이... 음, 아무것도 없어요. 그래서 우리 반의 사람과 끝 사이에 암호를 추가해야 해요.

여러분은 우리의 첫번째 연습에서 우리가 초기화라고 불리는 방법으로 클래스 정의를 시작했다는 것을 알 수 있습니다. 초기화는 클래스에서 생성하는 각 객체를 "부팅" 하는 기능으로 간주할 수 있습니다.

Hint
Person 클래스에는 초기화 방법이 포함되어야 합니다.
def initialize end

1. 계속해서 사용자 클래스에 대한 초기화 방법을 정의하십시오. 아직까지 방법론자들에게 아무것도 넣을 필요가 없다.

class Person
  def initialize

  end
end

1-4. What's in a @name?
좋아! 사용자 클래스에서 사용자를 만들기 전에 한 단계만 더 진행하십시오. 각 사용자가@이름을 가지고 있는지 확인해야 합니다.

루비에서는 인스턴스(instance)변수임을 나타내기 위해 변수 앞에@를 사용합니다. 이는 변수가 클래스의 인스턴스에 연결됨을 의미합니다.

class Car
  def initialize(make, model)
  @make = make
  @model = model
  end
end
kitt = Car.new("Pontiac", "Trans Am")

위의 예에서 코드는 클래스 Car의 kitt인스턴스를 생성합니다. kitt는 자체@제조사("Pontiac")와@모델("Trans암")을 가지고 있습니다. 이러한 변수는 kitt인스턴스(instance)에 속하며, 이를 인스턴스(instance)변수라고 합니다.

다음 몇가지 연습에서는 다른 종류의 변수(예:전체 클래스에 첨부된 변수)를 다룰 것입니다.

Hint
매개 변수와 인스턴스 변수를 정확하게 유지하는 것은 까다로운 일일 수 있습니다. 그래서 여기 프리 빈 이 있습니다. 초기화 방법은 다음과 같아야 합니다.

def initialize(name)
  @name = name
end

1. 초기화 방법에 단일 매개 변수 이름을 지정합니다. 메서드의 본문에서@name=name을 설정합니다.

이것은 루비가 사람을 만들 때마다 이름을 가지고 있어야 한다는 것을 알려 줍니다. 그러면 각각의 사람들은 자신의@이름을 가지게 될 것입니다.

class Person
  def initialize(name)
    @name = name
  end
end

1-5. Instantiating Your First Object (첫번째 개체 인스턴스화)
완벽해! 이제 객체를 생성할 준비가 되었습니다.

클래스 이름에 .new를 호출하여 클래스의 인스턴스를 만들 수 있습니다.
me = Person.new("Eric")

1. 변수 Matz를 생성하고 이를 호출과 동일하게 설정하십시오. 새로운 사용자 클래스. 새로운 이름인 유키히로를 유일한 인수로 붙인다.

class Person
  def initialize(name)
    @name = name
  end
end

matz = Person.new("Yukihiro")

1-6. Scope it Out (범위 설정)
루비 강의 또 다른 중요한 측면은 스코프입니다. 변수의 범위는 프로그램에 표시되는 컨텍스트입니다.

루비 프로그램의 모든 부분에서 모든 변수에 액세스 할 수 있는 것은 아니라는 사실을 알면 놀라실 겁니다. 클래스를 처리할 때는 전역(전역 변수), 특정 메서드 내에서만 사용할 수 있는 변수(로컬 변수)및 의 멤버인 변수를 사용할 수 있습니다. 특정 클래스(클래스 변수)및 클래스의 특정 인스턴스(인스턴스 변수)에만 사용할 수 있는 변수입니다.

방법에서도 마찬가지입니다. 일부는 어디에서나 사용할 수 있고 일부는 특정 클래스의 멤버만 사용할 수 있으며 일부는 특정 인스턴스 개체에만 사용할 수 있습니다.

$ ← 전역 변수(global variables) : 클래스를 처리할 때는 어디에서나 사용할 수 있는 변수
지역 변수(local variables) : 특정 메서드 내에서만 사용할 수 있는 변수
@@ ← 클래스 변수(class variables) : 특정 클래스에서 사용할 수 있는 변수
@ ← 인스턴스 변수(instance variables) : 특정 인스턴스(인스턴스 변수)에만 사용할 수 있는 변수

편집기에서 코드를 확인해 보세요. 일부 변수는$,@또는@start @ @로 시작합니다. 이렇게 하면 전역, 인스턴스(instance)및 클래스 변수(각각)로 표시됩니다. 다음 섹션에서 설명하겠습니다. 이러한 다양한 변수의 작동 방식을 확인하려면 코드를 실행하십시오!

class Computer
  $manufacturer = "Mango Computer, Inc."
  @@files = {hello: "Hello, world!"}

  def initialize(username, password)
    @username = username
    @password = password
  end

  def current_user
    @username
  end

  def self.display_files
    @@files
  end
end

#새 컴퓨터 인스턴스 만들기
hal = Computer.new("Dave", 12345)

puts "Current user: #{hal.current_user}"
#@사용자 이름은 hal인스턴스에 속합니다.

puts "Manufacturer: #{$manufacturer}"
#$제조 업체는 세계적인 기업입니다! 우리는 그것을 직접 얻을 수 있다.

puts "Files: #{Computer.display_files}"
#@ . 파일은 컴퓨터 클래스에 속합니다.

1-7. Naming Your Variables (변수 이름 지정)
인스턴스 변수는@로 시작합니다. 이건 그냥 루비(Ruby)의 개념이 아니에요. 이건 구문의 일부예요! 항상@를 사용하여 인스턴스 변수를 시작하십시오.

클래스 변수는 인스턴스 변수와 같지만 클래스의 인스턴스에 속하는 대신 클래스 자체에 속합니다. 클래스 변수는 항상 @@로 시작합니다.

글로벌 변수는 두가지 방법으로 선언할 수 있습니다. 첫번째는 이미 익숙한 것입니다. 어떤 방법이나 클래스에 상관 없이 변수를 정의하면 됩니다. 글로벌 합니다. 메소드나 클래스 안에서 변수를 글로벌 하게 만들려면 $ 같은 것으로 시작하면 됩니다.

잠시 후 인스턴스(instance)와 클래스 변수를 더 자세히 살펴보겠습니다. 먼저, 지역 및 글로벌 범위에 대해 간단히 검토해 보겠습니다.

Hint
다음 두가지 중 하나를 수행할 수 있습니다.
1. my_variable을 클래스에서 글로벌 범위로 이동하거나
2. my_variable맨 앞에$를 붙여 놓으면 글로벌화됩니다. 두 변수를 모두 업데이트해야 합니다.

1. 오른쪽에 있는 코드를 보세요. my_variable변수가 클래스 안에 있으므로 해당 변수 외부의 puts메서드로 연결할 수 없습니다. 하지만 당신은 이것을 고칠 수 있어요! 위에서 언급한 두가지 글로벌 변수 방법 중 하나를 사용합니다.

도움이 더 필요하면 힌트를 확인하세요.

원형
class MyClass
  my_variable = "Hello!"
end

puts my_variable

방법 1) 아예 모든 곳에서 사용할 수 있게 변수를 빼둠.
my_variable = "Hello!"
class MyClass

end

puts my_variable

방법 2) 전역 변수로 만듬.
class MyClass
  $my_variable = "Hello!"
end

puts $my_variable

1-8. For Instance... (인스턴스의 경우)
좋아요! 하지만 주의 사항 하나는 프로그램의 어느 곳에서든 글로벌 변수가 변경될 수 있다는 것이고, 일반적으로 좋은 생각은 아닙니다. 일부 위치에서만 변경할 수 있는 범위가 제한된 변수를 생성하는 것이 훨씬 좋습니다!

예를 들어 인스턴스 변수는 특정 개체(또는"인스턴스")에 속합니다. 인스턴스(instance)변수에 대해 연습해 봅시다! 전부터 편집자에게 개인 수업을 추가했습니다.

Hint
이름(매개 변수)과@n을 사용한 것처럼, 초기화 본문에 나이와 직업을 초기화하고 동일하게 설정하기 위한 매개 변수로 연령과 직업을 포함해야 한다.ame(인스턴스 변수).

1. 초기화 방법에 연령 및 직업 매개 변수를 추가한 다음 이 변수를 방법 본문에 인스턴스(instance)변수와 동일하게 설정합니다. name@name(이름)예제를 참조하십시오.

class Person
  def initialize(name, age, profession)
    @name = name
    @age = age
    @profession = profession
  end
end

1-9. Twice the @,Twice as Classy (@의 2배, Classy의 2배)
두개의@기호로 변수 이름을 시작하여 클래스 변수를 만들 수 있습니다. 클래스 변수는 클래스의 인스턴스가 아니라 전체 클래스에 연결됩니다.
class MyClass
  @@class_variable
end
클래스의 모든 인스턴스가 공유하는 클래스 변수의 복사본이 하나만 있기 때문에 멋진 루비 기술을 실행하는 데 사용할 수 있습니다. 예를 들어 클래스 변수를 사용하여 생성한 클래스의 인스턴스 수를 추적할 수 있습니다. 지금 하자!

Hint
첫번째 단계를 위해, @ . people_count변수를 선언하고 이를 0으로 설정하기만 하면 됩니다.

두번째 단계에서는 이 단계에 하나를 추가하여 @@people_count만 증가 하면 됩니다. 우리는
@@people_count += 1
마지막 단계에서는 @@people_account를 반환하기만 하면 됩니다. 루비는 암시적으로 반환할 수 있으니 원한다면 간단히 @@people_count을 입력하세요!

1. 세가지를 해 봅시다.

3번 라인에서 @@people_count를 0으로 설정
8번 라인에 @@people_count 추가
13번 라인에서 @@people_count 반환

class Person

  @@people_count = 0

  def initialize(name) # 2. matz와 dhh가 여기에 값이 입력된다.
    @name = name
    @@people_count += 1 # 3. 입력이 되면 people_count 변수가 하나씩 증가한다.
  end

  def self.number_of_instances
    return @@people_count # 4. 카운터 값을 리턴하여 반환한다.
  end
end

matz = Person.new("Yukihiro") # 1. 얘네를 Person이라는 클래스에 값을 준다.
dhh = Person.new("David")

puts "Number of Person instances: #{Person.number_of_instances}"  # 출력 값 나옴.
>> Number of Person instances: 2

1-10. Classes Are Serious Business (수업은 진지한 비즈니스 입니다)
언어와 사람과 같은 클래스는 클래스와 인스턴스의 개념을 배우기 시작할 때 좋습니다.

그러나 클래스와 객체는 종종 실제 객체를 모형화하는 데 사용됩니다. 편집기의 코드는 상용 소프트웨어에서 찾을 수 있는 클래스와 객체의 종류를 좀 더 사실적으로 보여 줍니다. 여기 Rails소스 코드 조각이 있습니다. 기록/무효 클래스의 인스턴스를 만드는 방법을 보시겠습니까?

구문의 대부분은 친숙해 보일 것입니다. 사용자가 잘못된 레코드를 만들거나 저장하려고 하면 상승 비트(향후 학습에서 다룰 예정)에서 새로운 레코드/ 잘못된 레코드가 생성됩니다.

계속하려면 실행을 클릭하십시오!

def create_record(attributes, raise_error = false)
  record = build_record(attributes)
  yield(record) if block_given?
  saved = record.save
  set_new_record(record)
  raise RecordInvalid.new(record) if !saved && raise_error
  record
end

1-11. Watch Your Step (발걸음 조심 하십시오)
상속은 까다로운 개념이므로 단계적으로 살펴보겠습니다.

상속은 한 클래스가 다른 클래스의 특성과 방법을 취하는 프로세스이며, is-a관계를 표현하는 데 사용됩니다. 예를 들어, 만화 속 여우는 만화 속 포유류이다. 그래서 CartoonPox클래스는 CartoonMammal클래스로부터 물려받을 수 있다.

하지만 마법사는 엘프가 아니므로, 엘프급에서 상속 받아서는 안 된다. 대신에, 마법사와 엘프는 결국 동일한 MagicalBeing 클래스에서 상속 받을 수 있다.

편집기에서 코드를 확인해 보세요. ApplicationError라는 클래스와 ApplicationError에서 상속되는 SuperBadError 클래스를 정의했습니다. SuperBadError본문에 display_error메서드를 정의하지는 않지만 상속을 통해 해당 메서드에 액세스 할 수 있습니다. 직접 확인하려면 Run(실행)을 클릭하십시오.

class ApplicationError
  def display_error
    puts "Error! Error!"
  end
end

class SuperBadError < ApplicationError
end

err = SuperBadError.new
err.display_error

1-12. Inheritance Syntax (상속 구문)
루비에서는 상속이 다음과 같이 작동합니다.
class DerivedClass < BaseClass
# Some stuff!
end
파생 클래스는 사용자가 만드는 새 클래스이고 기본 클래스는 새 클래스가 상속하는 클래스입니다. "<" 으로 이어받을 수 있습니다.

Hint
기억하세요, 빈 클래스 구문은
class ClassName
end

1. 오른쪽 편집기에 애플리케이션 클래스를 생성했습니다. 응용 프로그램에서 상속되는 고유 클래스 MyApp을 만듭니다. 아직은 수업 내용에 아무것도 넣을 필요가 없어요!

class Application
  def initialize(name)
    @name = name
  end
end

class MyApp < Application
end

1-13. Override!
경우에 따라 상속되는 클래스 중 하나가 상위 클래스의 메서드 및 속성을 상속할 뿐만 아니라 하나 이상의 클래스를 재정의할 수도 있습니다.

예를 들어 메시지에서 상속되는 이메일 클래스가 있을 수 있습니다. 두 클래스 모두 전송하는 보내기 방법이 있을 수 있지만, 전자 메일 버전은 유효한 전자 메일 주소를 식별하고 메시지에 대해 알 수 없는 여러 전자 메일 프로토콜을 사용해야 합니다. 파생 클래스에 send_mail메서드를 추가하고 절대 사용하지 않을 전송 방법을 상속하는 대신 이메일 클래스에 전송 방법을 명시적으로 생성하여 모든 email를 수행할 수 있습니다.

이 새 버전의 보내기는 전자 메일 인스턴스인 모든 개체의 상속된 버전을 재정의합니다(즉, 대체).

Hint
puts를 입력하지 말고 return 하라.

1. 좀 더 재미 있는 예를 들어 보자 Creature로부터 상속 받은 새로운 클래스 Dragon을 만듭니다. 여러분의 파생된 학생들에게 창조를 무시하는 싸움 방법을 주세요;"펀치를 휘두르는 것!"대신에, 그것은 "불을 다스리는 것!"을 되돌려야 합니다.

class Creature
  def initialize(name)
    @name = name
  end

  def fight
    return "Punch to the chops!"
  end
end

class Dragon < Creature
  def fight
    return "Breathes fire!" # 재정의 하여 사용.
  end
end

1-14. When Good isn't Good Enough (좋은 것이 충분하지 않을 때)
반면 파생 클래스(또는 하위 클래스)를 사용하여 작업할 때 해당 클래스의 기본 클래스(상위 또는 하위 클래스라고도 함)에 정의된 메서드 또는 속성을 덮어쓴 경우가 있습니다.정말 필요한 거야 아무 걱정 마십시오! 루비의 내장 수퍼 키워드를 사용하여 슈퍼 클래스의 속성이나 메서드에 직접 액세스 할 수 있습니다.

구문은 다음과 같습니다.
class DerivedClass < Base
  def some_method
  super(optional args)
  # Some stuff
  end
  end
end
메소드 안에서 수퍼에 전화하면 루비가 현재 클래스의 슈퍼 클래스를 보고수퍼 클래스라고 불리는 것과 같은 이름의 메소드를 찾습니다. 발견되면 루비가 슈퍼 클래스 버전을 사용하게 됩니다.

Hint 코드는 다음과 같아야 합니다.
def fight
  puts "Instead of breathing fire..."
  super
end

1. 우리는 결국 속임수를 쓰기로 결정했습니다! 두가지를 해 봅시다.

불을 숨쉬는 것 대신에 " 넣는 것...용의 싸움 방법의 첫번째 줄로.
드래곤의 싸움의 정의 안에 있는 복귀 문장을 슈퍼 단어로 바꾸어라. (창조론의 싸움 방법은 필요 없기 때문에 슈퍼에게 어떤 논쟁도 넘길 필요가 없다.)

class Creature
  def initialize(name)
    @name = name
  end

  def fight
    return "Punch to the chops!"
  end
end

class Dragon < Creature
  def fight
    puts "Instead of breathing fire..."
    super
  end
end

1-15. There Can Be Only One!
주어진 루비 클래스는 모두 슈퍼 클래스를 하나만 가질 수 있습니다. 일부 언어는 클래스에 다중 상속이라는 모델인 둘 이상의 부모를 가질 수 있도록 허용합니다. 이것은 정말로 추하게 될 수 있습니다. 그래서 루비는 그것을 허락하지 않습니다.
그러나 여러 클래스의 데이터나 동작을 단일 클래스로 통합하려는 경우가 있으며, Ruby는 Mixin을 사용하도록 허용합니다. 우리는 다음 수업에서 mixins에 대해 배울 거예요! 지금은 루비에서 다중 상속을 시도하면 어떻게 되는지 보여 드리겠습니다.
지금 보여 드릴 데모 코드에는 멋진 트릭이 포함되어 있습니다. 새로운 줄을 사용하지 않고 루비 문을 닫으려면 세미 콜론을 입력하면 됩니다. 이것은 당신이 다음과 같은 것을 쓸 수 있다는 것을 의미한다.
class Monkey
end
단 한줄로. class Monkey; end 이것은 빈 클래스 또는 메서드 정의와 같이 매우 짧은 항목을 쓸 때 시간을 절약하는 기능입니다.

편집기에서 코드를 확인해 보세요. 우리가 드래곤을 Creature와 Person으로부터 물려받으려고 하는 거 보여? 드래곤 클래스 오류에 대한 슈퍼 클래스 불일치가 발생합니다. 직접 확인하려면 코드를 실행하십시오!

class Creature
  def initialize(name)
    @name = name
  end
end

class Person
  def initialize(name)
    @name = name
  end
end

class Dragon < Creature; end # 루비의 모든 클래스는 슈퍼 클래스 하나만 가질 수 있다.(상속받을 수 있다. only 1)
class Dragon < Person; end # 오류명 : 드래곤의 슈퍼 클래스 불일치

1-16. Class Basics
좋아! 복습 좀 합시다.

Hint 너의 코드는 이렇게 되어야 합니다.
class ClassName
  def initialize(param1, param2)
  @param1 = param1
  @param2 = param2
  end
end

1. Message라는 클래스를 만들고 초기화 방법을 지정합니다. 초기화 방법은 두개의 매개 변수(각각 시작 및 끝)를 사용하여 인스턴스(instance)변수@및@~()로 설정해야 합니다. 아직 너의 학급의 인스턴스를 만드는 것에 대해 걱정하지 마라.

class Message
  def initialize(from, to)
    @from = from
    @to = to
  end
end

1-17. Getting classier
완벽해! 이제 클래스 변수에 대해 좀 더 자세히 살펴보겠습니다.

Hint
초기화 방법을 정의하기 전에 메시지 클래스 내에서 @@messages_sent변수를 선언해야 합니다.
다음과 같이 @@messages_sent변수를 증가시킬 수 있습니다.

def initialize(from, to)
  @from = from
  @to = to
  @@messages_sent += 1
end

1. 메시지 클래스에 class @@message_sent class변수를 지정하고 이를 0으로 설정합니다. 초기화 방법 본문에서 이 값을 1씩 증가시켜 새 메시지 개체가 생성될 때마다 @@message_sent가 1씩 증가합니다. 아직 클래스의 인스턴스를 만들지 마십시오.

class Message
  @@messages_sent = 0
  def initialize(from, to)
    @from = from
    @to = to
    @@messages_sent += 1
  end
end

1-18. Forge an Object in the Fires of Mount Ruby (루비 화산 화재 사건에 객체를 하나 만들어라)
완벽해! 이제 메시지 클래스의 인스턴스를 생성하겠습니다.

Hint
다음과 같은 클래스에서 개체의 인스턴스를 생성할 수 있습니다.
obj = ClassName.new(parameters)

1. 수업이 끝난 후 my_message라는 변수를 생성합니다.
메시지를 사용하여 메시지 클래스의 인스턴스를 만듭니다.당신이 원하는 논쟁들을 가진 새로운 것! 결과를 my_message로 저장하십시오.

class Message
  @@messages_sent = 0

  def initialize(from, to)
    @from = from
    @to = to
    @@messages_sent += 1

  end

end

my_message = Message.new("fuck", "you")

1-19. Inheriting a Fortune (행운의 상속)
완벽해! 이제 상속에 대해 연습을 좀 해 봅시다.

Hint
이것은 당신이 이미 작성한 코드와 매우 유사할 것입니다. 패턴들, 패턴들은 어디에나!
루비에서의 상속은 다음과 같습니다.
DerivedClass < BaseClass
  # Some class stuff
end

전자 메일에 대한 초기화 방법은 다음과 같아야 합니다.
def initialize(subject)
  @subject = subject
end

1. 메시지에서 상속되는 두번째 클래스인 Email을 만듭니다. 하나의 매개 변수, 제목만 사용하고 제목과 동일하게 설정된 인스턴스 변수@제목을 가진 고유한 초기화 방법을 제공합니다.

class Message
  @@messages_sent = 0
  def initialize(from, to)
    @from = from
    @to = to
    @@messages_sent +=1
  end
end

my_message = Message.new("fuck", "you")

class Email < Message
  def initialize(subject)
    @subject = subject
  end
end

1-20. Up, Up, and Away!
당신은 챔피언이에요! 마지막 주제는 루비의 수퍼 키워드입니다. (결국 메시지 초기화 방법이 마음에 들기로 결정했습니다.)

Hint
이메일 클래스에는 초기화라는 단일 방법이 포함되어 있어야 하며, 이 방법을 사용하려면 시작과 종료라는 두 변수가 필요합니다. 초기화 본문에 있는 유일한 코드 행은 단어:수퍼!

1. 이 과정을 마치려면 계속해서 전자 메일에서 제목 매개 변수와@subject인스턴스 변수를 제거하십시오.
전자 메일의 초기화 방법은 처음부터 끝까지 메시지에 전달된 것과 동일한 두가지 매개 변수를 전달하고 전자 메일의 초기화 방법 본문에 수퍼 키워드를 유일한 코드 행으로 추가합니다.

class Message
  @@messages_sent = 0
  def initialize(from, to)
    @from = from
    @to = to
    @@messages_sent +=1
  end
end

class Email < Message
  def initialize(from, to)
   super
  end
end

my_message = Message.new("Jinx", "Vi")

2. Virtual Computer

종종 프로그래머는 가상 시스템을 사용하여 실제 컴퓨터를 시뮬레이션합니다. 실제 VM을 구축하지는 않겠지만, 이 프로젝트에서는 루비 클래스를 사용하여 데이터를 저장하는 가상 컴퓨터를 만들 예정입니다.

2-1. What You'll Be Building (무엇을 만들 것인가)
루비의 클래스와 객체에 대한 모든 것을 배웠으니, 심장에 필요한 루비 객체를 만들 수 있습니다. 이 프로젝트에서는 새로운 지식을 활용하여 머신 클래스를 만들고 가상 파일을 조작할 수 있는 해당 클래스의 인스턴스를 생성합니다.
준비됐어?시작하려면 코드를 실행해!

class Machine
  @@users = {}

  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end

  def create(filename)
    time = Time.now
    @files[filename] = time
    puts "#{filename} was created by #{@username} at #{time}."
  end

  def Machine.get_users
    @@users
  end
end

my_machine = Machine.new("eric", 01234)
your_machine = Machine.new("you", 56789)

my_machine.create("groceries.txt")
your_machine.create("todo.txt")

puts "Users: #{Machine.get_users}"

2-2. Create Your Class
좋아! 어서 수업을 시작하자.

Hint
이 시점에서 당신의 클래스와 메서드는 꽤 비어 있을 것입니다. 초기화는 다음과 같아야 합니다.
def initialize
end
클래스 시스템에는 초기화 방법 외에는 아무것도 포함되지 않아야 합니다.

1. 시스템이라는 클래스를 생성하고 매개 변수를 사용하지 않는 초기화 방법을 지정하십시오. 초기화 본문은 비어 있어야 합니다.

class Computer
  def initialize

  end
end

2-3. Fancify Your Initialize Method (초기화 방법 조정)
잘 했다! 이제 초기화 방법에 일부 매개 변수를 전달하고 일부 인스턴스 변수를 설정하여 재미를 더해 보겠습니다.

Hint
다음과 같이 인스턴스(instance)변수를 전달된 매개 변수의 값으로 설정할 수 있습니다.
def initialize(my_var) @my_var = my_var end
모든 인스턴스(instance)변수를 매개 변수로 설정할 필요는 없습니다! @파일은@파일={}이어야 합니다.

1. 업데이트 초기화를 수행하여 사용자 이름과 암호의 두가지 매개 변수를 사용합니다. 초기화 본문에서 인스턴스 변수@사용자 이름과@password(각각)를 이러한 매개 변수로 설정합니다.

초기화 방법에서는@파일 인스턴스 변수를 생성하여 이를 빈 해시로 설정할 수도 있습니다. 이것은 우리가 나중에 파일들을 추적할 수 있도록 하기 위함이다!

class Computer
  def initialize(username, password)
    @username = username
    @password = password
    @files = {}
  end
end

2-4. Have a Little Class
어서 가서 학급 변수를 던져 보자. 변수 We @ . 사용자를 사용하여 컴퓨터의 모든 사용자를 추적합니다.

Hint
도움이 필요하다면 자유롭게 첫번째 연습을 돌아보세요!
변수를{}(으)로 동등하게 설정하기만 하면 변수를 빈 해시로 설정할 수 있습니다.

1. 컴퓨터 클래스에 @ . @ 사용자라는 클래스 변수를 추가합니다. 빈 해시에 동일하게 설정합니다.

초기화 방법에서 사용자 해시가 각 사용자 이름의 암호가 연결된 값으로 사용자 이름을 키로 유지하도록 @@users[username]=password를 설정합니다.

class Computer
  @@users = {}
  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end
end

2-5. Getting More Creative (더욱 창의적으로 만들기)
잘 했어요 우리 반은 하나가 되어 가는데, 조금 지루해요. 다른 방법을 추가하고 만들어 봅시다. 여기서 몇가지 작업을 수행해야 합니다.

Hint
파일 이름/시간/키/값 쌍을@파일 해시에 추가할 수 있습니다.
time = Time.now
@files[filename] = time

1. 컴퓨터 클래스 내에서 단일 매개 변수 파일 이름을 사용하여 만들기라는 메서드를 정의합니다.

내부 작성에서 시간이라고 하는 변수를 선언하고 현재 시간과 동등하게 설정합니다(Time.now사용).

그런 다음 만들기 내부에서@파일 해시에 새 키/값 쌍을 추가합니다. 파일 이름 키를 사용하여 값 시간을 저장합니다.

생성의 마지막 단계를 위해 사용자에게 새 파일이 생성되었음을 알리는 메시지를 표시하십시오. 원하는 정보를 얼마든지 입력하십시오. 연습 1에서 사용했던 정보가 파일 이름, 사용자 이름 및 시간을 인쇄했습니다.

class Computer
  @@users = {}
  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end

  def create(filename)
    time = Time.now
    @files[filename] = time
    puts "#{filename} and #{time} by #{@username}. "
  end
end

>> password.txt and 2018-07-29 13:53:39 +0000 by Dr. Cham.
>> blastoff.txt and 2018-07-29 13:53:39 +0000 by Dr. Cham.

2-6. Who are the Users?
완벽해! 하지만 이제 생각해 보니, 우리는 파일을 만들 때마다 수많은 사용자들이 파일을 만들 수 있습니다. 그리고 우리는 우리의 users class 사용자 클래스 변수에 도달할 방법이 없습니다! 우리는 그것에 도달하기 위한 방법을 만들어야 할 것이다.

@@users는 클래스 변수이므로 클래스 메서드를 사용하여 클래스를 캡처합니다. 지금까지 살펴본 방법의 대부분은 인스턴스 방법으로,"matz"또는"blixy"와 같은 특정 인스턴스에 대한 작업을 수행합니다. 클래스 메서드는 클래스 자체에 속하며, 이러한 이유로 클래스 이름 앞에 붙습니다.
class Machine
  def Machine.hello
  puts "Hello from the machine!"
  end
end
이것을 위한 지름길이 있다. 우리는 나중에 배울 것이다.

Hint 코드는 이러해야 합니다.
def ClassName.method_name
  @@class_variable
end
여기서 ClassName은 Computer, method_name은 get_user이며, @@class_variable은 @@users입니다.

1. 컴퓨터 클래스에 새 클래스 메서드를 추가합니다.get_user. 매개 변수가 없어야 합니다.
새 컴퓨터.get_user메서드는 @ . 사용자 클래스 변수를 반환해야 합니다.

class Computer
  @@users = {}
  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end

  def create(filename)
    time = Time.now
    @files[filename] = time
    puts "#{filename} and #{time} by #{@username}. "
  end

  def Computer.get_users
    return @@users
  end
end

2-7. Instantiation Nation
잘 했어요 마지막 단계:컴퓨터 클래스의 인스턴스를 만듭니다.

전에도 해 본 적이 있지만, 재교육 활동이 있습니다.
class Person
  def initialize(name)
  @name = name
  end
end

emma = Person.new("emma")

1. 위의 예에서는 먼저 초기화 방법을 사용하여 사용자 클래스를 정의합니다.
2. 그런 다음 새로운 사람의 인스턴스를 만들어 엠마라는 새로운 변수에 저장합니다.

Hint 명심할 것은 다음과 같은 수업을 실시한다는 것입니다.
my_instance = ClassName.new(arguments)

1. 수업이 끝나면 새 컴퓨터 인스턴스를 만들어 my_computer라는 새 변수에 저장합니다. 당신의 주장에 당신이 좋아하는 사용자 이름과 비밀 번호를 자유롭게 사용하세요!

class Computer
  @@users = {}
  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end

  def create(filename)
    time = Time.now
    @files[filename] = time
    puts "#{filename} and #{time} by #{@username}. "
  end

  def Computer.get_users
    return @@users
  end
end

my_computer = Computer.new("killer", "hunter")

2-8. You Did it!
잘했어! 가상 컴퓨터 인스턴스를 생성하는 컴퓨터 클래스를 가지고 있습니다.

수업 시간에 자유롭게 어울려라. 파일을 업데이트하는 방법을 추가하면 어떻게 됩니까? 아니면 삭제할까요? 초기화하거나 생성하기 위해 추가 매개 변수를 추가하려면 어떻게 해야 합니까?

컴퓨터가 원하는 대로 작동하면 실행을 클릭하여 이 프로젝트를 완료합니다.

class Computer
  @@users = {}
  def initialize(username, password)
    @username = username
    @password = password
    @@users[username] = password
    @files = {}
  end

  def create(filename)
    time = Time.now
    @files[filename] = time
    puts "#{filename} and #{time} by #{@username}. "
  end

  def Computer.get_users
    return @@users
  end
end

my_computer = Computer.new("killer", "hunter")

10. Object-Oriented Programming, Part ll

1. Object-Oriented Programming ll

이 과정에서는 정보 숨기기, 모듈, 혼합 등 루비의 OOP에 대한 보다 진보된 측면을 다룰 것입니다.

1-1. Need-to-Know Basis
당신은 우리가 루비에 왜 정보를 숨겼는지 궁금할 것이다. 루비 프로그램의 모든 부분이 다른 부분이 무엇을 하고 있는지 아는 것은 괜찮지 않나요?
소프트웨어를 쓰고 사용하는 유일한 사람이라면 가능합니다. 하지만 다른 사람들이 여러분의 프로그램을 작업하거나 사용할 때, 그들은 여러분의 프로그램의 다른 부분들이 그들의 일을 하는 방식을 가지고 빈둥거리려고 할 지도 모릅니다. 당신은 그것을 원하지 않아요!
이러한 이유로 루비는 당신이 몇몇 방법을 공공연히 그리고 다른 사람들을 비공개로 만들 수 있게 한다. 대중적인 방법들은 프로그램의 나머지 부분들과 접할 수 있게 해준다; 그들은 말한다, "이봐! 내 수업이나 수업의 예에 대해 알고 싶은 게 있는지 물어봐."
반면에, 개인적인 방법은 당신의 학급이 방해받지 않고 그들 자신의 일을 하는 것이다. 그들은 누군가가 그들에게 어떤 것도 물어보는 것을 원하지 않기 때문에, 그들은 그들 자신에게 다가갈 수 없습니다!

편집기에서 코드를 확인하십시오. about_me 방법에 대한 공개적인 방법과 개인 은행_account_number 방법을 만들었습니다. 클래스 외부에서 bank_account_number 메서드를 호출할 때 발생하는 작업을 보려면 실행을 클릭하십시오.

class Person
  def initialize(name, age)
    @name = name
    @age = age
  end

  public    # This method can be called from outside the class.

  def about_me
    puts "I'm #{@name} and I'm #{@age} years old!"
  end

  private   # This method can't!

  def bank_account_number
    @account_number = 12345
    puts "My bank account number is #{@account_number}."
  end
end

eric = Person.new("Eric", 26)
eric.about_me
eric.bank_account_number

>> I'm Eric and I'm 26 years old!

1-2. Quick Review: Building a Class (빠른 검토 클래스 만들기)
우리 수업을 만들자!
class ClassName
  def method_name(parameter)
  @class_Variable = parameter
  end
end
1. 먼저 Ruby에게 ClassName을 구성하기를 원한다고 말합니다. 수업 끝내는 것을 잊지 마세요!
2. ClassName에서는 방법을 정의합니다. 여기에는 MethodName 다음에 (parameter), 이 방법을 사용할 때 MethodName("hello!")이 표시됩니다.
3. 위의 매개 변수가 "안녕하세요!"인 경우 다음 라인에 있는 변수 @classVariable에 할당됩니다.
4. 다시, MethodName을 종료하는 것을 잊지 마세요!

1.처음, Dog라는 클래스를 만듭니다.
클래스 Dog 내에 초기화 방법을 만듭니다.
초기화 방법이 이름과 품종이라는 두 가지 매개 변수를 수락하도록 허용합니다.
초기화 방법 내부에서는 이 두 매개 변수를 각각 @name 및 @breced 변수에 할당합니다.

class Dog
  def initialize(name, breed)
    @name = name
    @breed = breed
    end
end

1-3. Going Public (공개)
잘했어! 이제 공적인 방법과 사적인 방법에 대해 자세히 알아보겠습니다.
Ruby에서는 메서드가 기본적으로 공개되므로 공용 또는 개인 방법을 지정하지 않으면 메서드가 공개됩니다. 그러나 이 경우, 우리는 어떤 방법이 공공적인지 우리의 코드를 읽는 사람들에게 분명히 하고 싶다. 이를 위해 방법 정의에 다음과 같이 공개합니다.
class ClassName
  # Some class stuff
  public
  def public_method
# public_method stuff
  end
end
다른 말을 하지 않으면 공개 키워드 뒤에 클래스 정의가 끝날 때까지 모든 내용이 공개됩니다. (다음 연습에서는 다르게 말할 것입니다.)

1. 우선 개 짖는 방법만 들어보자. 나무껍질 방법은 "우프!"를 넣어야 한다.

class Dog
  def initialize(name, breed)
    @name = name
    @breed = breed
  end

  public
  def public_bark
   puts "Woof!"
  end
end

1-4. Private! Keep Out! (보호 출입금지!)
완벽해! 그러나 우리의 루비 방법이 모두 공개되어서는 안 된다.
공개를 사용하여 공개 방법을 발표하는 것과 마찬가지로 비공개 방식을 사용하여 개인 방식을 지정합니다.
#뭐 요건 줄여서 이렇게 사용할 수 있다고 설명하는 거네.
class ClassName
  # Some class stuff

  public
  # Public methods go here
  def public_method; end

  private
  # Private methods go here
  def private_method; end
end
개인 방법은 다음과 같습니다.
정칙의 즉, 내부 다른 코드에서만 이 방법을 호출할 수 있습니다.
목적 이것을 말하는 또 다른 방법은 그 방법을 명시적 수신자로 호출할 수 없다는 것이다. 당신은 수신기를 계속 사용해 왔군요. 이런 것들이 메서드라고 불리는 객체들이에요! 개체를 호출할 때마다method, object는 method의 수신기이다.
개인 정보에 접근하기 위해서는, 우리는 그것을 얻는 법을 아는 공공적인 방법을 만들어야 한다. 이것은 공개 인터페이스와 개인적인 구현을 구분하고, 우리는 다음 두 가지 연습에서 이것을 더 자세히 검토할 것입니다.

class Dog
  def initialize(name, breed)
    @name = name
    @breed = breed
  end

  public
  def bark
   puts "Woof!"
  end

private
def id
    @id_number = 12345
  end
end

1-5. attr_reader, attr_writer
우리는 루비가 속성에 접근하기 위해 방법이 필요하다는 교훈을 보았다. 예를 들어 @name 인스턴스(instance) 변수에 액세스하려면
def name
  @name
end
이제 그만! attra_reader를 사용하여 변수에 액세스하고 attrar_writer를 사용하여 변수를 변경할 수 있습니다. 만약 우리가 쓴다면
class Person
  attr_reader :name
  attr_writer :name
  def initialize(name)
  @name = name
  end
end
Ruby는 자동으로 다음과 같은 작업을 수행합니다.
def name
  @name
end

def name=(value)
  @name= value
end
마법처럼, 우리는 원하는 대로 변수를 읽고 쓸 수 있습니다! 인스턴스 변수(기호)를 attra_reader 또는 attacher_writer에 전달합니다.
그 이름은 우습게 보일 수도 있지만, 메서드 이름에 = 기호를 넣을 수도 있습니다. 그것은 단지 루비 컨벤션입니다.

Hint
이름과 작업= 메서드를 클래스에서 완전히 제거한 다음 :name에 대해 attacher를 추가하고 attr_writer에 대해 :job을 추가합니다. 예를 들어, attacher_reader는 다음과 같습니다.
class Person
attr_reader :name
# All the other class stuff
end

1.우리는 @name을 얻는 방법과 @job을 변경하는 방법을 통해 사용자 클래스를 다시 불러왔습니다. 계속하여 이름 및 작업= 메서드를 제거하고 :name에 대한 attra_reader와 :job에 대한 attrier_writer를 추가합니다.

class Person
  def initialize(name, job)
    @name = name
    @job = job
  end

  attr_reader :name
  attr_writer :job
end

1-6. attr_accessor
특정 변수를 읽고 쓰려면 attra_reader 및 attributor_writer보다 훨씬 짧은 바로 가기가 있습니다. attr_accessor를 사용하여 변수를 한 번에 읽을 수 있고 쓸 수 있도록 할 수 있습니다.

1.여기서는 attra_reader와 attrar_writer가 있습니다. 계속하여 attrier_accessor로 대체하십시오!

class Person
  attr_accessor :name
  attr_accessor :job

  def initialize(name, job)
    @name = name
    @job = job
  end
end

1-7. What's a Mudule?
모듈은 설정된 방법과 상수를 포함하는 도구 상자로 생각할 수 있습니다. 당신이 사용하고 싶어하는 루비 툴이 아주 많지만, 그것은 그들을 항상 주변에 두기 위해 통역관을 혼란스럽게 할 것이다. 그렇기 때문에 모듈 안에 있는 상수와 방법이 필요할 때만 모듈 도구 상자를 당깁니다!
모듈은 클래스와 매우 유사하며 모듈만 인스턴스를 만들 수 없으며 하위 클래스를 가질 수 없습니다. 그것들은 그냥 물건을 저장하는 데 사용돼요!

편집기에서 예제 모듈을 확인하십시오. PI에 저장된 pi 근사치 및 원의 원주 및 면적을 계산하는 일련의 방법을 확인하십시오.
계속하려면 을 클릭하십시오.

module Circle

  PI = 3.141592653589793

  def Circle.area(radius)
    PI * radius**2
  end

  def Circle.circumference(radius)
    2 * PI * radius
  end
end

1-8. Module Syntax
기존 모듈(얼마지막!)을 꺼낼 수 있지만 직접 만들 수도 있습니다. 모듈은 매우 쉽게 만들 수 있습니다! 다음과 같이 모듈 키워드만 사용합니다.
module ModuleName
  # Bits 'n pieces
end
클래스 이름과 마찬가지로 모듈 이름은 lowercase_with_underscore가 아닌 CapitalizedCamelCase로 작성됩니다.
변수는 (정의에 따라) 변하기 때문에(또는 변하기 때문에) 모듈에 변수를 포함하는 것은 이치에 맞지 않습니다. 그러나 상수는 항상 동일하게 유지되기 때문에 모듈에 유용한 상수를 포함하는 것은 좋은 생각이다.
루비가 초기화되면 상수 값을 동일하게 유지하지 않지만 변경하려고 하면 경고가 표시됩니다. 루비 상수는 ALL_CAPS로 작성되며 단어가 두 개 이상인 경우 밑줄로 구분됩니다.
Ruby 상수의 예로는 수학 모듈에 살고 있고 대략 3.141592653589793과 동일한 PI가 있습니다. 우리는 이전 연습에서 우리만의 PI를 만들었지만 걱정하지 마세요. 왜냐하면 루비는 그것들을 분리시키는 것을 알고 있습니다.

1. 오른쪽의 편집기에서 MyLibrary라는 고유한 모듈을 만듭니다. FAVE_BOOK라는 상수를 포함시키고 가장 좋아하는 책의 이름을 지정하는 문자열과 동일하게 설정하십시오!

module MyLibrary
  FAVE_BOOK = "Rich Book"
end

1-9. Resolve to keep Learning (학습 유지에 대한 해결)
모듈의 주요 목적 중 하나는 방법과 상수를 지정된 공간으로 구분하는 것이다. 이것은 이름표현이라고 불리며 루비가 수학:PI와 원:PI를 혼동하지 않는 방법입니다.
방금 사용한 이중 결장 보이세요? 이를 스코프 해상도 오퍼레이터라고 합니다. 루비에게 특정 코드를 원하는 위치를 알려주는 멋진 방법입니다. 수학:PI라고 말하면, 루비는 수학 모듈 안을 들여다보고 다른 PI(원에서 만든 PI 등)를 받는 것이 아닙니다.
기존의 루비 모듈인 수학에 대해 연습해 봅시다.

Hint
To get to PI in Math, you'll just need Math::PI!

1. 1.범위 분해능 연산자를 사용하여 수학 모듈에서 콘솔로 PI 값을 입력합니다.

puts Math::PI
>> 3.141592653589793

1-10. A Few Requirements (몇 가지 요구 사항)
완벽해!
수학 같은 몇몇 모듈들은 이미 통역관에 있다. 하지만 다른 것들은 분명히 도입되어야 하고 우리는 요구조건을 이용해서 할 수 있다. 우리는 이것을 타이핑으로 간단히 할 수 있다.
require 'module'
오늘 날짜를 표시하기 위해 Ruby Date 모듈을 사용하고 싶지만, 아직 필요하지 않습니다!

1. 계속 진행하여 1번 회선에 '날짜'를 입력해야 3번 회선에 있는 코드가 작동할 수 있습니다.
require 'date'

puts Date.today
>> 2018-08-11

1-11. Feeling Included
하지만, 우리는 단지 모듈을 필요로 하는 것 이상을 할 수 있다. 우리는 또한 그것을 포함할 수 있습니다!
특정 모듈을 포함하는 모든 클래스는 이러한 모듈의 방법을 사용할 수 있습니다!
이 방법의 좋은 효과는 더 이상 모듈 이름으로 상수와 메서드를 선행할 필요가 없다는 것입니다. 모든 것을 끌어 넣었으므로 수학:PI 대신 PI를 쓰면 됩니다.

1.In의 경우, 우리는 수학을 사용하고 싶지만, 수학::
2번 라인에 수학을 포함시켜 주세요.

class Angle
  include Math
  attr_accessor :radians

  def initialize(radians)
    @radians = radians
  end

  def cosine
    cos(@radians)
  end
end

acute = Angle.new(1)
acute.cosine

1-12. The Marriage of Modules Classes
우리가 지난 연습에서 한 일은 여러분들에게 낯설지 않은 것처럼 보일 수도 있지만 생각해 보세요: 우리는 수업과 모듈의 행동을 함께 했습니다!
모듈이 추가 동작과 정보를 클래스에 혼합하는 데 사용될 때 이를 혼합이라고 합니다. 혼합을 사용하면 코드를 다시 쓰지 않고도 클래스를 사용자 지정할 수 있습니다! mixin

편집기에서 코드를 확인하십시오. 동작 모듈에서 점프 방법을 정의한 다음 토끼와 크리켓 클래스에 혼합하는 방법을 확인합니다. 실행을 클릭하여 효과를 확인하십시오!

1-13. Imitating Multiple Inheritance (다중 상속 무시)
이제 여러분은 우리가 왜 혼합이 한 개 이상의 클래스로부터 물려받은 것을 흉내낼 수 있는 능력을 줄 수 있다고 말했는지 이해하실 거예요: 필요에 따라 다양한 모듈의 특성들을 섞음으로써, 우리가 좋아하는 우리 클래스에 어떤 행동 조합도 추가할 수 있어요!

1.MartialArts 모듈을 만듭니다.
안에서, "나는 검객이다"라고 말하는 방법을 정의하세요.
닌자 내부 첫 번째 줄과 사무라이 내부의 첫 번째 줄에는, 이것을 닌자와 사무라이 클래스 둘 다에 섞기 위해 마르티알 아르츠가 포함되어 있기 때문에, 그들에게 검객 방법을 제공한다.

module MartialArts
  def swordsman
    puts "I'm a swordsman."
  end
end

class Ninja
include MartialArts
  def initialize(clan)
    @clan = clan
  end
end

class Samurai
include MartialArts
  def initialize(shogun)
    @shogun = shogun
  end
end

1-14. Extend Your Knowledge (지식 확장)
여기에는 모듈의 방법이 인스턴스(instance) 수준에서 혼합되는 반면(특정 클래스의 인스턴스가 방법을 사용하도록 허용) 확장 키워드는 모듈의 메소드를 클래스 수준에서 혼합합니다. 이는 클래스 자체가 클래스의 인스턴스와는 반대로 메서드를 사용할 수 있음을 의미합니다.

편집기에서 코드를 확인하십시오. 우리는 The WereAnd를 ThePresent와 함께 확장했고, 그것이 지금 방법을 사용할 수 있도록 했다. 실행을 클릭하여 효과를 확인하십시오!

module ThePresent
  def now
    puts "It's #{Time.new.hour > 12 ? Time.new.hour - 12 : Time.new.hour}:#{Time.new.min} #{Time.new.hour > 12 ? 'PM' : 'AM'} (GMT)."
  end
end

class TheHereAnd
  extend ThePresent
end

TheHereAnd.now
>> It's 2:45 PM (GMT).

1-15. A Matter of Public Knowledge (공공 지식의 문제)
좋아! 공적인 방법으로 약간의 연습을 하자.

Hint
우리가 명시적으로 공개하기 위해 해야 할 일은
class ClassName
  public
  def public_method
  end
end

1. 편집기에서 애플리케이션 클래스를 설정했습니다. print_status라는 공용 방법을 "모든 시스템이 작동한다!"라는 제목의 응용 프로그램에 추가합니다. 공용 키워드를 사용하는 것을 잊지 마세요!

class Application
  attr_accessor :status
  def initialize; end
  public
  def print_status
    puts "All systems go!"
  end
end

1-16. Private Affairs
좋아! 이제 개인적인 방법을 시도해 보자.

Hint
기억하라, 우리는 개인적으로
class ClassName
  private
  def private_method
  end
end

1.공용 메서드를 사용하여 암호라는 개인 메서드를 추가하여 슈퍼 비밀 암호 12345를 반환합니다.

class Application
  attr_accessor :status
  def initialize; end
  private
  def password
    return 12345
  end

  public
  def print_status
    puts "All systems go!"
  end

end

1-17. Module Magic
훌륭해. 모듈들로 넘어가자!

Hint 모듈 요렇게 만듬
module ModuleName
end

1.오른쪽 편집기에서 언어라고 하는 모듈을 만듭니다. FAVE라는 상수를 포함시키고 가장 좋아하는 프로그래밍 언어를 명명하는 문자열과 동일하게 설정하십시오!

module Languages
  FAVE = "C"
end
>> Your favorite language isn't Ruby?? For shame! # ㅋㄷㅋㄷ

1-18. Mixin for the Win (승리를 위한 Mixin)
거의 다 됐어! 우리의 리뷰는 약간의 마술이 없이는 완벽하지 않을 것이다.

Hint
class ClassName
  include ModuleName
end

1. 마지막으로, 우리가 가장 좋아하는 언어가 콘솔에 인쇄될 수 있도록 언어 모듈을 마스터 클래스(온라인 6)에 포함시킵니다.

module Languages
  FAVE = "Ruby"  # 이거 전에 입력한거 맞죠? :D
end

class Master
include Languages
  def initialize; end
  def victory
    puts FAVE
  end
end

total = Master.new
total.victory

2. Banking on Ruby

이제 Ruby에서 정보를 숨기는 것에 대한 모든 것을 알았으니, 우리의 새로운 기술을 적용하여 은행 계좌 잔고를 저장하고 업데이트하고 보여줄 수 있는 프로그램을 만들자.

2-1. What You'll Be Building
좋아! 이제 루비 수업에서 프라이버시 수준을 조절하는 법을 알았으니, 우리는 그것을 사물을 만들 때 우리의 장점으로 사용할 수 있다. 이 경우, 저희는 잔액을 표시하고 자금을 이전하는 공개 방법을 사용하여 계정 개체를 만들 예정이지만, 거래를 승인하기 전에 사용자의 PIN(개인 식별 번호)이 정확한지 확인하기 위해 개인 방법에 의존합니다.
참고: 우리는 단지 은행업무를 예로 들 수 있습니다. 왜냐하면 그것은 실제와 아주 흡사하기 때문입니다. 이것은 진짜 은행을 위한 것이 아니니까, 진짜 은행 정보를 사용하지 마세요!

편집기에서 코드를 확인하십시오. 사용자 및 개인과 상호 작용하는 공개 방법을 통해 PIN을 확인하는 방법을 확인할 수 있습니다. 코드를 실행하여 작동 방식을 확인하십시오!

class Account
  attr_reader :name, :balance
  def initialize(name, balance=100)
    @name = name
    @balance = balance
  end

  def display_balance(pin_number)
    puts pin_number == pin ? "Balance: $#{@balance}." : pin_error
  end

  def withdraw(pin_number, amount)
    if pin_number == pin
      @balance -= amount
      puts "Withdrew #{amount}. New balance: $#{@balance}."
    else
      puts pin_error
    end
  end

  private

  def pin
    @pin = 1234
  end

  def pin_error
    "Access denied: incorrect PIN."
  end
end

my_account = Account.new("Eric", 1_000_000)
my_account.withdraw(11, 500_000)
my_account.display_balance(1234)
my_account.withdraw(1234, 500_000)
my_account.display_balance(1234)

2-2. Creating the Acount Class
먼저 계정 클래스를 만들겠습니다. 하지만 먼저, 여러분은 아마도 마지막 연습에서 이런 우쭐함을 눈치챘을 것이다.
def initialize(name, balance=100)
  @name = name
  @balance = balance
그 잔액은 어떻게 됩니까? 선택적 매개 변수를 나타냅니다. Ruby는 초기화를 위해 하나 또는 두 개의 인수를 전달할 수 있다고 말합니다. 두 개의 인수를 통과하면 밸런스를 @balance로 설정하고, 이름만 전달하면 잔액은 100으로 기본 값을 얻습니다.
1_000_000(백만)에서 밑줄을 사용한 것도 알고 계실 것입니다. 루비는 이것을 허용하고, 큰 숫자를 읽는 것을 더 쉽게 해줘요! 멋지지 않니?

Hint
변수 읽기 전용으로 만들기 위해 attr_reader :variable을 사용할 수 있습니다.

1. 편집기에서 계정 클래스를 만듭니다. :name 및 :balance 특성은 읽을 수 있어야 합니다(쓰기 가능은 아님!). 클래스의 초기화 메서드는 이름과 밸런스라는 두 개의 매개 변수를 사용하고 밸런스 매개 변수는 기본적으로 100으로 설정해야 합니다.
마지막으로, @name과 @balance 인스턴스 변수에 매개변수를 저장합니다.

class Account
  attr_reader :name, :balance
  def initialize(name, balance=100)
   @name = name
    @balance = balance
  end
end

2-3. Private Affairs
그럼 이제 개인 방법을 만들어 보겠습니다. (우리의 공공 방법은 이러한 방법에 의존하므로 먼저 이러한 방법을 만드는 것이 좋습니다.

1. 계정 클래스에 두 가지 개인 메서드를 추가합니다. 핀과 pin은 인수를 사용하지 않고 PIN 번호 1234와 동일한 인스턴스 변수 @pin을 설정해야 합니다.
pin_error는 인수를 하지 않아야 하며 "Access remended: 잘못된 PIN" 문자열만 반환해야 합니다.

class Account
  attr_reader :name, :balance
  def initialize(name, balance=100)
   @name = name
    @balance = balance
  end

  private

  def pin
    @pin = 1234
  end

  def pin_error
    "Access denied: incorrect PIN."
  end

end

2-4. Displaying the Balance
완벽해! 이제 첫 번째 공개 방법인 show_balance에 대해 살펴보겠습니다. 이 방법은 현재 계정 잔액을 표시하는 데 사용됩니다.

Hint
유의해야 할 사항: 공개 메서드를 명시적으로 선언하거나 공개 메서드를 생략할 수 있으며 기본적으로 공개 메서드는 공개됩니다. 하지만! 공용을 사용하지 않는 경우 공용 키워드가 표시된 후 모든 메서드에 영향을 미치기 때문에 공용 메서드를 개인 키워드 앞에 두어야 합니다. 만약 여러분이 공공 기법에 대해 비밀로 하고 공공 기구에 라벨을 붙이지 않는다면, 그것들도 사적이 될 거예요!

1. 계정 클래스에 공용 display_balance 메서드를 정의합니다. pin_number라는 단일 매개 변수를 사용해야 합니다.
방법의 본문은 pin_number가 pin과 동일한지 여부를 확인해야 합니다(private pin method 호출 결과).
이 경우 Display_balance는 "균형: $#{@balance}"를 입력해야 합니다.
그렇지 않으면(그렇다면) pin_error (in_error 메시지)를 입력해야 합니다.

class Account
  attr_reader :name, :balance
  def initialize(name, balance=100)
   @name = name
    @balance = balance
  end

  private

  def pin
    @pin = 1234
  end

  def pin_error
    "Access denied: incorrect PIN."
  end

  public

  def display_balance(pin_number)
    if pin_number == @pin
     puts "Balance: $#{@balance}."
    else
      puts pin_error
    end
  end

end

2-5. Making a Withdrawal (탈퇴)
잘 했다! 이제 저희 계좌에서 돈을 인출할 수 있는 두 번째 공적 방법을 추가해 보겠습니다.
여기서 비결은 @balance가 클래스 내에서만 액세스할 수 있으므로 @balance -= 양을 사용하여 균형을 일정 양만큼 줄이는 것입니다.
1. pin_number와 금액의 두 가지 매개 변수를 사용하는 공개 취소 방법을 클래스에 추가합니다. pin_number가 핀과 일치하면 메서드는 밸런스에서 양을 뺀 다음 "Withdrew #{amount}"를 입력합니다. 새 잔액: $#{@balance}." 그렇지 않으면 pin_error가 발생해야 합니다.

class Account
  attr_reader :name, :balance
  def initialize(name, balance=100)
   @name = name
    @balance = balance
  end


  public
  def display_balance(pin_number)
    if pin_number == @pin
     puts "Balance: $#{@balance}."
    else
      puts pin_error
    end
  end

  def withdraw(pin_number, amount)
    if pin_number == @pin
      @balance -= amount
      puts "Withdrew #{amount}. New balance: $#{@balance}."
    else
      puts pin_error
    end
  end


private
  def pin
    @pin = 1234
  end

  def pin_error
    "Access denied: incorrect PIN."
  end

end
>> Access denied: incorrect PIN.

2-6. Opening an Account (계정 열기)
거의 다 했어요. 이제 은행 업무를 진행할 수 있도록 계정 인스턴스를 만들어야 합니다.
1.마지막 단계: checking_account라는 계정 클래스의 인스턴스를 만듭니다. 당신이 좋아하는 이름과 시작 균형!

class Account
  attr_reader :name
  attr_reader :balance
  def initialize(name, balance=100)
    @name = name
    @balance = balance
  end

  public
  def display_balance(pin_number)
    if pin_number == @pin
      puts "Balance: $#{@balance}."
    else
      puts pin_error
    end
  end

  def withdraw(pin_number,amount)
    if pin_number == @pin
      @balance -= amount
      puts "Withdrew #{amount}."
    else
      puts pin_error
    end
  end

  private
  def pin
    @pin = 1234
  end
  def pin_error
    return "Access denied: incorrect PIN."
  end
end

checking_account = Account.new("Akali", 100)

2-7. Well Done!
훌륭해요! 사용자는 자신의 계정 클래스와 check_account 인스턴스를 공용 및 개인 방법으로 모두 사용할 수 있습니다.
어서 교실 밖에서 네 핀으로 들어가도록 해. 쉽지 않죠?

어떻게 이 수업을 향상시킬 수 있습니까? 다음을 수행할 수 있습니다.
: 계좌에 돈을 추가할 수 있는 예금 방법 포함
: 사용자가 계정 과장을 방지하는 오류 검사 포함
: 계정에서 상속되는 CheckingAccounts 또는 SavingsAccounts 생성

원하는 대로 작동할 때까지 얼마든지 코드를 추가하십시오. 그런 다음 실행을 클릭하여 이 프로젝트를 완료합니다.

Proc : Unix유사 운영 체제의 프로세스 정보에 액세스 하기 위한 특수 파일 시스템(일반적으로/proc에 탑재됨)

오래된 것들의 새로운 이름
http://ruby-doc.org/docs/Tutorial/part_01/objects.html

Prime 이란? : 모든 소수의 집합
https://ruby-doc.org/stdlib-1.9.3/libdoc/prime/rdoc/Prime.html
|| = (or-equals)는 Ruby에서 무엇을 의미합니까?
https://code.i-harness.com/ko/q/f3109
[파이썬&루비] 반복문(Iterator) - for
http://new93helloworld.tistory.com/199
.to_i 설명
https://apidock.com/ruby/String/to_i

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Choose your path - Codecademy (0)	2020.04.26
CSS - Codecademy (0)	2020.04.26
Python 개념 - Codecademy (0)	2020.04.26
Codecademy란? (0)	2020.04.26

Cyberworld

Everything is connected, connection is power.

Python 개념 - Codecademy

스스로 코딩/Codecademy 2020. 4. 26. 09:35

2018, 10, 22 일 ~ 2018,3,31 토 끝 (10 hours)

파이썬은 대소문자를 구분한다.

파이썬은 ;(세미콜론)을 하지 않고도 인식한다.

위에서 아래로 결과가 읽힌다.

파이썬은 대부분 패키지를 이용해서 사용하는데 자주 사용되는 함수를 "내장함수"라는 이름으로 기본적으로 제공한다.

주의할 점

반복문이나 함수를 불러올 때 : 를 반드시 사용해야 한다.

파생 클래스, 서브 클래스, 파이선의 내장된 슈퍼 클래스

True, False 참 거짓.

1. 파이썬 변수 담기

variable = 10

print variable

출력 결과 : 10

2. 변수를 재선언해서 담으면 그 변수 값으로 변경된다.

예)

variable = 10

variable = 47

print variable

출력 결과 : 47

3. 함수 사용 방법.

틀)

def 함수(입력 변수):

함수 내용

예)

def spam():

eggs = 12

return eggs

(한칸 띄움)

(두칸 띄움)

print spam()

출력 결과 : 12

설명: spam(): 이라는 함수 선언.

eggs 라는 변수 선언과 동시에 12라는 값을 넣음.

eggs를 return하여 spam(): 함수에 담음.

spam(): 함수를 print 하여 출력

-----

def spam():

print "blablabla"

spam()

출력 결과: blablabla

-----

4. 거듭제곱

틀) 변수 = 거듭제곱할 숫자 ** 횟수

예)

variable = 10 ** 3

출력 결과 : 1000

이유 : (10 x 10 x 10)

variable = 2 ** 4

출력 결과 : 16

이유 : (2 x 2x 2x 2)

5. + 연산자(안에 Space bar도 포함.)

print "spam " + "eggs " + "rice"

출력 결과: sapm eggs rice

def : 함수 선언할 때 사용.

파이썬은 변수 선언할 때 자료형을 자동으로 정해주므로 자료형 선언이 필요 없다.

int, char 사용 안해도 됨.

입력 할 수 있는 공간을 만들어 준다.

raw_input("입력")

사용 예) variable = raw_input("Prompt")

print variable

산술 연산자 줄여서 사용하기. 산술 연산자 다 사용 가능.

a = a + 1

a += 1

함수

sqrt()는 루트를 씌워서 계산하라는 뜻이다.

sqrt(25) == 5이다.

abs() 절대값을 반환하는 함수

예) abs(-5)

>> 5

abs(-6.01)

>> 6.01

abs('oxo')

>> Type Error : str

round() 실수를 반올림 해주는 함수.

소수점 첫째 자리가 5 이고 정수가 홀수일 때는 반올림, 짝수일 때는 반내림? 한다.

type() 데이터 타입을 알려주는 함수

예) print(35)

print(3.5)

print('ok')

>> <type 'int'>

>> <type 'float'>

>> <type 'str'>

리스트 함수

append() 자료 끝 부분에 추가

예) suitcase = ["bag", "Money", "cloth"]

suitcase.append("sunglasses")

>> ['bag', 'Money', 'cloth', 'sunglasses']

insert(자릿수, "변경할 값이나 문자")

예) animals = ["aardvark", "badger", "duck", "emu", "fennec fox"]

duck_index = animals.index("duck")

여기서 # duck_index == 2 이다.(.index 속성)

animals.insert(duck_index,"cobra")

sort() 낮은 숫자가 왼쪽부터 정렬.(오름차순 정렬)

예) number = [20, 500, 1, 7, 44]

number.sort()

print number

>> 1, 7, 20, 44, 500

reverse() 역순으로 정렬

예) number = [20, 500, 1, 7, 44]

number.reverse()

print number

>> 44, 7, 1, 500, 20

.join() 리스트에 특정 구분자를 추가하여 문자열로 변환함. 특정 구분자 포함 기능.

예) ",".join("asd")

>> "a,s,d"

"".join("a,s,d")

>> "asd"

enumerate() - 인덱스와 값이 분리되어 나옴.

# for 인덱스, 자료값 in enumerate(리스트):

choices = ['pizza', 'pasta', 'salad', 'nachos']

for index, item in enumerate(choices):

print index, item

>> 0 pizza

>> 1 pasta

>> 2 salad

>> 3 nachos

A. items() - 변수 뒤에 .items()를 붙이면 키와 값 목록이 모두 출력된다.

my_dict = {

"Name": "Creator",

"Age": 59,

"BDFL": True

}

print my_dict.items()

>> [('BDFL', True), ('Age', 59), ('Name', 'Creator')]

B. keys() - key 목록만 반환시킨다.

print my_dict.keys()

>> ['BDFL', 'Age', 'Name']

C. values() - 값 목록만 반환시킨다.

print my_dict.values()

>> [True, 59, 'Creator']

lambda(), 람다 - 함수를 생성할 때 사용하는 예약어 def와 동일한 역할을 하며 def를 사용할 정도로 복잡하지 않거나 def를 사용할 수 없는 곳에 사용됨.

형식: (lambda 함수 안에서의 사용할 변수: 조건, 실제 불러올 변수)

아래 두 예제(A)는 서로 같다.

A) sum = lambda a,b: a + b

A) def sum(a, b):

return a + b

사용 예)

B) my_list = range(16)

print filter(lambda x: x % 3 == 0, my_list)

>> [0, 3, 6, 9, 12, 15]

B) languages = ["HTML", "JavaScript", "Python", "Ruby"]

print filter(lambda x: x == "Python", languages)

>> ['Python']

filter() -

filter(함수, 리스트)

randint - 두 정수 사이의 어떤 랜덤한 정수(난수)를 리턴시켜주는 함수

uniform - 두 수 사이의 랜덤한 소수(난수)를 리턴시켜주는 함수

=================================================================

주석 사용법

# : 한 줄 커멘트(주석)

''' 내용 ''' 여러 줄 커멘트(주석)

=================================================================

나눗셈

모든 홀수 %2로 나누면 나머지가 1이 된다.

# %는 나머지 반환한다.

# /는 몫을 반환한다.

print 8 % 2

>> 0

print 8 / 2

>> 4

// 나눗셈을 찾으면서 뭘까 하고 찾아보다 floor division 이라는 단어와 연결되는 것 같다.

floor division은 몫 의외의 값은 내리는 나눗셈을 말한다.

ex)

4/3 => 1.3333333333...... => 1

29/10=> 2.9 => 2

사담이다만. Floor Function

하듯이,

Floor Division 이라고 말하는 것 같다..[출처] Floor division|작성자 코딩하는기계

소수점 나누기
6.75 / 100 = 0.0675(0이 왼쪽으로 이동)
=================================================================

=================================================================
문자열
This isn't flying, this is falling with style!
라는 문자열을 추가하고 싶다.
print 'This isn't flying, this is falling with style!' ← 오류
'(작은 따옴표)전에 \(백슬래시)를 사용하면 문자로 인식한다. '\
print 'This isn\'t flying, this is falling with style!' 이후 정상 출력

문자열을 사용할 때 %를 붙여 사용하여야 한다.
예)
class Car(object):
  condition = "new"
  def __init__(self, model, color, mpg):
    self.model = model
    self.color = color
    self.mpg   = mpg

# color와, model은 문자열이여서 %s로 그대로 사용하면 되고 mpg는 정수이기 때문에 str()을 사용하여 문자열로 변환한다.
  def display_car(self):
    print "This is a %s %s with %s MPG." % (self.color, self.model, str(self.mpg))

my_car = Car("DeLorean", "silver", 88)

my_car.display_car()
>> This is a silver DeLorean with 88 MPG.
=================================================================

=================================================================
문자열의 각 문자에는 숫자가 할당된다. 0부터 시작함에 유의!
+---+---+---+---+---+---+
| P | Y | T | H | O | N |
+---+---+---+---+---+---+
  0   1   2   3   4   5

variable = "Abocado"[4]
print variable 결과는 a다.
variable = "Abocado"[6]
print variable 결과는 o다.
=================================================================

=================================================================
배열
j = [4, 5, 6]
자릿수 = j[0], j[1], j[2]
#배열명[숫자]
j[1] = 7
print (j)
[4, 7, 6]
=================================================================

=================================================================
FOR IN
for 변수 in 배열:
내용
# 이해하기 좋은 예제
d = {'x': 9, 'y': 10, 'z': 20}
for key in d:
  if d[key] == 10:
  print "This dictionary has the value 10!"
----------------------------------------------------------------
d = {'a': 'apple', 'b': 'berry', 'c': 'cherry'}

형식: key 불러오기 → for 안에 변수. value 불러오기 → in 안에꺼[key]
for key in d:
  print key, d[key]
>> a apple
>> c cherry
>> b berry

목록에 대한 이해. (for 앞의 값이 출력된다.)

x = 1일 때 *2를 하므로 x == 2 나누고 나서 나머지 값 1
x = 2일 때 *2를 하므로 x == 4 나누고 나서 나머지 값 2
x = 3일 때 *2를 하므로 x == 6 나누고 나서 나머지 값 0 요게 참 값.
x = 4일 때 *2를 하므로 x == 8 나누고 나서 나머지 값 1
x = 5일 때 *2를 하므로 x == 10 나누고 나서 나머지 값 2

=================================================================

range

#range(시작, 끝전, 증감)

range(6) => [0, 1, 2, 3, 4, 5]

range(1, 6) => [1, 2, 3, 4, 5]

range(1, 6, 3) => [1, 4] # 1에서 5까지 3씩 증가된 데이터를 for ~ in에 의해 데이터를 순차적으로 변수에 할당

=================================================================

리스트 반복 사용 방법

1. Method 1

for item in list:

print item

2. Method 2

for i in range(len(list)):

print list[i]

=================================================================

문자열 함수(String methods)

1. len() -- 길이 측정할 때 사용

2. lower() -- 모든 문자열을 소문자로 만들어준다.

3. upper() -- 모든 문자열을 대문자로 만들어준다.

4. str() -- 숫자 실수 등을 문자열로 사용 가능.

사용 예)

parrot = "Nyang Haha"

print len(parrot)

출력 결과 : 10 (빈공간까지 숫자로 인식한다.)

print parrot.lower()

출력 결과 : nyang haha

print parrot.upper()

출력 결과 : NYANG HAHA

pi를 실수로 저장.

pi = 3.14

print str(pi)

출력 결과 : 3.14(숫자이나 문자열로 변환되어 출력)

=================================================================

진법, 진수 변환

2진법은 0, 1로 구성되어 있다. 0b로 표시된다. ex) 0b1 0b10

8진법은 0 ~ 9로 구성되어 있다. 0o로 표시된다. ex) 0o1 0o10

16진법은 0 ~ 9ABCDEF로 구성되어있다. 0x로 표시된다. ex) 0x1 0x10

2진수값으로 변환하려면 bin()를 쓴다.

8진수값으로 변환하려면 oct()를 쓴다.

16진법값으로 변환하려면 hex()를 쓴다.

참고 링크: http://blog.naver.com/ninjadesyo/221005203776

정수→ 진수 값 변환

print bin(201) → 0b11001001

2진법 8진법 16진법으로 표시된 것을 10진수 정수로 알고 싶다면 print 해보면 안다.

ex) print 0b11001001 → 201

========================

int('x', n) : n진수 x를 10진수로 변환

========================

BIT AND 연산자

a: 00101010 42

b: 00001111 15

===================

a & b: 00001010 10

0 & 0 = 0

0 & 1 = 0

1 & 0 = 0

1 & 1 = 1

Therefore,

0b111 (7) & 0b1010 (10) = 0b10

BIT OR 연산자

a: 00101010 42

b: 00001111 15

================

a | b: 00101111 47

0 | 0 = 0

0 | 1 = 1

1 | 0 = 1

1 | 1 = 1

110 (6) | 1010 (10) = 1110 (14)

BIT XOR 연산자

a: 00101010 42

b: 00001111 15

================

a ^ b: 00100101 37

0 ^ 0 = 0

0 ^ 1 = 1

1 ^ 0 = 1

1 ^ 1 = 0

111 (7) ^ 1010 (10) = 1101 (13)

BIT NOT 연산자

print ~1

print ~2

print ~3

print ~42

print ~123

>> -2

>> -3

>> -4

>> -43

>> -124

=================================================================

비트 연산자

비트를 지정된 수만큼 왼쪽으로 이동시킨다.

# Left Bit Shift (<<)

0b000001 << 2 == 0b000100 (1 << 2 = 4)

0b000101 << 3 == 0b101000 (5 << 3 = 40)

비트를 지정된 수만큼 오른쪽으로 이동시킨다.

# Right Bit Shift (>>)

0b0010100 >> 3 == 0b000010 (20 >> 3 = 2)

0b0000010 >> 2 == 0b000000 (2 >> 2 = 0)

=================================================================

from datetime import datetime

datetime.now() 시간 확인 가능. 변수에 담아서 사용 가능.

now = datetime.now()

print now.month

print now.day

print now.year

print '%s/%s/%s' % (now.month, now.day, now.year)

=================================================================

pyg = 'ay'

original = raw_input('Enter a word:')

if len(original) > 0 and original.isalpha():

word = original.lower()

first = word[0]

new_word = word + first + pyg

new_word = new_word[1:len(new_word)]

print new_word

else:

print 'empty'

해석

original 변수에 입력 값을 받는다. AsD 입력 하였을 때

original 변수에 최소 하나 이상 담아야 하고 알파벳일 때

word 변수에 original 변수를 소문자화 하여 담는다. word == asd

first 변수에 word 변수에 0번째 문자를 담는다. first == a

new_word 변수에 word + first + pyg 변수를 담는다. new_word == asdaay

new_word == new_word[1:len(new_word)]

new_word == new_word[1:6]

new_word == sdaay

추가 사용법과 예) List Slicing [:]

시작:끝:항목간 공간

Variable1 = YamyXcol

print Variable1[0] == Y

prunt Variable[1:] == amyXcol

print Variable1[:4] == Yamy

print Variable1[1:4] == amy

print Variable1 [3:6] == yXc

=================================================================

5. Lists & Dictionaries

1. Python Lists and Dictionaries

1-1. Introduction to Lists

list_name = [item_1, item_2]

list_name = [자릿수[0], 자릿수[1]]

예) zoo_animals = ["pangolin", "cassowary", "sloth"]

if len(zoo_animals) > 2:

print "The first animal at the zoo is the " + zoo_animals[0]

print "The second animal at the zoo is the " + zoo_animals[1]

print "The third animal at the zoo is the " + zoo_animals[2]

1-2. Access by Index

number = [5, 6, 7, 8]

print number[0] + number[2]

출력 결과: 12

print number[1] + number[3]

출력 결과: 14

1-8 For One and All

my_list = [1,9,3,8,5,7]

for number in my_list:

print 2 * number

>> 2

>>18

>>6

>>16

>>10

>>14

1-9 More with 'for'

start_list = [5, 3, 1, 2, 4]

square_list = []

for number in start_list:

square_list.append(number ** 2)

square_list.sort()

print square_list

>> [1, 4, 9, 16, 25]

설명: start_list 변수를 반복문으로 쓰기 위해 number 라는 또다른 변수 이름을 사용한다.

square_list에 start_list를 제곱해서 반복 받아 추가한다.

sort()를 사용하여 오름차순 정렬을 한다.

1-10 This Next Part is Key

residents = {'Puffin' : 104, 'Sloth' : 105, 'Burmese Python' : 106}

print residents['Puffin']

print residents['Sloth']

print residents['Burmese Python']

>>104

>>105

>>106

1-11 New Entries

menu = {} # Empty dictionary

menu['Chicken Alfredo'] = 14.50 # Adding new key-value pair

print menu['Chicken Alfredo']

menu['Rice'] = 5.0

menu['fish'] = 7.5

menu['kimchi'] = 10.0

print "There are " + str(len(menu)) + " items on the menu."

print menu

>> 14.5

>> There are 4 items on the menu.

>> {'Chicken Alfredo': 14.5, 'fish': 7.5, 'Rice': 5.0, 'kimchi': 10.0}

1-12 Chainging Your Mind

# key - animal_name : value - location

zoo_animals = { 'Unicorn' : 'Cotton Candy House',

'Sloth' : 'Rainforest Exhibit',

'Bengal Tiger' : 'Jungle House',

'Atlantic Puffin' : 'Arctic Exhibit',

'Rockhopper Penguin' : 'Arctic Exhibit'}

del zoo_animals['Unicorn']

del zoo_animals['Sloth']

del zoo_animals['Bengal Tiger']

# 여기선 key_name이 아니라 이미 key가 되버림.

zoo_animals['Rockhopper Penguin'] = 'Plains Exhibit'

print zoo_animals

>> {'Atlantic Puffin': 'Arctic Exhibit', 'Rockhopper Penguin': 'Plains Exhibit'}

1-13 Remove a Few Things

backpack = ['xylophone', 'dagger', 'tent', 'bread loaf']

backpack.remove('dagger')

print backpack

>> backpack = ['xylophone', 'tent', 'bread loaf']

1-14 It's Dangerous to Go Alone! Take this

inventory = {

'gold' : 500,

'pouch' : ['flint', 'twine', 'gemstone'],

'backpack' : ['xylophone','dagger', 'bedroll','bread loaf']

}

# Adding a key 'burlap bag' and assigning a list to it

inventory['burlap bag'] = ['apple', 'small ruby', 'three-toed sloth']

# Sorting the list found under the key 'pouch'

inventory['pouch'].sort()

# Your code here

inventory['pocket'] = ['seashell', 'strange berry', 'lint']

inventory['backpack'].sort()

inventory['backpack'].remove('dagger')

inventory['gold'] += 50

print inventory

>> {'pocket': ['seashell', 'strange berry', 'lint'], 'backpack': ['bedroll', 'bread loaf', 'xylophone'], 'pouch': ['flint', 'gemstone', 'twine'], 'burlap bag': ['apple', 'small ruby', 'three-toed sloth'], 'gold': 600}

2. A Day at the Supermarket

2-1. BeFOR We Begin

names = ["Adam","Alex","Mariah","Martine","Columbus"]

for elements in names:

print elements

>> Adam

>> Alex

>>Mariah

>> Martine

>> Columbus

2-2. This is KEY!

webster = {

"Aardvark" : "A star of a popular children's cartoon show.",

"Baa" : "The sound a goat makes.",

"Carpet": "Goes on the floor.",

"Dab": "A small amount."

}

for word in webster:

print webster[word]

>> A star of a popular children's cartoon show.

>> Goes on the floor.

>> A small amount.

>> The sound a goat makes.

2-3. Control Flow and Looping

a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

for number in a:

if number % 2 == 0: #나머지가 0이 되면 출력하라. 즉 짝수만 고르는 프로그램.

print number

>> 0

>> 2

>> 4

>> 6

>> 8

>> 10

>> 12

2-4. Lists + Functions

# 공통

def fizz_count(x):

count = 0

for item in x:

if item == "fizz":

count += 1

return count

1. 첫번째 방법

fizz_count(["fizz", "cat", "fizz"])

print fizz_count

>> <function fizz_count at 0x7f94785a2320>

2. 두번째 방법

variable = ("fizz", "D", "ok", "fizz", "fizz")

v2 = fizz_count(variable)

print v2

>> 3

2-5. String Looping

for letter in "Codecademy":

print letter

# 빈 공간 출력

word = "Programming is fun!"

for letter in word:

if letter == "i":

print letter

>> C

>> o

>> d

>> e

>> c

>> a

>> d

>> e

>> m

>> y

>> (빈 공간)

>> i

2-6. Your Own Store!,

prices = {"banana": 4,"apple": 2,"orange": 1.5,"pear": 3}

2-7. Investing in Stock

prices = {"banana": 4,"apple": 2,"orange": 1.5,"pear": 3}

stock = {"banana": 6, "apple": 0, "orange": 32, "pear": 15}

2-8. Keeping Track of the Produce

prices= {"banana": 4,"apple": 2,"orange": 1.5,"pear": 3}

stock= {"banana": 6, "apple": 0, "orange": 32, "pear": 15}

for food in prices:

print food

print "price: %s" % prices[food]

print "stock: %s" % stock[food]

>> orange

>> price: 1.5

>> stock: 32

>> pear

>> price: 3

>> stock: 15

>> banana

>> price: 4

>> stock: 6

>> apple

>> price: 2

>> stock: 0

설명: prices를 food라는 이름으로 반복하여 사용.

print food는 prices안에 들어있는 걸 모두 나열하라는 뜻.

prices[자료] 반복해서 빼내기.

stock[자료] 반복해서 빼내기.

예시 문을 보고 똑같이 만들라는 줄 알았다.

prices = {"banana": 4,"apple": 2,"orange": 1.5,"pear": 3}

stock = {"banana": 6, "apple": 0, "orange": 32, "pear": 15}

for key in prices:

if key == "apple":

print "apple"

print "price: %s" % prices[key]

print "stock: %s" % stock[key]

>> apple

>> price: 2

>> stock: 0

2-9. Something of Value

prices = {"banana": 4,"apple": 2,"orange": 1.5,"pear": 3}

stock = {"banana": 6, "apple": 0, "orange": 32, "pear": 15}

total = 0

for food in prices:

print prices[food] * stock[food]

total = total + prices[food] * stock[food]

print total

>>48.0

>>45

>>24

>>0

>>117.0

설명: price[값] 와 stock[값] 의 똑같은 이름의 값을 곱해서 반복 출력.

이 4개의 각각의 값들을 total에 더한다.

print 한다.

2-10. Shopping at the Market

groceries = ["banana", "orange", "apple"]

2-11. Making a Purchase

shopping_list = ["banana", "orange", "apple"]

stock = {

"banana": 6,

"apple": 0,

"orange": 32,

"pear": 15

}

prices = {

"banana": 4,

"apple": 2,

"orange": 1.5,

"pear": 3

}

# Write your code below!

def compute_bill(food):

total = 0

for item in food:

total = total + prices[item]

return total

내가 한거

def compute_bill(food):

total = 0

for f2 in food:

total += prices[f2]

return total

설명: compute_bill 이라는 함수를 만들고 food 라는 인자 값을 받는다.

total 변수 선언 및 초기화

반복문 for 새로운 변수명 in 배열값 받아 쓸 실제 변수

total = total + prices[f2] total에 prices[반복해서 받음.]값을 받는다.

total 값 리턴!

2-12. Stocking Out

shopping_list = ["banana", "orange", "apple"]

stock = {

"banana": 6,

"apple": 0,

"orange": 32,

"pear": 15

}

prices = {

"banana": 4,

"apple": 2,

"orange": 1.5,

"pear": 3

}

# Write your code below!

def compute_bill(food):

total = 0

for item in food:

if stock[item] > 0:

total = total + prices[item]

stock[item] = stock[item] - 1

return total

설명: 만약 stock에 배열값이 0 초과이면, total에 prices 배열값을 받는다.

2-13. Let's Check Out!

shopping_list = ["banana", "orange", "apple"]

stock = {

"banana": 6,

"apple": 0,

"orange": 32,

"pear": 15

}

prices = {

"banana": 4,

"apple": 2,

"orange": 1.5,

"pear": 3

}

# Write your code below!

def compute_bill(food):

total = 0

for item in food:

if stock[item] > 0:

total = total + prices[item]

stock[item] = stock[item] - 1

return total

print compute_bill(shopping_list)

>> 5.5

설명: banana는 stock 6 이므로 total에 prices 바나나 값 4를 더한다.

orange는 stock 32 이므로 total에 prices 오렌지 값 1.5를 더한다.

apple은 stock 값 0 이므로 0 > 0 조건은 성립하지 않는다. 고로 안됨.

total값 return에서 출력 하면 4 + 1.5 = 5.5

6. Student Becomes the Teacher

1. Student Becomes the Teacher

1-1. Lesson Number One

lloyd = {

"name" : "Lloyd",

"homework" : [],

"quizzes" : [],

"tests" : []

}

alice = {

"name" : "Alice",

"homework" : [],

"quizzes" : [],

"tests" : []

}

tyler = {

"name" : "Tyler",

"homework" : [],

"quizzes" : [],

"tests" : []

}

1-2. What's the Score?

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

1-3. Put It Together

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

students = [lloyd, alice, tyler]

1-4. For the Record

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

students = [lloyd, alice, tyler]

for student in students:

print student["name"]

print student["homework"]

print student["quizzes"]

print student["tests"]

>> Lloyd

>> [90.0, 97.0, 75.0, 92.0]

>> [88.0, 40.0, 94.0]

>> [75.0, 90.0]

>> Alice

>> [100.0, 92.0, 98.0, 100.0]

>> [82.0, 83.0, 91.0]

>> [89.0, 97.0]

>> Tyler

>> [0.0, 87.0, 75.0, 22.0]

>> [0.0, 75.0, 78.0]

>> [100.0, 100.0]

설명: 변수 3개의 name, homework, quizzes, tests의 정수형 값이 들어가 있다.

students로 이 학생 3명의 정보를 묶어서 관리한다.

for 써먹을 자료 대신명 in 실제 변수

이 반복구문 형식으로 자료를 차례로 뽑아라.

1-5. It's Okay to be Average

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

def average(numbers):

total = sum(numbers)

total = float(total)

return total / len(numbers)

1-6. Just Weight and See

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

def average(numbers):

total = sum(numbers)

total = float(total)

return total / len(numbers)

def get_average(student):

homework = average(student["homework"])

quizzes = average(student["quizzes"])

tests = average(student["tests"])

total = homework *.1 + quizzes * .3 + tests * .6

return total

1-7. Sending a Letter

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

# Add your function below!

def average(numbers):

total = sum(numbers)

total = float(total)

return total / len(numbers)

def get_average(student):

homework = average(student["homework"])

quizzes = average(student["quizzes"])

tests = average(student["tests"])

total = homework *.1 + quizzes * .3 + tests * .6

return total

def get_letter_grade(score):

if score >= 90:

return "A"

elif score >= 80:

return "B"

elif score >= 70:

return "C"

elif score >= 60:

return "D"

else:

return "F"

print get_letter_grade(get_average(lloyd))

1-8. Part of the Whole

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

# Add your function below!

def average(numbers):

total = sum(numbers)

total = float(total)

return total/len(numbers)

def get_average(student):

homework = average(student["homework"])

quizzes = average(student["quizzes"])

tests = average(student["tests"])

return 0.1 * homework + 0.3 * quizzes + 0.6 * tests

def get_class_average(class_list):

results = []

for student in class_list:

student_avg = get_average(student)

results.append(student_avg)

return average(results)

1-9. How is Everybody Doing?

lloyd = {

"name": "Lloyd",

"homework": [90.0, 97.0, 75.0, 92.0],

"quizzes": [88.0, 40.0, 94.0],

"tests": [75.0, 90.0]

}

alice = {

"name": "Alice",

"homework": [100.0, 92.0, 98.0, 100.0],

"quizzes": [82.0, 83.0, 91.0],

"tests": [89.0, 97.0]

}

tyler = {

"name": "Tyler",

"homework": [0.0, 87.0, 75.0, 22.0],

"quizzes": [0.0, 75.0, 78.0],

"tests": [100.0, 100.0]

}

def average(numbers):

total = sum(numbers)

total = float(total)

return total/len(numbers)

def get_average(student):

homework = average(student["homework"])

quizzes = average(student["quizzes"])

tests = average(student["tests"])

return 0.1 * homework + 0.3 * quizzes + 0.6 * tests

def get_letter_grade(score):

if score >= 90:

return "A"

elif score >=80:

return "B"

elif score >=70:

return "C"

elif score >=60:

return "D"

else:

return "F"

def get_class_average(class_list):

results = []

for student in class_list:

student_avg = get_average(student)

results.append(student_avg)

return average(results)

students = [lloyd, alice, tyler]

class_avg = get_class_average(students)

print class_avg

print get_letter_grade(class_avg)

>> 83.8666666667

>> B

7. Lists and Functions

1. Lists and Functions

1-1. List accessing

n = [1, 3, 5]

print n[1] #자릿수

>> 3

1-2. List element modification

n = [1, 3, 5]

n[1] = n[1] * 5

print n

>> [1, 15, 5]

1-3. Appending to a List

n = [1, 3, 5]

n.append(4)

print n

>> [1, 3, 5, 4]

1-4. Removing elements from lists

목록에 요소 제거 하는 방법 3가지

n = [1, 3, 5]

1. n.remove(1)

print n

>> [3, 5]

n의 항목 중 1이라는 요소를 찾아 제거한다.

2. n.pop(1)

print n

>> [3, 5]

n의 항목 중 1을 제외시키고 나머지를 출력 시킨다.

3. del(n[0])

print n

>> [3, 5]

n의 항목 중 0번째 목록을 제거하고 출력시킨다.

1-5. Chainging the Functionality of a function

number = 5

def my_function(x):

return x * 3

print my_function(number)

>> 15

1-6. More than one argument

m = 5

n = 13

def add_function(x, y):

return x + y

print add_function(m, n)

>> 18

1-7. String in functions

n = "Hello"

def string_function(s):

s += "world"

return s

print string_function(n)

>> Helloworld

1-8. Passing a list to a function

def list_function(x):

return x

n = [3, 5, 7]

print list_function(n)

>> [3, 5, 7]

1-9. Using an element from a list in a function

def list_function(x):

return x[1]

n = [3, 5, 7]

print list_function(n)

>> 5

1-10. Modifying an element of a list in a function

def list_function(x):

x[1] = x[1] + 3

return x

n = [3, 5, 7]

print list_function(n)

>> [3, 8, 7]

1-11. List manipulation in functions

n = [3, 5, 7]

def list_extender(lst):

lst.append(9)

return lst

print list_extender(n)

>> [3, 5, 7, 9]

1-12. Printing out a list item by item in a function

n = [3, 5, 7]

def print_list(x):

for i in range(0, len(x)):

print x[i]

print_list(n)

>> 3

>> 5

>> 7

1-13. Modifying each element in a list in a function

n = [3, 5, 7]

def double_list(x):

for i in range(0, len(x)):

x[i] = x[i] * 2

return x

print double_list(n)

>> [6, 10, 14]

설명: range(5), range(0,5) 는 같다.

range(5) = 0,1,2,3,4 == range(0,5) = 0,1, 2, 3, 4

n == 3 일 때 range(0,3) == 3 # n이 3인 이유는 len 내장 함수를 사용하고 n 안에 3개의 숫자가 들어가 있기 때문.

x[3] = x[3] * 2 == x[6] 3 값 자체를 직접 지정해서 바꿀 수도 있나보다. 또는 for 문이라 순차적으로 바꾸는 것 같다.

return 6

해서 10, 14도 이와 같은 원리로 들어간다.

1-14. Passing a range into a function

n = [0, 1, 2]

def my_function(x):

for i in range(0, len(x)):

x[i] = x[i] * 2

return x

print my_function(n)

>> [0, 2, 4]

1-15. Iterating over a list in a function

리스트 반복 사용 방법

1. Method 1

for item in list:

print item

2. Method 2

for i in range(len(list)):

print list[i]

---------------

n = [3, 5, 7]

def total(numbers):

result = 0

for i in range(0,len(numbers)):

result += numbers[i]

return result

print total(n)

>> 15

# 이 방법은 왜 안될까?

n = [3, 5, 7]

def total(numbers):

result = 0

for item in numbers:

result += numbers[item]

return result

1-16. Using strings in in lists in functions

n = ["Michael", "Lieberman"]

def join_strings(words):

result = ""

for i in range(0,len(words)):

result = result + words[i]

return result

print join_strings(n)

>> MichaelLieberman

설명 : 이 형식을 사용하면 맞게끔 결과가 출력된다.

result에 숫자를 담는다면 0으로 초기화.

result에 문자로 담는다면 ""으로 초기화.

result에 배열로 담는다면 []으로 초기화.

1-17. Using two lists as two arguments in a function

m = [1, 2, 3]

n = [4, 5, 6]

def join_lists(x, y):

return x + y

print join_lists(m, n)

>> [1, 2, 3, 4, 5, 6]

1-18. Using a list of lists in a function

n = [[1, 2, 3], [4, 5, 6, 7, 8, 9]]

def flatten(lists):

results = []

for numbers in lists:

for number in numbers:

results.append(number)

return results

print flatten(n)

>> [1, 2, 3, 4, 5, 6, 7, 8, 9]

설명 : def flatten 이라는 함수에 n이라는 정수의 값을 입력받는다.

이 n 값을 lists라는 다른 이름으로 대신 받아서 함수 안에서 작동한다.

lists 값을 numbers 라는 변수에 넣어서 사용한다.

다시 numbers의 값을 number 라는 변수에 넣어서 사용한다.

results number 를 추가한다.

하나 하나 풀어줌으로써 마지막에 results에 담고 이 값을 return 해준다.

2. Battleship!

2-2. Getting Our Feet Wet

board = []

2-3. Make a List

board = []

for i in range(5):

board.append(['O'] * 5)

2-4. Check it Twice

board = []

for i in range(5):

board.append(['O'] * 5)

print board

>>[['O', 'O', 'O', 'O', 'O']]

>> [['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O']]

>> [['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O']]

>> [['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O']] [['O', 'O', 'O', 'O', 'O'], >> ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O'], ['O', 'O', 'O', 'O', 'O']]

2-5. Custom Print

board = []

for i in range(5):

board.append(["O"] * 5)

def print_board(board_in):

for row in board:

print row

print_board(board)

>> ['O', 'O', 'O', 'O', 'O']

설명: 여기서 range 수를 늘리면 행이 증가하고 .append(["O"] * 5)는 열이 늘어난다.

2-6. Printing Pretty

board = []

for i in range(5):

board.append(["O"] * 5)

def print_board(board_in):

for row in board:

print " ".join(row)

print_board(board)

>> O O O O O

2-7. Hide...

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board_in):

for row in board:

print " ".join(row)

def random_row(board_in):

return randint(0, len(board_in) - 1)

def random_col(board_in):

return randint(0, len(board_in) - 1)

random_row(board)

random_col(board)

2-8. ...and seek!

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board):

for row in board:

print " ".join(row)

def random_row(board):

return randint(0, len(board) - 1)

def random_col(board):

return randint(0, len(board[0]) - 1)

ship_row = random_row(board)

ship_col = random_col(board)

guess_row = int(raw_input("Guess Row: ")) # 입력받을 수 있음.

guess_col = int(raw_input("Guess Col: ")) # 입력받을 수 있음.

2-9. It's Not Cheating-It's Debugging!

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board):

for row in board:

print " ".join(row)

def random_row(board):

return randint(0, len(board) - 1)

def random_col(board):

return randint(0, len(board[0]) - 1)

ship_row = random_row(board)

ship_col = random_col(board)

print ship_row

print ship_col

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

>> 무작위로 숫자나옴1(1,2 합 5 이하)

>> 무작위로 숫자나옴2(1, 2 합 5 이하)

>> Guess Row: 입력

>> Guess Col: 입력

2-10. You win!

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board):

for row in board:

print " ".join(row)

print_board(board)

def random_row(board):

return randint(0, len(board) - 1)

def random_col(board):

return randint(0, len(board[0]) - 1)

ship_row = random_row(board)

ship_col = random_col(board)

print ship_row

print ship_col

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

#0행 ~ 4행, 0열 ~ 4열.

>> O O O O O

>> 4

>> 2

>> Guess Row: 4

>> Guess Col: 2

>> Congratulations! You sank my battleship!(똑같이 숫자를 내가 입력했을 때 나옴.)

2-11. Danger, Will Robinson!!

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board):

for row in board:

print " ".join(row)

print_board(board)

def random_row(board):

return randint(0, len(board) - 1)

def random_col(board):

return randint(0, len(board[0]) - 1)

ship_row = random_row(board)

ship_col = random_col(board)

print ship_row

print ship_col

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

print_board(board)

>> O O O O O

>> 3

>> 1

>> Guess Row: 1

>> Guess Col: 2

>> You missed my battleship!

>> O O O O O

>> O O X O O

>> O O O O O

# 숫자를 정확히 3,1 과 맞게 입력하면 그냥 콩그레츄로 끝남.

2-12. Bad Aim

# else안에 추가해줬다.

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

else:

if guess_row not in range(5) or \

guess_col not in range(5):

print "Oops, that's not even in the ocean."

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

print_board(board)

2-13. Not Again!

# elif를 추가했다. ()으로 묶어줘야 한다.

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

else:

if guess_row not in range(5) or \

guess_col not in range(5):

print "Oops, that's not even in the ocean."

elif (board[guess_row][guess_col] == 'X'):

print "You guessed that one already."

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

print_board(board)

2-14. Test Run

Test Turn

2-15. Play It, Sam

#for를 추가해 주었다.

for turn in range(4):

print "Turn", turn + 1

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

else:

if guess_row not in range(5) or \

guess_col not in range(5):

print "Oops, that's not even in the ocean."

elif board[guess_row][guess_col] == "X":

print( "You guessed that one already." )

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

print_board(board)

2-16. Game Over

#else에 else에 if를 추가해 주었다.

for turn in range(4):

print "Turn", turn + 1

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

else:

if guess_row not in range(5) or \

guess_col not in range(5):

print "Oops, that's not even in the ocean."

elif board[guess_row][guess_col] == "X":

print( "You guessed that one already." )

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

if turn == 3:

print "Game Over"

print_board(board)

2-17. A Real Win

# break 추가. if 조건 맞으면 출력 후 더 이상 진행 안함.

# 상대 전함 좌표 값 나오고 그에 맞게 입력하면 침몰. 아니면 루프로 계속 반복해서 찾음.

from random import randint

board = []

for x in range(0, 5):

board.append(["O"] * 5)

def print_board(board):

for row in board:

print " ".join(row)

print_board(board)

def random_row(board):

return randint(0, len(board) - 1)

def random_col(board):

return randint(0, len(board[0]) - 1)

ship_row = random_row(board)

ship_col = random_col(board)

print ship_row

print ship_col

for turn in range(4):

print "Turn", turn + 1

guess_row = int(raw_input("Guess Row: "))

guess_col = int(raw_input("Guess Col: "))

if guess_row == ship_row and guess_col == ship_col:

print "Congratulations! You sank my battleship!"

break

else:

if guess_row not in range(5) or \

guess_col not in range(5):

print "Oops, that's not even in the ocean."

elif board[guess_row][guess_col] == "X":

print( "You guessed that one already." )

else:

print "You missed my battleship!"

board[guess_row][guess_col] = "X"

if (turn == 3):

print "Game Over"

print_board(board)

8. Loops

1. Loops

1-1. While you're here

#while문은 반복되지만 if문은 반복되지 않는다.

count = 0

if count < 5:

print "Hello, I am an if statement and count is", count

while count < 10:

print "Hello, I am a while and count is", count

count += 1

>> Hello, I am an if statement and count is 0

>> Hello, I am a while and count is 0

>> Hello, I am a while and count is 1

>> Hello, I am a while and count is 2

>> Hello, I am a while and count is 3

>> Hello, I am a while and count is 4

>> Hello, I am a while and count is 5

>> # ... 9 까지 반복됩니다.

1-2. Condition

loop_condition = True

while loop_condition:

print "I am a loop"

loop_condition = False

>> I am a loop

# 변수 값을 참으로 하고 while문을 돌렸다. print 하고 나서 변수 값을 거짓으로 바꾸지 않으면

무한 반복 되기 때문에 마지막 줄엔 False로 해 두었다. 항상 참이라면 계속 실행해야 하기 때문이다.

1-3. While you're at it

num = 1

while num <= 10:

print num ** 2

num += 1

>> 1

>> 4

>> 9

>> 16

>> 25

>> 36

>> 49

>> 64

>> 81

>> 100

# num 변수를 1 ~ 10 까지 반복하면서 num의 제곱값을 프린트한다.

그리고 num을 1씩 증가한다.

1-4. Simple errors

choice = raw_input('Enjoying the course? (y/n)')

while choice != 'y' and choice != 'n':

choice = raw_input("Sorry, I didn't catch that. Enter again: ")

설명: y와 n 중 선택. choice 변수가 y 그리고 n 과 다르다면 choice에 다시 입력해야 한다.

1-5. Infinite loops

count = 0

while count < 10:

print count

count += 1

# -= 로 바꾸면 사이트가 렉 걸려서 계정에 혼란이 온다.

1-6. Break

count = 0

while True:

print count

count += 1

if count >= 10:

break

>> 0

>> 1

>> ..

>> 9 까지 출력 됨.

설명: count 는 0. while 값은 무조건 참. 계속 실행.

count 출력하고 1씩 더한다. count가 10이상이면 브레이크.

1-7. While / else

import random

print "Lucky Numbers! 3 numbers will be generated."

print "If one of them is a '5', you lose!"

count = 0

while count < 3:

num = random.randint(1, 6)

print num

if num == 5:

print "Sorry, you lose!"

break

count += 1

else:

print "You win!"

설명: while 조건으로 3번에 한정한다. 3번 반복 가능.

num 변수에 1 ~ 6 사이 랜덤한 정수 값을 담는다.

print한다. 만약 num이 5와 같으면 내가 졌다고 출력이 되고 break 된다.

5가 아닐 경우 count가 1씩 올라가서 다음 반복을 시작한다. 3번 안에 5가 안 나오면 내 승이다.

1-8. Your own while / else

from random import randint

random_number = randint(1, 10)

guesses_left = 3

while guesses_left > 0:

guess = int(raw_input("Your guess: "))

if guess == random_number:

print "You win!"

break

guesses_left -= 1

else:

print "You lose."

설명: random 모듈에 randint 함수를 쓴다.

randint: 두 정수 사이의 어떤 랜덤한 정수(난수)를 리턴시켜주는 함수

random_number 라는 변수에 1 ~10 사이의 난수 값을 받는다.

guesses_left 할당 값은 3이고 3 > 0 보다 크니 guess 변수에 int 값으로 입력을 받는다.

만약 내가 직접 입력한 guess 값이 random_number 변수에 난수값과 일치한다면 나의 승리고 break 된다.

아닐 경우 -1 씩 추가해서 3번의 기회에서 떨어지면 나의 패배다. 추측 값과 내 값 비교해서 맞춰보기.

1-9. For your health

print "Counting..."

for i in range(20):

print i

>> 0

>> 1

>> ..

>> 19 까지 출력.

1-10. For your hobbies

hobbies = []

for i in range(3):

hobby = raw_input(">>: ")

hobbies.append(hobby)

print hobbies

설명: for에 range 사용해서 3번(?) 입력 받는다.

hobby 변수에 입력 값을 받을 수 있게 한다.

내가 입력한 값을 hobbies 배열에 .append로 추가한다.

1-11. For your strings

thing = "spam!"

for c in thing:

print c

word = "eggs!"

for character in word:

print character

>> s

>> p

>> a

>> m

>> !

>> e

>> g

>> s

>> !

1-12. For your A

phrase = "A bird in the hand..."

for char in phrase:

if char == "A" or char == "a":

print "X",

else:

print char,

#Don't delete this print statement!

>> X b i r d i n t h e h X n d . . .

설명: print 하고 문자 뒤에 , 를 붙였더니 X로 대체가 된다. tip: ,

1-13. For your lists

numbers = [7, 9, 12, 54, 99]

print "This list contains: "

for num in numbers:

print num

for num in numbers:

print num ** 2

>> 7

>> 9

>> 12

>> 54

>> 99

>> 49

>> 81

>> 144

>> 2916

>> 9801

설명: 반복문을 통해 리스트 숫자를 나열한다.

두번째 반복문은 제곱값을 이용하여 나열한다.

1-14. Looping over a dictionary

# 예제

d = {'x': 9, 'y': 10, 'z': 20}

for key in d:

if d[key] == 10:

print "This dictionary has the value 10!"

----------------------------------------------------------------

d = {'a': 'apple', 'b': 'berry', 'c': 'cherry'}

for key in d:

print key, d[key]

>> a apple

>> c cherry

>> b berry

설명: key는 a, b, c이고

d[key]는 apple, berry, cherry이다.

1-15. Counting as you go

choices = ['pizza', 'pasta', 'salad', 'nachos']

print 'Your choices are:'

for index, item in enumerate(choices):

print index + 1, item

>> Your choices are:

>> 1 pizza

>> 2 pasta

>> 3 salad

>> 4 nachos

1-16. Multiple lists

list_a = [3, 9, 17, 15, 19]

list_b = [2, 4, 8, 10, 30, 40, 50, 60, 70, 80, 90]

# max 두 정수 값 중 최대값 비교하여 출력.

for a, b in zip(list_a, list_b):

print max(a, b)

>> 3

>> 9

>> 17

>> 15

>> 30

1-17. For / else

fruits = ['banana', 'apple', 'orange', 'tomato', 'pear', 'grape']

# tomato 뒤 부터는 출력이 나오지 않는다. pear와 grape를 tomato 앞으로 이동 시켜서 출력해 보았더니 그제서야 나온다.

print 'You have...'

for f in fruits:

if f == 'tomato':

print 'A tomato is not a fruit!' # (It actually is.)

break

print 'A', f

else:

print 'A fine selection of fruits!'

>> You have...

>> A banana

>> A apple

>> A orange

>> A tomato is not a fruit!

1-18. Change it up

# else가 출력되게 하라는 것 같다. if 의 조건 값을 바꿔주었다.

1-19. Create your own

N = {'k': 'korea', 'c': 'china', 'j': 'japan'}

for key in N:

if N[key] == "korea":

print "123"

elif key == 'c':

print "456"

else:

print "789"

>> 123

>> 789

>> 456

2. Practice Makes Perfect

2-2. is_even

def is_even(x):

if x % 2 == 0:

return True

else:

return False

2-3. is_int (No 이해)

def is_int(x):

absolute = abs(x)

rounded = round(absolute)

return absolute - rounded == 0

2-4. digit_sum (No 이해)

def digit_sum(x):

total = 0

while x > 0:

total += x % 10

x = x // 10

print x

return total

digit_sum(1234)

>> 123

>> 12

>> 1

>> 0

2-5. factorial (No 이해 하는 의도 모름.)

def factorial(x):

total = 1

while x > 0:

total *= x

x -= 1

return total

# 팩토리얼 설명

factorial(4) would equal 4 * 3 * 2 * 1, which is 24.

factorial(1) would equal 1.

factorial(3) would equal 3 * 2 * 1, which is 6.

2-6. is_prime (No 이해)

def is_prime(x):

if x < 2:

return False

else:

for n in range(2, x-1):

if x % n == 0:

return False

return True

2-7. reverse (No 이해)

def reverse(text):

word = ""

l = len(text) - 1

while l >= 0:

word = word + text[l]

l -= 1

return word

2-8. anti_vowel(영어에서 모음을 제거해서 출력해준다.)

def anti_vowel(text):

t=""

for c in text:

for i in "ieaouIEAOU":

if c==i:

c=""

else:

c=c

t=t+c

return t

print anti_vowel("Good boy")

>>Gd by

설명

1. text 입력 값이 C라는 변수 이름으로 통제한다.

2. 아에이오유(모음) 소문자, 대문자를 for in 을 사용하여 텍스트 하나하나 비교 할 수 있다.

3. c 값이 i 와 같다면(모음이) c를 공백으로 출력하라.

4. 아닐 경우 c에 c 값을 그대로 넣는다.

모음이 들어 있다면 c 값에 공백을 넣어라.(제거)

모음이 없으면 c에 값을 그대로 c에 넣는다.(유지)

빈 텍스트 공간인 t에 모음값을 제거한 c를 넣어준다.

return 하면 모음 값을 제거해서 출력해준다.

2-9. scrabble_score

score = {"a": 1, "c": 3, "b": 3, "e": 1, "d": 2, "g": 2,

"f": 4, "i": 1, "h": 4, "k": 5, "j": 8, "m": 3,

"l": 1, "o": 1, "n": 1, "q": 10, "p": 3, "s": 1,

"r": 1, "u": 1, "t": 1, "w": 4, "v": 4, "y": 4,

"x": 8, "z": 10}

def scrabble_score(text):

text = text.lower()

total = 0

for t in text:

for sc in score:

if sc == t:

total += score[sc]

return total

print scrabble_score("freedom")

>> 13

설명: 내가 영어를 입력하면(대소문자 구분 없게) 그에 맞게 값을 합해서 더해주는 기능을 한다. 스크래블 게임?

score 배열 안에 영어 소문자에 정수값이 들어가 있다.

def 함수를 만들어준다.

영어 대소문자 구분 없게 만들려면 내가 입력한 값을 소문자화 시켜주어야 한다.(.lower()사용)

total에 담을 공간을 만들어준다. 변수 선언 초기화.

내가 입력한 text 값을 t 라는 변수로 사용한다.

t 안에서 score에 값을 sc로 사용한다.

만약 sc의 앞에 영어와 내가 입력한 text 값이 같다면

total에 그 값을 더해서 담는다. score에 정수 값을 다 담는거 아니냐라고 생각할 수도 있는데,

for in은 하나하나 비교 하는 것이기 때문에 하나씩 알맞게 score[sc]가 담아준다.(모르면 FOR IN 참고.)

값을 반환해준다.

2-10. censor

def censor(text, word):

words = text.split()

result = ''

stars = '*' * len(word)

count = 0

for i in words:

if i == word:

words[count] = stars

count += 1

result =' '.join(words)

return result

print censor("this hack is wack hack", "hack")

>> this **** is wack ****

설명: hack이란 단어를 모자이크 처리할 것이다.

censor 함수에 text와 word 변수 2개를 받는다.

words인 2번째 변수를 모자이크 값으로 받을 것이다.(.split() 사용법 참고!)

result 빈 문자 공간 확보.

stars 변수는 모자이크 변수다. word가 "hack"일시 len(word) == 4. 내가 처리 요청한 것에 맞게 *이 나온다.

count 해야 하기 때문에 변수 선언 및 0으로 초기화.

word를 모자이크 해야 하니 in의 변수로 사용한다.

words 문자 번호마다 카운트하며 별을 넣는다.

카운트 1씩 증가.

결과를 담은 후 리턴한다.

2-11. count

def count(sequence, item):

count = 0

for i in sequence:

if i == item:

count += 1

return count

print count([1, 2, 1, 1], 1)

>> 3

설명: count라는 함수에 sequence와 item 이라는 두 변수 값을 받는다.

count 변수 0으로 선언 및 초기화.

sequence 배열 사용한다.

만약 i의 변수(sequence 자료)가 item과 같다면

count를 1씩 증가해서 저장한다. 다 끝나면 리턴하여 반환한다.

item에 1과 sequence에 1이 3개 같으니 카운트가 하나씩 증가하여 3을 반환했다.

2-12. purify

# 배열 중 짝수만 뽑아내서 출력.

def purify(lst):

res = []

for ele in lst:

if ele % 2 == 0:

res.append(ele)

return res

print purify([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

>> [2, 4, 6, 8, 10]

설명: purify 함수에 변수로 받는다.

res변수 안 배열에 따로 저장해서 출력할 것이다.

lst 배열을 ele라는 변수로 사용한다. lst 값 하나하나가 ele라는 변수로 사용된다.

만약 ele를 2로 나누어서 딱 맞아 떨어지면 짝수다.

res.append(ele)로 ele에 추가한다.

return 한다.

2-13. product

def product(num):

result = 1

for hap in num:

result = result * hap

return result

print product([4, 5, 5])

>> 100

설명: 내가 입력한 모든 값을 곱해주는 기능을 한다.

product라는 함수를 만들고 num이라는 함수 안에서의 가상의 변수를 만든다.

result 를 1로 초기화 하였다. 0으로 초기화 할시 0과 곱셈하면 결과 값이 안나오기 때문이다.

내가 입력한 값 하나 하나 나와야 하기 때문에 for in 을 사용 하였다.

배열 값인 num을 hap이라는 변수 하나하나로 사용할 수 있게 한다.

result에 값을 저장하고 return한다.

2-14. remove_duplicates(No 이해)

# 중복 값 제거.

def remove_duplicates(inputlist):

if inputlist == []:

return []

inputlist = sorted(inputlist)

outputlist = [inputlist[0]]

for i in inputlist:

if i > outputlist[-1]:

outputlist.append(i)

return outputlist

print remove_duplicates([1, 1, 2, 2])

>> [1, 2]

2-15. median

def median(lst):

sorted_list = sorted(lst)

if len(sorted_list) % 2 != 0:

index = len(sorted_list)//2

return sorted_list[index]

elif len(sorted_list) % 2 == 0:

index_1 = len(sorted_list)/2 - 1

index_2 = len(sorted_list)/2

mean = (sorted_list[index_1] + sorted_list[index_2])/2.0

return mean

print median([1, 2, 3, 4, 5])

print median([3, 4, 5, 6, 7, 8, 9])

>> 3

>> 6

9. Exam Statistics

1. Exam Statistics

1-2. Print those grades

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

def print_grades(grades_input):

for grade in grades_input:

print grade

print_grades(grades)

>> 100

>> 90

>> .. 차례대로 계속 나열

>> 50.5

설명: grades를 순서대로 나열한다. grades_input의 배열을 변수 하나 하나 받아 사용한다. print.

1-4. The sum of scores (정수 함수 만들기.)

# 정수를 다 합하는 함수.

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

def grades_sum(scores):

result = 0

for su in scores:

result += su

return result

print grades_sum(grades)

>> 1045.5

설명: grades를 인자 값으로 사용하여 for에 사용한다. scores의 배열을 변수 하나하나로 사용하기 위해 su 변수 만듬.

1-5. Computing the Average (나누기 함수 만들기.)

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

# 합해주는 함수.

def grades_sum(scores):

result = 0

for su in scores:

result += su

return result

print grades_sum(grades)

# 평균값을 내주는 함수.

def grades_average(grades_input):

hap = grades_sum(grades_input)

avg = hap / float(len(grades_input))

return avg

print grades_average(grades)

>> 1045.5

>> 80.4230769231

설명: 합해주는 함수를 이용해서 평균값을 내려고 한다.

grades_sum이라는 함수를 만들고 인자 값을 grades로 받는다.

hap이라는 새로운 변수에 grades_sum 함수를 이용하고 grades_input(받은 값 = grades)를 받으면 정수 값이 합쳐진다.

avg에 hap 나누기 실수형으로 grades_input의 길이(여기서 길이 == 등급 수)를 이용하여 나눈다.

avg에 계산된 값이 들어가고 리턴 시킨다.

1-7. The Variance(분산 함수 만들기.)

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

def grades_sum(scores):

total = 0

for score in scores:

total += score

return total

def grades_average(grades_input):

sum_of_grades = grades_sum(grades_input)

average = sum_of_grades / float(len(grades_input))

return average

def grades_variance(scores):

average = grades_average(scores)

variance = 0

for score in scores:

variance += (average - score) ** 2

return variance / len(scores)

print grades_variance(grades)

>> 334.071005917

설명: 평균(average) 변수를 만들고 함수로 값을 받게 한다.

분산(variance) 변수를 0으로 선언 및 초기화.

반복문을 사용하여 분산 공식을 사용해 저장한다.

1-8. Standard Deviation

이건 되고

def grades_std_deviation(variance):

return variance ** 0.5

variance = grades_variance(grades)

print grades_std_deviation(variance)

이건 안된다.

def grades_std_deviation(variance):

return variance ** 0.5

variance = grades_variance(variance)

print grades_std_deviation(grades)

내가 생각한건 2번째 경우다. grades 값을 받아서 함수를 실행 시키기 때문에 variance라는 함수 안에서의 변수가 grades의 값을

받아서 사용이 되니 grades_variance에 들어가는 값도 variance라고 생각을 했다.

하지만 variance는 grades_variance 함수에서 사용되는 변수 이름과 같기 때문에 오류가 나는 것 같다.

그런데 print grades_std_deviation(variance) 에서 variance 값의 출처를 모르겠다 ㅜㅜ.

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

def print_grades(grades_input):

for grade in grades_input:

print grade

def grades_sum(scores):

total = 0

for score in scores:

total += score

return total

def grades_average(grades_input):

sum_of_grades = grades_sum(grades_input)

average = sum_of_grades / float(len(grades_input))

return average

def grades_variance(grades):

variance = 0

for number in grades:

variance += (grades_average(grades) - number) ** 2

return variance / len(grades)

def grades_std_deviation(variance):

return variance ** 0.5

variance = grades_variance(grades)

print grades_std_deviation(variance)

>> 18.2776094147

1-9. Review

grades = [100, 100, 90, 40, 80, 100, 85, 70, 90, 65, 90, 85, 50.5]

def print_grades(grades_input):

for grade in grades_input:

print grade

print_grades(grades)

def grades_sum(scores):

total = 0

for score in scores:

total += score

return total

print grades_sum(grades)

def grades_average(grades_input):

sum_of_grades = grades_sum(grades_input)

average = sum_of_grades / float(len(grades_input))

return average

print grades_average(grades)

def grades_variance(grades):

variance = 0

for number in grades:

variance += (grades_average(grades) - number) ** 2

return variance / len(grades)

print grades_variance(grades)

def grades_std_deviation(variance):

return variance ** 0.5

variance = grades_variance(grades)

print grades_std_deviation(variance)

>> 100

>> 90

>> 40

>> 80

>> 100

>> 85

>> 70

>> 90

>> 65

>> 90

>> 85

>> 50.5

>> 1045.5

>> 80.4230769231

>> 334.071005917

>> 18.2776094147

10. Advanced Topics in Python

1. Advanced Topics in Python

1-1. Iterators for Dictionaries

my_dict = {

"Name": "Creator",

"Age": 59,

"BDFL": True

}

print my_dict.items()

>> [('BDFL', True), ('Age', 59), ('Name', 'Creator')]

1-2. keys() and values()

my_dict = {

"Name": "Creator",

"Age": 59,

"BDFL": True

}

print my_dict.keys()

print my_dict.values()

>> ['BDFL', 'Age', 'Name']

>> [True, 59, 'Creator']

1-3. The 'in' Operator

my_dict = {

"Name": "Creator",

"Age": 59,

"BDFL": True

}

for key in my_dict:

print key, my_dict[key]

>> BDFL True

>> Age 59

>> Name Creator

1-4. Building Lists

evens_to_50 = [i for i in range(51) if i % 2 == 0]

print evens_to_50

>> [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50]

설명: range 함수로 인해 0 ~ 50 까지 정수가 들어간다. for 전에 i가 있는데 변수를 선언 해준 것 같다.

if문을 통해 비교한다. 나눴을 때 나머지가 0으로 딱 맞아 떨어진다면 프린트 하는 것이다.

for in과 range 함수를 통해 0 ~ 50 까지 반복되며 비교해서 프린트한다.

1-5. List Comprehension Syntax

doubles_by_3 = [x * 2 for x in range(1, 6) if (x * 2) % 3 == 0]

x = 1 일 때 2 X

x = 2 일 때 4 X

x = 3 일 때 6 O

x = 4 일 때 8 X

x = 5 일 때 10 X

even_squares = [x ** 2 for x in range(1, 12) if x % 2 == 0]

print even_squares

>> [4, 16, 36, 64, 100]

x = 2일 때 제곱값 4, 나머지 값 0 O

x = 3일 때 제곱값 9, 나머지 값 1 X

x = 4일 때 제곱값 16, 나머지 값 0 O

x = 5일 때 제곱값 25, 나머지 값 1 X

x = 6일 때 제곱값 36, 나머지 값 0 O

x = 7일 때 제곱값 49, 나머지 값 1 X

x = 8일 때 제곱값 64, 나머지 값 0 O

x = 9일 때 제곱값 81, 나머지 값 1 X

x = 10일 때 제곱값 100, 나머지 값 0 O

x = 11일 때 제곱값 121, 나머지 값 1 X

1-6. Now You Try!

예) c = ['C' for x in range(5) if x < 3]

print c

>> ['C', 'C', 'C']

cubes_by_four = [x ** 3 for x in range(1, 11) if ((x ** 3) % 4) == 0]

print cubes_by_four

x = 2, 4, 6, 8, 10

>> [8, 64, 216, 512, 1000]

1-7. List Slicing Syntax

l = [i ** 2 for i in range(1, 11)]

# Should be [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

print l[2:9:2]

>> [9, 25, 49, 81]

설명: 2번째 순서부터(0부터 시작.) 시작 해서 9번째에 끝. 2번 뛴다.

1-8. Omitting Indices

my_list = range(1, 11) # List of numbers 1 - 10

# print my_list[9:]

# print my_list[:5]

# print my_list[2:10:3]

print my_list[::2]

# >> [10]

# >> [1, 2, 3, 4, 5]

# >> [3, 6, 9]

>> [1, 3, 5, 7, 9]

1-9. Reversing a List

my_list = range(1, 11)

backwards = my_list[::-1]

print backwards

>> [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

1-10. Stride Length

to_one_hundred = range(101)

backwards_by_tens = to_one_hundred[::-10]

print backwards_by_tens

>> [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0]

1-11. Practice Makes Perfect

# 조건. to_21 범위 1 ~21, 2번째 변수 만들어서 1, 3, 5 순으로 정렬, 3번째 변수 만들어서 8 ~ 14 까지 출력.

to_21 = range(1,22)

odds = to_21[::2]

middle_third = to_21[7:14]

print to_21

print odds

print middle_third

>> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]

>> [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21]

>> [8, 9, 10, 11, 12, 13, 14]

1-12. Anonymous Functions (람다 함수 첫 등장.)

my_list = range(16)

print filter(lambda x: x % 3 == 0, my_list)

>> [0, 3, 6, 9, 12, 15]

1-13. Lambda Syntax

languages = ["HTML", "JavaScript", "Python", "Ruby"]

print filter(lambda x: x == "Python", languages)

>> ['Python']

1-14. Try it!

squares = [x ** 2 for x in range(1, 11)]

print filter(lambda x: x >= 30 and x <= 70, squares)

>> [36, 49, 64]

설명: squares의 범위를 1 ~ 10으로 정하고 제곱을 받는다.

30 이상 70 이하의 범위의 조건을 만족하는 수를 뽑아라.

1 ** 2 == 1, 6 ** 2 == 36

2 ** 2 == 4, 7 ** 2 == 49

3 ** 2 == 9, 8 ** 2 == 64

4 ** 2 == 16, 9 ** 2 == 81

5 ** 2 == 25, 10 ** 2 == 100

1-15. Iterating Over Dictionaries

movies = {

"Monty Python and the Holy Grail": "Great",

"Monty Python's Life of Brian": "Good",

"Monty Python's Meaning of Life": "Okay"

}

print movies(틀이랑 자료 값 전부 출력.)

>> {"Monty Python's Life of Brian": 'Good', "Monty Python's Meaning of Life": 'Okay', 'Monty Python and the Holy Grail': 'Great'}

print movies.items()(그 안에 자료값만 출력.)

>> [("Monty Python's Life of Brian", 'Good'), ("Monty Python's Meaning of Life", 'Okay'), ('Monty Python and the Holy Grail', 'Great')]

1-16. Comprehending Comprehensions

# 1 ~ 15 사이 3 또는 5의 배수

threes_and_fives = [x for x in range(1, 16) if x % 3 == 0 or x % 5 == 0]

print threes_and_fives

>> [3, 5, 6, 9, 10, 12, 15]

# 람다 이용

threes_and_fives = [x for x in range(1, 16)]

print filter(lambda x: x % 3 == 0 or x % 5 == 0, threes_and_fives)

>> [3, 5, 6, 9, 10, 12, 15]

1-17. List Slicing (신기)

garbled = "!XeXgXaXsXsXeXmX XtXeXrXcXeXsX XeXhXtX XmXaX XI"

message = garbled[::-2]

print message

>> I am the secret message!

# message = garbled[-1::-2]

# print message

# >> I am the secret message!

message = garbled[-1::-2] 와 message = garbled[::-2] 왜 둘이 같은지 이해가 안간다.

1-18. Lambda Expressions

garbled = "IXXX aXXmX aXXXnXoXXXXXtXhXeXXXXrX sXXXXeXcXXXrXeXt mXXeXsXXXsXaXXXXXXgXeX!XX"

# 필터 기능을 이용하여 조건문을 통해 X와 다른 것만 출력시키게 한 것이다.

message = filter(lambda x: x != "X", garbled)

print message

>> I am another secret message!

2. Introduction to Bitwise Operators

이번 코스는 비트 연산자의 계산 방법을 배우게 된다.

2-1. Just a Little BIT

print 5 >> 4 # Right Shift

print 5 << 1 # Left Shift

print 8 & 5 # Bitwise AND

print 9 | 4 # Bitwise OR

print 12 ^ 42 # Bitwise XOR

print ~88 # Bitwise NOT

>> 0

>> 10

>> 0

>> 13

>> 38

>> -89

2-2. Lesson I0: The Base 2 Number System

8's bit 4's bit 2's bit 1's bit

1 0 1 0

8 + 0 + 2 + 0 = 10

----------------------------------------------------------------

print 0b1, #1

print 0b10, #2

print 0b11, #3

print 0b100, #4

print 0b101, #5

print 0b110, #6

print 0b111 #7

print "******"

print 0b1 + 0b11

print 0b11 * 0b11

>> 1 2 3 4 5 6 7

>> ******

>> 4

>> 9

2-3. I Can Count to 1100!(파이썬 이진법)

# 컴퓨터는 이진법으로 생각한다.

ex)

2 ** 0 = 1

2 ** 1 = 2

2 ** 2 = 4

2 ** 3 = 8

2 ** 4 = 16

2 ** 5 = 32

2 ** 6 = 64

2 ** 7 = 128

2 ** 8 = 256

2 ** 9 = 512

2 ** 10 = 1024

----------------------

one = 0b1

two = 0b10

three = 0b11

four = 0b100

five = 0b101

six = 0b110

seven = 0b111

eight = 0b1000

nine = 0b1001

ten = 0b1010

eleven = 0b1011

twelve = 0b1100

print one

print two

print three

print four

print five

print six

print seven

print eight

print nine

print ten

print eleven

print twelve

>> 1

>> 2

>> 3

>> 4

>> 5

>> 6

>> 7

>> 8

>> 9

>> 10

>> 11

>> 12

2-4. The bin() Function

# bin(): 문자열의 이진수 표현을 반환.

print bin(2)

print bin(3)

print bin(4)

print bin(5)

>> 0b10

>> 0b11

>> 0b100

>> 0b101

2-5. int()'s Second Parameter

# int('x', n) : n진수 x를 10진수로 변환

print int("1",2)

print int("10",2)

print int("111",2)

print int("0b100",2)

print int(bin(5),2)

print int("11001001", 2)

>> 1

>> 2

>> 7

>> 4

>> 5

>> 201

2-6. Slide to the Left! Slide to the Right!

<< : 비트를 지정된 수만큼 왼쪽으로 이동시킨다.

>> : 비트를 지정된 수만큼 오른쪽으로 이동시킨다.

shift_right = 0b1100

shift_left = 0b1

# Your code here!

shift_right = shift_right >> 2

shift_left = shift_left << 2

print bin(shift_right)

print bin(shift_left)

>>0b11

>>0b100

2-7. A BIT of This AND That

a: 00101010 42

b: 00001111 15

===================

a & b: 00001010 10

0 & 0 = 0

0 & 1 = 0

1 & 0 = 0

1 & 1 = 1

Therefore,

0b111 (7) & 0b1010 (10) = 0b10

================================

print bin(0b1110 & 0b101)

>> 0b100

0b 1110

0b 101

0b 100

1은 상쇄?

2-8. A BIT of This OR That

a: 00101010 42

b: 00001111 15

================

a | b: 00101111 47

0 | 0 = 0

0 | 1 = 1

1 | 0 = 1

1 | 1 = 1

110 (6) | 1010 (10) = 1110 (14)

==========================

print bin(0b1110 | 0b101)

>> 0b1111

0b1110

0b 101

2-9. This XOR That?

a: 00101010 42

b: 00001111 15

================

a ^ b: 00100101 37

0 ^ 0 = 0

0 ^ 1 = 1

1 ^ 0 = 1

1 ^ 1 = 0

111 (7) ^ 1010 (10) = 1101 (13)

================================

print bin(0b1110 ^ 0b101)

>> 0b1011

0b1110

0b 101

0b1011

2-10. See? This is NOT That Hard!

print ~1

print ~2

print ~3

print ~42

print ~123

>> -2

>> -3

>> -4

>> -43

>> -124

2-11. The Man Behind the Bit Mask (무슨 의도?)

def check_bit4(input):

mask = 0b1000

desired = input & mask

if desired > 0:

return "on"

else:

return "off"

check_bit4(0b1) # ==> "off"

check_bit4(0b11011) # ==> "on"

check_bit4(0b1010) # ==> "on"

2-12. Turn It On (무슨 의도?)

a = 0b110 # 6

mask = 0b11 # 3

desired = a | mask

print bin(desired)

>> 0b10111111 # 191

2-13. Just Flip Out (무슨 의도?)

a = 0b11101110

mask = 0b11111111

desired = a ^ mask

print bin(desired)

>> 0b10001 #17

2-14. Slip and Slide (무슨 동작?)

#모범 답안

def flip_bit(number, n):

bit_to_flip = 0b1 << (n -1)

result = number ^ bit_to_flip

return bin(result)

============================

#내가 한거

def flip_bit(number, n):

result = 0

result = number ^ n

return bin(result)

a = 0b101

mask = (0b1 << 9)

print flip_bit(a, mask)

print 0b1010110

#print 0b1010001

>> 0b1000000101

>> 86

11. Introduction to Classes

1. Introduction to Classes

1-1. Why Use Classes?

# 이런 걸 만들어 보겠다고 틀을 보여준 것이다.

class Fruit(object):

"""A class that makes various tasty fruits."""

def __init__(self, name, color, flavor, poisonous):

self.name = name

self.color = color

self.flavor = flavor

self.poisonous = poisonous

def description(self):

print "I'm a %s %s and I taste %s." % (self.color, self.name, self.flavor)

def is_edible(self):

if not self.poisonous:

print "Yep! I'm edible."

else:

print "Don't eat me! I am super poisonous."

lemon = Fruit("lemon", "yellow", "sour", False)

lemon.description()

lemon.is_edible()

>> I'm a yellow lemon and I taste sour.

>> Yep! I'm edible.

1-2. Class Syntax

#만들기 시작. 상속을 설명한단다.

class Animal(object):

pass

1-3. Classier Classes

class Animal(object):

def __init__(self):

pass

1-4. Let's Not Get Too Selfish

class Animal(object):

def __init__(self, name):

pass

self.name = name

1-5. Instantiating Your First Object

class Animal(object):

def __init__(self, name):

self.name = name

zebra = Animal("Jeffrey")

print zebra.name

>> Jeffrey

1-6. More on __init__() and self

class Animal(object):

"""Makes cute animals."""

def __init__(self, name, age, is_hungry):

self.name = name

self.age = age

self.is_hungry = is_hungry

zebra = Animal("Jeffrey", 2, True)

giraffe = Animal("Bruce", 1, False)

panda = Animal("Chad", 7, True)

print zebra.name, zebra.age, zebra.is_hungry

print giraffe.name, giraffe.age, giraffe.is_hungry

print panda.name, panda.age, panda.is_hungry

>> Jeffrey 2 True

>> Bruce 1 False

>> Chad 7 True

1-7. Class Scope

class Animal(object):

"""Makes cute animals."""

is_alive = True

def __init__(self, name, age):

self.name = name

self.age = age

zebra = Animal("Jeffrey", 2)

giraffe = Animal("Bruce", 1)

panda = Animal("Chad", 7)

print zebra.name, zebra.age, zebra.is_alive

print giraffe.name, giraffe.age, giraffe.is_alive

print panda.name, panda.age, panda.is_alive

>> Jeffrey 2 True

>> Bruce 1 True

>> Chad 7 True

1-8. A Methodical Approach

class Animal(object):

"""Makes cute animals."""

is_alive = True

def __init__(self, name, age):

self.name = name

self.age = age

# Add your method here!

def description(self):

print self.name

print self.age

zebra = Animal("Jeffrey", 2)

giraffe = Animal("Bruce", 1)

panda = Animal("Chad", 7)

hippo = Animal("Hiphop", 12)

hippo.description()

>> Hiphop

>> 12

1-9. They're Multiplying!

class Animal(object):

"""Makes cute animals."""

is_alive = True

health = "good"

def __init__(self, name, age):

self.name = name

self.age = age

def description(self):

print self.name

print self.age

zebra = Animal("Jeffrey", 2)

giraffe = Animal("Bruce", 1)

panda = Animal("Chad", 7)

hippo = Animal("Hiphop", 12)

sloth = Animal("Stupid", 9)

ocelot = Animal("cucu", 11)

print hippo.health

print sloth.health

print ocelot.health

>> good

1-10. It's Not ALL Animals and Fruits

class ShoppingCart(object):

"""Creates shopping cart objects

for users of our fine website."""

items_in_cart = {}

def __init__(self, customer_name):

self.customer_name = customer_name

def add_item(self, product, price):

"""Add product to the cart."""

if not product in self.items_in_cart:

self.items_in_cart[product] = price

print product + " added."

else:

print product + " is already in the cart."

def remove_item(self, product):

"""Remove product from the cart."""

if product in self.items_in_cart:

del self.items_in_cart[product]

print product + " removed."

else:

print product + " is not in the cart."

my_cart = ShoppingCart("Eric")

my_cart.add_item("Ukelele", 10)

>> Ukelele added.

1-11. Warning: Here Be Dragons

class Customer(object):

"""Produces objects that represent customers."""

#고객들을 나타내는 개체를 생성합니다.

def __init__(self, customer_id):

self.customer_id = customer_id

def display_cart(self):

# 당신의 쇼핑 카트의 내용에 대해 써 있다. 난 문자열!

print "I'm a string that stands in for the contents of your shopping cart!"

class ReturningCustomer(Customer):

"""For customers of the repeat variety."""

# 반복되는 다양한 고객들에게

def display_order_history(self):

# 당신의 역사에 서 있고 저는 문자열.

print "I'm a string that stands in for your order history!"

monty_python = ReturningCustomer("ID: 12345")

monty_python.display_cart()

monty_python.display_order_history()

>> I'm a string that stands in for the contents of your shopping cart!

>> I'm a string that stands in for your order history!

1-12. inheritance Syntax

class Shape(object):

"""Makes shapes!"""

def __init__(self, number_of_sides):

self.number_of_sides = number_of_sides

class Triangle(Shape):

def __init__(self, side1, side2, side3):

self.side1 = side1

self.side2 = side2

self.side3 = side3

1-13. Override!

class Employee(object):

"""Models real-life employees!"""

def __init__(self, employee_name):

self.employee_name = employee_name

def calculate_wage(self, hours):

self.hours = hours

return hours * 20.00

class PartTimeEmployee(Employee):

def calculate_wage(self, hours):

self.hours = hours

return hours * 12.00

1-14. This Looks Like a Job For...(임금 계산)

class Employee(object):

"""Models real-life employees!"""

def __init__(self, employee_name):

self.employee_name = employee_name

def calculate_wage(self, hours): #시간당 20달러

self.hours = hours

return hours * 20.00

class PartTimeEmployee(Employee): #파트타임 근무자

def calculate_wage(self, hours):

self.hours = hours

return hours * 12.00

def full_time_wage(self, hours): #풀타임 근무자

return super(PartTimeEmployee, self).calculate_wage(hours)

milton = PartTimeEmployee('Milton')

print milton.full_time_wage(10)

>> 200.0 # 10시간 근무했을 시 200달러

1-15. Class Basics

class Triangle(object):

def __init__(self, angle1, angle2, angle3):

self.angle1 = angle1

self.angle2 = angle2

self.angle3 = angle3

1-16. Class It UP

class Triangle(object):

number_of_sides = 3

def __init__(self, angle1, angle2, angle3):

self.angle1 = angle1

self.angle2 = angle2

self.angle3 = angle3

def check_angles(self):

if (self.angle1 + self.angle2 + self.angle3) == 180:

return True

else:

return False

1-17. Instantiate an Object

# 개체를 인스턴스화 하는 법 instance = Class(args)

class Triangle(object):

number_of_sides = 3

def __init__(self, angle1, angle2, angle3):

self.angle1 = angle1

self.angle2 = angle2

self.angle3 = angle3

def check_angles(self):

if (self.angle1 + self.angle2 + self.angle3) == 180:

return True

else:

return False

# instance = Class(args)

my_triangle = Triangle(30, 60, 90)

print my_triangle.number_of_sides

print my_triangle.check_angles()

>> 3

>> True

1-18. Inheritance

class Triangle(object):

number_of_sides = 3

def __init__(self, angle1, angle2, angle3):

self.angle1 = angle1

self.angle2 = angle2

self.angle3 = angle3

def check_angles(self):

if (self.angle1 + self.angle2 + self.angle3) == 180:

return True

else:

return False

# instance = Class(args)

my_triangle = Triangle(30, 60, 90)

print my_triangle.number_of_sides

print my_triangle.check_angles()

class Equilateral(Triangle): #정삼각형

angle = 60

def __init__(self):

self.angle1 = self.angle

self.angle2 = self.angle

self.angle3 = self.angle

2. Classes

2-1. Class basics

class Car(object):

pass

2-2. Create an instance of class

class Car(object):

pass

my_car = Car()

2-3. Class member variables(클래스 멤버 변수 호출하기.)

class Car(object):

condition = "new"

my_car = Car()

2-4. Calling class member variables

class Car(object):

condition = "new"

#my_car는 인스턴스

my_car = Car()

print my_car.condition

>> new

2-5. Initializing a class(초기화 클래스)

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

my_car = Car("DeLorean", "silver", 88)

2-6. Referring to member variables

클래스 구성원 변수는 해당 값이 클래스 내에서 생성되었는지(예:차량의 상태), 초기화 시 새 개체에 전달되는지 여부와 동일하게 작동합니다. 클래스의 멤버 변수는 개체에 속하기 때문에 이러한 변수에 액세스 하는 데 도트 표기를 사용합니다.

예를 들어, new_variable이라는 멤버 변수를 생성했다면 new_object라는 클래스의 새 인스턴스가 다음과 같이 이 변수에 액세스 할 수 있다.

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

my_car = Car("DeLorean", "silver", 88)

print my_car.model

print my_car.color

print my_car.mpg

>> DeLorean

>> silver

>> 88

2-7. Creating class methods

멤버 변수 외에도, 클래스는 그들만의 방법을 가질 수 있습니다.

예를 들어:

class Square(object):

def __init__(self, side):

self.side = side

def perimeter(self):

return self.side * 4

경계()클래스 방법은 제곱 클래스 정의의 내부에 기록된다는 점을 제외하고는 다른 기능을 정의하는 것과 동일합니다.

우리가 __init__ 을(를)정의했을 때와 마찬가지로, 어떤 클래스 방법으로든 자신을 첫번째 원칙으로 제시할 필요가 있다.

----------------------------------------------------------

#차량 클래스 내에서 display_car라는 메서드를 차량의 멤버 변수에 추가하여"이것은[color][Model]을 생성하는 방법으로 str()를 사용할 수 있는 문자열입니다."

#개별 인쇄 문을 my_car.display_car()호출 결과가 표시된 단일 인쇄 명령으로 교체합니다.

#클래스의 구성원 변수에 액세스 하려면(해당 클래스 내에 있는 동안에도)자체 키워드와 도트 표기법을 사용하여 클래스에 속한 구성원 변수를 나타내도록 지정해야 합니다.

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

def display_car(self):

print "This is a %s %s with %s MPG." % (self.color, self.model, str(self.mpg))

my_car = Car("DeLorean", "silver", 88)

my_car.display_car()

>> This is a silver DeLorean with 88 MPG.

2-8. Modifying member variables (회원 변수 수정)

이러한 구성원 변수를 초기화하는 것과 동일한 방식으로 클래스에 속한 변수를 수정할 수 있습니다. 이것은 클래스 방법 내에서 발생하는 것에 기반하여 변수가 가지는 가치를 변경하려는 경우에 유용할 수 있습니다.

1. 차량 클래스에서 self.condition을 "used"문자열에 설정하는 drive_car를 추가합니다.

my_car.display_car()에 대한 호출을 제거하고 대신 자동차 상태만 인쇄하십시오.

그런 다음 drive_car메서드를 호출하여 차를 운전합니다.

마지막으로, 차의 가치가 어떻게 변하는지 알아보기 위해 차의 상태를 다시 인쇄해 보아라.

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

def display_car(self):

print "This is a %s %s with %s MPG." % (self.color, self.model, str(self.mpg))

def drive_car(self):

self.condition = "used"

my_car = Car("DeLorean", "silver", 88)

print my_car.condition

my_car.drive_car()

print my_car.condition

>> new

>> used

이해하기 어렵다 ㅠㅠ.

2-9. Inheritance

수업의 이점 중 중요한 것은 우리가 그들의 부모 수업에서 변수나 방법을 물려받을 더 복잡한 수업을 만들 수 있다는 것이다. 이러한 하위 클래스에는 추가 변수나 방법도 포함될 수 있으므로 이 방법을 사용하면 시간을 절약하고 더 복잡한 개체를 만들 수 있습니다.

우리는 "상위"클래스의 모든 변수와 기능을 상속하는 "하위"클래스를 정의합니다.

class ChildClass(ParentClass):

# new variables and functions go here

일반적으로 가장 기본적인 클래스 유형이기 때문에 개체를 상위 클래스로 사용하지만, 다른 클래스를 지정하여 더 복잡한 기능을 상속할 수 있습니다.

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

def display_car(self):

print "This is a %s %s with %s MPG." % (self.color, self.model, str(self.mpg))

def drive_car(self):

self.condition = "used"

class ElectricCar(Car): # def init을 새로 만들고 molten salt를 추가하라는 거였다.

def __init__(self, model, color, mpg, battery_type):

self.model = model

self.color = color

self.mpg = mpg

self.battery_type = battery_type

my_car = ElectricCar("DeLorean", "silver", 88, "molten salt")

2-10. Overriding methods

당사의 전기 자동차는 좀 더 전문화된 종류의 자동차이므로, 당사는 원래 자동차 클래스와는 다른 기능을 가진 전기 자동차 전용 drive_car()방법을 제공할 수 있습니다.

1.ElectricCar는 새로운 methoddrive_car를 추가하고, 이 car는 차량의 조건을 "likenew"문자열로 변경한다.

그런 다음 전기 자동차 외부에 my_car의 상태를 인쇄합니다.

그런 다음 drive_car기능을 호출하여 my_car드라이브를 설정합니다.

마지막으로 my_car의 상태를 다시 인쇄합니다.

class Car(object):

condition = "new"

def __init__(self, model, color, mpg):

self.model = model

self.color = color

self.mpg = mpg

def display_car(self):

print "This is a %s %s with %s MPG." % (self.color, self.model, str(self.mpg))

def drive_car(self):

self.condition = "used"

class ElectricCar(Car):

def __init__(self, model, color, mpg, battery_type):

self.model = model

self.color = color

self.mpg = mpg

self.battery_type = battery_type

def drive_car(self):

self.condition = "like new"

# 처음엔 Car 클래스 안에서 condition을 받아 왔는데 drive_car를 받고 나선 거기서 받아왔다. 당연한데?

my_car = ElectricCar("DeLorean", "silver", 88, "molten salt")

print my_car.condition

my_car.drive_car()

print my_car.condition

>> new

>> like new

2-11. Building useful classes

유용한 클래스 구축

현실 세계에서 조만간 자동차 수업을 디자인하지 못할 수도 있다. 일반적으로 클래스는 추상 데이터 수집을 유지하고 액세스 하는 데 가장 유용합니다.

재정의할 수 있는 한가지 유용한 클래스 방법은 표현을 줄인 내장형 _____________ 방법이며, 이 방법으로 반환 값을 제공하여 Python에게 인쇄합니다(예:).

개체에서 상속되는 Point3D클래스 정의

Point3D클래스 내에서, 셀프, x, y, z를 받아들이고 이러한 숫자를 멤버 변수 self.x, self.y, self.z에 할당하는 _______ 함수를 정의하십시오.

%"(%d,%d,%d)"%%(self.x, self.y, self.z)를 반환하는 ______ 메서드를 정의하십시오. 이 명령은 Python에게 이 개체를(x, y, z)형식으로 표시하도록 지시합니다.

클래스 정의 밖에 x=1, y=2, z=3의 새 인스턴스가 포함된 my_point라는 변수를 생성합니다.

마지막으로 my_point를 입력합니다.

class Point3D(object):

def __init__(self, x, y, z):

self.x = x #self.x = x, 이렇게 하면 오류 난다. ,를 붙이면.

self.y = y #self.y = y,

self.z = z #self.z = z

def __repr__(self):

return "(%d, %d, %d)" % (self.x, self.y, self.z)

my_point = Point3D(1, 2, 3)

print my_point

>> (1, 2, 3)

12. File Input and Output

1. File Input and Output

1-1. See It to Believe It (믿기 위해 확인하기)

지금까지 입력한 Python코드는 한 소스에서 나오며 키보드에 입력하면 콘솔에 결과가 표시됩니다. 하지만 컴퓨터의 파일에서 정보를 읽거나 해당 정보를 다른 파일에 쓰려는 경우에는 어떻게 합니까?

이 프로세스를 파일 I/O("I/O")라고 하며, Python에는 이러한 작업을 대신하여 여러가지 기본 제공 기능이 있습니다.

오른쪽의 편집기에서 코드를 확인해 보세요.

my_list = [i ** 2 for i in range(1, 11)]

# Generates a list of squares of the numbers 1 - 10

f = open("output.txt", "w")

for item in my_list:

f.write(str(item) + "\n")

f.close()

1-2. The open() Function

한번에 한 단계씩 파일에 쓰는 과정을 살펴보겠습니다. 이전 실습에서 실행된 첫번째 코드는 다음과 같습니다.

이 명령은 Python이"w"모드로 output.txt를 열도록 지시했다("w"는 "쓰기"를 나타낸다). 이 작업의 결과를 파일 개체 f에 저장했습니다.

이렇게 하면 파일이 기록 모드로 열리고 Python이 데이터를 파일에 보내도록 준비합니다.

1. 변수 my_file을 생성하고 이를 output.txt에 있는 열림()기능을 호출하도록 설정합니다. 이 경우, 파일을 읽고 쓸 수 있도록 기능에 두번째 인수로 "r+"을 전달하세요! ( 자세한 내용은 힌트를 참조하십시오.)

다음 모드 중 하나로 파일을 열 수 있습니다.

쓰기 전용 모드("w")

읽기 전용 모드("r")

읽기 및 쓰기 모드("r+")

추가 모드("a")로, 파일 끝에 기록한 모든 새 데이터를 추가합니다.

my_file = open("output.txt", "r+")

1-3. Writing

잘 했어요! 이제 데이터를 새로운. txt파일로 작성할 시간입니다.

우리는 첫번째 연습부터 편집자의 코드까지 목록 이해를 추가했다. 이 연습의 목표는 해당 목록의 각 요소를 output.txt라는 파일에 쓰는 것입니다. 현재 폴더에 쓴 output.txt파일이 생성됩니다. 이 파일은 단순하기 때문에 폴더가 숨겨져 있는 것입니다. output.txt에서 각 번호가 고유하게 나열될 것이다.

다음과 같은 Python파일로 쓸 수 있습니다.

.write()방법에는 문자열 인수가 필요하므로 여기서 몇가지 작업을 수행해야 합니다.

파일을 닫아야 합니다. my_file.close()(마지막 연습에서는 이 작업을 수행했습니다)를 불러 오기만 하면 됩니다. 파일을 닫지 않으면 Python이 제대로 쓰지 않습니다. 이제부터는 파일을 닫아야 해요!

1. my_list를 기준으로 하여 각 값을 가져온다.

my_file.write()를 사용하여 각 값을 "output.txt"라는 텍스트 파일에 씁니다.

반복해서 꼭 Str()에게 전화해 주세요. 이렇게 쓰면 돼요.

각 요소 뒤에 새 라인(+"\n")을 추가하여 각 요소가 고유한 라인에 표시되도록 하십시오.

작업이 끝나면 my_file.close()를 사용하여 파일을 닫습니다.

연습을 통과하면 my_list를 output.txt에 성공적으로 작성했다는 것을 의미합니다.

# 1부터 10 까지 문자열로 받아서 쓰겠다는 것 같다.

my_list = [i ** 2 for i in range(1, 11)]

my_file = open("output.txt", "w")

for item in my_list:

my_file.write(str(item) + "\n")

my_file.close()

1-4. Reading

잘 했어요 당신은 프로에요.

마지막으로, 우리는 output.txt파일에서 읽는 법을 알고 싶다. 예상하신 대로, 우리는 이렇게 읽기()기능으로 이것을 합니다.

1. 변수 my_file을 설명하고"output.txt"와 "r"이 모두 포함된 open()을 눌러 반환되는 파일 개체와 동일하게 설정합니다.

그런 다음 위의 예제와 같이 my_file에 .Read()을 사용하여 얻은 결과를 인쇄하십시오.

작업이 끝났으면 파일을 닫으세요! 네가 하지 않으면 모든 종류의 파멸이 일어날 것이다

Hint 파일을 여는 구문은 다음과 같습니다.

my_file = open("output.txt", "r")

print my_file.read()

my_file.close()

>> 1

>> 4

>> 9

>> 16

>> 25

>> 36

>> 49

>> 64

>> 81

>> 100

1-5. Reading Between the Lines (한줄 한줄 읽기)

파일 전체를 한번에 끌어 들이지 않고 한줄씩 읽어 가며 읽으려면 어떻게 해야 합니까? 다행히 Python에는 정확하게 다음과 같은 기능을 하는. readline()방법이 포함되어 있다.

파일을 열고. readline()을 파일 개체에 대해 호출하면 파일의 첫번째 행이 표시되고, 이후에. readline()에 대한 호출이 연속적으로 반환됩니다.

새로운 변수 my_file을 선언하고"r"전용 모드의 "texty.txt"파일에 열어()결과를 저장합니다.

별도의 세줄에 my_file.readline()을 호출한 결과를 출력합니다. 매번 어떻게 다음 줄이 나오는지 봐?

작업이 끝나면 파일을 닫는 것을 잊지 마십시오!

my_file = open("text.txt", "r")

print my_file.readline()

my_file.close()

>> I'm the first line of the file!

>> I'm the second line.

>> Third line here, boss.

1-6. PSA: Buffering Data

편지를 다 쓴 후에는 항상 파일을 닫아야 한다고 말씀 드려요. 그 이유는 이렇습니다!

I/O프로세스 중 데이터는 버퍼링 됩니다. 즉, 파일에 쓰기 전에 임시 위치에 저장됩니다.

Python은 파일에 데이터를 쓰는 등의 방법으로 버퍼를 정리하지 않습니다. 닫지 않고 파일에 쓰면 데이터가 대상 파일로 이동하지 않습니다.

1. 편집자에게 우리의 아주 나쁜 코드를 확인해 보세요. run(실행)을 클릭하면 우리의 read_file.read()데이터를 다시 읽지 않았다는 점에 주목할 것입니다!

파일에 쓴 후 읽기 전에 write_file.close()호출을 추가합니다.

print read_file.read()라인 뒤에 read_file.close()호출 추가

코드를 다시 실행합니다.

이번에는 데이터가 나오는 것을 볼 수 있을 거예요!

write_file = open("text.txt", "w")

read_file = open("text.txt", "r")

write_file.write("Not closing files is VERY BAD.")

write_file.close()

print read_file.read()

read_file.close()

>> Not closing files is VERY BAD. (파일을 닫지 않는 것은 매우 나쁜 일이다.)

# 파일 사용했으면 제때제때 닫아야 한다. write 했으면 그 다음엔 닫아주고 read 했으면 그 다음엔 닫아주고.!

1-7. The 'with' and 'as' Keywords

프로그래밍은 컴퓨터가 그 일을 하도록 하는 것입니다. Python이 파일을 자동으로 닫도록 할 수 있는 방법이 있나요?

물론 있죠. 저는 Python입니다.

당신은 이것을 알지 못하지만, 파일 객체는 특수한 쌍의 기본 제공 방법인 __enter__(), __exit__() 을(를)포함한다. 상세 내역은 중요하지 않지만 중요한 것은 파일 개체의__exit__()방법이 호출될 때 파일이 자동으로 닫힌다는 점입니다. 이 방법을 어떻게 호출합니까? with 그리고 as.

구문은 다음과 같습니다.

#script.py 페이지

with open("text.txt", "w") as textfile:

textfile.write("Success!")

#text.txt 페이지

>> Success!

1-8. Try It Yourself

효과가 있었어요! 우리의 Python프로그램이 텍스트. txt에 성공적으로 기록되었다.

이제 시도해 보겠습니다. 원하는 모든 데이터를with...as파일에 쓰십시오. 파일 개체에 my_file이라는 일반적인 이름을 지정하십시오.

with open("text.txt", "w") as my_file:

my_file.write("Sleepy")

1-9. Case Closed?

마지막으로, 우리가 열어 놓은 파일이 닫혀 있는지 테스트할 방법을 원합니다. 파일 개체를 여러개 열어 두는 경우도 있는데, 주의하지 않으면 개체가 모두 닫히지 않습니다. 이것을 어떻게 테스트할 수 있을까요?

Python파일 개체는 파일이 닫힌 경우 True이고 그렇지 않으면 False입니다.

file_object.closed을(를)선택하여 파일이 닫혀 있는지 확인하고 파일이 여전히 열려 있는 경우 파일에 대해 닫기 close()를 호출할 수 있습니다.

1. 다음 코드를 사용하여 두가지를 수행합니다.

파일이 닫히지 않았는지 확인하십시오.

그런 경우에는, 전화를 걸어. 닫아.

(종결된 문장이 True이면 아무것도 하지 말아야 하기 때문에 여기서는 다른 설명이 필요하지 않습니다.)

설명이 끝나면 my_file.closed의 값을 인쇄하여 파일이 실제로 닫혀 있는지 확인합니다.

with open("text.txt", "w") as my_file:

my_file.write("My Data!")

#if 문에서 my_를 넣지 않고 file만 해도 정상작동 된다. 왜지?

# 만약 my_file이 닫혀있지 않는다면 my_file을 닫아라. 후에 출력으로 확인.

if not my_file.closed:

my_file.close()

print my_file.closed

>> True

https://www.crocus.co.kr/341

Crocus

꽃말 후회없는 청춘 ( We are Crocus! ) 미치게 살아봐요. 뭔가에 홀린 것처럼. 새벽이 넘어가도록 도서관에서 공부하다 저 벤치를 달굴 해가 뜨는 모습도 지켜봐보고, 씻지 않은 채로, 아무도 상관하지 않고 집..

www.crocus.co.kr

파이썬 큰 따옴표 작은 따옴표 차이
http://blog.naver.com/hyem0322/221034352793

파이썬 모듈 이란(import, from 설명)
http://blog.naver.com/gt6600/220910561853

파이썬 모듈 이란(randint, uniform)
http://blissa.tistory.com/802

파이썬 sort, sorted 차이
http://www.crocus.co.kr/937

파이썬 .split()
https://shlee_0607.blog.me/220676419002

파이썬 입력 함수
http://blog.naver.com/ksg97031/221124518775

파이썬 리스트 조작 함수
http://beaqon.blog.me/221004505651
Python3(파이썬3) 내장함수 3(lambda, len, list, map...
https://blog.naver.com/baekmg1988/220950402977
[파이썬/range] 반복문 - for 문을 이용한 range 함수
https://blog.naver.com/heartflow89/221062991798

람다(Lambda)함수란? 부속 사용 함수: map() reduce() reduce() 출처: 왕초보를 위한 Python 2.7
https://wikidocs.net/64
파이썬 04 - bin, oct, hex
https://blog.naver.com/dooits/221120598155
파이썬 int() 진수 변환
https://thrillfighter.tistory.com/295

[파이썬] 클래스, 인스턴스, 상속, 오버라이드, 슈퍼[출처] [파이썬] 클래스, 인스턴스, 상속, 오버라이드, 슈퍼 |작성자 호로요이이
https://blog.naver.com/demonic3540/221188267854

[파이썬] 클래스, 인스턴스, 상속, 오버라이드, 슈퍼

[들어가는 말] 파이썬 입문과정 때 대충 넘어갔던 개념들이 헷갈려 다시 정리해봄 ㅠ 클래스 개념을 메이플...

blog.naver.com

줄임말
def: defines the function

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Choose your path - Codecademy (0)	2020.04.26
CSS - Codecademy (0)	2020.04.26
Ruby - Codecademy (0)	2020.04.26
Codecademy란? (0)	2020.04.26

Cyberworld

Everything is connected, connection is power.

HTML 태그

프로그래밍 개념/HTML 2020. 4. 26. 09:26

<!DOCTYPE html> : 최초의 선언문
<h1..h2..h3></h1../h2../h3> : 제목으로 사용함. 큰 글씨가 나옴. h뒤 숫자가 커질수록 글씨 크기 줄어듬.(텍스트 확대)
<p></p> : 글 내용을 적는 곳.
<a></a>: 콘텐츠와 연결하기 위해 사용.
<div></div> : 텍스트나 다른 HTML 요소를 포함할 수 있음.
<ul></ul> : Unordered list 정렬되지 않은 리스트
<ol></ol> : Ordered list 정렬된 리스트(순서 있는, 숫자 있는)
<li></li> : list. ul이나 ol 리스트 안에서 사용된다. 내용을 씀.

<img src = "" /> : 이미지를 표현하게 할 수 있음.
<img src = "#" alt= "" / > : alt 기능. 영상이나 이미지를 웹 페이지에 로드 하지 못할 경우, 그 주소를 불러옴.
<video src ='' width="" height="" controls> Video not supported : 비디오 업로드 가능.(controls 있으면 영상 재생 가능하게 버튼 뜸.)
<a href="">Linking Out</a> : 웹 주소를 href에 넣고 Linking Out 부분이 빈 공간인데 이 공간에 쓰고 싶은 타이틀을 쓰면 그 글에 하이퍼 링크가 걸린다.

target=_blank : 현재 창에서 접속하는 것이 아니라 새로운 창에서 뜨게 한다.
사용 예) <a href="xxx.xx" target="_blank">BAKA</a> BAKA를 누르면 새로운 창이 뜸.

상대 경로: ./index.html : ./ 폴더 안에 있는 index.html 파일을 불러온다.
절대 경로: full url, http://codecademy.com/learn/index.html

div id를 주소에 #과 같이 넣어주면 introduction이라는 단어를 누를 때 그 페이지 쪽으로 가게 해준다.
div id 적는 곳 단어
<li>< a href="#introduction">introduction</a></li>
<div id="introduction">

<table></table>: 얘 안에서 테이블 관련된 명령어 수행 가능
<thead></thead>: table의 머리
<tbody></tbody>: table의 몸
<tfoot></tfoot>: table의 발
<tr></tr>: 행(rows)을 추가한다. 1행 2행 3행 등등
<th></th>: 제목 셀(열). 표 머리글
<td></td>: 내용 셀(열)
<td rowspan="합칠 행의 개수">내용</td>: 행이 서로 다른 n개의 셀을 병합
<td colspan="합칠 열의 개수">내용</td>: 열이 서로 다른 n개의 셀을 병합

: 주석

<style></style> 태그 사용법 예)
  <style>
      table, th, td {
   border: 1px solid black;
   font-family: Arial, sans-serif;
    font-size: 18px;
   text-align: center;
  } </style>

부모 자식 개념 잘 확인하고 있기.

CSS 사용법 3가지 정리: http://ingorae.tistory.com/1692
CSS FONTS 글꼴 설정: http://nimolove.tistory.com/101

Cyberworld

Everything is connected, connection is power.

Codecademy란?

스스로 코딩/Codecademy 2020. 4. 26. 09:19

위키백과에 따르면 코드카데미(Codecademy)는 프로그래밍을 학습할 수 있는 온라인 플랫폼이다. 자바스크립트, PHP, 파이썬2, 루비 등 프로그래밍 언어와 HTML, CSS 등의 마크업 언어 과정이 있다. 2011년 9월 기준 55만명이 강의를 수강했다.

코드카데미는 제가 군대에 있었을 때 공부 연등을 이용하여서 조금이라도 감을 잡기 위해서 했었습니다.

제가 살면서 처음으로 여기 사이트에서 결제를 하고 싶다라는 생각이 들었을 정도로 되게 좋은 교육 프로그램들을 운영하고 있습니다. 일단 무료로 들을 수 있는 교육들이 되게 많아요. 대신에 무료는 어떤 프로젝트 기능들은 이용하지 못하지만 대신에 문법적인 공부를 하는데 있어서 길을 잡아줘서 되게 좋아요.

영어는 제가 잘 못해서 ㅎㅎ.. 네이버 번역기 파파고를 사용 했습니다.

크롬이랑 익스플로러는 사지방에서 업데이트를 안 해주어서 whale 브라우저를 항시 이용 했습니다.

프로그래밍 하는데 있어서 구글 번역기 보다 파파고가 더 정확 했었어요. 비교 해봤거든요.

HTML, CSS, Javascript, Ruby, SQL, C++, Swift, Python, PHP, Alexa, Watson, API, JAVA 등등 무료가 엄청 많아요.

프로그래밍을 배우고 싶고 처음에 어떻게 시작해야 할지 모르겠다면 Codecademy에서 무료로 프로그래밍 문법적 교육 받을 수 있으니까 해보시고 그 다음에 실제로 코딩 공부하셔도 무방할 것 같아요 ㅎㅎ. 결제 하시면 더 많은 기능 이용할 수 있는데 뭔가 광고 같네요 ㅋㅋ.

저도 무료 기능들만 사용해서 뻘쭘 하네요 ㅎㅎ... Codecademy 감사합니다.

Codecademy 카테고리 안에 있는 내용들은 제가 군 복무 시절 했던 내용들이라 지금은 조금 달라질 수도 있어요.

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Choose your path - Codecademy (0)	2020.04.26
CSS - Codecademy (0)	2020.04.26
Ruby - Codecademy (0)	2020.04.26
Python 개념 - Codecademy (0)	2020.04.26

Cyberworld

Everything is connected, connection is power.

알리타 후기(스포 주의)

교양/영화 후기 2019. 2. 22. 18:00

알리타 라는 인공지능의 여자가 고철 덩어리에서 발견이 되었는데 닥터 다이슨 이도 라는 의사가 그녀를 구해 주었다.

그녀는 닥터 이도 집에서 깨어났을 때 기억을 잃어버린 상태였는데 닥터 이도는 그녀의 기억을 알고 있었지만 말하지 않았다.

그녀는 휴고라는 남자와 친해졌는데 휴고와 알리타는 사랑하는 관계로 발전해 나갔다. 휴고는 부품들을 공급해주는 일을 한다. 나중에 알게된 사실은 휴고와 그의 친구들이 콜로세움 같은 모터볼 경기장에서 싸우는 기계 부품을 장착한 검투사들을 밤 길거리에 여럿이서 납치하여 인체의 일부를 절단해서 판매를 하는 인신매매 수법으로 돈을 벌고 있었다. 휴고는 자렘이라는 공중 도시에 들어가기 위해 수단과 방법을 가리지 않았다. 후에는 이 일을 후회하며 친구들을 말리지만 안좋은 사건이 일어난다. 이 일을 자팡이라는 헌터 워리어가 알리타와 휴고 사이를 이간질 하여 자팡이 특수 칼로 휴고를 찌른다. 휴고는 몸을 기계로 대체했지만 나중에 공중 도시를 올라가려다 디펜스 링에 의해 죽고 만다.

알리타가 머물고 있는 고철 도시에는 헌터 워리어라는 직업이 있다. 헌터 워리어란 범죄자들을 공권력으로 잡기가 어려워 민간에게 돈을 주고 범죄자 처리를 맡기는 것이다.

어떤 영화에서든 음모가 있기 마련인데 공중 도시인 자렘에서 가장 높은 권력을 가진 노바라는 사람이 계속해서 다른 사람의 육체를 빌려(정신으로?) 알리타와 알리타를 제거하려는 측근들에게 말을 하는 모습을 보여주는데, 이러한 장면이 노바라는 사람을 신처럼 보이게 했다. 이 권력적 음모가 얼마나 깊은 문제가 있냐면 도시에서 벌어지고 있는 여자만 살해되는 살해 사건에 그 범죄자들이 현상금 등록도 되지 않고 버젓이 돌아다니며 보호를 받는 것이다. 알리타는 분명 높은 곳과 관여 되어 있다는 것을 눈치 채고 진실을 알기 위해 직접 이리저리 발로 뛰어 다녔다.

알리타의 정체는 URM(화성연합공화국)광전사 소속으로 최후의 URM 인류 라고 나온다. 알리타는 기갑술이라는 특수한 무술을 사용한다. 한마디로 알리타는 최정예 특수부대원인 것이다. 마지막에는 알리타가 모터볼 경기장에서 URM 광전사들이 쓰던 칼을 자렘을 향한 채 겨누며 영화는 끝이 난다.

알리타가 사는 세계는 지상은 고철 도시이고 공중은 자렘이라는 하늘에 떠 있는 공중 도시가 있는데 사회의 어두운 면을 보여준다.

알리타를 보면서 여성의 주권에 대해 많은 것을 생각하게 되었다. 알리타라는 캐릭터 자체가 매력적인 점은 여성적인 부드러운 면은 그대로 간직한 채 강함을 가지고 있기에 더더욱 매력적이게 다가온다. 나중에는 URM 슈트를 얻게 되어 정말로 어떤 나쁜 이도 알리타를 범접할 수 없게 되었다.

세상은 항상 많은 문제에 직면해 있고 약자들이 살기는 어려운 약육강식 법칙에 지배되어 있다. 비록 사회가 문명화 되어 현재 그나마 안정이 되었다고는 하지만 아직도 근본은 변하지 않고 있다. 그러기에 알리타는 여자일지라도 자신과 주변을 지키기 위해 강한 전사의 길을 가지 않았나 싶다. 전사의 심장 이랄까. 알리타를 통해서 여성은 연약하고 지켜줘야 하는 고정관념을 깨는 계기가 되었으면 한다.(여자도 강할 수 있다.!) 알리타가 휴고(남친)를 위해 심장을 내주는 모습을 보고는 쇼크 먹었다.(웃김)

나도 알리타처럼 강함과 부드러운 면을 동시에 지니려고 노력해야겠다. >_<

'교양 > 영화 후기' 카테고리의 다른 글

특별시민 후기(스포주의) (0)	2017.05.01
더블 달콤한 악몽 영화 후기/나름 해석 (0)	2017.03.23
23아이덴티티 후기(스포 주의) (0)	2017.03.18
신비한 동물사전 후기(스포O) (0)	2017.01.16

Cyberworld

Everything is connected, connection is power.

군대 - TV의 무서움

교양/글쓰기 2017. 11. 26. 08:49

최근 1주일 넘게 TV를 시청하였다. 원래 드라마를 싫어하는데 요즘 이색 드라마가 많아서 TV가 틀어져 있으면 보게 된다. 원래 도서관도 잘 다니고 바쁘게 움직였는데 춥다보니 덜 활동적이게 된 것이 없지않아 있다.

내가 TV를 무섭다 생각한 이유는 TV가 틀어져 있으면 다른 것에 집중을 못하기 때문이다. 책을 읽어도 소리가 들리고 눈이 TV쪽을 계속 향하게 된다. 씻으려 다가도 그 잠깐에 금세 집중해서 보게 된다. 침대까지 있어서 살짝 눕기라도 하면 시간이 30분~1시간이 체감상 5분~10분 처럼 흘러간다. 재미는 있지만 쓸데는 없다. 내용이 도움되는 내용이 없다.

가끔가다 쉬고 싶을 때만 보려고 해야겠다. TV 때문에 일기나 책 읽는 것이나 공부하는 것이 적지 않게 방해가 되었다.

귀찮아도 도서관을 다녀야겠다.

'교양 > 글쓰기' 카테고리의 다른 글

놀면 안되는 이유? (0)	2017.06.30
나만의 명언집 (0)	2017.06.20
철거 알바 일기 같은 후기 (2)	2017.06.17
청년창업 정책의 비현실성 (0)	2017.06.15
옛날과 요즘의 일자리와 사람 정서의 차이 (0)	2017.06.15

Cyberworld

Everything is connected, connection is power.

놀면 안되는 이유?

교양/글쓰기 2017. 6. 30. 18:57

사람은 행복하기 위해 산다. 그런데 그게 전적으로 돈의 가치가 크다.

돈이 있으면 그만큼 내가 하고 싶은 일을 할 수 있고 생계를 위해 일을 하지 않아도 된다. 그래서 젊어서 부를 축적 하라는 말을 듣는다.

놀기 위해선 돈이 필요하다. 돈이 없으면 놀 수 없다. 사람을 만나는 것 자체가 돈이다.

음식을 먹거나 카페를 가서 수다를 떨거나 PC방을 가거나 볼링을 한다던가 전부 다 돈을 써야 한다. 여행 가는데도 돈이 필요하다.

내가 지금 노는 시간에 생산적인 일을 하면 미래에 그나마 더 안락하게 지낼 수 있을 거라는 생각이 든다.

지금은 놀아 봤자 노는 의미도 없다.

알바 같은걸 하지 않는 시간에는 공부하는 것이 맞다.

평소에 거리를 걸으면서 마트에서 장을 보면서 느낀점은 거기서 알바하는 사람들을 보면서 알바를 안하고 쉴때 내가 집에서 놀고 있으면 나중에 또 다시 놀았던 시간으로 인해 내가 가치가 낮은 직종에서 일을 해야 된다라는 생각들을 하게 된다.

난 알바를 다양하게 많이 해봤다. 알바를 하면서 느낀건 정말 돈을 적게주고 대우도 낮고 가치 실현 느낌이 낮다.

공부를 하면 고소득 업종에서 일할 수 있고 공부를 게을리 하면 저소득 업종에서 일하게 된다.

요즘은 미친 듯이 해도 안되는 시점인데 안하면 더더욱 구덩이로 떨어질 거라는 생각마저 든다.

역사를 보면 과거에도 현재에도 미래에도 그러하듯 신분은 사라지지 않는다고 본다. 절대적이다.

귀족이 있었고 하층민이 있었다. 요즘은 그래도 예전에 비하면 나은 편이다. 예전에는 신분 상승조차 할 수 없었다.

지금 시대는 돈이 있으면 무엇이든지 할 수 있다. 그래서 돈의 힘이 굉장히 무섭다.

돈 있는 사람은 아주 행복하게 살 수 있지만 돈 없는 사람은 세상을 살아있는 지옥으로 살게 된다.

사람이란게 어쩔 수 없는 것 같다.

강하고 아름답고 고결하고 지적인 것에 끌린다.

강한 사람에게 끌릴 수도 있고 아름다운 사람에게 끌릴 수도 있고 지적인 사람에게 끌릴 수 있다.

'교양 > 글쓰기' 카테고리의 다른 글

군대 - TV의 무서움 (0)	2017.11.26
나만의 명언집 (0)	2017.06.20
철거 알바 일기 같은 후기 (2)	2017.06.17
청년창업 정책의 비현실성 (0)	2017.06.15
옛날과 요즘의 일자리와 사람 정서의 차이 (0)	2017.06.15

Cyberworld

Everything is connected, connection is power.

나만의 명언집

교양/글쓰기 2017. 6. 20. 15:59

항상 죽을 각오를 하고 있는 사람만이 참으로 자유로운 인간이다. - 디오게네스

괴물과 유령들은 실존한다. 그들은 우리 안에 살아있으며, 때때로 그들은 이긴다. - 스티븐 킹

장사는 돈을 버는 것이 아니라 사람을 버는 것이다. - 임상옥

한 사람의 부자가 있기 위해서는 5백 명의 가난뱅이가 있어야 한다. - 애덤 스미스

인생은 하나의 경험이다. 경험이 많을 수록 더 좋은 사람이 된다. - 랠프 월도 에머슨

용기가 없다면 대중을 위해 글을 쓸 수가 없다. - 하인리히 하이네

명성을 쌓는데는 20년이 걸리지만, 이를 무너트리는데는 채 5분도 걸리지 않는다. - 워런 버핏

내 친구들이여, 세상에 친구란 없다네. - 가브리엘 샤넬

그대들은 나보다 더 좋은 리더를 만날 수 있을지도 모르나, 나보다 그대들을 더 사랑하는 리더는 만날 수 없을 것이다 - 엘리자베스 1세 여왕

힘으로써 이기는 것은 승리의 절반에 지나지 않는다. - 존 밀턴

신께서는 나를 용서하실거야. 그게 그분의 직업이거든. - 하인리히 하이네

뉴스는 만드는것이다. - 테드 터너

자본주의 명언

돈은 최선의 종이요, 최악의 주인이다. - 프랜시스 베이컨

'교양 > 글쓰기' 카테고리의 다른 글

군대 - TV의 무서움 (0)	2017.11.26
놀면 안되는 이유? (0)	2017.06.30
철거 알바 일기 같은 후기 (2)	2017.06.17
청년창업 정책의 비현실성 (0)	2017.06.15
옛날과 요즘의 일자리와 사람 정서의 차이 (0)	2017.06.15

Cyberworld

Everything is connected, connection is power.

철거 알바 일기 같은 후기

교양/글쓰기 2017. 6. 17. 00:04

철거 알바는 좋은 경험이다. 몇번 했었다. 그렇지만 위험하니까 조심해야 한다. 아는 삼촌이 있어서 그분에게 일을 받아서 했다. 또 다른 삼촌과 일을 했는데 어딜 가나 관리자가 문제이지 않을까 싶다.

셋이서 오더를 내린다. 나무들만 추려서 트럭에 실으라는 사람과 포크레인으로 다 담아버려야 하니까 포크레인 안 닿는 곳에 직접 쓸어 내리라고 한다던가 저기 쓰레기들 다 담아서 옴기라던가 물을 뿌리라던가 몇가지의 말을 한번에 다 말한다. 자기 말을 들으라는 사람이 많다.

나름 재밌는 일이 있었다.

그렇게 바락바락 소리를 지르던 관리자 아줌마가 물을 BMW 차에 실수로 뿌렸더니 그 BMW 아저씨가 야이 X발 미X년아 뭐하는거야 라고 했다. 아줌마도 한 성질 하는 분이었는데 바로 꼬랑지를 내렸다.

이와 같이 우리 사회는 갑에게 약하고 을에게 강한 구조를 보인다고 보면 된다.

사회를 넘어 생물들에게 적용되는 일이긴 하다. 그렇지만 인간은 교육받은 존재이고 본능도 거스를 수 있으니 다른 동물들과는 확실히 차별성이 있다.

지금 글을 쓰고 있는데도 눈 앞에 모래가 흩날리는 느낌을 받는다. 마스크를 벗고 있는데도 마스크를 쓴 느낌이 난다. 그래서 얼굴을 톡톡 쳐준다.

다른 알바들에 비해 돈을 많이 받는 이유는 간단하다.

정말 더럽고 정말 위험하고 정말 힘들다. 오래 할만한게 아니다. 몸에 골병난다. 가끔가다 하는건 괜찮아도 할 만한 일은 아니다.

또 그 미니크레인 기사가 있었는데 철거는 위에서부터 부수고 내려와야 하는데 오더가 너무 불분명해서 오후에도 부수는 작업을 했다. 그러다 보니 끝나갈 쯤에 그것들을 떨구느라 기사가 짜증을 냈다.

여기서 느낀점은 관심도다.

철거 잡부로 가서 철, 나무, 돌맹이 등 무거운건 잡부가 나른다. 난간 청소같은 것도 잡부가 한다.

그것말고도 별에별 기술자가 말하는 것들도 도와준다.

분명 잡부가 해야하는 일이 맞다. 기술이 없으니까.

그런데 육체적으로 힘든 잡부와 육체적으로 힘들지는 않는 크레인 기사가 불평을 하는 스케일은 다르다.

잡부는 힘들면 말로 땡깡을 치는 정도고 불평불만하면 그냥 나오지 말라 한다.

반면 크레인 기사는 그 짜증섞인 마음으로 배려심을 조금 버린채 일을 하면 그게 기계에도 그대로 반영이 되어서 바로바로 사람들에게 위협이 된다.

천장에서 큰 돌이 우두두둥 엄청 심하게 쏟아진다거나 무거운 돌 들을 팍팍 치면서 휘나르면 사람들에게 관심을 받게 된다. 저 사람 화났나? 하고. 사람들 웅성웅성 대는게 내게는 색다로웠다.

아 이런게 전달력이 다른건가.. 힘의 차이인가 어그로인가.. 그런 생각이 들었다. 사람은 힘 앞에 굴복하나 ㅋㅋ 이런 생각까지 들었다. 사람이 본능을 거스르려고 해도 그게 힘들기는 하다.

점심 식사 하고 나서 크레인 기사가 난간 철근에 붙어있는 땅을 부수면 그걸 사람이 잡아서 올려야 하는데 그거 위험해서 누가 하겠냐고 말을 했다. 서로 안하려고 한다고 한다 위험해서. 근데 그걸 내가 했다.

어쨋거나 저쨋거나 시키니까 하는거다. 배움에 뜻을 두어야 하는 이유가 여기 있다.

배우지 못하면 할 수 있는 일이 많이 없다. 그래서 정말 더럽고 위험한 일을 하게 된다. 그리고 그런 일은 보수도 적다 우리나라는. 그래서 배움에 뜻을 두고 모든지 배우려는 마음으로 다가가야 한다.

현장은 아무리 크게 해도 얘기가 잘 안들린다. 그러므로 크게 말하고 크게 대답해야 한다. 사람들의 목소리가 일부러 화내는 것처럼 들릴 수도 있으나 일하는 환경이 되게 먼지도 많고 위험하니 오해하지 말아야 한다.

일할 땐 다 당연한 기본이지만.

철거 도중에 어디서 똥 냄새가 난다고 원인을 찾던 도중 배관 보조로 일했던 때에 기억이 떠올랐다. 그 똥 배관이 있었다.

사람 똥이 썩어서 곰팡이가 피고 그대로 굳어버렸다. 배관에. 그게 냄새가 나는 것이다. 물을 만나면서 더 조화롭게.

정말 이 세상엔 하찮은 직업이 없다. 모두가 사회에 필요한 직업이다. 모든 일하는 분들에게 감사하다.

정화조 구멍도 있었는데 트랙이었다. 3개 정도 있던 것 같았는데 거기 빠지면 똥독 올라서 분명 죽는다. 그래서 나무로 잘 막아놓고 사람들에게 알려준다.

흐으으... 이만 자야겠다. 일기 끝!

'교양 > 글쓰기' 카테고리의 다른 글

놀면 안되는 이유? (0)	2017.06.30
나만의 명언집 (0)	2017.06.20
청년창업 정책의 비현실성 (0)	2017.06.15
옛날과 요즘의 일자리와 사람 정서의 차이 (0)	2017.06.15
현실과 동 떨어진 육아예능의 불편함 (0)	2017.05.22

Cyberworld

Everything is connected, connection is power.

'분류 전체보기'에 해당되는 글 86건

CSS - Codecademy

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Ruby - Codecademy

2018, 4, 1 일 ~ 2018, 8, 17 금 (10 hours) : 4개월간

'스스로 코딩 > Codecademy' 카테고리의 다른 글

Python 개념 - Codecademy

2018, 10, 22 일 ~ 2018,3,31 토 끝 (10 hours)

'스스로 코딩 > Codecademy' 카테고리의 다른 글

HTML 태그

Codecademy란?

'스스로 코딩 > Codecademy' 카테고리의 다른 글

알리타 후기(스포 주의)

'교양 > 영화 후기' 카테고리의 다른 글

군대 - TV의 무서움

'교양 > 글쓰기' 카테고리의 다른 글

놀면 안되는 이유?

'교양 > 글쓰기' 카테고리의 다른 글

나만의 명언집

'교양 > 글쓰기' 카테고리의 다른 글

철거 알바 일기 같은 후기

'교양 > 글쓰기' 카테고리의 다른 글

공지사항

카테고리

태그목록

최근에 받은 트랙백

글 보관함

달력

링크

Cyberworld

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바