본문 바로가기

HTML

(19)
11. Feed 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 1. '10 Likes, 0 Comments' 같은 경우는 사용자가 눌렀을 때, 변화가 일어난다. 그냥 단순한 텍스트가 아니라 사용자와 상호작용을 한다. -> dl,dt,dd가 아니라 button 태그..
10. Input Group (feat. form, input, button) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 크게 어렵지 않은 예제였다. 다 다만, form의 속성 중 하나인 method에 GET을 쓴 이유는 보안상에 크게 신경 쓸 정보가 아니기 때문이라고 하셨당. 아직 GET과 POST의 차이를 정확히 모르..
9. Github Dropdown Menu (feat. 버튼이 이미지. 이미지가 버튼) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 이미지로 버튼 버튼으로 이미지 근데 스크린 리더 사용하시는 분들 입장에서는 갑자기 이미지가 뜬금없이 나오면 "이게 모지?" 할 수 있기 때문에 aria-label 속성에 간단한 text를 넣어주는 센스.
8. Receipt 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처: edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 0. Bill sharing request from kimbug 모두 이 전체 영수증의 heading에 해당하니까 태그에 넣어준다. 다만, from kimbug 부분의 스타일이 약간 다르기 때문에 스..
7. Instagram User Profile (feat. dl의 자식 dt와 dd. 그걸 묶는 div) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처: edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 1. 머릿속에 계속 떠다니는 생각: '의미 덩어리로 어떻게 그룹핑할 것인가..............' 2. 정보가 A는 a고, B는 b고, C는 c다. 라는 식으로 key-value 형태. => dl..
6. Product Card (feat. strong, aria-label, aria-hidden) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 1. '이병률'이라는 작가 이름보다 '혼자가 혼자에게'라는 제목이 중요하기 때문에 책 제목을 먼저 마크업하고 그 다음에 작가 이름을 적었다. (CSS로 수정) 2. '오늘의 책'으로 선정됐다는 건 중요..
5. Breadcrumb & Pagination (feat. anchor의 끝판왕) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 1. breadcrumb에서 책 모양 아이콘과 중간 슬래쉬는 의미적으로는 크게 중요하지 않고 꾸며주는 요소들 => 마크업하지 않고 CSS로 처리한다. 2. pagination에서 - Previous와 ..
4. Logo in Header 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처:edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 좀 놀란 건 나는 보통 로고