닌니디자인의 포스팅을 검색 해주세요.

Ninny Design Skill/HTML

Skill/HTML
HTML - 웹 접근성을 고려하여 table 제대로 사용하기

table데이터를 행(row)과 열(column)로 정리하여 표 형식으로 나타낼때 사용된다. 구조화된 데이터를 시각적으로 전달할 때 유용하다. 웹 접근성을 고려하여 작성해야 스크린 리더가 데이터를 분석하여 사용자에게 전달할 수 있고 SEO에도 유리하다. html table 태그제목설명필수여부caption테이블의 목적이나 요약Ocolgroup테이블의 열 그룹 정의Xthead테이블 열(column)의 머리글이나 제목Otbody주요 데이터Otr테이블의 행(row)Oth테이블 행의 헤더Oscopeth가 어떤 데이터셀과 연관되어 있는지 지정 (가로 or 세로)O caption웹접근성을 위해 필수로 작성해야 하지만 필요없는 디자인이라면 display:none; 으로 숨기지 않고 overflow:hidden; 등..

reviews calendar_month 2024.08.17
Skill/HTML
HTML - 폼 태그 label, fieldset, legend

label 태그폼 요소 , , 등에 대한 설명이나 이름을 제공하기도 하고 해당 요소를 클릭 할 수 있도록 한다. for 속성을 사용하여 연결된 요소의 id를 지정하면 스크린 리더 사용자나 키보드 사용자에게 요소와의 관계를 명확히 전달할 수 있다. 태그 내부에 폼 요소를 포함시켜 사용 할 수도 있다. 버튼이나 버튼을 사용할 때 단순히 버튼 영역에서만 작동 되는것이 아니라 태그에 포함된 영역에서 함께 작동된다. 태그는 폼 요소의 목적을 보다 명확하게 이해할 수 있도록 도와주기 때문에 접근성 향상에 도움이 된다. 예시태그 내부에 폼 요소 포함 이름: 태그에 for 속성 사용이름: fieldset 태그 + legend 태그폼에서 입력 요소들을 그룹으로 묶을때 사용되는 태그이다. 여러 입력..

reviews 2 calendar_month 2024.07.31
Skill/HTML
HTML - 유튜브 iframe 연속재생, 자동재생, 컨트롤러, 아이폰 전체화면

유튜브 iframe웹사이트에 YouTube 동영상 플레이어를 퍼가고 JavaScript를 사용하여 플레이어를 제어할 수 있다. 동영상을 재생, 일시중지 또는 중지하거나, 플레이어 볼륨을 조정하거나, 재생 중인 동영상에 대한 정보를 가져올 수 있다. 또한 플레이어 상태 변경 또는 동영상 재생 품질 변경과 같은 특정 플레이어 이벤트에 대한 응답으로 실행되는 이벤트 리스너를 추가할 수 있다. 예시 자동재생src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&autoplay=1&mute=1" 반복재생src="https://www.youtube.com/embed/2BCpS4T9KFI?si=YgrdJ1RGk6kh-BFV&loop=1" 자동재생..

reviews calendar_month 2024.07.24
Skill/HTML
HTML - 텍스트 태그 <b>, <strong>, <i>, <em> 차이

, 텍스트를 굵게 표현하기 위한 용도로 사용되는 태그들로 이 두 태그는 비슷한 기능을 하지만 약간 다르다. 태그는 텍스트를 굵게 표시하는 것 뿐만 아니라 그 텍스트가 중요하거나 강조되어야 할때 사용한다. 반면에 태그는 텍스트를 단순히 굵게 표시하는 것에 중점을 둔다. 시각적 효과를 주는 용도로는 둘 다 사용할 수 있지만, 의미가 있거나 강조하고자 하는 경우에는 태그를 사용하는 것이 스크린리더기를 사용하는 사용자들에게 문법적으로 강조를 해주기 때문에 웹접근성에 유리하다.굵은 글씨 표현굵은 글씨 표현 태그굵은 글씨 표현 태그굵은 글씨 표현 ※ 위에 보이는 예시와 같이 태그와 태그를 사용했을때 시각적으로는 전혀 차이점이 없다. , 텍스트를 기울이게 표현하는 용도로 사용하는 태그들이다. 태그는 텍스..

