whatisthis?

Receipt 우선, 마크업을 하기 위해서 블록으로 크게 나눠보자. 우선, 제목에 해당하는 부분을 전부 h1태그로 입력하고, 아래 'from kimbug'같은 경우에는 다르게 되어있으므로 디자인 처리를 하기 위해서 으로 해준다. -> span은 div와 같이 디자인을 위한 요소이고, 아무런 의미도 기능도 없다. span은 인라인(글자) 단위이고, div는 블록단위라는 차이가 있다. Bill sharing request from Kimbug 그리고, 디자인적인 요소를 전체적으로 주기 위한 'receipt' 클래스를 미리 부여한다. ** TIP ** emmet 기능을 이용해서 .class명만 입력하면 div를 생성할 수 있다! McDonald's 24.06.20xx 가장 먼저, McDonald's는 위에서 ..

https://mywebproject.tistory.com/102 HTML 훈련 - (7) Instagram User profile Instagram User profile 마크업을 위해서 img 태그 / 내용 부분을 나눠서 어떤 태그로 나타낼지 구상해보자. 태그에 대한 내용을 다시한번 복습해보려면? 정의 리스트 Description List (dl) 은 중요하지 않 mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica..

Instagram User profile 마크업을 위해서 img 태그 / 내용 부분을 나눠서 어떤 태그로 나타낼지 구상해보자. 태그에 대한 내용을 다시한번 복습해보려면? 정의 리스트 Description List (dl) 은 중요하지 않게 생각할 수 있는데, 굉장히 유용한 리스트임. 1. 용어를 정의할 때 Syntax 학습(學習) 1. 배워서 익힘. 2. 험의 결과로 나타나는, 비교적 지속적인 행동의 변화나 그 잠재력의 변화. 또는 지식을 습득하는 과정. ● dt = discription Term ● dd = discription Data ** dt 대신 dfn(definition)을 사용하기도 함. - [정의]를 할거라는 늬앙스의 의미임. - 하나의 term에 여러개의 data 가능. - 여러개의 te..

REF: https://www.nextree.co.kr/p8468/ CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr 1. 선택자 (Selector) - 선택을 해주는 요소. 이를 통해 특정 요소들을 선택하여 스타일 적용 가능. 수정중 수정중 수정중 수정중 수정중

display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다. .container { display: inline-flex; } 즉, 일반 flex는 flexbox끼리 위아래로(상하)로 쌓이지만, inline-flex는 좌우로 쌓인다. 여기서 '쌓인다'는건 flex box ,즉 겉부분인 container를 의미함. flex box 안에 item을 쌓는건 flex-direction속성임. 두 값의 차이는 내부에 Items에는 영향을 주지 않음. REFERENCE https://developer.mozilla.org/ko/docs/Web/CSS/display display - CSS: Cascading Style Sh..

ARIA (Accessible Rich Internet Applications) = 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우) 에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공. ** role(역할): 특정 요소에 역할정의, 사용자에게 정보제공, 부여한 역할 동적변경 불가 ** WAI-ARIA ======================= WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고..

CSS position attribute = 문서 상에 요소를 배치하는 방법을 지정. static 요소를 일반적인 문서 흐름에 따라 배치 relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. absolute 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운(위치) 부모요소에 대해 상대적으로 배치 fixed 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치 sticky 스크롤 동작(overflow가 hidden, scroll, auto 혹은 overlay) 이 존재하는 가..

https://mywebproject.tistory.com/93 HTML 훈련 - (6) Product Card Product card REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/06-product-card/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%.. mywebproject.tistory.com @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); * { margin: 0; box-sizing: border..

Product card 혼자가 혼자에게 오늘의 책 우선 img태그를 이용하여 이미지를 불러오고, alt 대신 h1태그로 제목격인 책이름을 작성한다. 또한, 오늘의 책 < 은 strong으로 의미를 강조해준다. +) 지난 예제에서 사용했던 aria-label을 이용해서 정확한 의미전달을 해준다. ** WAI-ARIA ======================= WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)는 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양임. aria-la..

https://mywebproject.tistory.com/91 HTML 훈련 - (5) BreadCrumb & Pagination BreadCrumb & Pagination REFERENCE (style.css) https://github.com/rohjs/bugless-101/blob/master/html-practice/05-breadcrumb-and-pagination/styles.css https://edu.goorm.io/learn/lecture/20583/%EA%B.. mywebproject.tistory.com Analysis * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFo..