목록Frontend/HTML, CSS (10)

다다의 개발일지 6v6

[CSS] Learn Accessibility by Building a Quiz - 접근성을 고려한 홈페이지 만들기

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-1 www.freecodecamp.org 먼저 결과물  접근성(accessibility)은 모든 사람, 심지어 장애가 있는 사람들도 웹페이지를 쉽게 사용할 수 있도록 만드는 것입니다.이 과정에서는 퀴즈 웹페이지를 구축합니다. 키보드 단축키, ARIA 속성, 디자인 모범 사례와 같은 접근성 도구를 배웁니다.  접근성과 시맨틱 HT..
Frontend/HTML, CSS 2025. 2. 19. 15:45
[CSS] Learn Typography by Building a Nutrition Label - text 스타일 연습

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-1 www.freecodecamp.org  Remember that fonts with spaces in the name must be wrapped in quotes for CSS.-> 폰트 이름에 공백이 있는 경우는 꼭 CSS용 따옴표로 감싸야 한다.!!font-family: "Open Sans"..
Frontend/HTML, CSS 2025. 2. 17. 02:10
[CSS] Learn CSS Flexbox by Building a Photo Gallery - flexbox 뽀시기

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-flexbox-by-building-a-photo-gallery/step-1 www.freecodecamp.org 이번 과정은 귀여운 고양이 사진 9장으로 된 갤러리 만들기 box-sizing 속성 정리기본적으로 CSS 박스 모델에서는 요소의 크기를 결정할 때 content-box 모델이 사용된다. (기본값) content-box 모델의 특징width 값은 오직 콘텐츠의 너비..
Frontend/HTML, CSS 2025. 2. 16. 21:12
[CSS] Learn the CSS Box Model by Building a Rothko Painting - 박스 모델 정리!

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-the-css-box-model-by-building-a-rothko-painting/step-1 www.freecodecamp.org 이제 html 첫 틀은 손에서 바로바로 나온다! ㅎㅂㅎ앞에서 css 계속 다뤘어서 이번 과정에서는 썼던 걸 좀 더 꼼꼼하게 정리하고 가는 느낌이다. 좋다ㅏ 택배 상자를 예로 들면border (상자)로 감싸져있는 content (상품, ..
Frontend/HTML, CSS 2025. 2. 15. 17:45
[HTML & CSS] Build a Survey Form - 이제 실습이다! 직접 구현해보기

https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form www.freecodecamp.orgObjective: Build an app that is functionally similar to https://survey-form.freecodecamp.rocks. Do not copy this demo project. -> 참고만 하고 그대로 따라하지 말라고 한다ㅏㅏ 오케~..
Frontend/HTML, CSS 2025. 2. 13. 20:30
[HTML & CSS] Learn HTML Forms by Building a Registration Form

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-1 https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-1 www.freecodecamp.org결과물vh unit stands for viewport height, 단위 vh -> viewport height , 화면의 100%가 100vh임   input type이 password일 때 minlength="8" 이렇게 설정할 수 있음.-> pat..
Frontend/HTML, CSS 2025. 2. 12. 23:58
이전 Prev 1 2 Next 다음