Astercle

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는..

https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper 멋진 편지지 양식 만들기 - Web 개발 학습하기 | MDN좋은 인상을 남기고 싶다면, 멋진 편지지 양식에 편지를 쓰는 것이 좋은 시작이 될 수 있습니다. 이번 평가에서는 좋은 느낌을 줄 수 있는 온라인 템플릿을 만들어 보도록 하겠습니다.developer.mozilla.org 폴더 구조  이 사이트의 첫번째 과제는 배경 이미지 상단, 하단에 이미지를 넣고 그 위에 그라데이션도 함께 올리라는 과제였다. 이를 풀기 위해서 직접 그려서 풀어 보았다.먼저 첫 방법은 blend-mode를 활용하는 방법이다. 최신 브라우저에만 나와있기에 차선..

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks Test your skills: Values and units - Learn web development | MDNThe aim of this skill test is to assess whether you understand different types of values and units used in CSS properties.developer.mozilla.org     Task 1color-download.html hex color RGB color HSL color Alpha value 0.6  ..

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks Test your skills: The Cascade - Learn web development | MDNThe aim of this skill test is to assess whether you understand universal property values for controlling inheritance in CSS.developer.mozilla.org Task 1CSS의 우선 순위 문제이다. mozilia에서는 우선순위를 점수를 매겨서 사용한다. 점수가 높으면 높을수록 상속의 우선순위가 높아지고 (그러니까 점수가 높은 애가 채택된다는 의미이다.) 스..

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks Test your skills: Selectors - Learn web development | MDNThe aim of this skill test is to assess whether you understand CSS selectors.developer.mozilla.org Task 1type-download.html This is a heading Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh on..

https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/Styling_a_biography_page 새로운 지식을 사용하기 - Web 개발 학습하기 | MDN지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.developer.mozilla.org biog-download.html Jane Doe Web Developer Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,..