본문 바로가기

전체 글380

학습 CSS/HTML, 정적 또는 동적 중 어느 것으로 시작합니까? 그래픽 디자인 블로그는 CSS/HTML 학습에 대한 초보자들을 위한 조언에 대한 흥미로운 질문을 던진다: 신입생들이 정적 웹 디자인을 배워야 하는가 아니면 동적 웹 디자인을 배워야 하는가? 분명한 결론은 달릴 수 있기 전에 걷는 법을 배워야 한다는 것이지만, 웹에서는 이것이 더 이상 반드시 사실일 필요는 없다. 웹 사이트에 워드프레스를 설치하는 것은 꽤 쉬운 과정이며 초보자는 웹 디자인 및 레이아웃에 대해 빠르게 배울 수 있다. 사실, 거기엔 많은 정적 웹페이지들이 남아있지 않습니다. 그리고 거기 있는 것들은 모든 섹시한 역동적인 페이지들 옆에 공룡처럼 느껴집니다. 왜 근본적으로 구시대적인 형태의 웹 디자인이 무엇인지 배우는가? 하지만 이것은 흥미로운 토론이고, 옳고 그른 답은 없을 수도 있다. 저는 개.. 2021. 9. 23.
클라우디쉬 CSS 메뉴 태그 지정 자, 이건 좀 우스꽝스럽지만, CSS로 할 수 있는 어떤 것의 예를 들려고 의도된 것일 뿐입니다. 확실히 이것은 더 시원한 효과를 얻기 위해 다양한 방법으로 적응될 수 있다. 여기서의 이론은 여러분의 메뉴가 안에 있는 유연한 폭의 상자를 설치하는 것입니다. 각 메뉴 항목에는 고유한 클래스가 부여됩니다. 그런 다음 글꼴 스타일 및 위치 정보로 클래스를 정의합니다. 수직 위치 지정은 유연하지 않지만 수평 위치는 텍스트 정렬 및/또는 % 여백을 사용합니다. [라이브 예시] [CSS 보기] [다운로드 예제] 2021. 9. 23.
Apple iTunes와 유사한 CSS 메뉴 개발자 마크 올드리트는 어플리케이션에서 애플과 같은 멋진 메뉴를 만들기 위해 꽤 괜찮은 코드(XCode 프로젝트)를 게시했다. 저는 이 아이디어를 CSS에도 적용하려고 합니다. 꽤 잘 됐어요. 스크린샷을 보세요. CSS는 몇 개의 중첩되지 않은 목록만 사용합니다. 중첩된 목록에는 li:hover psuedo 클래스를 사용하지만 앵커 요소를 표시:block으로 설정하면 동일한 이미지를 수행할 수 있습니다. 좀 더 모든 브라우저에 친숙하게 만들 수 있습니다. 원하는 대로 예제를 다운로드하고 원하는 작업을 수행하십시오. [라이브 예시] [다운로드 예제] 2021. 9. 23.
단일 라인 vrs. 다중선 CSS 주문자 명단에 있는 스티브 스미스가 어떻게 CSS 포맷을 선택했는지에 대한 흥미로운 기사를 가지고 있다. 기본적으로 단일선과 다중선의 두 가지 방법이 있습니다. 다중선은 일반적인 접근 방식입니다. #wrapper { width:800px; margin:0 auto; } #header { height:100px; position:relative; } #feature .post { width:490px; float:left; } 이 스타일이 제가 쓰고 좋아하는 스타일입니다. Steve의 요점은 대형 CSS 파일에서 선택기는 빠르게 스캔하기가 더 어려워진다는 것이다. 따라서 모든 선택자와 각 선택자의 속성을 한 줄에 보관하면 파일을 찾는 것이 훨씬 쉬워집니다. 이와 같이: #wrapper {width:800p.. 2021. 9. 23.
Pure CSS로 로고 만들기 Dan Cole은 CSS만을 사용해서 로고를 만드는 흥미로운 기사를 가지고 있다. 왜일까? 더 빠른 로딩 시간 이미지가 비활성화된 상태에서 작업 확장 가능 다음과 같이 표시됩니다. 방법은 다음과 같습니다. #tower1 { position:absolute; top:51px; left:20px; width:20px; height: 30px; background-color: #333; } #tower2 { position:absolute; top:31px; left:45px; width:20px; height: 50px; background-color: #33E; } #tower3 { position:absolute; top:11px; left:70px; width:20px; height: 70px; bac.. 2021. 9. 23.
CSSJuice.com 게스트 포스트 안녕, 로이~ CSSJuice.com에 사용자가 선택할 수 있는 스타일시트를 설정하는 방법에 대해 설명하는 게스트 게시물이 있습니다. 이것 좀 봐! 2021. 9. 22.
폭발하는 CSS 메뉴 폭발한다는 것은 일종의 "메뉴 블록이 수직으로 확장되는 것처럼 보인다"는 의미입니다. 하지만 여러분은 이해하실 수 있을 겁니다. 롤오버 시 요소(또는 너비 또는 기타 여러 가지)의 높이와 오프셋을 변경할 수 있다는 이론입니다. 올바르게 설정하면 실제로 크기가 커지고 위치가 변경되지 않는 개체가 있을 수 있습니다. 이것은 디자인 밈의 호버박스 메뉴와 비슷합니다. 이는 웹 페이지에 놀랍고 흥미로운 효과가 될 수 있습니다. 이 개념은 (분명히) 다양한 용도로 채택될 수 있다. 또한 CSS로 모든 작업이 완료되었기 때문에 상당히 가볍고 빠르게 로딩됩니다. 항상 그렇듯이, 라이브 예제를 확인하고 원하는 대로 다운로드하고 조작하여 사용하십시오. 물론 포토샵을 제대로 하지 않아서 화소가 여기저기 떨어져 있습니다. =.. 2021. 9. 22.
인쇄 스타일시트 Jason from 37 Signals has a great post up on the Signal vs. Noise blog on how simple print stylesheets can be and still be effective. Basically using `display: none;` enmasse. People don’t need your header or your footer or your navigation. If they are trying to print your webpage they are trying to print the content, so give it to them. 여기 이론이 있다: #header, #navigation, #footer, .any, .random, ... 2021. 9. 22.
더 나은 레이아웃을 위해 이미지 공간 및 캡션 제공 이미지를 항상 한쪽으로 이동시키고 "flatright"와 같은 클래스를 제공하고 다음과 같이 선언하는 것만으로도 약간의 여유를 줄 수 있습니다. .floatright { float: right; margin: 5px; } 좋습니다. 하지만 좀 더 제어력을 높이고 이미지에 캡션을 추가할 수 있도록 상황을 좀 바꿔보죠. 이는 웹 기사에 멋진 터치와 보다 전문적인 레이아웃 느낌을 더합니다. 이미지에 클래스를 제공하는 대신, div 안에 넣고 div에 클래스를 지정합니다. div 안에 이미지 및 캡션을 포함합니다. Stop-motion image of an egg getting sliced in half. 그런 다음 CSS에 해당 클래스를 선언합니다. div.rightside_image { float: righ.. 2021. 9. 22.
동일한 줄의 왼쪽 정렬 및 오른쪽 정렬 텍스트 일부 텍스트를 왼쪽으로 정렬하고 일부 텍스트를 동일한 줄의 오른쪽으로 정렬하는 것이 유용할 수 있습니다. 예를 들어, 바닥글에서 왼쪽에는 저작권 정보를, 오른쪽에는 웹마스터 정보를 표시할 수 있습니다. HTML을 원하는 방법은 다음과 같습니다. Text on the left. Text on the right. 그런 다음 CSS 클래스에 텍스트-align: left와 텍스트-align: right의 왼쪽 및 오른쪽 값을 제공하면 각각 원하는 결과에 가까워지지만 새 단락 때문에 오른쪽 정렬 텍스트가 한 줄 아래로 충돌합니다. 대신 문단을 띄우십시오. .alignleft { float: left; } .alignright { float: right; } 그런 다음 부동산을 치우는 것을 잊지 마십시오. 데모 보기 2021. 9. 22.
부유물을 치우는 방법과 이유 여러분은 "정리 부유물"에 대해 들어본 적이 있지만, 정말로 그것을 이해하나요? 이 모든 문제는 부동 객체가 있는 객체의 높이에 제대로 추가되지 않는다는 것입니다. 아래에서 볼 수 있듯이 클래스가 "floated_box"인 이러한 div는 div "main_container" 안에 있지만 페이지에서는 컨테이너 div 외부에 있습니다. #main_container { width: 400px; margin: 20px auto; border: 2px solid #cccccc; padding: 5px; } .floated_box { float: left; width: 100px; height: 100px; border: 1px solid #990000; margin: 10px; } Some content. 우리.. 2021. 9. 22.
테이블 내부의 Div 사용 불멸의 적이라는 그들의 지위에도 불구하고, 당신이 필요하다면 디브와 테이블은 함께 일할 수 있다. 테이블에서 수직 중심을 사용할 수 있기 때문에 수평 및 수직 중심을 모두 갖춘 단세포 테이블을 사용하여 페이지 내용을 브라우저 창에 완전히 중앙에 배치하는 것이 다소 일반적인 기술입니다(대부분 고정 크기 콘텐츠에만 유용합니다. 테이블 안에 디브를 넣을 때 기억해야 할 한 가지 중요한 것은 디브가 특정한 테이블 셀 안에 있어야 한다는 것입니다. 즉, td나 tr 요소 안에 있는 요소 안에 있어야 한다는 뜻입니다. 무슨 말인지 보려면 다음과 같은 표를 보십시오. I'm text in a cell. I'm text in a cell. I'm text in a cell. I'm text in a cell. I'm .. 2021. 9. 22.
플립북 스타일 애니메이션을 위한 Pure CSS 사용 순수한 CSS를 사용하여 플립북 스타일 애니메이션을 만드는 CSS Play에 대한 훌륭한 튜토리얼이 있습니다. 여기에서는 "슬라이드"가 서로 쌓여 있다는 이론이 작용하고 있다. 그 위에 독특한 요소로 구성된 일련의 높은 직사각형 "슬라이스"가 있다. 각 슬라이드는 Div 바로 바깥에 밀어넣어 오버플로가 숨겨지고, 고유한 요소에 :hover 상태가 활성화되면 해당 슬라이드가 다시 이동되는데, 이는 일반적인 CSS 롤오버와 다르다. 그 결과 마우스를 디브를 가로질러 움직이면 정말로 재미있고 중독적인 방법으로 다양한 슬라이드가 활성화된다. 이 효과는 OS X에 대한 iMovie `08의 새로운 "스키밍" 기능과 약간 비슷합니다. 이 기술을 사용하면 사진 이미지를 순서대로 촬영하면 몇 가지 멋진 효과를 얻을 수.. 2021. 9. 22.
HangTab: 브라우저 창 가장자리에서 스티커 태그 만들기(중앙 콘텐츠도 포함) 요즘은 특히 모니터가 점점 커지고 해상도가 높아지면서 전체 웹 사이트를 브라우저 창에 수평으로 배치하는 것이 매우 건강한 기술입니다. 하지만 때로는 실제로 규칙을 어기는 것이 좋다. 패닉의 웹사이트에서 그들의 소프트웨어 코다를 확인하십시오. 이것은 브라우저 창이 상당히 작은 경우입니다. [MISSING IMAGE, 죄송합니다] 브라우저 창을 늘린 모습입니다. [MISSING IMAGE, 죄송합니다] "Hangtab"은 완전히 위치하는 디브입니다. #hang_tab { position: absolute; top: 7px; left: 0; width: 157px; height: 93px; } 다음은 CSS-Tricks 버전입니다. 자유롭게 다운로드하고 사용하세요. 데모 보기 파일 다운로드 2021. 9. 22.
배경 CSS가 포함된 Spice Up 임베디드 YouTube 만약 여러분이 웹사이트에 비디오를 추가하고 있다면, 내장된 유튜브 비디오를 사용하는 것은 분명히 고려해야 할 사항이다. 대역폭을 크게 절약할 수 있을 뿐만 아니라, 유튜브의 야생에 동영상을 공개하면 그렇지 않으면 얻을 수 없었던 노출을 얻을 수 있습니다. 한 가지 단점은 이 비디오가 어떻게 표시되는지 잘 제어할 수 없다는 것입니다. 기본적으로 간단한 YouTube 플레이어가 있습니다. 영화가 재생되면 유튜브가 보여줄 화질과 "관련 동영상"을 포함한 많은 것들을 통제할 수 없다. 여러분이 통제할 수 있는 것은 이 비디오가 삽입되는 방법과 위치입니다. 향을 돋우기 위해, 비디오의 배경을 디자인하고, 디브의 배경 이미지로 설정하고, 비디오를 디브에 삽입할 수 있습니다. 확인: [라이브 예시] [다운로드 예제] 2021. 9. 22.

티스토리툴바