Leeyanggoo

폰트 어썸(Font Awesome)이란? https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 폰트 어썸(Font Awesome)은 디자이너, 개발자, 콘텐츠 제작자를 위해 다양한 아이콘을 제공하는 라이브러리입니다. 폰트 어썸에서 제공하는 아이콘들은 벡터 형식으로 제공되어 고화질의 아이콘을 사용할 수 있습니다. 해당 라이브러리를 사용하게 되면 HTML 요소에 클래스를 추가하여 아이콘을 삽입할 수 있으며, 다양한 크기와 ..

개발자도구로 페이지 전체 스캔하기!! 스캔하려는 페이지에서 F12(우클릭 '검사')를 누른다 Ctrl + Shift + P로 실행 명령어 창을 켠다. '스크린샷(screenshot)'이라고 치게 되면 나오는 "원본 크기 스크린샷 캡처(Capture full size screenshot)"를 누른다. 웹 페이지의 전체 스크린샷이 png로 저장됩니다!! 외에도 특정 영역만 포함하는 스크린샷 등 다양한 옵션이 있으니 유용하게 쓰자!! 피그마를 이용해 시안을 만들자!! 원본 크기 스크린샷 캡처(Capture full size screenshot)로 모은 이미지들을 피그마에서 한데 불러냅니다. 자신이 만들고자 하는 페이지에서 참고하면 좋을 소스들을 잘라서 이어붙입니다. 더보기 참고 : 피그마(Figma)는 너비 ..

읽기 전에 잠깐! 이전 "레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지+텍스트 유형 레이아웃 만들기 포스팅 보러 가기 🙄 슬라이드 유형 레이아웃 만들기 포스팅 보러 가기 🙄 텍스트 유형 레이아웃 만들기 포스팅 보러 가기 🙄 푸터 유형 레이아웃 만들기 포스팅 보러 가기 이번에는 지금까지 만들었던 모든 레이아웃을 하나로 합쳐서 한 페이지를 구성했습니다. 이제 좀 웹 페이지 같은 모양이 나오나요?ㅎㅎ 여러 개로 구성한 레이아웃을 합칠 때는 공통적으로 적용할 수 있는 여러 항목을 확인하는 게 중요합니다. 🧐 레이아웃의 공통 속성을 잘 확인하자! 하나로 합친 웹..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 푸터 유형 레이아웃이란? 푸터(footer)는 웹 페이지의 하단에 위치한 영역으로, 보통 사이트 내비게이션, 저작권 정보, 연락처 등과 같은 보조적인 정보를 담고 있습니다. 푸터 유형은 페이지마다 다양하게 제작할 수 있으며 일반적으로는 두 가지 유형이 있습니다. 1. Fixed Footer 고정 푸터는 웹 페이지의 하단에 고정되어 스크롤을 내려도 항상 화면에 보이는 유형입니다. 사용자가 어떤 곳을 보고 있든지 항상 접근할 수 있기 때문에 편리합니다. 하지만 ..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 텍스트 유형 레이아웃이란? 텍스트 유형은 이전의 카드 유형의 레이아웃에서 조금 더 정보 제공을 위한 텍스트가 위주인 레이아웃입니다. 작은 소주제를 가진 섹션이나 블로그 포스팅 등 정보 세트를 표시하는 데 사용할 수 있습니다. 텍스트 유형 레이아웃을 올바르게 채택하면 인터페이스 정보를 효과적으로 구성하고 사용자 경험을 크게 향상시킬 수 있습니다. UI/UX 디자인의 여러 유형을 소개하는 GE Health Care(Designed with healthcare i..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 슬라이드 유형이란? 슬라이드 유형은 주로 웹의 메인 페이지에서 자주 활용합니다. 주로 브랜드의 중요 이벤트나 홍보, 소식 등을 보여주거나 제공하는 메인 서비스를 나열하기도 합니다. 지정한 몇 개의 레이아웃이 넘어가는 형태로 제작됩니다. CJ AI center의 메인 페이지 CJ의 AI center는 메인 페이지에 슬라이드 유형을 사용하고 있습니다. AI center가 제공하는 메인 기술 4가지를 소개하고 있습니다. 이런 슬라이드 유형은 사용자에게 보여주고자 ..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 + 텍스트 유형이란? 지난번에 살펴본 이미지 유형은 광고의 대표 이미지나 브랜드 철학을 담은 이미지로 웹 페이지를 나타냈습니다. 이미지 + 텍스트는 사용자가 이동하려는 웹 페이지의 예시를 보여주고 검색을 유도하거나, 텍스트에 담은 정보를 보여주는 레이아웃입니다. design by webflow.com 여러 웹 디자인을 볼 수 있도록 소개하는 webflow는 페이지의 검색 결과를 다음과 같이 보여주고 있습니다. 우리도 이렇게 텍스트와 이미지가 잘 어우러..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 유형이란? 이미지 유형의 레이아웃은 웹 페이지가 담고 있는 정보의 대표적인 콘셉트를 보여줄 때 사용합니다. 브랜드의 대표 아이덴티티(identity)나 광고, 디자인에서 담고자 하는 철학 등을 나타내기도 합니다. 이미지 혹은 브랜드의 대표 철학 등을 사용자가 볼 수 있는 한 화면에 꽉 채워서 보여주는 경우가 많습니다. 브랜드 아이덴티티, 웹 디자인 및 개발 등의 서비스를 제공하는 디지털 에이전시 "Aino"의 웹 페이지 예시로 디자인 에이전시 "Aino"의 웹 페이지를 가져와봤습니다. 페이지 메인에 ..

