Front-end/HTML5

728x90
[HTML]html 엔티티(Entity) 사용하는 이유와 종류 HTML 엔티티(entity) 를 사용하는 이유는 단순히 "기호를 넣기 위해서"가 아니라 문법 충돌이나 예기치 않은 해석을 막기 위한 안전장치라고 보면됩니다. 브라우저가 특수기회를 html 코드로 착각할 수 있어서 특수기호는 엔티티로 변경을 해줘야합니다.리액트에서는 > 를 넣으면 코드로 착각해서 오류가 발생되는 이유도 하나입니다. 특수문자(기호)&&앰퍼샌드<less than>>greater than""큰따옴표''작은따옴표 (HTML5부터 지원)©©저작권®®등록상표™™상표··중간점 (·)××곱셈 기호 (×)÷÷나눗셈 기호 (÷)±±플러스마이너스 (±)°°도 (°)€€유로£&poun..
[HTML]PDF 파일 등을 열리지 않고 다운로드 받게 하는 방법 PDF 파일을 브라우저에서 열지 않고 직접 다운로드 하게 하는 방법입니다.  태그의 href 속성과 download 속성을 사용하여 PDF 파일을 클릭했을 때 다운로드할 수 있도록 설정한 것입니다. 기본 형식은 맞습니다. 다만, 태그를 사용할 때 속성 값 주위에 공백이 있으면 안 됩니다. 올바른 형식은 다음과 같습니다.다운로드 download 속성에 값을 주어 다운로드될 파일명을 지정할 수도 있습니다.다운로드
[HTML]HTML 태그(풀네임)과 의미 - 시멘틱 웹 HTML 태그의 풀네임을 모르는 분들도 많으리라 생각됩니다.실무에선 풀네임까지는 몰라도 업무를 보는데 크게 지장이 없습니다. 그래도 알아서 나쁠 건 없으니 참고만 하시면 될 거 같습니다. : Hypertext Markup Language (하이퍼텍스트 마크업 언어): Head (문서 헤드): Title (문서 제목): Body (문서 본문): Heading One (제목 1): Heading Two (제목 2): Heading Three (제목 3): Heading Four (제목 4): Heading Five (제목 5): Heading Six (제목 6): Paragraph (단락): Anchor (앵커): Image (이미지): Unordered List (비정렬 목록): Ordered List ..
[HTML]라이트모드, 다크모드 이미지를 picture에 미디어(media)쿼리로 다른이미지 불러오기 다크모드나 해상도에 따라 이미지를 다르게 보여줄때 유용하게 사용됩니다. 간단히 설명을 드리자면 source media는 css에 미디어쿼리와 동일하다고 생각하시면 됩니다. 아래 내용을 참고하셔서, 라이트/다크 모드일때 보여지는 이미지와, source 아래 기본 이미지를 넣으시면 됩니다. 반응형(해상도별) 예시 @media screen and (max-width:921px) { } (해상도 예시) 디바이스(운영체제별) 라이트, 다크모드 @media (prefers-color-scheme: dark) { } (디바이스 다크모드 예시)
[HTML]ios(아이폰)에서 video 태그로 mp4 영상 삽입시 재생안될때 해결방법 아이폰에서 mp4 영상을 바로 호출하면 재생이 되나, video 태그로 삽입시 재생이 안되는 문제입니다. 먼저 video 태그의 속성을 살펴봅시다. 아이폰에서 autoplay 실행시 playsinline 를 추가하면 전체화면 전환없이 바로 재생이 됩니다. 즉 autoplay 를 넣을경우 playsinline 를 같이 넣어줘야한다는 의미입니다. 그래야 아이폰에서 영상이 제대로 보여집니다. autoplay : 자동재생 playsinline : IOS 자동재생 그리고 자동재생을 하기 위해서는 muted(음소거) 도 같이 넣어줘야합니다. 예제) 영상이 안보일시 포스터도 넣어보세요. 썸네일 사이즈가 맞지 않는다면 CSS에 poster 사이즈를 100%로 줍니다. video[poster]{width:100%}
반응형