whatisthis?

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

https://mywebproject.tistory.com/82 @import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap"); * { margin: 0; box-sizing: border-box; } html { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; line-height: 1.5; color: #1f2d3d; } ..

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

https://mywebproject.tistory.com/81 HTML 훈련 - (3) Feature Box 태그를 잘 사용하는 법. Feature Box 란 무엇인지? -제품의 특징 등을 이미지로 나타낸 것. step1. 크게 블록단위로 나눠서 마크업 과 부분, 그리고 상단에 부분으로 나뉜다. Free unlimited private repositorie. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } 선택자 * 는 html 문서 내 모든 요소를 나타내는 CSS level 1의 선택자이다. >> 선택자에 대한 내용은 추후 포스팅에서 다루도록 하겠다. (REF: https://www.nextree.co.kr/p8468/) ___ b..

태그를 잘 사용하는 법. Feature Box 란 무엇인지? -제품의 특징 등을 이미지로 나타낸 것. step1. 크게 블록단위로 나눠서 마크업 과 부분, 그리고 상단에 부분으로 나뉜다. Free unlimited private repositories Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. ** 주의 ** - img 태그의 필수 속성은 src와 alt 두가지이다. - 이 예제같은 경우 이미지가 '정보'를 포함하지는 않으므로 alt에 대체텍스트를 작성하기 애매함. -> 이럴때는 alt="" 와 같이 빈칸으로 남겨두자. (아예 alt 속성을 지워버리는것은 X..

위와 같은 구글 검색 결과창을 마크업해보자. 우선, 마크업의 기본은 파트를 크게 나눠보는 것이다! 위 예제같은 경우에는 크게 세가지 파트로 나눌 수 있겠다. 1. 맨 윗줄 - 태그 2. 초록색 글자 부분 - 태그 3. 나머지 부분 - 태그. 이때, h1태그를 클릭해도 링크로 이동하므로 h1태그에 a태그도 감싸줘야한다. HTML5 Semantic Elements - W3Schools https://www.w3schools.com › html › html5_semantic_elements Oct 27, 2019 - Examples of non-semantic elements: and - Tells nothing about its content. ... HTML5 semantic elements are sup..

* { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; letter-spacing: -0.03em; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto..

가상 요소(Pseudo-Element) 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함. ::first-line 요소의 텍스트 중 첫 줄 ::first-letter 요소의 첫번째 글자 ::before 요소의 컨텐츠 시작부분 ::after 요소의 컨텐츠 끝부분 ::selection 요소의 텍스트 중 선택된 영역(drag) ::placeholder input 필드 힌트 텍스트인 placeholder cf> 가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다. selector::pseudo-element { property: value; } -> 단일 콜론(:..

https://mywebproject.tistory.com/79 HTML 훈련 - (1) Ad Banner 위와 같은 광고 배너를 만들어보자. 우선 예제 이미지를 보고 각 파트로 나눠보면 총 3개의 파트로 나눌 수 있다. - button을 누르면 URL로 이동하도록 하면 될 것 같다. __ 코드 작성 __ Unlimited download mywebproject.tistory.com 위 예제에서 사용한 style.css의 코드를 분석해보자. * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open ..

* { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto; background-color: #1f2d..