본문 바로가기

SITE20

[SITE] 통합 유형 웹사이트 제작하기 01 : 애니멀 유치원 SITE 만들기 지금까지 웹페이지에 들어가는 기본적인 유형들을 실습해보았죠? 이번에는 지금까지 배웠던 유형들을 합쳐서 실제 웹페이지 + 반응형을 함께 제작해보겠습니다. 🫠 특히 이번 슬라이더 유형은 직접 자바스크립트를 구현하지 않고 스와이퍼라는 슬라이드 프리소스를 사용하여 제작해보았습니다. 📖 Swiper란? 슬라이드 이펙트를 간단히 작성할 수 있도록 공개된 무료 소스로 HTML, CSS, JAVASCRIPT를 모두 지원해줍니다. 제작하기 전 사이트의 구성 요소를 정해줍니다. #1. HTML 헤더와 푸터 유형을 제외한 유형들은 메인 영역에 섹션별로 나누어 저장하였습니다. 항상 강조했지만 웹사이트를 제작할 땐 웹표준과 접근성, 호환성을 반드시 지키도록 합니다. 특히 사이트.. 2022. 9. 15.

[SITE] 웹사이트 - 푸터 유형 01 FooterType01 웹페이지 실습을 위한 푸터 유형을 실습해보겠습니다! 이번 푸터 유형은 텍스트와 비슷한 유형으로 웹사이트 가장 하단에 위치합니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용.. 2022. 9. 6.

[SITE] 웹사이트 - 배너 유형01 BannerType01 웹페이지 실습을 위한 배너 유형을 실습해보겠습니다! 이번 배너 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 배너 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2태그가 사용.. 2022. 9. 6.

[SITE] 웹사이트 - 슬라이드 유형01 SliderType01 웹페이지 실습을 위한 슬라이드 유형을 실습해보겠습니다! 이번 슬라이드 유형은 이미지와 텍스트 영역, 아이콘이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다 ~ 😆 이번 유형은 슬라이드 타입으로 컨셉에 맞는 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수를 위해 선언한 h2.. 2022. 9. 6.

[SITE] 웹사이트 - 이미지 텍스트 유형01 ImageTextType01 웹페이지 실습을 위한 이미지/텍스트 유형을 실습해보겠습니다! 이번 이미지/텍스트 유형은 이미지와 텍스트 영역이 함께 들어있는 타입입니다. 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 이미지/텍스트 타입으로 각 주제와 영역에 맞게 레이아웃과 디자인을 설정하시면 됩니다. 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 섹션, 아티클과 같은 시멘틱 태그에는 꼭 헤딩 태그를 함께 사용해주어야 웹표준을 준수하게 됩니다. • 섹션 영역에 웹표준 준수.. 2022. 9. 2.

[SITE] 웹사이트 - 헤더 유형01 HeaderType01 웹페이지 실습을 위한 헤더 타입 유형을 실습해보겠습니다! 헤더 타입은 보통 가장 위에 위치하며 로고와 메뉴 로그인 버튼 등의 구성 요소를 가지고 있습니다!! 그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆 이번 유형은 헤더 유형이기 때문에 크기에 맞게 프레임을 조정하여 맞춰줍니다. 메뉴는 꼭 메인 영역에 위치하도록 합니다! 특히 글자 간 간격과 정렬을 잘 지켜줍시다! 아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. TIP ! • 큰 덩어리부터 차근차근 구조를 짜는 것이 중요.. 2022. 9. 2.

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

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

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

[SITE] 웹사이트 - 이미지 유형03 Image Type03 이번 이미지 유형에서는 지난 시간 배웠던 유형들의 심화 버전 입니다. 애니메이션과 블러 효과, 그리고 이미지 스트라이트 기법을 사용하여 실습해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 기본 화면은 1200(1160)이므로 코딩할 땐 주의합니다! 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미.. 2022. 8. 22.

[SITE] 이미지 유형 만들기 02 Image Type02 이번 이미지 유형에서는 애니메이션과 블러 효과를 주어서 더 동적인 페이지를 실습해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 이번 유형은 백그라운드에 이미지를 삽입하면 따로 애니메이션과 같은 효과를 주기 어렵기 때문에 img태그를 사용하여 이미지를 삽입하여 작업합니다:) 지난 시간에 작업한 이.. 2022. 8. 18.

