Computer 썸네일형 리스트형 [CSS] 과제: 미디어 쿼리 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.. 더보기 [CSS] 과제: 그리드 레이아웃 목차 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 .. 더보기 [CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃 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차근차근 따라오시면 금방하실 수 있을 거 같아요. 다만 레이아웃이 없다가 이제.. 더보기 [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는.. 더보기 [CSS] 과제: 멋진 편지지 양식 만들기 https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper 멋진 편지지 양식 만들기 - Web 개발 학습하기 | MDN좋은 인상을 남기고 싶다면, 멋진 편지지 양식에 편지를 쓰는 것이 좋은 시작이 될 수 있습니다. 이번 평가에서는 좋은 느낌을 줄 수 있는 온라인 템플릿을 만들어 보도록 하겠습니다.developer.mozilla.org 폴더 구조 이 사이트의 첫번째 과제는 배경 이미지 상단, 하단에 이미지를 넣고 그 위에 그라데이션도 함께 올리라는 과제였다. 이를 풀기 위해서 직접 그려서 풀어 보았다.먼저 첫 방법은 blend-mode를 활용하는 방법이다. 최신 브라우저에만 나와있기에 차선.. 더보기 [CSS] 과제: 기초적인 CSS 이해 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension Fundamental CSS comprehension - Learn web development | MDNYou've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to .. 더보기 [CSS] 과제: 값과 단위 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 .. 더보기 [CSS]과제: 계단식 상속 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에서는 우선순위를 점수를 매겨서 사용한다. 점수가 높으면 높을수록 상속의 우선순위가 높아지고 (그러니까 점수가 높은 애가 채택된다는 의미이다.) 스.. 더보기 이전 1 2 3 4 5 6 다음
