![]()
Codecademy front-end engineer course DAY14 Learn CSS: Learn Color for UI - Contrast Constraints [대비를 적절히 사용하자.] : Contrast is a great way to differentiate elements on a page. However, When thinking about and applying contrast to a page through the use of color, it’s important to limit the overall amount of contrast. -Brand Color [브랜드 컬러를 참조하자.] : This brand color will account for roughly 60% of ..
![]()
Codecademy front-end engineer course DAY13 Learn CSS: Documentation&Debugging Learn CSS: Color Theory Documentation is an essential tool to learn about properties. 1. MDN the source of documentation for HTML, CSS, and JavaScript. https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자..
![]()
Codecademy front-end engineer course DAY12 Learn CSS: Display & Positioning -Position : consistently appear on the left side of the browser. This is the default position for block-level elements. *The default position of an element can be changed by setting its position property static the default value (it does not need to be specified) 1) relative to position an element relative to its default..
![]()
- 단축키 U를 통해서 기준선 만들기. - 윈도우 -> 모양 -> [fx]에서 텍스처 ->그래인 효과 - 효과 -> 흐림효과 -> 가우시안 흐림 효과 아래는 내가 참고한 동영상. https://www.youtube.com/watch?v=XkSia-6ofss&list=PLmXXLpbljNb_9_VIzUmqr4Hj4AfLPeLTn&index=24
![]()
Codecademy front-end engineer course DAY11 Learn CSS: The Box model [Lesson2) Changing The box model] ** h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } -padding의 영향으로 높이는 220px, 너비는 320px이 된다. 또한 border의 영향으로는 최종적으로 212px x 312px이 된다. -> the border thickness and padding are added to the overall dimensions of the box. 그렇게 되면 정확한 박스 사이즈를 예측하기 어려워짐. [해결법] The box-sizing..
![]()
-색감 있는 원본 사진을 왜곡을 이용해 물감처럼 표현. -필터 -> 왜곡 -> 돌리기 이용 -색도/채도 조정을 이용해 색감 원하는 것으로 변형. 아래는 내가 참고한 유튜브 영상. https://www.youtube.com/watch?v=KTOorJeafJk
![]()
Codecademy front-end engineer course DAY10 Learn CSS: The Box model [Lesson1) The box model] - The Box Model [박스 모델] Width and height specifies the width and height of the content area. Padding specifies the amount of space between the content area and the border. Border specifies the thickness and style of the border surrounding the content area and padding. Margin specifies the amount of space..
![]()
Codecademy front-end engineer course DAY8 Build own your cheat sheet 예제를 보고 나는 HTML의 태그 종류에 대해서 cheat sheet page를 만들어보았다. -HTML- HTML tags HTML elements -CSS- h1,h2{ text-align: center; } table,td{ border: 1px solid cadetblue; } table{ margin-left: auto; margin-right: auto; } h2{ color: cornflowerblue; } th{ background-color: darkcyan; color: white; } .code{ background-color:wheat; } .sansserif ..
