사이트 만들기15 종합형 + 반응형 01 사이트 만들기 종합형 지금까지 공부한 다양한 유형들을 한데 모아서 사이트를 만들어보고자 합니다. + 반응형도 추가해줍니다. 01. Figma Figma로 전체적인 틀을 잡아줍니다. 02. HTML 헤더, 슬라이드, 이미지, 이미지/텍스트 카드, 배너, 텍스트, 푸터 순으로 배치합니다. 소스가 길어서 접어놓았습니다. 코드 보기 { 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 헤더 영역 간식박스 에너지 보충 영양식 24시간 식사 키친 박스 간식박스 설치 온라인 주문하기 문의하기 슬라이드 영역 SNACKBOX 에너지가 필요할 때 에너지가 부족한 당신!! 식사를 하기에는 애매하고 출출.. 2022. 9. 15. 슬라이드 유형 01 사이트 만들기 : 슬라이드 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 슬라이드 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 슬라이드 영역 ANIMAL 동물의 왕국 동물의 왕국입니다 자세히 보기 정보 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 } 03. CSS 맞춰놓은 틀에 CSS를 예쁘게 입혀줍니다. { .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background.. 2022. 9. 6. 배너 유형 01 사이트 만들기 : 배너 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 배너 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 배너 영역 동물의 왕국 더 다양한 정보는 유튜브를 통해 제공하고잇습니다. youtube.com 배너 유형01 } 03. CSS 맞춰놓은 틀에 CSS를 예쁘게 입혀줍니다. { .banner__inner { background-image: url(img/banner_bg01.jpg); background-repeat: no-repeat; background-positio.. 2022. 9. 6. 푸터 유형 01 사이트 만들기 : 푸터 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 푸터 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 .. 2022. 9. 6. 이미지 / 텍스트 유형 01 사이트 만들기 : 이미지 / 텍스트 유형 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이미지 / 텍스트 유형 만들기 첫번째 시간입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유요한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 } 03. CSS 피그마 수치대로 CSS를 입혀줍니다. { /* fonts */ @im.. 2022. 9. 1. 헤더 유형 01 사이트 만들기 : 헤더 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 헤더 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 } 03. CSS 피그마 수치대로 CSS를 입혀줍니다. { @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-w.. 2022. 9. 1. 텍스트 유형 03 사이트 만들기 : 텍스트 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 텍스트 유형 세번째 시간입니다. 전체 구조는 간단하지만 세부 구조가 좀 까다로워 졌습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달전만해도 여러 원인들로 인해 자 존감이 밑바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속 으로 울고싶다를 외쳤던 저였는데 이제는 조금이나마 이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해 있는 제가.. 2022. 8. 30. 텍스트 유형 02 사이트 만들기 : 텍스트 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 텍스트 유형 두번째 시간입니다. 별 다를건 없습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { ANIMAL 초식 동물 소개하기 초식동물 중 귀여운 동물들을 소개 해보려고 합니다. 잘 봐주세요! 기린 기린입니다기린입니다기린입니다기린입니다 기린입니다기린입니다기린입니다기린입니다 기린입니다기린입니다기린입니다 판다 판다입니다판다입니다판다입니다판다입니다 판다입니다판다입니다판다입니다판다입니다 판다입니다판다입니다판다입니다 토끼 토끼입니다토끼입니다토끼입니다토끼입니다 토끼.. 2022. 8. 30. 텍스트 유형 01 사이트 만들기 : 텍스트 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 텍스트 유형 입니다. 이미지 유형과 별 다를게 없으며 쉽습니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 순하고 순둥한 동물들 리스트 입니다. 초식 동물들 초식 동물들 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 더보기 초식 동물들 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 초식동물초식동물초식동물초식동물초식동물 더보기 초식 동.. 2022. 8. 30. 이미지 유형 03 사이트 만들기 : 이미지 유형 03 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 그리드 레이아웃 방식으로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 페이스북 페이스북 페이스북 페이스북 페이스북 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트입니다. 페이스북 페이지이동 바다에 사는 동물들 바다에 사는 귀엽고 귀여운 동물들 리스트.. 2022. 8. 19. 이미지 유형 02 사이트 만들기 : 이미지 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01번 유형과 달리 애니메이션 효과가 들어갑니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 귀여운 동물들 귀엽고 귀여운 동물들 리스트 입니다. 멍멍이 자세히 보기 토끼 자세히 보기 판다 자세히 보기 } 03. CSS 텍스트 박스에 blur효과와 투명도를 줘서 예쁘게 꾸며줍니다. 이후 텍스트 박스에 hover와 bottom을 -100px를 주어 보이지 않게 했다가 마우스를 올리면 0을 주어 올라오게 하는 .. 2022. 8. 18. 이미지 유형 01 사이트 만들기 : 이미지 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 이번 시간에 공부해 볼 유형은 이미지 유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 피그마 구도에 맞게 틀을 잡아줍니다. { 육식 동물들 사납고 무서운 동물들 리스트 입니다. 무서운 맹수 호랑이 호랑이는 무섭습니다. 무서운 맹수입니다. 호랑이는 사납습니다. 호랑이는 매우 위협적인 동물입니다. 만나면 도망가야합니다. 자세히 보기 사나운 맹수 늑대 늑대는 무섭습니다. 무서운 맹수입니다 늑대는 사납습니다. 늑대는 매우 위협적인 동물입니다. 만나면 도망가야 합니다. 자세히 보기 } 03. CS.. 2022. 8. 18. 카드 유형 03 사이트 만들기 : 카드 유형 03 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 가장 먼저 공부해 볼 유형은 카드유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 이번 카드 만들기에는 ir 효과(이미지 대체 효과 alt)와 1줄 줄임효과 3줄 줄임효과가 추가됩니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML ir태그를 설정하여 이미지 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공 해줍니다. { 동물의 종류는 다양합니다. 동물은 육식동물, 초식동물 등등. 대체적으로 긴 귀와 솜뭉치 모양으로 위쪽으로 짧아 보이게 말려 있는 꼬리 길이는 생각보다 길다.... 더보기 동물의 종류는 다양합니다. 동물은 육식동물, 초식.. 2022. 8. 11. 카드 유형 02 사이트 만들기 : 카드 유형 02 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 가장 먼저 공부해 볼 유형은 카드유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 이번 카드 만들기에는 svg파일 삽입, flex가 추가됩니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 화살표 이미지를 svg파일로 받아서 코드로 넣어줍니다. 8개의 이미지를 2층으로 배치하는 구조입니다. { 운동을 해봅시다 여러가지 운동을 해봅시다. 유산소 운동 근력 운동 골고루 해봅시다 걷기 걷기는 사람의 가장 기초적인 이동 방식으로, 왼발과 오른발을 번갈아 내딛으며, 언제나 할 수 있다.... 더보기 자전거 자전거의 효율은 매우 높기 때문에 다른.. 2022. 8. 10. 카드 유형 01 사이트 만들기 : 카드 유형 01 사이트를 만들기에 앞서 다양한 유형으로 나누어서 공부해보려고 합니다. 가장 먼저 공부해 볼 유형은 카드유형 입니다. 피그마로 먼저 레이아웃을 잡아준 뒤에 수치대로 코딩합니다. 01. Figma로 레이아웃 잡기 Figma로 전체적인 틀을 잡아줍니다. 02. HTML 웹 표준을 준수하기 위해 시맨틱 태그를 사용합니다. 시맨틱 태그를 사용한 후에는 제목태그를 사용해야 합니다. { 닭의 쓰임새 닭은 많은것을 나눠주는 유익한 생물 입니다. 치킨 일반적인 닭튀김을 말하며 닭을 잘라 구운 것도 치킨이라고는 한다. 치킨 반죽을 어떻게 만들고 닭을 어떻게 튀기느냐에 따라서 맛의 차이가 상당하다. 더 자세히 보기 달걀 조리법에 따라 그 형태와 식감 등이 달라지기 때문에 특유의 약한 맛과 .. 2022. 8. 9. 이전 1 다음