카드형 디자인이란? 카드형 디자인은 위의 예제처럼 이미지와 텍스트가 함께 어우러진 형태의 요소들로 구성한 웹 페이지 디자인을 뜻합니다. 카드에는 제품 미리보기, 블로그 게시물, 비디오 이미지 등 웹 페이지 또는 앱이 보여주고자 하는 정보가 묶여 있습니다. 이런 카드형 디자인은 구성에 따라 사용자에게 유연하게 제공할 수 있고, 한눈에 정보를 보여줄 수 있다는 점에서 효과적인 디자인 형태라고 할 수 있겠습니다! 🧐 시작은 HTML 구성부터!! 레이아웃을 만들 땐 페이지의 공간을 차지할 이미지와 텍스트를 담을 구획부터 나누면 작업이 편리합니다. 스타일을 입히기 위해선 적용할 공간부터 만들어야겠죠? 😅 HTML은 의미에 따라 마크업한다! 이전에 포스팅 했던 "시멘틱과 논리적 마크업" 혹시 알고 계시나요? 먼저 ..

문자 Font 웹 페이지 제작에 있어 문자를 꾸미고 다루는 것은 매우 중요한 부분입니다. 오늘은 CSS에서 문자를 꾸미는 여러 방법에 대해 알아보겠습니다! font-family 문자에 사용할 글꼴을 정하는 속성입니다. 글꼴의 이름이 한글인 경우는 따옴표로 감싸고, 여러 개의 글꼴이 있다면 쉼표로 구분합니다. font-family의 속성값이 여러 개인 경우 순서대로 글꼴을 읽어 들입니다. font-family: "나눔고딕", Arial, sans-serif; font-size 문자의 크기를 정하는 속성입니다. 기본적인 문자의 크기는 16px이며, CSS에서 사용하는 단위는 아래와 같습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 20px; % 부모 요소의 글자 크기를 ..

grid란? gird는 다른 레이아웃 속성보다 비교적 직관적인 속성입니다. gird layout은 행과 열로 구성되는 표를 생각하면 쉽게 이해할 수 있습니다. grid를 이용한 Holy Grail layout를 구성하는 예시로 설명해 보겠습니다. Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. 위의 Holy Grail layout을 행과 열로 나눈다면 다음과 같이 총 9칸의 표라고 생각할 수 있습니다. gird layout은 각각의 요소들에게 "gird-area"라는 속성을 부여해 공간을 ..

