Astercle

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals 실력을 평가해 보세요: 조건문 - Web 개발 학습하기 | MDN이 실력 평가의 목적은 여러분이 판단을 만드세요 — 조건문 문서를 잘 이해했는지 평가하기 위함입니다.developer.mozilla.org(사이트에 한국어로 설명이 나와 있습니다.) 목차조건문 1조건문 2조건문 3조건문 4조건문 1문제 및 풀이 간략하게 설명하면 변수 season에 'summer'가 포함되어 있는 경우 변수 response에 summer라는 설명을, 'winter'가 포함되어 있는 경우라면 winter season이라는 설명을 마지막으로 둘 다 ..

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays Test your skills: Arrays - Learn web development | MDNThe aim of this skill test is to assess whether you've understood our Arrays article.developer.mozilla.org  배열 정리배열은 리스트와 거의 같다고 생각하시면 돼요.배열을 활용하는 경우 많은 함수(메서드)를 사용할 수 있는데 그중에서도 중요한 함수 네 가지 정리하려고 합니다.기본적인 배열이 있는 경우 위의 그림처럼 네 가지의 함수를 통해서 배열 안의 원소를 넣을..

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Silly_story_generator Silly story generator - Web 개발 학습하기 | MDN이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼거에요. 즐겨봅시다!developer.mozilla.org 목차문제 및 풀이코드결과문제 및 풀이사이트 문제가 다 한국어로 되어 있어서 읽는 데에 크게 불편함은 없을 거 같아요. 그래도 간략하게 설명할게요.이 문제는 input에 이름을 입력하면 그 이름을 입력받아 무작위 이야기를 만들어 내도록 구현해야 합니다.index.html, raw-text.txt, m..

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Math Test your skills: Math - Learn web development | MDNThe aim of the tests on this page is to assess whether you've understood the Basic math in JavaScript — numbers and operators article.developer.mozilla.org 목차Math 1Math 2Math 3Math 1산술 연산자를 쓸 수 있는지 알기 위해 나온 문제입니다.Number를 담고 있는 네 개의 변수를 생성합니다. 변수 이름을 잘 짓..

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Test_your_skills:_variables 당신의 기량을 시험해 보세요: 변수(variables) - Web 개발 학습하기 | MDN이 기량 테스트의 목적은 당신이 우리의 필요한 정보를 저장하기 — 변수 문서를 이해했는지를 평가하기 위함입니다.developer.mozilla.org 목차변수1변수2변수3변수1오류를 없애는 문제였다. 변수에 이름, 나이를 넣으면 끝이다.// Add your code herelet myName;myName = "Astercle";let myAge = "21";// Don't edit the code below here!section.innerHTML ..

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension 레이아웃 이해의 핵심 사항 - Web 개발 학습하기 | MDN이 과정을 학습했다면 현재 CSS 레이아웃을 만들고 이전 CSS로 작업하기 위해 알아야 할 기본 사항을 이미 다루었을 것입니다. 이 과제는 다양한 기법을 사용하여 간단한 웹 페이지 레이아웃을 개developer.mozilla.org 목차문제 및 풀이코드결과문제 및 풀이위에서 볼 수 있듯이 처음 두 이미지를 나타내는 코드를 주고 마지막 이미지와 같이 구현하는 것이다. 이때 해야할 일들을 풀어 내면 다음과 같다.nav 일정한 간격으로 정렬nav 스크롤 시 상단에 고정왼쪽 상단에 있는 풍..

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills Test your skills: Responsive web design and media queries - Learn web development | MDNThe aim of this skill test is to assess whether you understand how to use media queries and get you working with responsive web design with a practical task. Everything you need to know to complete this task is covered in the layout lesso..

목차 Task 1Task 2Task 3Task 4 Task 1첫 문제는 간단한 그리드 모양 만드는 문제였다. grid1-download.html One Two Three Four Five Six Seven 결과    Task 2그리드 격자 문제였다. row와 column만 잘알아도 해결할 수 있는 문제였다. 아래의 그림에서 볼 수 있듯이 이번 문제 불때는 약어를 사용해서 풀었다. grid-row-start, grid-row-end, grid-column-start, grid-column-end가 아닌 grid-area 요소를 활용하면서 한 줄에 넣었다.  grid2-download.html ..

https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Typesetting_a_homepage 커뮤니티 대학 홈페이지 레이아웃 구성하기 - Web 개발 학습하기 | MDN이 평가에서는 커뮤니티 대학 홈페이지의 텍스트 스타일을 지정하도록 하여 이 모듈에서 다룬 모든 텍스트 스타일링 기법에 대한 이해도를 테스트합니다. 여러분은 그 과정에서 재미를 느낄 수developer.mozilla.org  폴더 구조폰트는 https://www.fontsquirrel.com/여기서 임의로 두개 다운 받아서 사용했습니다!  index.html수정 하나도 안했어요! 넘어갈게요! style.css차근차근 따라오시면 금방하실 수 있을 거 같아요. 다만 레이아웃이 없다가 이제..

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/A_cool_looking_box 멋지게 보이는 박스 - Web 개발 학습하기 | MDN이 평가에서는, 눈길을 사로잡는 박스를 만들어보면서 멋지게 보이는 박스를 만드는 것을 더 많이 연습하게 될 것입니다.developer.mozilla.org  폴더 구조  index.html 태그로 style.css 파일을 연결했고 div에 text라는 클래스를 추가하였다. This is a cool box   style.cssdiv와 text를 나누어서 꾸며주었다. 보기에도 편하고 그리고 text 클래스로 따로 요소를 입력해 주니 text 가운데 정렬하기에도 편했다.width와 height는..