시도해야 할 7가지 멋진 CSS3 기술
게시 됨: 2020-02-26HTML을 사용한 CSS(Cascading Style Sheets)의 발전은 놀라웠습니다. 최근에 도입된 Flexbox, CSS Grid 및 CSS 사용자 정의 속성과 같은 기능이 많이 있습니다.
지속적인 발전과 엄청난 잠재력은 개발자가 새로운 CSS 기술을 시도하고 할 수 있는 것의 한계를 뛰어 넘도록 매료시키는 것입니다. HTML 5와 CSS3 기술의 조합은 의심할 여지 없이 플래시 킬러입니다.
잘 실행된 CSS 계획이 디자인의 모든 측면을 거의 제어할 수 있고 더 나은 사용자 경험으로 이어질 수 있다는 것은 놀라운 일이 아닙니다. 이는 매우 필요합니다. 결국 방문자는 랩톱, 데스크톱, 태블릿 또는 기타 매체를 통해 사이트를 볼 때 특정 기대치를 갖게 됩니다.
그러나 유행하는 CSS 기술은 무엇입니까? 매력적인 사용자 친화적인 웹사이트를 디자인하는 것에 대해 이야기할 때 마음을 흔드는 것은 분명한 질문이 아닙니까?
이것이 우리가 웹 디자인 기술을 마스터하기 위한 몇 가지 새로운 CSS 기술과 팁을 제시한 이유입니다. 각각에는 몇 가지 설명과 샘플 코드 조각이 포함되어 있습니다.
그럼 바로 가봅시다!
1. Flexbox와 수직으로 정렬
이전 개발자는 텍스트 또는 기타 요소를 세로 중앙에 정렬하는 데 많은 어려움을 겪었습니다. 그러나 이제 새로운 CSS3 사양 Flexbox 가 도입된 후 상황이 훨씬 쉬워졌습니다.
속성 display: flex 는 사용자가 텍스트나 요소를 중앙에 정렬할 수 있는 간편한 방법을 제공합니다. 다음은 샘플 코드입니다!
HTML:
[xhtml]
<div class="align-vertical">
세로 중앙!
</div>
[/xhtml]
CSS:
[css]
.align-vertical {
배경: #FFA500;
색상: #흐흐;
디스플레이: 플렉스;
항목 정렬: 가운데;
높이: 200px;
}
[/css]
위의 CSS 코드에서 display: flex는 요소의 Flexbox 레이아웃을 설명하는 반면 align-items: center; 텍스트의 수직 센터링을 담당합니다.
결과:
2. 반응형 CSS 그리드
그리드 예외가 디자인의 다른 모든 것과 마찬가지로 응답하도록 만들지 마십시오.
CSS 그리드를 사용하여 그리드를 반응형으로 만들 수 있는 방법은 많습니다. 그리고 그것을 사용하는 가장 좋은 점은 장치 크기에 관계없이 원하는 모양을 제공하는 보다 유연한 그리드를 만들 수 있다는 것입니다.
이 외에도 CSS 그리드를 사용하면 동일하지 않고 동일한 열 크기로 작업할 수 있습니다. 사용자가 디자인을 자유롭게 제어할 수 있는 옵션이 포함된 훌륭한 기술입니다.
아래 예와 같이 다양한 중단점, 여러 차원의 높이를 사용하고 다른 배치를 수행할 수 있습니다.
HTML:
[xhtml]
<div 클래스="그리드">
<div class="grid-item"></div>
<div class="그리드 아이템"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
<div class="grid-item"></div>
<div class="그리드 아이템"></div>
<div class="그리드 아이템"></div>
</div>
[/xhtml]
CSS:
[css]
.그리드
{
디스플레이: 그리드;
그리드 템플릿 행: repeat(5, 1fr);
그리드 자동 열: calc((100vh – 3em) / 4);
grid-auto-flow: 열;
격자 간격: 1em;
높이: 100vh;
}
.grid-item:nth-child(3n)
{
배경색: 보라색;
}
.grid-항목:n번째-자식(3n + 2)
{
배경색: 분홍색;
}
[/css]
위 CSS 코드에서 사용된 분수 단위(fr)는 가이드라인에 따라 열린 공간을 구분하는 유연한 단위입니다. 각 fr 문은 열에 대한 것이므로 간격을 추가하고 그리드를 준비할 수 있습니다.
결과:
3. 텍스트 애니메이션
CSS로 배경 애니메이션을 만들었을 수도 있지만 이제는 사용자가 웹 사이트의 텍스트 요소와 상호 작용하고 참여하는 방식에도 영향을 미칩니다. 호버 조정에서 단어가 공중에 뜨게 하는 것까지 CCS3는 이 모든 것을 가능하게 했습니다.
사용자의 참여를 유도하는 요소가 많지 않은 웹사이트는 이러한 특성을 최대한 활용할 수 있습니다. 여기 그 작은 예가 있습니다.
HTML:
[xhtml]
<div class="메뉴">
<ul class="메뉴 목록" 데이터 오프셋="10">
<li class="Menu-list-item" data-offset="20" onclick>
라이브
<span class="Mask"><span>라이브</span></span>
<span class="Mask"><span>라이브</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick>
웃다
<span class="Mask"><span>웃음</span></span>
<span class="Mask"><span>웃음</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick>
사랑
<span class="Mask"><span>사랑</span></span>
<span class="Mask"><span>사랑</span></span>
</ul>
</div>
[/xhtml]
CSS:
[css]
$ 원근법: 60rem;
$글꼴 크기: 5.25rem;
$split-position: 50%;
$split-thickness: 3px;
$split-color: #FF2C75;
%글꼴 설정 {
글꼴 패밀리: "Comic Sans MS", system-ui, sans-serif;
글꼴 스타일: 일반;
글꼴 두께: 보통;
-webkit-font-smoothing: 앤티앨리어싱됨;
-webkit-font-kerning: 정상;
-webkit-text-size-adjust: 100%;
}
HTML,
신체 {
폭: 100vw;
높이: 100vh;
}
신체 {
@extend %글꼴 설정;
배경: 선형 그라데이션(45deg, #02001F, #008080);
변환 스타일: 보존-3d;
변환: 원근법($perspective);
위치: 고정;
디스플레이: 플렉스;
항목 정렬: 가운데;
justify-content: 센터;
}
.메뉴 목록 {
글꼴 크기: $글꼴 크기;
라인 높이: 1.2;
텍스트 변환: 대문자;
텍스트 정렬: 가운데;
디스플레이: 플렉스;
플렉스 방향: 열;
항목 정렬: 가운데;
변환: 회전X(-10deg) 회전Y(20deg); // JS로 덮어쓰기
}
.메뉴 목록 항목 {
위치: 상대;
색상: 투명;
커서: 포인터;
&::전에 {
콘텐츠: ";
디스플레이: 블록;
위치: 절대;
상단: $split-position;
왼쪽: -10%;
오른쪽: -10%;
높이: $split-thickness;
테두리 반경: $split-thickness;
margin-top: -($split-thickness / 2);
배경: $split-color;
변환: scale(0);
전환: 변환 .8s 입방 베지어(.16,1.08,.38,.98);
z-인덱스: 1;
}
}
.마스크 {
디스플레이: 블록;
위치: 절대;
오버플로: 숨김;
색상: $split-color;
상단: 0;
높이: $split-position;
전환: 모든 .8s 큐빅 베지어(.16,1.08,.38,.98);
스팬 { 디스플레이: 블록; }
}
.마스크 + .마스크 {
상단: $split-position – 0.1;
높이: 100 – $split-position + 0.1;
스팬 { 변환: translateY(-$split-position); }
}
.메뉴 목록 항목: 마우스 오버,
.메뉴 목록 항목:활성 {
.Mask { 색상: #FFF; 변형: 스큐X(12deg) translateX(5px); }
.Mask + .Mask { 변환: skewX(12deg) translateX(-5px); }
&::before { 변환: scale(1); }
}
[/css]
이와 같이 웹사이트를 위한 여러 동적 텍스트 요소를 만들 수도 있습니다. 재미있지 않아?
결과:
4. 열 레이아웃
일반적으로 열 기반 레이아웃은 Javascript를 사용하여 생성되는데, 이는 상당히 복잡하고 시간이 많이 소요됩니다. 그러나 CSS는 개발자와 웹 디자이너의 작업을 용이하게 하는 방법을 가져왔습니다.
다음은 웹 사이트의 열 기반 레이아웃을 만들 수 있는 CSS 열 규칙입니다.
HTML:
[xhtml]
<div class="컨테이너">
형식 빌드를 시작하려면 컨테이너 구성 요소를 배치합니다. 때로는 나중에 컨테이너를 제거할 수 있지만 컨테이너 구성 요소를 가져오면 대부분의 고정 너비 레이아웃에 대해 다양한 웹 브라우저에서 더 쉽게 처리할 수 있습니다. 웹 페이지 콘텐츠의 너비와 외부 여백 및 내부 패딩을 정의합니다.
</div>
[/xhtml]
CSS:
[css]
.컨테이너 {
/* 오래된 크롬, 사파리, 오페라 */
-웹킷 열 수: 3;
-웹킷 열 간격: 40px;
-webkit-column-rule-style: 솔리드;
-webkit-column-rule-width: 4px;
-webkit-column-rule-color: 주황색;
/* 오래된 파이어폭스 */
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule-style: 솔리드;
-moz-column-rule-width: 4px;
-moz-column-rule-color: 주황색;
/* 표준 구문 */
열 개수: 3;
열 간격: 40px;
열 규칙 스타일: 솔리드;
열 규칙 너비: 4px;
열 규칙 색상: 주황색;
}
[/css]
결과:
5. 화면 방향
많은 사람들은 화면 방향과 장치 방향이 모두 같은 목적으로 작동한다고 생각합니다. 하지만 그렇지 않습니다. 화면 방향이 장치와 약간 다릅니다.
장치가 방향을 감지할 수 없는 경우에도 화면은 항상 감지할 수 있습니다. 그리고 장치도 가능하다면 웹사이트의 인터페이스를 유지하거나 변경할 수 있도록 화면 방향을 제어하는 것이 좋습니다.
화면 방향을 처리할 수 있는 두 가지 방법이 있습니다. CSS 또는 자바스크립트. 하지만 CSS Orientation Media Query를 사용하면 쉽습니다. 브라우저 창이 가로 모드인지 세로 모드인지에 관계없이 콘텐츠의 형식을 조정할 수 있기 때문입니다. 더 잘 이해하기 위해 다음 예를 살펴보겠습니다.
HTML:
[xhtml]
<ul id="도구 모음">
<li>아</li>
<li>나</li>
<li>ㄷ</li>
</ul>
<p>단추 막대가 기기의 가장 긴 디스플레이 치수를 따라 늘어나도록 하려는 경우. 미디어 쿼리를 사용하여 빠르고 자동으로 수행할 수 있습니다.</p>
[/xhtml]
zzzzz
CSS:
[css]
/* 먼저 몇 가지 일반적인 스타일을 정의하자 */
HTML, 본문 {
너비: 100%;
높이: 100%;
}
신체 {
테두리: 1px 단색 검정;
-moz-box-sizing: 테두리 상자;
상자 크기: 테두리 상자;
}
피 {
글꼴: 1em sans-serif;
여백 : 0;
패딩: .5em;
}
울 {
목록 스타일: 없음;
글꼴: 1em 고정 폭;
여백 : 0;
패딩: .5em;
-moz-box-sizing: 테두리 상자;
상자 크기: 테두리 상자;
배경: 검정;
}
리 {
디스플레이: 인라인 블록;
여백 : 0;
패딩: 0.5em;
배경: 흰색;
}
/* 세로 모드의 경우 도구 모음이 맨 위에 표시되도록 합니다. */
@미디어 화면 및 (방향: 세로) {
#도구 모음 {
너비: 100%;
}
}
/* 가로 방향의 경우 왼쪽에 도구 모음 스틱이 필요합니다. */
@미디어 화면 및 (방향: 가로) {
#도구 모음 {
위치: 고정;
너비: 2.65em;
높이: 100%;
}
피 {
여백-왼쪽: 2em;
}
리 + 리 {
여백 상단: .5em;
}
}
[/css]
결과:
6. 쉼표로 구분된 목록
글머리 기호 목록이 정보를 보다 정확하고 명확하게 전달하기 위해 서면으로 매우 일반적으로 사용된다는 것은 의심의 여지가 없습니다. 그러나 대부분의 사람들이 어려움을 겪는 한 가지는 목록의 모든 지점에 쉼표를 추가하는 것입니다.
아래에 언급된 이 코드 스니펫을 사용하면 마지막 항목을 제외하고 목록에 쉼표를 쉽게 추가할 수 있습니다.
HTML:
[xhtml]
<울>
<li>애플</li>
<li>파인애플</li>
<li>커스터드 애플 </li>
</ul>
[/xhtml]
CSS:
[css]
신체{
글꼴 패밀리: Arial;
글꼴 크기:30px;
}
ul > li:not(:last-child)::after {
콘텐츠: ",";
}
[/css]
결과:
7. 애니메이션 체크박스
글쎄, 대부분의 사람들은 CSS 배경 및 텍스트 애니메이션에 대해 잘 알고 있습니다. 그러나 체크박스 애니메이션에 대해 아는 사람은 많지 않습니다.
예, 배경과 텍스트 외에도 확인란 섹션을 시각적으로 매력적으로 보이게 할 수도 있습니다. 대단하지 않아?
다음은 참조할 수 있는 예입니다.
HTML:
[xhtml]
<h1>아이콘 글꼴을 사용한 애니메이션 체크박스</h1>
<!– 체크박스 목록 –>
<울>
<리>
<입력 유형="확인란" 이름="하나" id="하나" />
<label for="one">체크박스 만들기</label>
</li>
<리>
<입력 유형="체크박스" 이름="둘" id="둘" />
<label for="two">레이블 지정</label>
</li>
<리>
<입력 유형="체크박스" 이름="쓰리" id="쓰리" />
<label for="three">아이콘글꼴 가져오기</label>
</li>
<리>
<입력 유형="확인란" 이름="4" id="4" />
<label for="four">레이블 유사 요소 아이콘화</label>
</li>
<리>
<입력 유형="확인란" 이름="다섯" id="다섯" />
<label for="five">애니메이션 아이콘 너비</label>
</li>
<리>
<입력 유형="체크박스" 이름="식스" id="식스" />
<label for="six">아이콘 색상 지정</label>
</li>
</ul>
[/xhtml]
CSS:
[css]
@수입
(텍스트에 대해 하나 또는 제목 및 다른 글꼴 2개 가져오기)
h1 {
글꼴 크기: 15;
패딩: 12px;
텍스트 정렬: 가운데;
}
울 {
너비: 290px;
여백: 0 자동;
}
울 리 {
목록 스타일 유형: 없음;
패딩: 10px;
}
/*사용자 정의 체크박스 아이콘 추가*/
라벨 {
위치: 상대;
패딩 왼쪽: 30px;
글꼴 크기: 14px;
커서: 포인터;
}
레이블:전, 레이블:후 {
글꼴 패밀리: FontAwesome;
글꼴 크기: 21px;
/*절대 위치*/
위치: 절대; 상단: 0; 왼쪽: 0;
}
레이블:{ 앞에
내용: '\f096'; /*선택하지 않음*/
}
레이블:{
내용: '\f046'; /*확인됨*/
/*체크된 아이콘은 기본적으로 0 max-width 및 overflow hidden*을 사용하여 숨겨집니다.
최대 너비: 0;
오버플로: 숨김;
불투명도: 0.5;
/*애니메이션 효과를 위한 CSS3 전환*/
전환: 모두 0.35초;
}
/*원래 체크박스 숨기기*/
입력[유형="체크박스"] {
디스플레이: 없음;
}
/*사용자가 체크박스를 선택하면 체크된 아이콘이 애니메이션으로 표시됩니다*/
input[type="checkbox"]:checked + label:after {
최대 너비: 25px; /*아이콘의 너비보다 큰 임의의 숫자*/
불투명도: 1; /*페이드 인 효과*/
}
/*재미를 위해 몇 가지 색상 추가*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {색상: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {색상: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {색상: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {색상: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {색상: hsl(300, 45%, 40%);}
[/css]
결과:
줄 바꿈 단어:
더 깊이 들어가 보면 CSS와 HTML의 가능성은 무궁무진합니다. 따라서 위에서 구현한 기술이 지식을 얻는 데 도움이 되고 훌륭한 웹사이트를 디자인하는 데 도움이 되기를 바랍니다.