본문 바로가기

FA/html／css

(7)

20221025 Meta og 태그로 카카오톡, sns 공유시 미리보기 만들기 Meta og 태그 - 카톡이나 SNS URL 공유시 미리보기 만들어 주는 태그 미리보기로 보여지는 이미지는 카카오톡 기준 가로 : 400px, 세로 : 210px가 최적 HTML 파일

20220923 모바일 창에서 input 클릭 시 확대 방지 모바일에서 input 입력창을 클릭하면, 화면이 확대될 때 화면 자동확대 방지 방법 meta 태그를 추가 (react 같은 경우 index.html에 추가) viewport 속성 width=device-width 화면 너비를 기계 너비로 맞춤 initial-scale=1.0 초기 화면 크기 배율 설정 minimum-scale=1 최소 화면 크기 설정 maximum-scale=1 최대 화면 크기 설정 user-scalable=no 사용자가 화면 확대/축소 가능 여부 설정 target-densitydpi=device-dpi 해당도를 기기에 맞춤 설정 참고 및 출처 https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag Viewport meta..

20220921 block / inline-block / inline 차이점 See the Pen block / inline-block / inline by rimrim (@s2hl) on CodePen. block inline-block inline ,,등 , , 등 , , 등 무조건 한줄을 점유 크기만큼만 공간을 점유 text 크기만큼만 공간을 점유 다음 태그는 무조건 줄바꿈이 적용 줄바꿈을 하지 않고, 동일한 라인에 작성가능 줄바꿈을 하지 않고, 동일한 라인에 작성가능 width, height, margin, padding 속성이 모두 반영 width, height, margin, padding 속성이 모두 반영 margin과 padding 속성은 좌우 간격만 반영 / 상하 간격은 반영X 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규..

20220920 position 속성 원하는 위치에 배치하기 (position 속성) 속성 설명 static 요소들이 겹치치 않고 한 줄에 하나씩 나오게 된다. relative 원래 배치되어야 할 위치에서 지정한 값만큼 떨어진곳에 요소를 배치한다. absolute 가장 가까운 상위 요소의 위치를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치한다. fixed 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다. https://developer.mozilla.org/ko/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), b..

20220916 input에서 글자 수 최대, 최소 지정하기 maxlength 최대 / minlength 최소 // 글자 수 최대 10 숫자로 조절하면 됌 // 글자 수 최소 5 숫자로 조절하면 됌

border-style border-radius 테두리 둥굴게 CSS 테두리 스타일 border-style속성은 표시할 테두리의 종류를 지정합니다 . 다음 값이 허용됩니다. dotted- 점선 테두리를 정의합니다. dashed- 점선 테두리를 정의합니다. solid- 단색 테두리를 정의합니다. double- 이중 테두리 정의 groove- 3D 홈 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. ridge- 3D 융기된 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. inset- 3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. outset- 3D 아웃셋 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다. none- 경계를 정의하지 않음 hidden- 숨겨진 테두리..

CSS 단위 width / length / font-size 단위변환 사이트 http://pxtoem.com/ 절대길이 cm 센치미터 mm 밀리리터 in 인치(1in = 96px = 2.54cm) px * 픽셀(1px = 1/96th of 1in) pt 포인트 (1pt = 1/72 of 1in) pc picas (1pc = 12 pt) * 픽셀(px)은 시청 장치를 기준으로 합니다. 낮은 dpi 장치의 경우 1px는 디스플레이의 하나의 장치 픽셀(점)입니다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미합니다. 상대길이 단위에 상대적 em 와 같은 활자체 속성의 경우 부모의 font-size글꼴 크기, 와 같은 다른 속성의 경우 요소 자체의 글꼴 크기 width. ex 요소 글꼴의 x 높이입니다. ..

티스토리툴바