퍼블리싱75 [css 활용] 하이라이터, 형광펜 효과 주기 주 사용 CSS 요소 - 가상 선택자 : before, hover - background: linear-gradient - transition html 마우스를 글자에 올리면 형광펜이 그어지는 효과예요. 그라디언트 컬러를 줄수도 있어요! :-) css body{ background-image:url(https://images.unsplash.com/photo-1601662528567-526cd06f6582?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=830&q=80); background-size:cover; background-position:center center; } .wrap{ mar.. 2022. 11. 3. [JS 활용]한글, 타이핑 효과 주기 타이핑 효과는 여러 모로 쓰임이 많습니다~ 이전에 찾은 오픈 소스를 찾아 활용했는데, 기존 오픈소스에는 뒤에 깜빡임 커서가 없어서 추가 해주었어요! Html반짝이는 하루, 그게 오늘이야. intervalType:80 , 숫자가 높을수록 타이핑 속도가 빨라짐 Css @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap'); body{ background-image:url(https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&.. 2022. 10. 31. 한글 타이핑 효과 라이브러리 (오픈소스) 한글 타이핑 효과를 만드신 분이 계시다..(감사하게도😂) 외국 타이핑 효과는 한글에 적용하면 어색해 져서 아쉬움이 가득했는데, 이 라이브러리를 만드신 분은 한글의 특징을 살려 타이핑 효과를 주었다. 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. https://sduck4.github.io/type-hangul/#home type-hangul: ⌨️ 한글 타이핑 효과 라이브러리 한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러리입니다. sduck4.github.io 라이센스 type-hangul by SDuck4. The source code is licensed MIT. *MIT 라이센스 - MIT 라이센스란 수.. 2022. 10. 26. sass란? 개념 및 사용 방법 Sass란? Css 전처리기(Css Preprocessor) 그렇다면,,, Css 전처리기는 뭐지? 말그대로 전에 처리해 버린다는 뭐 그런 뜻인 듯 왜 써야 할까? 👉 Css의 단점을 해소 Css 단점 - 불필요한 반복 - 가독성이 나쁨- 기타 등등... Css 장점 - 웹브라우저가 읽을 수 있다. - 사용하기 쉽다. Sass 처리 프로세스 Sass 장단점 Sass 장점 - 변수의 사용 → css 속성 통일 - 조건문과 반복문 사용 → 동적 css 관리 등등,, Sass vs Css /* Sass */ .circle $size: 100px width: $size height: $size border-radius: $size * 0.5 /* Css */ .circle { width: 100px; heigh.. 2022. 10. 26. [CSS 활용]헤더가 고정 되는 테이블, html css 버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 사용되는 요소 이미지 맵 태그안에 usemap 속성 / 제이쿼리 소스 html 헤더 헤더02 헤더03 111111111 222222222 333333333 444444444 111111111 222222222 333333333 444444444 제이쿼리 소스.tableWrapper { border-top: 3px solid #168; width: 400px; height: 300px; overflow: auto; position: relative; } #userListTable { height:600px; } #userListTable th { width: 400px; position: sticky; top: 0px; } .bluetop { bord.. 2022. 4. 8. [JS 활용] 탭 영역 만들기 - 자바스크립트, css , html5 활용 다양하게 활용이 가능한 탭 부분 디자인 및 코딩 소스 제이쿼리로도 되지만, 스크립트로도 구현이 되는 부분이라 서칭 해서 정리 해 봄. 홈페이지 구성할때, 50% 이상 사용되는 디자인 및 기능이 아닐까 싶다. 네이버 메인 HTML 문의 사항 고객 문의 첫번째 탭 영역 문의 사항 등이 표기 되는 부분 두번째 탭 영역 고객 문의 등이 표기 되는 부분 CSS.wrap { padding: 10px; } .tab { border-top: 1px solid #E2E2E1; border-right: 1px solid #E2E2E1; width: 400px; } .tab .tabitems { width: 100%; position: relative; } .tab .tabitems .item { display: inlin.. 2022. 3. 29. CSS 활용 - 라디오 버튼 커스텀 스타일 라디오 버튼 스타일 변경 하기 브라우저 별로 다르게 보이는 라디오 버튼 디자인 - 리셋하고 다시 스타일 주기! HTML 커스텀스타일1 커스텀스타일2 CSS .checks { position: relative; height: 20px; padding: 30px; line-height: 20px; } .checks label { font-size: 16px; color: #666; margin-right: 10px; vertical-align: middle; } .checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, .. 2022. 3. 23. [CSS 활용] 화살표, css로 만들기 화살표 모양 이미지가 아닌 CSS 로 그리기 보통은 PNG 이미지로 사용하거나, 아이콘폰트를 사용하는 경우가 많지만, CSS 가상선택자를 이용해서 만들게 되면 사이즈, 컬러 등을 자유롭게 바꿀 수 있다. 위와 같이 단순한 선형태의 방향키 디자인이라면 CSS를 통해 만들어서 제어하는것이 편한것 같아서 종종 사용 하고 있다. HTML CSS .wrap { position: absolute; vertical-align: middle; top: 100px; left: 10px; } .wrap .arrow { position: relative; display: inline-block; width: 30px; height: 30px; overflow: hidden; vertical-align: middle; } ... 2022. 3. 17. [JS 활용] 관련 사이트, family site 패밀리 사이트, 제이쿼리 활용 [토글] 패밀리 사이트나, 관련 사이트를 셀렉트 태그를 사용하는 것이 아니라 div를 사용해서 스타일링을 통해 좀더 다양한 방식으로 꾸밀 수 있다. (패밀리 사이트 선택하는 드롭 박스를 위로 올라가게 한다든지.. ) 제이 쿼리 토글과 CSS를 이용해서 꾸며 본다. 화살표 모양 이미지가 아닌 CSS 로 주기 HTML FAMILY SITE Naver Google Daum CSS .family { position: absolute; vertical-align: middle; top: 100px; width: 207px; background-color: #0d1621; left: 10px; } .family>a { display: block; position: relative; z-index: 10; height: 29.. 2022. 3. 15. [CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바 스크롤바 평소엔 안보이다가, 길이가 길어진 경우 스크롤이 생기는데, 그게 너비값을 갖지 않도록 스크롤 생기는 박스 위에 투명하게 오버레이 되어 보이게 하기. 그래야, 너비값을 갖지 않고, 전체 레이아웃을 틀어지지 않게 한다. ** 단 이런 경우, 스크롤이 들어가는 위치에 뭔가 클릭을 해야하거나 하는 요소가 없어야 함. HTML 01 02 03 04 05 06 07 08 09 10 CSSdiv,ul,li{ padding: 0; margin: 0; box-sizing:border-box; } .scrollbar{ width:200px; height: 200px; overflow:overlay; border:1px solid #ddd; } .scrollbar::-webkit-scrollbar { width: .. 2022. 1. 17. HTML&CSS 기초 - 요약 (의미,특징,사용법) HTML이란? 웹페이지는 모두 HTML을 사용하여 만들어짐 HTML의 의미와 특징 Hyper Text Markup Language의 줄임말 Hyper Text : 링크 의미 Markup Language : 프로그래밍 언어의 종류/ 정보를 구조적&계층적으로 표현 HTML 파일 확장자 : .html HTML의 역사 제안&개발 : 1990년대 영국의 물리학자 팀 버너스 초기 개발 목적 : 연구원들의 정보와 문서 공유 태그란? HTML은 태그들의 집합 태그로 코드 작성 -> 브라우저 인식 -> 내용 표현 태그 사용 방법 표현 방법 : ~ Hello, HTML 요소란? 태그를 포함한 전체 속성이란? 태그에 대한 추가 정보 제공, 태그 제어 설정값 지정. 속성을 사용하는 방법 시작태그 - 한칸 뛰고(공백) - 속성.. 2022. 1. 16. 스크롤매직- 애플 홈페이지 구현하기 위한 플러그인 스크롤 매직 ScrollMagic은 사용자의 스크롤 위치에 반응하여 효과가 나타나게 함. 스크롤 하면 이미지가 나타나거나, 사라지거나 하는등의 효과를 구현할 수 있게 해주는데 대표적으로 애플 홈페이지 같은 느낌 만들기에 필요한 플러그인 사용방법 홈페이지에서 플러그인 다운로드 examples 폴더내에 index.html 열기 안에 css/script 경로 확인 홈페이지에서 다운로드 받아서 샘플을 보고 필요한 요소를 찾아 쓰면 된다. http://scrollmagic.io/ ScrollMagic The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scro.. 2021. 11. 29. [JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스 숫자가 자동으로 올라가거나 내려가게 하는 소스지정된 숫자에서 시작해서 지정된 숫자까지 카운팅이 필요한 경우 사용하면 좋을 소스 홈페이지 디자인할때 동적인 효과를 두드러지게 보여질 수 있게하는 요소중의 하나 연혁이나 팀원의 수 혹은 그외에 다양하게 사용 가능한 소스 HTML 마크업 Since 1700 CSS .title{ text-align:center; display:block; font-size: 30px; color: #222; margin-bottom:10px } .number { text-align:center; display:block; width:150px; height:150px; line-height:150px; margin: 0 auto; font-size: 40px; color: #3f.. 2021. 11. 17. 깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) 깜박이는 효과 css로 나타내기 녹화중인 것 같은 상태를 보여줄 수 있게 깜박이는 점을 넣는 CSS 온에어, 라이브 방송 중.. 등과 같이 현재 상태를 나타내기에 좋은 css 효과이다. 사용되는 css 속성 가상 요소 - :after 애니메이션 - animation 키프레임 - keyframes animation 속성 상세 css @Keyframe 속성 상세 Html Live Css .on_now_tag{ font-size: 14px; color: #fd183a; padding: 2px 10px; margin-left: -7px; font-weight: 500; } .on_now_tag:after { content: ""; display: inline-block; width: 10px; height: 1.. 2021. 11. 17. [HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 버튼 클릭시 이미지 다운로드 html 신청서나, 양식, 혹은 이미지를 다운 받아야 할경우, 간편하게 쓸수 있는 html 소스 Html 이미지 원본 다운로드 다운로드 할 이미지가 파일이 위치한 경로를 적어야 다운로드가 됩니다! ex) 2021. 10. 13. [CSS 활용]스크롤바 커스텀하기 - 익스IE 적용 가능한 CSS 스크롤바 익스와 크롬 모두 적용 가능한 스타일링 CSS확실한 크로스 브라우징을 위해서는 조금 더 손을 봐야겠지만... 그래도 좀 비슷하게나마 맞춰 쓸 수 있는 스크롤바 모양. HTML 마크업 스크롤바 익스플로러 IE 10 이하 적용 가능한 css, 디자인을 비슷하게 맞춘 커스텀 스크롤바. 공백 CSS .scrollbox{ width: 250px; height: 250px; overflow: auto; padding: 10px; font-size: 14px; color: #333; border:1px solid #ddd; } .scrollbox span{ display:block; height: 1200px; color:#999; font-size: 11px; } /* 크롬 스크롤바 CSS */ /*스크롤.. 2021. 10. 13. CSS 디스플레이(display)속성- CSS 디스플레이 속성 기본값 display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나. 대부분의 HTML 요소는 기본적으로 둘 중 하나를 display 속성 값을 가진다. 1. 블록(block) 2. 인라인(inline) 블록(block) { display : block }은 한 라인을 다 쓴다. , , , , , 대표적인 블록(block) 요소 인라인(inlne) { display : inline } 컨텐츠를 감싸는 크기만 갖는다. block속성과 다르게 줄바꿈이 되지 않고, 연달아 쓸경우 옆으로 붙게 된다. , , , 요소는 대표적인 인라인(inline) 요소 **크기를 변화시킬 수 없다. 너비를 주고 싶다면 속성을 block 이나 inline-block 로.. 2021. 10. 10. [CSS 활용]fade in/out animation배경 이미지가 서서히 나타나게 하기 이미지(배경화면) 서서히 나타나게 하기이미지가 첫 화면에서 자연스럽게 나타나게 되면 부드러운 느낌을 준다. 배경뿐만 아니라 다양한 요소 (폰트/이미지) 에서도 쓰일 수 있는 fadein / fadeout 애니메이션이다. CSS animation을 활용! HTML 마크업 CSS#main { width: 100%; margin:0 auto; animation: fadein 5s ease 3s; -webkit-animation: fadein 3s; /* Safari and Chrome */ } #main img{ width: 100%; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { /* Saf.. 2021. 10. 7. [CSS 활용]css 활용 예제 - 라디오 버튼을 활용한 선택 버튼 디자인 라디오 버튼 태그 활용 - 버튼 디자인 CSS모바일이나 웹에서 두 가지 중 하나를 택해야 하는 선택지가 있을 경우, 라디오 버튼 보다는 버튼 형태를 많이 사용하는데 기능은 라디오 버튼 기능을 갖지만 모양은 css로 버튼 형태로 주기. HTML라디오 버튼에서, 텍스트를 눌렀을때 같이 선택되게 하려면 id속성과 label for속성을 같게 설정한다. tag label 속성 미혼 기혼 CSS 타입 선택자/인접 선택자 - input[type=radio]+label 선택자 종류 상세 .select { padding: 15px 10px; } .select input[type=radio]{ display: none; } .select input[type=radio]+label{ display: inline-block.. 2021. 10. 7. [CSS 활용]티스토리 book club 스킨 커스텀2 (카테고리보기-썸네일 크기 및 텍스트 길이 수정) 티스토리 book club 스킨 커스텀 두번째 카테고리 보기 페이지 1. 썸네일 크기 및 위치 수정 2. 보여지는 설명글 텍스트 길이 수정 기존 변경 후 거의 이미지가 주를 이루는 블로그 이기에 글자보다 이미지가 더 돋보이는게 중요하므로, 폰트가 많이 보이지 않아도 되는 방향으로 수정- 방법: html 에서 썸네일 사이즈 수정 -> CSS 추가 수정 현재 들어간 이미지 사이즈 확인 개발자 모드로 들어가서 썸네일 속성을 보면 사이즈가 230x300으로 들어간 것을 볼 수 있다. 이 사이즈만 티스토리에서 제공하는 옵션에 맞게 설정을 바꿔 줄 예정이다. 자료 출처 : 티스토리 이미지 썸네일 치환자 완벽정리 https://blogpack.tistory.com/167 티스토리 썸네일 사이즈 옵션 중 C300x20.. 2021. 10. 5. [CSS 활용]티스토리 book club 스킨 커스텀 (글보기 부분- 상단 타이틀 배경 지우기) 티스토리 Book club 커스텀 하기 티스토리 이런저런 스킨을 쓰다가 북클럽 스킨이 가장 보기도, 쓰기도 편하단 생각이 들었다. 역시, 뭔가 좌측에 메뉴가 한눈에 보여야 안심이 되는건지. 여튼 스타일 모두 맘에 드는데 조금 걸리는 부분이 하나 있었는데.. 바로 글 보기를 눌렀을 때, 타이틀 뒤에 이미지가 들어가고 그 위에 글자가 있는 부분이었다.. 상단 타이틀 배경 자동 삽입되는 디자인 실제로 사용했을때는 화소가 낮은 이미지가 들어가 꺠져보이거나, 보여지는 위치가 엉뚱하거나. 사이즈, 크기, 위치를 고려하여 커스텀한 이미지를 넣으면 예쁘겠지만 그렇지 않은 경우가 대부분이기에 이부분을 안보이게 해서 사용하려고 한다. 수정 방향 완성 시안 잘 만들어진~ 북클럽 스킨을 사용해서 커스텀 하기! 수정 방법은 간.. 2021. 10. 4. [HTML 태그 활용] MARQUEE 태그- 글자나 이미지를 흐르게 하는 태그 글자나 이미지를 흘러가게 하는 태그 Marquee tag 퍼블리싱 작업중에 글자/이미지를 화면에서 흐르게 하도록 하고 싶었는데, CSS로 하려고 보니 kryframe 애니메이션 효과를 주어야 했다. 문득 다른 방법은 없나 하고 검색하니, 마퀴 태그를 찾았다! (웹표준 HTML5에서는 더이상 지원하지 않는 기능이고, 브라우저마다 작동 여부를 확인해야 한다.) 간단하게 뒷배경이 흐르는 느낌만 주려고 했던거라 그냥 사용해 보기로 했다. 사용방법 왼쪽으로 흘러가는 글씨 여러가지 속성을 곁들어 주면 된다."따옴표가 있는것과 없는것 확인" width=400 height=300 direction="left[right|up|down]" 스크롤 방향 behavior=scroll[slide|alternate] 움직임 속성.. 2021. 8. 5. [반응형] 모바일 화면 퍼블리싱 폰트 단위 rem 사용방법, rem계산 참고사이트 반응형 rem 단위 사용하기 REM 단위는 문서의 최상위 요소, HTML의 크기를 기준으로 한다. rem 적용 방법 html로 제작시 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 { font-size:16px;} 이다. html { font-size:16px; }로 설정하면 16px = 1rem 17px = 1.063rem 예를 들어 html{font-size: 16px} 일때 p의 폰트를 16px로 a의 폰트를 17px로 하고싶다면? p{font-size:1rem} a{font-size:1.063rem} 이렇게 할 경우, 17px = 1.063rem 이런식으로 소수점 단위가 나오기 때문에 좀더 편하게 제어하는 방법은 아래처럼 html의 폰트 사이즈를 .. 2021. 6. 15. 반응형 디자인 레이아웃 너비 기준 반응형 레이아웃 가로 사이즈 디바이스에 따라 구분하는 기준은 가로 너비 가로 너비 값에 따라 디바이스 인식하여 레이아웃 변경 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값으로 정하기도 한다. ( 디바이스 종류별 너비 값 기준은 제각각 이므로 가로 사이즈는 정의된 표준값이 있지는 않다. ) 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중단점 나눌 때 대표적으로 디바이스 별로 많이 사용되는 가로 해상도는 다음과 같습니다. 반응형 레이아웃 01 최소한의 반응형 레이아웃 가장 많이 사용하는 대중적이고 간결한 기준 768px 미만 : 모바일 기기 768px ~ 1024px : 타블렛 1024px 이상: 데스크탑 /* 데스크탑 */ @media scree.. 2021. 6. 13. 모바일 리셋 스타일- mobile css reset 글로벌 리셋 소스 reset.css PC버전 reset.css /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0} fieldset,img {border:0 none} dl,ul,ol,menu,li {list-style:none} blockquote, q {quotes: none} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} input,select,textarea,but.. 2021. 6. 11. 티스토리 소스코드 코드블럭 꾸미기 티스토리 소스 코드 블럭 꾸미기 - 티스토리에서 제공하는 소스코드 스타일을 커스텀 하기 - highlightjs.org의 CDN을 활용 방법 1. 사이트 방문 https://highlightjs.org/download/ 2. cdnjs 복사 하기 3. 티스토리 설정에서 HTML 편집 4. Head 사이에 복사한 내용 붙여 넣고 적용 5. 적용 확인 6. 테마 변경 가능 https://highlightjs.org/static/demo/ 사이트에서 테마를 선택 하여 가져온 CDN에서 아래 경로에서 default를 변경해 주면 가능하다. 둘러 보다 보니 어두운 배경이 맘에 들어 agate 테마로 선택. 소스코드를 수정하고 적용하면 변경 완료!! 2021. 6. 9. CSS Margin - 마진 CSS 마진 테두리 외부에 공간을 만드는 데 사용 여백-개별면 margin-top margin-right margin-bottom margin-left 위/오른쪽/아래/왼쪽을 하나로 합쳐서 적어줄 수도 있다. 여백 속성 auto - 브라우저가 여백을 계산 ex(div 가운데 정렬 - margin : 0 auto; ) 길이 - 여백을 px, pt, cm 등으로 지정 %로 여백을 지정 inherit-여백이 상위 요소에서 상속 (-) 음수 값 사용이 가능하다. ex ( margin : -10px 20px 20px 10px ; 위쪽으로 -10px 올라감 ) 2021. 1. 27. CSS border-width 테두리 너비 CSS border-width 속성(테두리 너비) 네 테두리의 폭을 지정한다. 너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 미리 정의 된 값 (thin, medium, thick )으로 설정 p.one { border-style: solid; border-width: 5px; border-color: red } p.two { border-style: solid; border-width: medium; border-color: blue } p.three { border-style: dotted; border-width: 2px; border-color: orange; } p.four { border-style: dotted; border-width: thick; border-color:.. 2021. 1. 22. CSS border 테두리 속성 CSS 테두리 속성 CSS border 속성을 사용하면 테두리의 스타일, 너비 및 색상을 지정할 수 있다. CSS 테두리 스타일 dotted -점선 테두리 dashed -파선 테두리 solid -단색 테두리 double -이중 테두리 groove-3D 그루브 테두리 / 테두리 색상 값 ridge-3D 능선 테두리 / 테두리 색상 값 inset-3D 삽입 테두리 / 테두리 색상 값 outset-3D 시작 테두리 / 테두리 색상 값 none -경계선 없음 hidden -숨겨진 테두리를 정의 HTML A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. A.. 2021. 1. 21. CSS 컬러 (추천 컬러 사이트) CSS 색상 미리 정의 된 색상이름(blue, orange, red) 이나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정된다. CSS 색상 이름 미리 정의 된 색상 이름을 사용하여 색상을 지정할 수 있다. LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightYellow PaleVioletRed PapayaWhip Peru CSS / HTML은 140 개의 표준 색상 이름을 지원하고 있다. (출처 : w3school ) CSS 색상 값 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다. 컬러 이름 "LightSalmon": rgb.. 2021. 1. 19. 이전 1 2 3 다음 728x90 반응형
