whatisthis?

1. 여러 요소를 동시에 선택 .class1, .class2, .class3 각 선택자마다 쉼표(,)로 구분할 경우 각각의 항목을 OR로 적용함. 즉, class1, class2, class3 모두에 스타일이 적용됨. .class1 .class2 .class3 쉼표 없이 공백으로 구분하여 사용시 뒤에 나온 선택자가 하위 개체로 지정됨. 즉, class1 ㄴ class 2 ㄴ class 3 으로 지정되고, class1 요소 내부의 class2 요소 내부의 class3 요소에만 스타일이 적용됨. .class1.class2.class3 공백 없이 연결해서 지정시 class="class1 class2 class3"에 해당하는 요소에만 스타일이 적용됨. 즉, AND 처리 되는 것. (class1이면서 class2..

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는 위에서 ..

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) 이 존재하는 가..

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

BreadCrumb & Pagination breadcrumbs란? 브레드크럼(빵부스러기로 표시한 길)이란 핸젤과 그레텔에서 따온 용어로, 사이트나 웹 앱에서 유저의 위치를 보여주는 부차적인 내비게이션 시스템을 뜻한다. 페이지네이션(pagination)이란? Pagination(Paging)기능. 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. (일정 길이로 끊어서 전달한다.) 블록단위로 나눠서 마크업해주자. rohjs bugless-101 html로 마크업할 부분은 a태그 말고는 없으므로 위 코드를 div로 감싸주자. +) 이미지(왼쪽 로고)는 정보,즉 의미가 없으므로 img태그가 아니라 css로 넣어주자. 이로써 breadcrumb 부분은 완성되었다...

header에 로고를 만들고, 클릭시 url로 이동하도록 해주는 예제를 만들어보자. (goormedu의 nav 바 - navigation) 우선, 가장 먼저 해당 예제를 블록단위로 나눠서 마크업해보자. 위에서 goormedu라는 것은 '텍스트'가 아니라 로고이므로 img태그를 이용하는것이 바람직하다. 대신, 검색엔진을 통해 검색할 수 있도록 해주려면 h1태그로 goormedu라고 작성해주는게 좋을듯. -> ,즉 헤더태그 안에는 다른 요소가 들어가도 된다. h1태그 안에 img태그를 이용해서 로고를 나타내자. 또한, 우측에 Q&A라는 것을 클릭하면 해당 URL로 이동할 수 있도록 anchor 태그를 사용해주는게 좋을 것 같다. Goorm Edu 위와 같이 h1태그와 img태그를 같이 써주면, 문제가 발생하..