CSS12 [CSS]테두리 border에 그라디언트 효과 넣기 CSS 속성 linear-gradient와 border-image-slice 를 이용해서 테두리(border)에 그라데이션 효과를 주는 방법입니다. border-image-slice border-image-slice는 CSS 속성 중 하나로, 배경 이미지를 사용하여 요소의 테두리를 꾸밀 때 이미지를 어떻게 잘라낼지를 지정합니다. 이 속성은 border-image-source, border-image-width, border-image-outset와 함께 사용되어 테두리 이미지를 제어하는 데에 기여합니다. border-image-slice의 기본값은 100%입니다. 이 값은 이미지를 가로 및 세로로 100%만큼 사용하도록 설정하는데, 이는 이미지의 전체 부분을 사용한다는 것을 의미합니다. 다음은 borde.. 2023. 12. 4. [CSS]display:flex 와 display:grid 속성과 설명 웹사이트 제작 시 기존에는 레이아웃을 잡을 때 CSS속성 중에 position, float으로 주로 사용했다면, 요즘 웹사이트는 flex와 grid를 주로 이용합니다. flex와 grid를 사용하는 이유는 float로 번거롭게 해야했던걸 더 쉽게 해결해 주기 때문입니다. display:flex;와 display:grid;는 CSS의 두 가지 다른 레이아웃 속성입니다. 이들은 웹 페이지 내 요소들의 배치와 정렬 방법을 지정하는데 사용됩니다. display: flex 예를 들어, 다음은 플렉스 박스를 생성하고 내부 아이템들을 가로 방향으로 정렬하는 코드입니다 .container { display: flex; justify-content: space-between; /* 아이템 사이 간격을 최대한으로 벌립니다.. 2023. 8. 24. [HTML]라이트모드, 다크모드 이미지를 picture에 미디어(media)쿼리로 다른이미지 불러오기 다크모드나 해상도에 따라 이미지를 다르게 보여줄때 유용하게 사용됩니다. 간단히 설명을 드리자면 source media는 css에 미디어쿼리와 동일하다고 생각하시면 됩니다. 아래 내용을 참고하셔서, 라이트/다크 모드일때 보여지는 이미지와, source 아래 기본 이미지를 넣으시면 됩니다. 반응형(해상도별) 예시 @media screen and (max-width:921px) { } (해상도 예시) 디바이스(운영체제별) 라이트, 다크모드 @media (prefers-color-scheme: dark) { } (디바이스 다크모드 예시) 2023. 6. 6. [SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다... 2023. 1. 21. [javascript]유튜브 탭메뉴 별로 다르게 호출 (반응형포함) 하나의 영역에서 탭을 누르면 유튜브 영상이 탭별로 다르게 노출되게 하는 방법입니다. 먼저 script 를 사이에 삽입합니다. // youtube function getVidID(param) { var r = /(?:watch\?v=(.*)|youtu\.be\/(.*))/g; var match = r.exec(param); return match[1] ? match[1] : match[2]; } var frameBase = ''; var vidObj = [ "https://youtu.be/ktmvMZyVzWk", // data-idx 0 주소 "https://youtu.be/Decc1Apa-bU", // data-idx 1 주소 "https://youtu.be/DRJBGE-Zqj8", // data-idx.. 2022. 12. 2. [CSS]세로 두줄이상일때 말줄임 처리하기 예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다. CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다. 가끔 두줄일때도 말줄임을 할때가 있는데요. 그럴땐 아래처럼 하시면 됩니다. text{ height:50px; text-overflow:ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } -webkit-line-clamp:2; 두줄일땐 2, 세줄일땐 3으로 하시면 됩니다. (세로 높이값은 꼭 넣어야합니다.) 위처럼 두줄일때 말줄임... 처리가 됩니다. 만약 한줄일경우는 아래처럼 하시면 .. 2021. 3. 29. [모바일]모바일 코딩하는 분들에게 웹퍼블리셔로 일한지 꽤나 오래 된거같다. 웹디자인을 시작으로 웹퍼블리셔까지.. 지금도 회사마다 다르겠지만, 본인이 웹디자인을 시작했을때만해도 코딩과 디자인을 병행하면서 했던 기억이 난다. 웹표준과 웹접근성, jquery 및 CSS까지 이제는 모바일 시대가 도래하면서 웹퍼블리셔의 역할이 분명해졌다고 생각한다. pc버전으로 사이트를 제작시 모든 브라우저 특히나 익스6부터 맞춰야하는것 때문에 굉장한 스트레스로 다가왔었는데(지금은 익스8부터 맞추는 기업들도 많다), 이번에 스마트폰 디바이스마다 맞춰야하는 현실이 되어버렸다. 익스6같은 존재가 안드로이드 하위버전이라고 보셔도 무방할듯 하다. 물론 ios하위버전에도 문제가 되는부분이 있긴하다. 필자가 모바일 코딩을 하면서 힘든부분과 해결방법들을 몇자 적어 볼려고 한.. 2014. 3. 4. [텍스트큐브]텍스트큐브에 로고를 이미지로 바꿔보자! 텍스트큐브 제공형(?)의 블로그 로고를 이미지로 바꾸는 방법입니다. 텍스트 큐브닷컴은 아직 beta 버전이라 스킨편집 기능을 지원하지 않습니다. 그래서 이만 저만 불편한게 아니지요.. 다행이도 html 코드위젯은 지원함으로, 그걸이용하는 방법입니다. 예전에 텍스트큐브닷컴 블로그 수정하기 라는 글을 포스팅한적이 있습니다. 꼭참고 하시길 바랍니다. 텍스트 로고를 이미지로 바꾸는 방법은 다음과 같습니다. 먼저 원하는 로고이미지를 만든후 아무곳(?)이나 업로드합니다. 계정이 있으면 자신의 계정에 올리셔도 됩니다만, 저같은 경우는 아래와 같은 방법을 이용했습니다. 공지사항에 이미지를 업로드후 해당 이미지 주소를 복사하는 방법입니다. 이렇게 업로드된 이미지의 주소를 알기위해 이미지 속성을 확인합니다. 주소는 이런식.. 2008. 12. 17. [텍스트큐브]텍스트큐브닷컴 블로그 수정하기 텍스트큐브닷컴이 (http://blog.textcube.com/) 아직 베타 버전이라 스킨편집기능을 제공하고 있지 않습니다. 어쩌면 텍큐닷컴 베타 사용자들(저를포함)이 가장 우선적으로 필요로 하는 기능이 아닐까? 라는 생각을 해봅니다. 스킨편집 기능이 되어야 구글광고도 포스팅부분에 달수있고, 스킨도 자기 스타일데로 꾸밀수 있을텐데 말이죠. 그래서 생각해낸게 html 위젯 기능을 이용한 방법입니다. 마크업을 마음데로 할수는 없어도, css로 스킨스타일은 바꿀수가 있습니다. 제블로그를 보시면 텍큐에서 기본제공되는 스킨에서 스타일만 바꿔준것입니다. 아마도 이게 css 구조의 사이트에 장점이 아닐까 하는 생각을 합니다. 그럼 사용방법을 잠깐 알아보도록 하겠습니다. 먼저 '내 블로그 관리하기'를 클릭후 관리자 페.. 2008. 11. 13. [사이트]css로 만든 메뉴모음 사이트 http://www.dynamicdrive.com/style/ css로 만든 라이브러리가 많으니, 참고하시면 많은 도움이 될듯하네요.^^ 2008. 10. 1. [잡담]!important와 언더바 핵 한 규칙 안에서 윈도우용 IE 6 이하 버전을 위한 선언과 이외의 다른 브라우저를 위한 선언을 각각 사용하고 싶을 경우가 있습니다. 이를 위해서 속성에 이스케이프 문자를 사용하는 핵을 이용하거나 아니면 !important 또는 언더바 핵을 이용할 수 있습니다. 윈도우용 IE 6 이하 버전에서는 한 규칙안에서 여러 개의 속성을 사용할 수 없기 때문에 !important 핵을 사용하면 제대로 동작합니다. #nav { position: fixed !important; position: static; } 윈도우용 IE 4~6 버전은 첫 번째 선언을 무시하고 두 번째 선언을 적용합니다. 나머지 브라우저는 !important 키워드가 사용된 첫 번째 규칙을 적용합니다. !important 키워드를 쓰면 캐스케이드 .. 2007. 7. 7. [도서]css 마스터 전략 최신 CSS 기법을 다루는 CSS 마스터가 되기 위한 필독서! 2006 아마존닷컴 컴퓨터인터넷 부문 베스트셀러 2위! 가장 유용한 CSS 기법을 한번에 정리하면서 실제 환경에서 발생할 수 있는 브라우저 관련 이슈를 다뤄 CSS 관련 지식 수준을 한 단계 올릴 수 있다. 이 책을 통해 CSS 전문가다운 코드를 작성할 수 있는 기법을 배워보자. 최신 CSS 기법 및 활용팁 총정리 놓치고 있었던 CSS 기본 개념 다시 다지기 브라우저 호환을 위한 버그 해결법 및 핵과 필터 사용법 유명 CSS 전문가가 직접 만든 실전사례 및 예제 이 책에서는 CSS 기본 개념을 다시 정리하여, 의미 있는 마크업 작성의 중요성, 코드를 잘 구조화해서 유지보수가 용이하게 하는 방법, CSS 레이아웃 모델의 동작원리 등을 다룹니다... 2007. 3. 1. 이전 1 다음 반응형
