본문 바로가기

전체 글380

여전히 널리 사용되고 있는 사용되지 않는 속성 목록 "비사용" 요소는 W3C가 오래된 것으로 지정한 요소입니다. 이러한 요소는 사용해서는 안 되며 일반적으로 "불량 코드"로 간주됩니다. 엄격한 DOSCTYPE를 사용할 경우 사용되지 않는 요소는 유효성 검사를 통과하지 못합니다. 문제는, 사람들이 여전히 그것들을 사용한다는 것입니다. 사실, 그 중 많은 것들이 상당히 널리 사용되고 있습니다. 왜일까요? 왜냐하면 그들은 여전히 작동하니까요! 단지 그것들이 사용되지 않는다고 해서 그것들이 작동하지 않는다는 것은 아니다. 그것은 단지 사용되지 않는 요소들이 하던 것을 할 수 있는 "새로운" 방법이 있다는 것을 의미한다. 이러한 요소들이 작동을 멈출까요? 꼭 그렇다고는 할 수 없지만, 저는 결국 그렇다고 믿는 경향이 있습니다. 여기 여러분이 항상 볼 수 있는 몇 .. 2021. 9. 24.
아름답고 기능적인 10가지 파란색 웹 레이아웃 때때로 디자인에 영감을 얻는 가장 좋은 방법은 다른 훌륭한 디자인을 보는 것이다. 이러한 디자인은 화려함보다 아름다움과 기능을 보여줍니다. 제가 좋아하는 디자인이지만 기능성은 떨어지는 놀랍고 화려한 디자인들이 있습니다. 이것들은 그들 중 하나가 아니다. 이 게시물은 파란색으로 표시됩니다. 인타빌 포워드 엔지니어링 존 밀스 라오 스튜디오를 보세요. 트래블 다이브 데어링 파이어볼 웨이크 인터랙티브 바르텔메 디자인 메뉴 가져오기 덴네세 @ 여름 2021. 9. 24.
* { 여백: 0; 패딩: 0; } 더 이상 쿨하지 않음 제가 오랫동안 주장해온 기술 중 하나는 다음과 같습니다. * { margin: 0; padding: 0; } 이는 "CSS 재설정" 이론의 일부로서, 여러 브라우저에서 디자인을 일관되게 유지할 수 있도록 지원합니다. 이 기술은 모든 브라우저에서 작동하기 때문에 부정적인 것은 전혀 고려하지 않았습니다. 크리스찬 몬토야의 이 글을 읽기 전까지는 다음과 같이 지적했다. 이렇게 해서 브라우저 간의 패딩과 여백의 모든 차이를 없앴기 때문에 나는 자유롭게 내 페이지를 스타일링할 수 있었다. 안타깝게도 이는 좋은 방법이 아닙니다. 렌더링 에이전트에서는 특히 큰 웹 페이지와 같이 문서의 모든 요소에 규칙을 적용하는 것이 매우 힘들며, 이는 특히 기본 스타일의 제출 버튼을 원하는 경우 많은 기본 스타일을 파괴할 수 있습.. 2021. 9. 24.
CSS를 사용한 더 나은 블록 인용구 블록 따옴표는 텍스트의 특정 섹션을 다른 웹 사이트나 다른 원본에서 가져올 때 지정하는 HTML 요소입니다. 브라우저마다 블록 견적에 대한 기본 제공 스타일이 다르며, 종종 단순한 왼쪽 여백에 불과합니다. 블로거들이 흔히 하는 것처럼 인용구를 많이 사용한다면, 이 요소를 통제하고 CSS 스타일을 제공하는 것이 좋습니다! 블록 따옴표 영역의 왼쪽 위 및 오른쪽 아래에 큰 그래픽 따옴표를 넣는 것이 일반적인 기법입니다. 이러한 CSS3 이전, 복수 백그라운드일이 아닌 날에는 약간의 추가 HTML 없이 이 작업을 수행할 수 있는 좋은 방법이 없습니다. 가장 쉬운 기술은 요소와 함께 요소를 추가하는 것입니다. 이상적이진 않지만, 효과가 있습니다. 대부분의 스타일을 CSS에 블록 인용 요소를 적용한 다음 두 번째.. 2021. 9. 24.
스타일과 함께 제출 슈퍼 베이직 제출 버튼을 만드는 방법은 다음과 같습니다. 이 기본 버튼을 이미지로 바꾸려면 유형을 이미지로 변경한 다음 다음과 같은 원본 이미지를 선언하기만 하면 됩니다. 클래스 선언의 스타일을 추가하려는 경우(예: 부동표, 테두리 등) 클래스 선언을 추가할 수도 있습니다. 예제 제출 버튼으로 예제 페이지를 구성했습니다. 또한 원하는 대로 예제 페이지를 다운로드하고 원하는 작업을 수행하십시오. [라이브 예시] [다운로드 예제] 2021. 9. 24.
다양한 패딩 두께를 가진 태그 구름 종종 "태그 클라우드"는 과도한 사용과 가벼운 사용 태그를 구별하기 위해 글꼴 크기와 글꼴 가중치의 변화를 사용한다. 여기 또 다른 접근법이 있다: 다양한 양의 패딩을 통해 크기가 다른 롤오버 박스를 사용한다. 다음과 같이 CSS에서 다양한 크기를 클래스로 설정할 수 있습니다. ul { margin-top: 50px; list-style-type: none; } li { float: left; } ul li a { text-decoration: none; line-height: 2.3em; } ul li a.size1 { color: #666; padding: 2px; } ul li a.size1:hover { background-color: #999; color: white; } ul li a.size.. 2021. 9. 24.
블로그러시: 힙 아니면 하이프? 아직 말하기 이르지만, 눈치 채셨겠지만 이 사이트의 사이드바에 설치했습니다. 나의 희망은 그것이 독자와 웹마스터 모두에게 훌륭한 서비스가 되는 것이다. 거래 내용은 다음과 같습니다. 블로그에 이름, 위치 및 RSS 피드를 제공합니다. 블로그러시 위젯을 사이트에 설치합니다. 대부분의 다른 위젯과 같은 javascript의 일부일 뿐입니다. 위젯은 사용자 자신의 블로그 콘텐츠를 대상으로 하는 다른 블로그의 헤드라인을 표시합니다. 당신의 사이트가 페이지뷰를 얻을 때마다, 당신은 하나의 크레딧을 얻는다. 블로그 헤드라인은 블로그러시 위젯과 함께 다른 블로그에 표시됩니다. 디스플레이가 게시될 때마다 크레딧이 소요됩니다. 블로그러시를 참조하는 사람들로부터 학점을 얻을 수 있는 10단계 제휴 프로그램도 있다. 효과가.. 2021. 9. 24.
CSS-트릭스의 장점 튜토리얼: 10가지 무료 다운로드 예! CSS-Tricks에 오신 것을 환영합니다! Cascading 스타일 시트 사용에 대한 팁, 기술 및 자습서를 제공하느라 바빴습니다. 그 동안, 우리는 다양한 기술을 보여주는 많은 예시 페이지들을 작성했습니다. 여기 처음 오신 분이라면 이러한 몇 가지 예를 돌아보겠습니다. 애플 유사 CSS 메뉴 대체 스타일시트 설정 방법 웹 페이지의 네 모서리에 있는 이미지 CSS 메뉴 분해 중 웹 페이지의 아래쪽 페이드 아웃 확장 가능한 "노트" 상자 DIV 무료 CSS 템플릿인 홈베이스 행 탭 임베디드 유튜브 비디오의 배경 크레이지 메뉴 2021. 9. 24.
CSS에서 색상에 대한 '변수' 설정 CSS는 원래 실제 변수를 지원하지 않기 때문에 "변수"라고 말합니다. 논쟁은 그래야 할지 말아야 할지에 대해 다소 뜨겁다. 저는 그것에 대해 입장을 취하지는 않겠습니다. 하지만 한 걸음만 더 내딛으면 같은 일을 어떻게 해낼 수 있을지에 대한 교묘한 해킹이 있습니다. 어쨌든 색상은요. 다음과 같은 설명 섹션을 CSS에 포함하기만 하면 됩니다. /* Light Blue: #afd2f0 Dark Blue: #0f4574 Bright Red: #fa0606 Link Color: #3674bb Post Background Color: #fffbd8 Post Title Color: #9a8f2e */ CSS 전체에서 적절한 개체에 대해 이 16진수 값을 사용합니다. 그런 다음 링크 색상에 사용하는 색상을 변경하려.. 2021. 9. 24.
비알림:방문 기법 As you may know, you can define a style for `a:visited` in your CSS, which will apply itself to links in visitors browsers that they have already visited. The usefulness of this is debatable, but no matter what, it’s best to not apply anything really bold or distinct to this style. At best, it could be a slight annoyance to your visitors. At worst, it might confuse them to the point they don’t r.. 2021. 9. 24.
CSS 트릭의 새로운 모습 CSS-Tricks의 새로운 룩에 오신 것을 환영합니다. 저는 이제 일을 시작하고 CSS-Tricks에게 새로운 모습을 보여줘야 할 때라고 결심했습니다. 마음에 들면 좋겠어요. 예전 사이트보다 형태와 기능 면에서 훨씬 더 좋은 것 같아요. 피드백, 제안 또는 의견이 있으면 연락처 양식을 사용하거나, 이메일을 보내거나, 의견을 남겨 주십시오. 2021. 9. 24.
그런지 스타일 CSS 메뉴(무료 다운로드) 그런지 스타일이 요즘 유행이에요. 저는 무료 다운로드를 위해 꽤 간단한 "grungy" 메뉴를 내놓아야겠다고 생각했습니다. 원하는 대로 다운로드, 변경 및 사용할 수 있습니다. [라이브 예시] [다운로드 예제] 2021. 9. 24.
관심 링크 웹 인터페이스 디자인의 새로운 미니멀리즘 너와 나... 그리고 CSS가 동시에 Firefox와 IE에서 CSS 코드를 동시에 편집합니다. 창만. 빠른 웹 타이포그래피 팁: 요소의 아래쪽 여백을 제시하십시오. ModalBox: 가장 좋은 다운로드-수정-사용 "라이트박스" 시스템입니다. 13가지 스타일: 간편하면서도 멋진 무료 CSS 메뉴 디자인. 2021. 9. 24.
글꼴 렌더링 차이: 파이어폭스 vs. IE 대 사파리 CSS를 사용하여 텍스트를 표시할 방법을 선언할 때 다음과 같이 구체화할 수 있습니다. p { font-family: Verdana; background-color: #7A2121; color: #B93333; text-decoration: underline; word-spacing: Normal; text-align: left; letter-spacing: 1px; text-indent: 15px; line-height: 16px; font-size: 10px; font-weight: bold; font-style: italic; text-transform: uppercase; } 그게 다가 아닙니다. 하지만 그렇게 구체적으로 설명한다고 해도 실제 렌더링된 텍스트가 어떻게 보이는지에 대해서는 브라우저마.. 2021. 9. 24.
학습 CSS/HTML, 정적 또는 동적 중 어느 것으로 시작합니까? 그래픽 디자인 블로그는 CSS/HTML 학습에 대한 초보자들을 위한 조언에 대한 흥미로운 질문을 던진다: 신입생들이 정적 웹 디자인을 배워야 하는가 아니면 동적 웹 디자인을 배워야 하는가? 분명한 결론은 달릴 수 있기 전에 걷는 법을 배워야 한다는 것이지만, 웹에서는 이것이 더 이상 반드시 사실일 필요는 없다. 웹 사이트에 워드프레스를 설치하는 것은 꽤 쉬운 과정이며 초보자는 웹 디자인 및 레이아웃에 대해 빠르게 배울 수 있다. 사실, 거기엔 많은 정적 웹페이지들이 남아있지 않습니다. 그리고 거기 있는 것들은 모든 섹시한 역동적인 페이지들 옆에 공룡처럼 느껴집니다. 왜 근본적으로 구시대적인 형태의 웹 디자인이 무엇인지 배우는가? 하지만 이것은 흥미로운 토론이고, 옳고 그른 답은 없을 수도 있다. 저는 개.. 2021. 9. 24.

티스토리툴바