본문 바로가기

웹사이트4

[SITE] 웹사이트 - 텍스트유형03 TextType03 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 지난 유형들에 비해 조금 더 심화 버전입니다...! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 🫠 🫠 레이아웃 그리드 및 안내선을 이용하여 레이아웃 디자인을 완성합니다! 이젠 익숙해진 이미지스프라이트 기능을 위해 프레임을 추가하여 프로필 아이콘을 60px / 별점 아이콘 102px 씩 배치시켰습니다. 꼭 간격을 잘 맞춰주세요~! 😇 ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가장 중요합니다.(웹표준 준수 필수!) • 웹표준과 웹 접근성, 호환성을 놓치지 않도록 합니다. • 공통 선택자와 각각의 .. 2022. 9. 1.

[SITE] 웹사이트 - 텍스트유형02 TextType02 웹페이지 실습을 위한 텍스트 유형을 실습해보겠습니다! 이번 유형은 보통 텍스트로만 정보를 제공하고자 할 때 사용합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 😆 이번 유형은 이미지가 들어가지 않고 대신 아이콘이 들어가게 됩니다. 텍스르로만 이루어진 만큼 더 신경써서 작업해줍니다! 지난 텍스트 유형01과 똑같이 이미지스프라이트 기능을 위하여 프레임을 하나 더 만들어 아이콘을 60px씩 배치시켰습니다 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! • 구조를 먼저 꼼꼼하게 파악하여 큰 덩어리부터 마크업을 하는 것이 가.. 2022. 9. 1.

[SITE] 웹사이트 - 카드 유형02 CardType02 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! - 2줄 유형 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. TIP ! 카드 섹션의 디자인이 동일한데 많을 경우 컴포넌트를 이용하면 효율적인 작업이 가능하다. 컴포넌트를 처음 적용시킨 카드가 원본가 되며 원본을 수정하면 복붙했던 카드들도 함께 수정된다. 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1.구조를 먼저 꼼꼼하게 파악하여 시멘틱한 마크업을 하는 것이 가장 중요하다... 2022. 8. 10.

웹사이트 - 카드 유형01 CardType01 웹페이지 실습을 위한 카드타입 페이지 기초 실습하기! 피그마를 통해 원하는 카드 유형을 디자인 합니다. 디자인을 할 땐 만들고자 하는 페이지의 성격을 잘 파악하여 그리드를 만들어주는 것이 중요합니다. 그리드 작업이 완벽해야 후에 코딩을 하는 데 있어서도 오류 및 오차가 생기지 않아 불편해지지 않습니다! 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. 구조 파악하기 1. 카드 레이아웃은 보통 웹 메인 페이지의 섹션 부분에 위치한다. 때문에 시멘틱 태그인 요소는 부모와 자식의 관계를 나타낸다. 마찬가지로 요소 + 요소는 형제 관계를 나타낸다.*/.. 2022. 8. 10.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바