flex란? flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방식입니다. flex의 선언과 속성은 다음과 같습니다. dispaly: flex;//flex 선언 flex: 1; = flex: 1 1 0; = flex-grow: 1; flex-shrink: 1; flex-basis: 0; /* (flex: 숫자)는 위의 값이 축약되어 있다.*/ /* flex-grow는 생략이 불가능하며, 나머지는 가능하다. */ flex의 다양한 속성 먼저 flex의 다양한 속성에 대해 나열하고 예시를 통해 하나씩 알아가도록 하겠습니다. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 ..

선택자Selector CSS의 선택자는 스타일을 적용할 HTML 요소를 선택하여 디자인할 때 사용합니다. 이 예문은 p 요소 안의 텍스트는 빨간색으로 지정하고, 내부 여백을 5px을 준다는 의미를 담고 있습니다. 중괄호({ }) 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 '세미 콜론(;)'으로 구분합니다. 타입 선택자type selector See the Pen CSS_selector_1 by leeyanggoo (@leeyanggoo) on CodePen. type 선택자는 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다. 위의 예제는 p 태그 안의 텍스트를 빨간색으로 표시하는 속성을 부여하고 있습니다. 아이디 선택자id selector CSS의 선택자는 HTML 요소 중 같은 ..

이전 HTML에서 배웠던 블록 레벨 요소(Block-level elements)와 인라인 요소(Inline elements) 기억하시나요? 웹 페이지의 레이아웃을 구성하는 'float'는 세로로 나열되는 블록 요소를 가로로 배치할 수 있게 해주는 CSS 속성입니다. 또한 'clear'는 float 속성을 제거하고 다시 원래대로 되돌리는 CSS의 속성입니다. 이 두 가지 속성을 이용해 레이아웃을 요소를 구성하는 방법을 알아보겠습니다! float float 속성은 요소를 왼쪽이나 오른쪽으로 부유시켜 그 주변의 요소와의 관계를 설정합니다. 부유(floating)된 요소는 그 위치를 기준으로 다른 요소가 배치되며, 주변 요소들은 부유한 요소의 높이를 인식하지 못하게 됩니다. float는 'left'와 'righ..

id 선택자 CSS의 선택자는 HTML 요소 중 같은 요소일지라도 각자 다른 속성을 부여할 때 사용합니다. 그중 id 선택자는 여러 요소 중 특정한 이름을 부여하는 선택자이며 중복해서 사용할 수 없습니다. See the Pen CSS_id by leeyanggoo (@leeyanggoo) on CodePen. id 선택자는 HTML 요소 태그의 시작에 과 같이 붙여서 나타냅니다. 또한 id 선택자의 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다. class 선택자 class 선택자는 HTML 요소 중 같은 이름을 갖는 특정한 집단을 모아 속성을 부여하는 선택자입니다. 즉 특정 집단을 class라고 표현하는 것이며, 여러 개의 요소에 같은 class 이름을 부여할 수 있습니다. See the P..

CSS는 Cascading Style Sheets의 약자로서 HTML의 요소들을 어떻게 보여줄지 정의하는 스타일 시트 언어입니다. 이 CSS를 적용하는 표현 방법으로 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트가 있습니다. 한번 알아보겠습니다. :) 내부 스타일 시트Internal style sheet 내부 스타일 시트는 HTML의 문서 안에 태그를 이용하여 요소에게 적용하는 방식입니다. 대부분 태그는 HTML 문서의 태그 안에 넣습니다. See the Pen CSS_1 by leeyanggoo (@leeyanggoo) on CodePen. 이처럼 태그가 HTML 문서 내부에 쓰여 적용되는 방식을 '내부 스타일 시트'라고 합니다. 이 방식은 해당 HTML 문서에만 스타일을 적용할 수 있습니..