Youna

페이지 제작하기 페이지 제작할 때 만들었던 슬라이드 영역, 이미지 영역, 이미지/텍스트 영역, 카드영역, 배너영역, 텍스트 영역, 푸터영역을 가지고 미디어 쿼리를 적용시켜서 페이지를 제작해 보았습니다. 완성된 사이트 만들기 전에 준비할 폴더 & 파일 site1 (합쳐줄 사이트) assets, ico, img, js 폴더 만들어 준 후 index파일 만들기 HTML head 만들어 주기 index파일을 열어서 전체적인 구조를 잡아줍니다. 메타 태그를 사용해서 첫번재 메타 태그는 문자와 인코딩을 정의하고 두번째 태그는 internet Explorer의호환성 모드를 방지합니다. 세번째 태그는 뷰포트의 너비와 초기 배율을 정의할 수 있습니다. 메타 태그를 사용해서 검색엔진에 노출 될 수 있는 SEO를 설정해 줍..

푸터 유형 페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다. pigma pigma 피그마를 사용하여 그리드를 이용해서 전체적인 틀을 잡아줍니다. HTML 푸터 Festival Ticket 티켓예매 티켓예약 티켓 유의사항 현장 발권 Festival News DJ 인터뷰 NEW MUSIC 메거진 DJ V LIVE Festival Music 음원 예약하기 음원 구매하기 음악 듣기 음원 및 저작권 Festival F.lab F.lab 소개 페스티벌 즐기는 법 F.lab 신청하기 F.lab 사람들 Festival world 페스티벌 종류 세계 음악 역사 페스티벌 역..

텍스트 유형 저번 슬라이드 유형을 만들어 보고 텍스트 유형을 만들어 보았습니다. 홈페이지를 제작할 때 텍스트 유형은 다양하게 존재 하고 있습니다. 제품이나 서비스를 소개할 때 회사에 대해 소개할 때 채용정보,블로그,이벤트 및 프로모션 소개, 고객지원, 연락처 정보등을 기재할 때 많이 사용하고 있는 유형중에 하나입니다. 완선본 피그마를 사용해서 전체적인 툴 잡아주기 피그마에서 아이콘 만드는 방법 home으로 들어가서 icon을 검색 한후 맘에 드는 아이콘을 get a copy를 누르고 가져오면 됩니다. 색상 조절은 카피 후 조절이 가능 합니다. HTML notice 2023 DJ Festival 음원 리스트 이번 페스티벌을 통해 발표한 음원 리스트입니다. EDM, 하우스, 트렌스 장르로 구성되어 있으며 생..

슬라이드 유형 오늘은 홈페이지 슬라이드 유형을 제작해 봤습니다! 전체적인 슬라이드 유형을 작업하는 과정과 옆으로 넘길 수 있는 아이콘을 만드는 방법을 알아보도록 하겠습니다! HTML 메인 슬라이드 영역 event FESTIVAL LABLE F.LAB F.LAB은 세계적으로 열리는 페스티벌 음악들을 공유하며 함께 페스티벌을 즐기고 있습니다. 페스티벌에서 함께 즐긴 공연의 음원과 아티스트의 정보를 공유하고 있습니다. 자세히 보기 F.LAB 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 만드는 방법 slider wrap을 만들어 준 후 글씨 nexon을 넣어줍니다. 태그를 이용해서 blind로 숨겨준 후 제목을 써줍니다. div박스를 만들고 class로 slider__inne..

페이지 제작시 이미지텍스트 유형을 피그마로 예제를 만든 후 코딩을 이용해서 그대로 만들어 보았습니다. FIgma사용하기 만드는 방법 저번 이미지유형과 똑같이 width값 1920과 heigth값 800을 줍니다. layout도 columns로 변경후 12줄 margin값을 380을 줍니다. 위에 줄 간격을 120준 후 20간격으로 notice를 저번에 카드 유형에서 가져와줍니다. 16간격을 주고 나서 50px로 제목을 써줍니다. 25간격을 준 후 16px로 2줄 내용을 적어줍니다. 15간격을 주고 16px과 lineheigth 155% 로 내용들을 적어줍니다. 아래 간격은 위에 간격과 똑같이 120을 줍니다. HTML&CSS사용방법 이미지/텍스트 영역 NOTICE 세계 각국 음악 페스티벌 세계각국에서 열..

이미지 유형 페이지 제작시 이미지로 나타낼 부분을 피그마를 이용해 예제를 만들고 코딩을 하여 피그마에 만든 이미지 그대로 만들어 보았습니다. Figma사용하기 만드는 방법 저번에 카드유형과 동일하게 width 값 1920 height값을 800정도 설정해줍니다. layout설정 또한 카드 유형과 동일하게 잡아줍니다. 프레임을 20*20으로 만든후 눈금을 끌어와서 카드유형과 동일하게 양쪽 끝에 넓이를 준 후 눈금을 맞춰줍니다. 이제 정확한 위치를 위해 제목을 가운데 정렬해주기 저네 120height값으로 높이를 맞춰주줍니다. 제목 높이는 50으로 맞춰주고 폰트 크기도 50으로 지정해 줍니다. 내용을 써주기 위해 높이 30으로 사이를 떨어트려준 후 내용을 적어줍니다. 이미지를 첨부 한 후 버튼 제작을 위해 ..

카드유형 다양한 사이트 유형 중 오늘은 카드 유형을 만들어 보았습니다! FIgma사용 만드는 방법 먼저 피그마를 열어서 프레임을 만들어 주며 width 값 1920 height값을 800정도 설정해 줍니다. layout grid 설정에서 columns로 바꿔준 후 count 12, margin 380, gutter20으로 설정해줍니다. R을 누르면 프레임 값이 만들어 지는데 height값 20으로 양쪽 끝 그리드를 빨간선으로 눈금을 잡아줍니다. 다시 프레임을 만들어서 카드 섹션이 들어갈 수 있도록 3개의 프레임을 만들어 줍니다. 제목사이의 간격을 150으로 잡아준후 30간격을 만들어 준 후 2줄 내용이 들어갈 수 있도록 65정도 간격을 줍니다. 카드 사이에 간격이 70정도 준 후 카드에 들어가는 그림을 ..