[SITE] 웹사이트 - 이미지 유형01 Image Type01 웹페이지 실습을 위한 이미지 유형 페이지 제작해보기! 이번 이미지 유형에서는 background에 image를 넣어서 작업해보겠습니다! 이미지 유형의 가장 기초적인 레이아웃으로 이미지 박스 안에 텍스트와 링크 박스가 들어가 있는 구조입니다. TIP ! 여백은 10단위로 해주어서 좀 더 효율적으로 작업할 수 있게 합니다:) 🎨 그리드와 레이아웃 🎨 완성본 디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다. ! TIP ! 섹션 태그에 섹션 선택자를 따로 준 이유는 앞으로 만들게 될 유형들 모두 공통적으로 섹션 안에 제목, contents 구조로 .. 2022. 8. 17.

[SITE] 웹사이트 - 카드 유형03 CardType03 웹페이지 실습을 위한 카드 유형 페이지 심화ver 제작해보기! 카드 안에 이미지, 키워드란, 텍스트 그리고 사용자 프로필까지 넣어서 제작해보자! 이번 유형에서는 심화 버전인 만큼 그리드 할 요소가 많습니다.😂 차근차근 그리드를 만들어 카드형 페이지를 디자인 해봅시다! 이번 카드형 디자인은 카드 사이에 여백이 없기 때문에 라인을 넣어 카드 영역을 구분 해줍니다. TIP ! 카드 섹션의 디자인이 동일할 경우 comtonent를 이용하면 효율적인 작업이 가능하다. comtonent를 처음 적용시킨 카드가 원본가 되며 원본 comtonent를 수정하면 복제 comtonent들도 함께 수정되어 작업이 훨씬 수월해진다! < HTML 소스 : 레아아웃 구조 파악하.. 2022. 8. 11.

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

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

레이아웃05 레이아웃05 전체 영역이 들어간 구조로 세부적인 요소들은 부모컨테이너를 만들어서 가운데 영역으로 레이아웃을 설정한다. 이번 레이아웃은 좀 더 심화과정으로 들어간다. float을 이용한 반응형 레이아웃 CSS 스타일을 효율적으로 주기 위해서는 html 마크업을 깔끔하게 선언할 줄 알아야 한다. 때문에 먼저 레이아웃 분석 및 요소의 이름을 잘 선언하는 것이 중요하다. clearfix를 이용한 float의 영역깨짐 방지 1. 깨지는 영역에 clear:both를 설정한다. 2. 부모 박스 영역에 overflowf: hidden을 설정한다. - 애니메이션 효과가 적용되지 않는다. 3. clearfix를 설정한다. - 깨진 레이아웃 요소의 부모요소에게 클래스로 이름을 선언해준다. div class="containe.. 2022. 8. 5.

레이아웃04 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조이다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정한다. float을 이용한 레이아웃 + 부모요소 컨테이너 사용방법 아이디 클래스 선택자 선언 id : 한 번 정도 사용하는 것이 좋으며 전체적인 틀, 스크립트에서 많이 사용한다. id로 선언할 경우 후에 고치는 것이 까다롭다. class : 두개 이상 (중복 가능)사용이 가능하며 후에 고치는 것이 유동적인 편. 주로 세부적인 영역이나 반복적인 것에 많이 사용된다. *{ margin: 0; padding: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background.. 2022. 7. 29.

레이아웃03 레이아웃03 메인에 사이드와 아티클 3개가 들어간 구조 float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다. clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. cl.. 2022. 7. 29.

레이아웃02 레이아웃02 사이드가 2개인 웹사이트 구조 float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다. clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. * { margi.. 2022. 7. 29.

레이아웃01 레이아웃01 웹사이트에 대한 가장 기본적인 형식의 레이아웃 레이아웃을 마크업할 때 주이할 점 : 레이아웃을 처음부터 세부적으로 뜯기보단 전체적인 것부터 먼저 선언해나가는 것이 효율적이다. 만약 부모 → 자식 → 자식1 = 자식2 라면 먼저 부모 마크업 뒤 스타일 속성을 선언하고 그다음 자식 그다음 자식1과2 이런 순서로 진행하면 된다. float을 이용한 레이아웃 + 반응형 float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다. 때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다. 주 사용 속성 float: le.. 2022. 7. 27.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바