본문 바로가기
반응형

IT/Web106

티스토리에 코드펜 CodePen 소스 코드 올리는 방법 티스토리에 CodePen을 활용하여 소스 코드 올리는 방법입니다. 이 글은 티스토리 글쓰기가 예전 버전이 아닌 신규 버전 즉 아래 사진과 같은 글쓰기 버전을 위해서 작성하였습니다. 코드를 티스토리에 직접 업로드하는 방법은 다음과 같습니다. 텍스트 형식으로 업로드 이미지로 캡처하여 업로드 티스토리에서 제공하는 코드 블럭을 통해 소스 코드를 업로드 CodePen과 같은 것을 이용하여 업로드 1~3번까지는 모두 정적인 텍스트 또는 이미지 형식이라 움직임이 있는 동적인(애니메이션, 자바스크립) 경우에는 결과 화면을 보여주기가 쉽지 않습니다. 또한, 불펌 방지를 위해 마우스 드래그 및 마우스 우클릭을 막은 블로그에선 소스 코드를 방문자가 쉽게 복사하여 이용할 수 없습니다. 하지만, 코드펜(CodePen)을 이용하.. IT/Web 2020. 4. 9.
CSS3 텍스트 CSS3 텍스트 CSS3에서 새롭게 추가된 텍스트에 관한 속성은 다음과 같습니다. 1. text-overflow 2. word-wrap 3. word-break CSS3 텍스트 속성 지원 버전 CSS3 텍스트 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다. text-overflow 속성 text-overflow 속성은 콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정합니다. 영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현할 수도 있습니다. 콘텐츠 영역을 벗어난 텍스트 처리 방법 콘텐츠 영역을 벗어난 텍스트 부분을 잘라냅니.. IT/Web 2020. 4. 9.
CSS3 테두리 CSS3에서 새롭게 추가된 border 속성은 다음과 같습니다. border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-image border-image-source border-image-slice border-image-width border-image-outset border-image-repeat CSS2 테두리 border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리(border)의 스타일을 설정할 수 있게 해줍니다. CSS2까지는 다음과 같은 border 속성만을 사용할 수 있었습니다. border bor.. IT/Web 2020. 4. 3.
CSS3 그림자 및 배경 효과 CSS3에서 사용할 수 있는 shadow 속성은 다음과 같습니다. 1. text-shadow 2. box-shadow CSS3 그림자(shadow) 효과 지원 버전 CSS3 그림자(shadow) 효과를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다. text-shadow 속성 text-shadow 속성은 해당 텍스트에 간단히 그림자 효과를 적용해 줍니다. text-shadow 속성의 문법은 다음과 같습니다. ▶ 문법 text-shadow: 그림자의x축값 그림자의y축값 blur값 색상값; 그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur .. IT/Web 2020. 4. 2.
CSS3 선형 그래디언트(gradient) 그래디언트(gradient)란 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미합니다. CSS3 이전에는 그래디언트 효과를 나타내기 위해서 별도의 여러 이미지 파일을 사용해야만 했습니다. 하지만 CSS3에서는 웹 브라우저가 간단히 그래디언트 효과를 나타낼 수 있게 해줍니다. CSS3에서 제공하는 그래디언트는 다음과 같이 두 가지 형태가 있습니다. 1. 선형 그래디언트(linear gradients) 2. 원형 그래디언트(radial gradients) CSS3 그래디언트(gradient) 지원 버전 CSS3 그래디언트(gradient)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전.. IT/Web 2020. 3. 26.
반응형

티스토리툴바