프런트 엔드 웹 개발의 기본 사항을 배웠으며 몇 가지 새로운 아이디어를 시험해 보려고 합니다.
https://www.freecodecamp.org/news/how-to-make-your-front-end-projects/
완벽한 HTML 페이지를 코딩하고 적절한 스타일을 위해 스타일과 JavaScript를 추가하십시오.
그런 다음 일시 중지합니다. 잠시 뒤로 물러서서 브라우저에서 노력한 결과를 확인하십시오.
처음으로 약간의 프론트 엔드 개발을 배웠을 때의 경험이었습니다.
사이트의 기능에 대해 많은 생각을 했습니다. 그러나 모든 것을 한데 모으면 끔찍해 보였습니다.
피드백을 받기 위해 몇 명의 친구들과 작품을 공유하고 싶었습니다. 그러나 현재 상태에서 내 사이트는 준비되지 않았습니다.
알다시피, 기능은 이야기의 절반에 지나지 않습니다. 우리는 어떤 이유로 든 무언가의 출현이나 표현에 편향되어 있습니다.
아마도 우리는 전문적이고 잘 설계된 사이트를 신뢰할 가능성이 높습니다. 또는 잘 디자인 된 사이트의 미학적 가치는 기능상의 사소한 결함을 간과하는 데 도움이 될 수 있습니다.
이유가 무엇이든, 웹 개발에는 "후광 효과"가 존재합니다.
이 기사에서는 추악한 프론트 엔드 프로젝트를 더 빨리 보이게 만드는 몇 가지 쉬운 팁을 배웁니다.
출발점
아래는 스타일이 전혀 없는 간단한 HTML 페이지의 예입니다.
https://codepen.io/pg2020/pen/PoqOQmG
이것이 나머지 기사의 출발점이 될 것입니다. 작업하기에 더보기 좋은 페이지가 될 때까지 각 팁이 이전 팁 위에 작성됩니다.
영향 순서대로 진행하겠습니다. 즉, 우리는 가장 빠른 개선을 제공하고 갈수록 점점 더 작은 이익을 얻는 팁부터 시작할 것입니다.
negative 공간 추가
첫 번째 팁은 이해하기 쉽지만 실습에 주의를 기울여야 합니다.
'음수 공백'은 페이지에서 요소 사이의 빈 공간을 나타냅니다.
적절한 양의 음수 공간을 확보하면 페이지를 더보기 좋게 만들 수 있습니다.
특히 두 가지 작업을 수행합니다.
아래 예에서 CSS를 확인하십시오. 이것은 앞에서 본 간단한 예제에 기본적인 부정적인 공간을 추가합니다.
결과는 다음과 같습니다.
https://codepen.io/pg2020/pen/oNXoEWK
여기서 무슨 일이 있었는지 주목하십시오.
빈 공간이 너무 많으면 좋지 않습니다. 균형을 맞추는 것이 까다로울 수 있습니다.
서체를 페어링
다음 팁은 빠른 영향을 주는 또 다른 팁입니다.
기본 시스템 글꼴은 매우 안전하고 합리적입니다. 그들은 작동합니다.
그러나 글꼴을 선택하면 사이트의 목적과 느낌에 대한 큰 진술이 이루어집니다.
당신은 아이디어를 얻습니다.
그러나 그것을 실천하는 방법?
핵심은 글꼴 쌍을 사용하는 것입니다.
아이디어는 페이지의 다른 요소에 두 개의 글꼴을 사용하면 대비가 도움이 된다는 것입니다. 다시 말하면 요소가 눈에 잘 띄고 페이지를 더 쉽게 볼 수 있습니다.
그러나 오래된 글꼴을 페어링 해서는 안됩니다.
미학적 이유로 여러 가지 글꼴 쌍이 다른 글꼴보다 훨씬 나아 보입니다.
그래도 스스로 알아내는 것에 대해 걱정하지 마십시오. 평소와 같이 인터넷에 도움이 되는 자료가 있습니다.
fontpair.co를 확인하십시오. 다른 글꼴 쌍을 찾아보고 서로 어떻게 보이는지 확인할 수 있습니다.
원하는 페어링을 찾으면 프로젝트에서 가장 빨리 사용하는 방법은 Google Fonts로 이동하는 것입니다.
앞에서 본 기본 페이지 위에 구축 된 예제는 아래를 참조하십시오.
https://codepen.io/pg2020/pen/ZEGaraM
글꼴 크기 및 텍스트 정렬을 제어하여 모양을 개선 할 수도 있습니다.
꽤 나아 보이지 않습니까? 그리고 두 단계 만 거치면 됩니다.
색 구성표 얻기
저는 디자이너는 아니지만 색상 이론의 기초를 배우는 것의 가치에 감사합니다.
간단히 말해서, 페이지에서 사용하는 색상은 인상을 심어주는 데 큰 도움이 됩니다.
예를 들면 다음과 같습니다.
다시 말하지만, 색상을 신중하게 선택해야 합니다.
이론적으로는 사용하는 색상 간의 관계가 사이트의 모양에도 영향을 미칩니다.
색상 구성표를 신중하게 선택해야 합니다.
운 좋게도 이를 수행하는 방법은 여러 가지가 있습니다. Google "색상 구성표 생성기"만 있으면 선택할 수 있습니다.
내가 가장 좋아하는 도구 중 하나는 colormind.io입니다. 색 구성표를 생성하여 템플릿에서 미리 볼 수 있습니다.
물론 규칙이 깨질 수 있습니다. 더 불규칙한 색 구성표를 사용하면 문제가 발생할 수 있지만 주의해서 사용하면 페이지가 더 견고하고 눈에 잘 띄게 됩니다.
아래의 코드가 간단한 색 구성표를 사용하도록 업데이트 되었음을 참조하십시오.
https://codepen.io/pg2020/pen/MWwOQXq
구조 추가
현재 페이지가 아무리 잘 표시 되더라도 약간의 흔들림으로 페이지를 개선 할 수 있습니다.
섹션과 구조를 추가하면 더 긴 페이지의 단조로움이 깨질 수 있습니다.
요소 사이에 명확한 경계를 만들어 논리적 구조 및 / 또는 계층을 만들 수 있습니다. 그러면 뷰어가 페이지 레이아웃을 보다 쉽게 이해할 수 있습니다.
같은 색 구성표를 유지하되 조금씩 다를 수 있습니다.
더 많은 구조를 포함하도록 확장 된 아래 예를 참조하십시오. 내용은 <header>, <footer> 및 <div class = "content"> 요소로 구분됩니다.
이 예에서는 미디어 쿼리를 사용하여 더 작은 장치에서 페이지를 더 잘 표시합니다.
https://codepen.io/pg2020/pen/zYGPRVg
자세한 내용을 보려면 다음을 살펴보십시오.
많이 다시 작성하지는 않았지만 그 효과는 매우 두드러집니다.
일부 이미지 및 아이콘 추가
인간은 일반적으로 시각 생물입니다. 잘 배치 된 이미지 또는 아이콘을 사용하면 페이지를 보다 쉽게 보고 이해할 수 있습니다.
아래 코드는 기본 이미지에 간단한 이미지를 추가합니다. <div class = "content"> 요소에 어떻게 포함되어 있고 너비가 100 %로 설정되어 있는지 확인하십시오. 이렇게 하면 페이지 구조가 일관되게 유지됩니다.
이미지는 전체 색 구성표의 맥락에서 고려해야 합니다.
이를 위해 신진 CSS 아티스트 나 Photoshop 마법사 일 필요는 없습니다. 고품질 사진에 빠르게 액세스해야 하는 경우 Unsplash에서 무료 이미지를 검색 할 수 있습니다.
몇 개의 무료 아이콘조차도 차이를 만들 수 있습니다.
아래 예는 오른쪽 상단에 간단한 메뉴 아이콘을 추가합니다. Github 프로필 또는 다른 온라인 프로필에 아이콘을 추가 할 수도 있습니다.
https://codepen.io/pg2020/pen/zYGPWrY
다음 리소스에서 무료 아이콘을 빠르게 추가 할 수 있습니다.
애니메이션 추가
이 마지막 팁은 확실합니다.
2000 년대에 PowerPoint를 사용한 사람은 누구나 알고 있듯이 애니메이션을주의해서 사용해야 합니다.
너무 많은 애니메이션이 사용자를 혼란스럽고 짜증 나게 할 수 있습니다.
그러나 올바르게 사용하면 페이지를 훨씬 더 대화적이고 시각적으로 매력적으로 만들 수 있습니다.
사이트에 애니메이션을 추가하는 방법에는 여러 가지가 있습니다. CSS 선택기를 사용하여 사용자가 해당 요소를 가리킬 때와 같은 특정 이벤트에 대한 응답으로 스타일을 변경할 수 있습니다.
아래 예제는 사용자가 마우스를 올려 놓으면 이미지 불투명도를 50 %로 변경합니다.
또 다른 옵션은 Animate.css입니다. 즉석에서 바로 사용할 수 있는 여러 가지 사전 제작 된 애니메이션을 제공합니다.
아래 코드는 클릭시 버튼에 미묘한 애니메이션을 추가합니다.
https://codepen.io/pg2020/pen/xxGPWEZ
animation— 애니메이션의 경우 일반적으로 적을수록 좋습니다!
최종 결과
페이지의 전반적인 발전에 대해서는 이 Github 저장소를 참조하십시오.
디자인은 아직 갈 길이 멀다. 그러나 몇 가지 간단한 지침을 따르면 처음 시작했을 때보다 훨씬 나아 보입니다.
다음은 각 팁에 대한 간단한 검토입니다.
등록된 댓글이 없습니다.
