본문 바로가기
728x90
반응형

실전 코딩/HTML8

html로 이미지 미디어쿼리 설정하기 picture 태그의 source태그를 쓰면 html만으로도 이미지 미디어쿼리를 구현할 수 있다. 보통 모바일/데스크톱일때의 사진이 화질별/사이즈별 달라지는 경우가 많은데 그때 사용하기 좋을것 같다. img태그는 picture태그나 source태그를 지원하지 않는 곳에서 기본값으로 쓰이기때문에 적용해놓는게 좋다. ** 참고로 Opera Android는 서포트가 안된다고 하니 앱을 고려할때는 사용성에 유의해야겠다. ** source 태그 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source : The Media or Image Source element - HTML: HyperText Markup Language | MDN The HTML el.. 2023. 4. 25.
카카오톡 링크공유 썸네일 설정(og img) 아래는 카카오톡에서 링크를 공유할 때 나오는 썸네일 화면이다. 설정 방법은 메타태그(meta tag)로 설정할 수 있다. 원래 페이스북에서 사용을 하다가 요즘은 다른곳에서도 많이 사용하고 있다고 한다. Open Graph의 줄임으로 쓰이는건지 아래처럼 og를 붙여서 사용된다. // 절대경로로! title은 title 태그에 쓴것 처럼 사이트 제목을 적으면 되고 type은 웹인지 앱인지 등등 타입을 지정 url은 사이트 도메인 description은 사이트에 대한 설명 site_name도 말 그래도 사이트 이름을 적어주면 된다. 다른건 다 텍스트이지만 og: image의 사이즈가 문제인데 원래 표준 사이즈는 1200 x 630의 1:1.91이라고 하지만 카카오톡으로 반영을 하려면 사이즈는 800 x 400.. 2023. 4. 19.
메타태그(meta tag)에 대하여 메타태그(meta tag)란? 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용한다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있다. 요소는 , , , , 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다. 대표적으로 title 태그를 설명하자면 title 태그를 설명합니다. 페이지의 제목을 나타내며 ie(Internet Explorer), safari, firefox의 경우에는 브라우저의 타.. 2023. 4. 19.
input 자동완성 기능 없애기 jquery ui의 datepicker를 사용하던 중 input창에 계속 아래 툴팁으로 자동완성 기록이 떠서 날짜가 안보이게 되었다. 그래서 알아보던 중 재밌고 신기한 기능을 알게되었다. input태그의 autocomplete 속성인데 HTML5에서 태그에 새롭게 추가된 속성이라고 한다. 알아보지 않았다면 몰랐을 속성이라 알고나니 흥미로웠던 속성이였다. 아래처럼 off로 설정하면 자동완성 기능을 허용하지 않게 된다. ** 참고 사항 : 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없다. 2022. 5. 26.
select option의 속성 select를 보통은 커스텀하여 사용하지만 기본으로 쓸 때 유용한 속성들을 정리해 놓았다. 1. hidden 선택이라는 글자를 보통은 옵션 처음에 놓지만 선택할 때는 제외하고 싶다면 option에 hidden을 넣어주면 된다. 선택 짜장면 짬뽕 탕수육 기본 선택 짜장면 짬뽕 탕수육 hidden 처리된 모습 선택 짜장면 짬뽕 탕수육 기본적으로 안보이게 하고 싶을 때 쓴다. 2. selected 원하는 값을 미리 선택해놓고 싶을 때는 selected를 사용하면 된다. 짜장면 짬뽕 탕수육 짜장면 짬뽕 탕수육 3. disabled 값을 선택하지 못하게 막을 때는 disabled를 사용하면 된다. 선택 짜장면 짬뽕 탕수육 선택 짜장면 짬뽕 탕수육 4. optgroup option을 그룹으로 묶고싶다면 optgro.. 2022. 5. 25.
웹브라우저 HTML 렌더링 과정 웹브라우저 HTML 렌더링 과정 : 불러오기 - 파싱 - 렌더링 트리 만들기 - CSS 결정 - 레이아웃 - 그리기 1. 불러오기(Loading) 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있다. 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정한다. ​ 2. 파싱(Parsing) 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다. 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다. ** DOM Tree : 내용을 저장하는 트리로 javascript에서.. 2021. 6. 28.
728x90
반응형