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