본문 바로가기

css380

A 니스 수많은 형태의 접촉 사례가 있습니다. 왜 이런 것일까요? 간단합니다. 무료입니다 그건 효과가 있다. 유효합니다. CSS로 스타일링 되어 있습니다. 한번 보세요. 다운로드 하세요. 분해해 보세요. 원하는 데로 쓰세요. 생성된 깔끔한 전자 메일을 확인하십시오. 데모 다운로드 파일 보기 업데이트: Reader Toni는 다음과 같은 Windows 서버용 수정 프로그램으로 에 씁니다. /* Modification by Toni for Windows servers */ ini_set("sendmail_from", "me@mydomain.co.uk"); 2021. 9. 28.
800×600을 수용해야 하는 '실제' 웹 디자인 CSS-Tricks를 읽는 모든 힙한 아이들의 화면 해상도에 대한 통계를 확인하십시오. 이 사이트에서는 800×600이 10위권 안에 들지 못한다. 저는 이 사이트를 여분의 픽셀 공간을 활용하기 위해 디자인했습니다. 지금은 980픽셀입니다. 처음에는 1024 픽셀을 가득 채웠지만, 수직 스크롤 막대로 13-15 픽셀을 고려하지 않았기 때문에 수평 스크롤 문제가 발생했습니다. 이런! 하지만 CSS-Tricks는 정확히 "실제" 웹사이트는 아니다. 좀 더 기술에 정통한 청중을 대상으로 합니다. 아마도 기술에 정통한 사람들은 더 큰 모니터를 가지고 있을 것이다. 다행히도, 나는 추측할 필요가 없어. 내 Google Analytics는 사용 중인 화면 해상도를 정확하게 알려줍니다. 내가 추적하는 사이트는 CSS.. 2021. 9. 28.
블로그를 위한 초급 CSS 팁 많은 사람들에게 웹 디자인과 CSS의 멋진 세계에 대한 그들의 소개는 블로그를 통해서이다. 블로그는 너무 쉽고 디자인에 대해 아무것도 알 필요가 없기 때문에 시작합니다. 곧, 새로운 아이디어를 수용하기 위해 사이트의 디자인을 약간 바꾸고 싶은 욕구가 자리를 잡았고, 그들은 그들의 멋진 댄시 블로그가 어떻게 작동하는지 점점 더 깊이 파고드는 자신들을 발견하게 된다. 조만간 그들은 뚱뚱하고 육즙이 많은 스타일.css 파일을 발견하게 될 것이고 그들의 눈은 가능성으로 열릴 것이다. 만약 이것이 여러분이라면, 여기 몇 가지 팁과 기억해야 할 몇 가지가 있습니다. 주요 콘텐츠에 적합한 타이포그래피를 확보하십시오. 내용 때문에 다른 사용자가 사용자의 페이지로 이동하거나 계속 사용자의 페이지로 이동합니다. 물론 여러.. 2021. 9. 28.
색상의 육각 코드 잡기 CSS에서 색상을 정의하는 것은 모두 Hex Code에 관한 것입니다. 영숫자 6자리 숫자 #990000 같은 것들이요. 여러분은 아마 그것들을 한 움큼씩 암기했을 것입니다. 방금 말씀드린 것과 같이 검붉은 색이 멋집니다. #cccc는 연한 회색, 0은 검은색, F는 흰색 등입니다. 알아두면 좋겠지만, 웹 페이지에는 종종 모든 종류의 색상이 있습니다. 원하는 색상의 헥스 코드를 얻을 수 있는 방법이 필요합니다. 하지만 어떻게요? 아, 제가 방법을 세어보겠습니다. 어도비 포토샵. 포토샵을 가지고 있다면 헥스코드를 잡기 위한 여러 가지 트릭이 있습니다. 가장 간단한 방법은 색을 캡처할 이미지를 열고, 아이드로퍼 도구를 선택하고, 색을 복사할 영역을 마우스 오른쪽 단추로 클릭한 다음, "HTML로 색상 복사".. 2021. 9. 28.
JPG 사용 시기 및 GIF 사용 시기 여러분 대부분처럼, 저도 웹에서 사용하기 위해 그래픽을 절약하는데 상당한 시간을 소비합니다. 그래서 제가 웹을 둘러보고 있을 때, 저는 최적화 실수를 발견하게 됩니다. 타이프세터가 1마일 떨어진 곳에서 코닝 파울을 발견하거나 축구팬이 포메이션을 보는 것만으로 엉터리 수비 플레이를 발견하는 것과 같은 것이다. 블로그 팁은 제가 즐겨 읽는 훌륭한 블로그가 아닙니다. 하지만 그들은 새로운 디자인을 출시했습니다. 크고 대담한 빨간색 헤더를 가지고 있고, 역방향 블록 타입도 있습니다. 이것은 고전적인 GIF 영역이지만, 그들은 JPG로 갔습니다. 이 경우 압축의 결과로 글자 주위에 인공물을 만들 것입니다. 아래 참조: 언제 JPG를 사용해야하고 언제 GIF를 해야하나요? 이미지의 사용은 CSS의 큰 부분이기 때문.. 2021. 9. 27.
마진 패딩 문제 속기 순서 기억하기 최근에 저는 css 앵커 선택기를 기억하는 것에 대한 작은 속임수를 올렸습니다. 이제 나는 CSS 속기의 패딩/마진 양의 순서를 기억하기 위해 TRUBLE이라는 단어를 사용하는 훨씬 더 유용한 또 다른 작은 트릭을 가지고 있다. 요령은 단어의 처음 네 개의 자음이 "위", "오른쪽", "아래", "왼쪽"의 첫 글자라는 것이다. 나는 어떤 것이 어떤 것인지 전혀 기억하지 못하기 때문에 이 속임수를 좋아한다. 저는 CSS 속기를 사용하는지 여부에 대해 실제로 방송에 나온 적이 있습니다. 왜냐하면 가끔 코드 가독성이 떨어진다고 느끼기 때문입니다. 이제 난 절대 잊지 않을 거야! 다음은 =)의 마음을 굳히는 데 도움이 되는 간단한 그래픽입니다. 2021. 9. 27.
간단한 URL 해킹으로 YouTube 비디오 크기 조정 Digital Inspiration의 한 직원이 다음과 같은 질문을 했습니다. "어떻게 유튜브 비디오를 보내서 받는 사람이 사이드바에 다른 비디오가 없도록 할 수 있을까요?" 이 문제에 대한 놀라운 해결책이 있다. YouTube 동영상에 연결할 수 있습니다. 동영상이 브라우저 창 전체를 차지하도록 하는 방식으로 말이죠. 이것은 또한 전체 화면을 어둡게 하는 전통적인 전체 화면 방식으로 비디오를 보는 것에 대한 좋은 대안입니다. 방법은 이렇습니다. 일반적인 방법: http://www.youtube.com/watch?v=9GUBQs6SgTE 전체 화면: http://www.youtube.com/v/9GUBQs6SgTE 즉, "watch?v="를 "v/"로 바꿉니다. (저 링크는 저의 옛 밴드 그로거스입니다... 2021. 9. 27.
CSS 페이지 로더 예제 Delang 독자는 내가 조금 전에 게시한 CSS 페이지 로더 개념에 문제가 있었다. 그래서 저는 가서 예시 페이지를 만들었습니다. 이것은 매우 간단하며, 실제로 무언가를 로딩하는 "가짜"일 뿐입니다. 예를 들어, 실제로 아무것도 로드하지 않습니다. 재설정하려면 페이지를 새로 고쳐야 합니다. 이전에 놓친 경우, DIV를 만들면 전체 화면을 흰색으로 덮을 수 있으며, 애니메이션 페이지 로더는 디스플레이 속성을 없음으로 설정할 수 있습니다. #page-loader { position: absolute; top: 0; bottom: 0%; left: 0; right: 0%; background-color: white; z-index: 99; display: none; text-align: center; wid.. 2021. 9. 27.
Nice 텍스트 영역 만들기 텍스트 영역은 사용자가 입력할 수 있는 웹 페이지의 요소입니다. 일반적으로 주석 영역, 연락처 양식 또는 주소 입력 영역으로 사용됩니다. 모든 브라우저에는 다양한 텍스트 영역의 기본 스타일이 있습니다. 텍스트 영역을 제어하고 다른 요소와 마찬가지로 CSS로 스타일링할 수 있습니다. textarea#styled { width: 600px; height: 120px; border: 3px solid #cccccc; padding: 5px; font-family: Tahoma, sans-serif; background-image: url(bg.gif); background-position: bottom right; background-repeat: no-repeat; } 이 경우 ID가 "스타일링"인 텍스트 .. 2021. 9. 27.
선택자의 순서를 기억하는 방법: 사랑과 증오 며칠 전에 CSS Drive에 관한 Slackerbabe라는 사람이 한 말을 읽은 적이 있는데, 이 말을 반복할 가치가 있다고 생각했습니다. "LVHA(link hover active)"라는 네 개의 선택기 순서를 기억하는 멋진 방법이 있습니다. 'LOVE'(LV)와 'HATE'(HA)를 떠올려 보세요. 참조하는 선택기는 앵커 요소용입니다. a:링크 a:스파이브 a:스파이브 a: 활동적인 2021. 9. 27.
W3C를 통해 CSS 확인 W3C에서 HTML을 검증할 수 있는 것처럼 CSS도 검증할 수 있습니다. CSS-트릭스가 소집을 통과합니다. 2021. 9. 27.
CSS 초보자 실수: 'Divitus', 절대 위치 지정 서치(Search)지에 꽤 흥미로운 초보자들의 실수를 지적하는 기사가 있습니다. 다음은 몇 가지 주요 사항 및 당사만의 몇 가지 사항입니다. 절대 포지셔닝입니다. – CSS를 학습할 때 가장 먼저 느끼는 힘 중 하나는 X,Y 좌표와 치수를 사용하여 페이지의 모든 요소의 위치와 크기를 제어할 수 있다는 것입니다. 물론, 절대 포지셔닝에는 용도가 있지만, 일반적으로 실제 페이지 콘텐츠에는 사용되지 않습니다. 완벽하게 배치된 개체는 다른 모든 개체를 무시하고 컨텐츠에 유연하게 대처할 수 있는 기능을 제한합니다. 높이 설정(필요 없을 때) – 제어 욕구입니다. 개체의 높이를 "원하는 방식을 보기" 위해 개체 높이를 강제로 지정하는 것은 유혹적이지만, 이렇게 하면 개체 내부의 콘텐츠가 엉망이 될 수 있습니다. 일.. 2021. 9. 27.
다중 클래스를 사용하여 CSS 블롯 해제 다른 특성을 가진 6개의 서로 다른 100px 정사각형 상자가 필요하다고 가정해 봅시다. 테두리가 있는 빨간색 테두리가 있는 파란색 테두리가 있는 녹색 테두리 없는 빨간색 테두리 없는 파란색 테두리 없는 녹색 다음과 같이 각 항목에 대해 고유한 클래스를 만들 수 있습니다. .redwithborder { width: 100px; height: 100px; margin: 10px; float: left; background-color: red; border: 3px solid black; } .bluewithborder { width: 100px; height: 100px; margin: 10px; float: left; background-color: blue; border: 3px solid black;.. 2021. 9. 27.
CSS 페이지 로더 웹 사이트에 로드하는 데 시간이 걸리는 특정 페이지가 있는 경우 페이지 로더를 고려할 수 있습니다. 페이지 로더는 방문자에게 페이지가 로드되는 것을 시각적으로 전달하고 몇 초 동안 가만히 있도록 하는 모든 종류의 애니메이션입니다. 페이지 로더가 없으면 방문자가 사용자의 사이트가 응답하지 않는다고 생각하고 실망하여 클릭하기만 하면 됩니다. 페이지 로더는 또한 실제로 대기 시간이 훨씬 짧아 보일 수 있는 작은 방해물을 제공합니다. 페이지 로드 지연이 데이터베이스 읽기와 같은 것으로 인해 발생하는 경우 방문자가 이동하려는 페이지가 로드될 때까지 현재 페이지에 남아 있을 가능성이 높습니다. 이것은 방문자가 지연 전 페이지로 이동하는 대형 이미지와 같은 페이지 로딩 지연과 다릅니다. CSS 페이지 로더가 매우 잘.. 2021. 9. 27.
학습 CSS/HTML, 정적 또는 동적 중 어느 것으로 시작합니까? 그래픽 디자인 블로그는 CSS/HTML 학습에 대한 초보자들을 위한 조언에 대한 흥미로운 질문을 던진다: 신입생들이 정적 웹 디자인을 배워야 하는가 아니면 동적 웹 디자인을 배워야 하는가? 분명한 결론은 달릴 수 있기 전에 걷는 법을 배워야 한다는 것이지만, 웹에서는 이것이 더 이상 반드시 사실일 필요는 없다. 웹 사이트에 워드프레스를 설치하는 것은 꽤 쉬운 과정이며 초보자는 웹 디자인 및 레이아웃에 대해 빠르게 배울 수 있다. 사실, 거기엔 많은 정적 웹페이지들이 남아있지 않습니다. 그리고 거기 있는 것들은 모든 섹시한 역동적인 페이지들 옆에 공룡처럼 느껴집니다. 왜 근본적으로 구시대적인 형태의 웹 디자인이 무엇인지 배우는가? 하지만 이것은 흥미로운 토론이고, 옳고 그른 답은 없을 수도 있다. 저는 개.. 2021. 9. 27.

티스토리툴바