text-shadow 적용하기

html의 텍스트를 강조하기 위한 스타일로 text-shadow를 사용할 수 있다. text-shadow : none | text-shadow : text-shadow : hi // css .hi { text-shadow: 1px 1px 5px red; } 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/text-shadow text-shadow - CSS: Cascading Style Sheets | MDN text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 developer.mozilla..

• format_list_bulleted JavaScript
• · 2022. 11. 3.
• textsms

간단한 calc() 사용하는 법

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다. 더하기, 빼기, 곱하기, 나누기 연산이 가능하다. 연산자 좌우에 공백이 필요하다. 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. 곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다. 중첩해서 사용할 시 내부의 calc()은 ()로 취급된다. width: calc(50% - 8px); scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다. $len: 8px; width: calc(50% - #{$len});

• format_list_bulleted JavaScript
• · 2022. 11. 1.
• textsms

HTML에 영상 삽입하기

영상을 삽입하기 위한 태그로 iframe이나 video를 사용할 수 있다. 유튜브 링크등 URL로 영상을 띄우기 위해서는 iframe을, 로컬의 영상을 사용하기 위해서는 video를 사용할 수 있다. video는 브라우저가 지원하는 여러 타입의 확장자를 지원하기 위해서 여러 옵션의 영상이 들어갈 수 있다. 지원되는 비디오가 없습니다. // iframe 전체 크기로 설정 const styleObj = { overflow: "hidden", overflowX: "hidden", overflowY: "hidden", height: "100%", width: "100%", position: "absolute", top: "0px", left: "0px", right: "0px", bottom: "0px" } ~..

• format_list_bulleted 기타
• · 2022. 10. 30.
• textsms