본문 바로가기

HTML

(7)

접근성 : ARIA-TAB ARIA-TAB 탭은 스타일을 의미하는 것이 아니라 현재 페이지 내용에 색인을 제공하는 구조(tablist, tab, tabpanel)를 의미합니다. role 속성은 값에 따라 적용할 수 있는 HTML 요소가 제한됩니다.role="tabpanel" 속성은 요소에 사용할수 없습니다. 기본 골격 주요 속성 role ="tab" aria-selected : 현재 탭의 선택 여부를 확인합니다. aria-controls : 현재 tab과 연결된 panel의 id값을 적용합니다. tabindex : 활성 포커스 속성입니다. 자세한 내용 role ="tabpanel" tabindex : 활성 포커스 속성입니다. 활성되면 키보드 tab버튼으로 접근 가능합니다. aria-labelledby : 현재 panel과 연결된 ..

JavaScript push를 이용해서 렌더링하기. API 1 API 2 API 3 API 4 특정 API 호출시 API 1 ~ API 4 까지를 반환하고 이값을 ul > li > a 로 렌더링 할려고한다. React를 사용할 수도 있지만 JavaScript만으로 구현을 한다고하면 대부분은 아래와 같은 과정을 지나갑니다. const ul = documnet.createElement('ul'); // API 호출함수 ["API 1", "API 2", "API 3", "API 4"] 반환 const API = getAPI(URL); for(let i =0; i< 4; i++) { const li = document.createElement('li'); const a = document.createElemen('a'); a.href = `#${API[i]}`;..

css 이미지 비율로 유지하기 원본유지 이미지 CSS 작업을 하다보면 원본의 이미지 비율을 그대로해서 높이와 넓이를 설정해야할 때가 있습니다. 그럴때 를 사용하게 된다면 어려움이 발생합니다. % 나 vw속성을 이용해서 설정합니다. 이때 height대신 padding을 사용하여 높이를 설정할 수 있습니다. 단위 % padding-top = n % 비율 a:b 유지 => (b/a)*100 % ex ) 16:9 비율 적용 => (9/16) * 100 =56.25% .child { background: url('http://url) no-repeat top center; background-size: cover; padding-top: 56.25%; // 16:9 비율 => (9/16)*100=56.25 } 원본유지 .image { min-..

HTML , CSS 깔끔하게 작업하기(Tip) UI/UX 작업을 하다보면 혼자하면 상관없지만 다른 사람과 공동으로 작업할 경우..시멘틱한 태그를 사용하지 못하고 깔끔한 코드를 만들 수가 없습니다. 내가 자주 실수하고 대충 했던 작업들에 대해서 피드백을 만들려고 합니다.아래 내용은 주관적인 저의 Tip입니다 (멘토 분들에게 피드백 받은 내용을 토대로 구성하였습니다.) 1. 태그 선택자는 위험하다.다음과 처럼 태그 선택자를 사용해서 속성을 주는것은 매우 위험한 일입니다. class 선택자를 이용해서 작업을 해주세요p , h1, mark{ color : red; } 2. body안에 바로 h1태그를 사용해서 작업을 해도 좋지만 태그를 이용해서 한번 감싸주면 스타일을 적용할 때 좋습니다. 3. 작업을 하다보면 태그안에 태그를 사용하는데 꼭 이 태그를 사용하..

시멘틱 마크업 간단한 정리 예제 콘텐츠 모델 HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다. Content Models 의 7분류 Metadata Content (style, title, script) Flow Content (a, address, sub, table) Sectioning Content (article, aside, nav, section) Heading Content (h1, h2 ,h3 ...) Pharsing Content (텍스트 또는 문단 내부 레벨로 ..

반응형 웹사이트 구현 (flex) 깃 주소 github.com/Hongjeongmin/workspace/blob/master/Css/documnet/basic.md Hongjeongmin/workspace Contribute to Hongjeongmin/workspace development by creating an account on GitHub. github.com

티스토리 구글 에드센스 등록 지인의 부탁으로 구글 에드센스등록하는 방법을 도와주게 되었는데 이게 하다보니 처음하는 사람들은 많이 헤맬 것 같더라고요. 그래서 오늘은 티스토리에서 구글 에드센스를 등록하는 방법을 알아보겠습니다. 먼저 티스토리에서 애드센스를 등록하고 싶은 블로그의 관리페이지를 들어가신 다음 수익 태그를 눌러주세요 그럼 위와 같은 화면을 보시게 될텐데 연동하기를 눌러주시고 절차를 시행합니다. 절차를 시행하다보면 웹 사이트 URL 정보를 기입해라는 표시가 나옵니다. URL 이란? 광고를 하고싶은 블로그를 접속하셔서 상단에 보시면 다음과 같은 주소가 있습니다. 저부분을 URL이라고 합니다. 실제 에드센스에 등록할 URL은 전체가아닌 .com 으로 끝나는 곳 까지입니다. https://www.redbinalgorithm.tis..

이전 1 다음

티스토리툴바