reviews calendar_month 2024.04.25
Skill/HTML
HTML - 드래그 방지, 마우스 오른쪽 클릭 방지, 블록 선택 방지

드래그방지 body 태그에 인라인으로 ondragstart 코드를 입력해서 간단하고 직접적으로 웹페이지 전체에 드래그를 방지할 수 있다. 사용자가 드래그를 시작할때 return false를 반환하여 기본 동작을 막는다. ondragstart 사용자가 요소나 텍스트 선택을 드래그하기 시작할 때 실행된다. 마우스 오른쪽 클릭방지 주로 보안 목적이나 웹 페이지의 콘텐츠를 보호하기 위해 사용된다. 하지만 주의할 점은 이 방법이 모든 사용자의 작업 흐름을 방해할 수 있으며, 웹 페이지에 필요한 기능이 막힐 수 있다. 사용자 경험을 고려하여 적절히 적용해야 한다. oncontextmenu 사용자가 요소를 마우스 오른쪽 버튼으로 클릭하여 상황에 맞는 메뉴를 열 때 속성이 실행된다. 블록 선택 방지 텍스트를 선택하고 ..

reviews calendar_month 2023.12.01
Skill/HTML
HTML - alt와 title 속성의 뜻과 사용법(웹표준/SEO)

alt 속성 & title 속성 alt와 title 속성은 모두 웹 접근성과 검색 엔진 최적화(SEO)에 중요한 역할을 한다. 그러나 두 속성은 SEO에 서로 다른 영향을 미친다. 이미지를 올바르게 설명하는 적절한 alt 텍스트를 제공하고, 필요한 경우 title 속성을 사용하여 추가 정보를 제공함으로써, 검색 엔진에게 콘텐츠를 이해하고 색인화하는 데 도움이 되는 방향으로 웹 페이지를 최적화하는 것이 중요하다. alt 속성 이미지가 표시되지 않을 때 대체 텍스트를 제공한다. 이는 검색 엔진이 이미지를 색인화할 때 중요한 역할을 한다. 검색 엔진은 이미지의 콘텐츠를 이해하지 못하지만 alt 텍스트를 사용하여 이미지를 색인화합니다. 이에 따라 이미지의 alt 텍스트는 검색 엔진에게 이미지의 내용을 설명하는 ..

reviews 54 calendar_month 2023.12.01
Skill/HTML
HTML - input 태그 비활성화 readonly, disabled

input 태그 비활성화 input 태그는 사용자로부터 정보를 입력 받는 데 사용된다. 이 태그를 비활성화하면 사용자가 해당 입력 필드를 편집할 수 없다. 일반적으로 이 기능은 사용자가 입력을 할 필요가 없거나, 입력 필드의 사용을 제한해야 할 때 유용하다. readonly input 태그에 readonly 속성이 존재하는 경우 입력필드가 읽기 전용임을 지정한다. 읽기 전용 입력 필드는 수정할 수 없다. 그러나 입력되어 있는 값은 form으로 전송 가능하다. 즉, 입력 및 수정은 금지되지만 필드에 이미 입력되었거나 자동으로 입력되는 값은 DB로 전달된다. disabled input 태그에 disabled 속성이 존재하는 경우 입력필드를 비활성화한다. 비활성화 된 요소는 사용할 수 없으며, 클릭할 수 없다..

reviews calendar_month 2023.10.05
Skill/HTML
HTML - inline 태그와 block 태그의 차이점과 사용법

inline 태그 & block 태그 inline 태그와 block 태그의 가장 큰 차이점은 출력하는 방식이다. inline 태그는 나란히 자연스럽게 출력되고 block 태그는 새로운 줄에서 출력된다. 스타일을 지정할 수 있는 방식에도 차이가 있다. inline 태그는 width, height, margin 등의 속성이 제대로 나타나지 않을 수 있다. inline 태그 inline 요소 태그는 block 요소 태그를 하위 태그로 포함시킬 수 없다. 내용물의 크기가 태그의 크기가 된다. width, height, margin 등의 속성이 적용되지 않는다. 대표적인 inline 태그 하이퍼링크를 연결하기 위한 태그 특별한 기능은 없으며 내용 출력을 위해 많이 사용되는 태그 text의 굵기를 bold로 변경하..

reviews calendar_month 2023.09.21

chevron_left이전

1

chevron_right다음

티스토리툴바