Youna

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

애니메이션 효과 코드펜을 사용해서 봄에 어울리는 벚꽃을 만들어 보았습니다. See the Pen Untitled by younajeong (@younajeong) on CodePen.

푸터 유형 페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다. 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 페스티벌 종류 세계 음악 역사 페스티벌 역..

마우스 이펙트 03 저번 효과를 이어서 이번에는 이미지가 보이지 않지만 마우스 이펙트 효과를 통해 이미지가 보여지는 조명 효과를 입혀봤습니다! 이번 마우스 이펙트 세번째 효과에서 사용될 속성들 입니다. 데이터 저장하기 : 배열, 객체 데이터 실행하기 : 함수, 화살표 함수 이벤트 객체 : mousemove 요소 객체 : querySelector,clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect() CSS : backgruound-attachment: fixed HTML Javascript mouseEffect03 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 Life is a journey to be exper..

마우스 이펙트 효과 두번째 이번 시간에는 GSAP를 사용해서 마우스가 부드럽게 따라다니는 효과를 주도록 하겠습니다. 첫번째 효과에서 마우스의 움직임이 부드럽지 못했는데 이번 효과 에서는 더욱 부드럽게 사용하기 위해서 라이브러리 효과 GSAP를 사용해보도록 하겠습니다. 두번째 효과에서 사용해보자! 데이터저장하기 : 변수 데이터 실행하기 : 함수, 화살표 함수 데이터 불러오기 : for(), forEach() 이벤트 객체 : mousemove,mouseenter,mouseleave 요소 객체 : querySelector 라이브러리 : GSAP: to() HTML Javascript mouseEffect02 마우스 이펙트 -마우스 따라다니기 1 2 3 4 5 6 love what you have. 가진것을 사..

마우스 이펙트 01 오늘은 마우스에 이펙트 효과를 입혀봤습니다. 마우스 이펙트 효과(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. HTML코드 Javascript mouseEffect01 마우스 이펙트 -마우..

애니메이션 효과 코드펜을 이용해서 애니메이션 효과를 html과 css를 이용해서 만들어 봤습니다! 01.움직이는 두 원 HTMl 만드는 방법 div를 만들어 준 후 span을 만들어 준 후 class요소를 이용해서 loding과 circle1,2를 만들어 주면 html은 끝입니다. CSS body { height : 100vh; background-color : #111; } .loding { left : 50%; top : 50%; position : absolute; animation : loding 1s ease 1000; } .circle1 { display : block; height : 20px; width : 20px; background-color: #fff; border-radius : ..

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

퀴즈 이펙트 HTML과 CSS를 이용해 퀴즈를 풀 수 있는 사이트를 만들어보았습니다. 먼저 비주얼코드로 가서 javascript폴더 안에 card폴더를 만들어 줍니다. 그리고 quizEffext html 파일을 만들어줘서 실행시켜 줍니다. HTML Quiz 정답 확인하기 유형 . 정답확인하기 jeongyouna_@naver.com HTML 들여다보기 퀴즈 이펙트라는 타이틀을 만들어 준후 코드가 지저분해지지 않게 link를 사용해서 reset과 css파일을 만들어줍니다. header, main, footer로 나누어 전체적인 body를 잡아줍니다. CSS로 묶어 줄 수 있게 quize wrap, tittle, question,view,answer로 요소들로 묶어줍니다. CSS에서 각 요소들에게 효과를 준 ..

텍스트 관련 요소 01. 제목 관련 태그 요소유형 태그명 태그의 의미 및 특징 블록 요소 ~ 제목 글자 태그 h1이 제일 높고 h6가 제일 낮음 02.글자 형태 태그 요소유형 태그명 태그의 의미 및 특징 인라인 요소 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 텍스트 요소 중에 태그와 태그는 의미가 비슷해 보일 수..

마크업이란? 마크업(Mark up)이란 마크(Mark)로 둘러 싸인 언어로 태그(Tag)로 둘러싸여있다고 표현하기도 합니다.HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용합니다. 시멘틱 마크업 (Semantic markup) 시멘틱(Semantic)사전적 뜻은 "의미론적인" 으로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻을 가지고 있습니다. 시멘틱한 마크업을 사용하는 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있다는 점을 유의해야 합니다. 예를 들어 시각장애인의 경우 HTML 문서의 콘테츠 ..

이미지출처 블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스여서 한 줄을 모두 차지하는데 이 때 한 줄을 차지한다는 말은 너비가 100%라는 얘기입니다. 따라서 왼쪽과 오른쪽에 붙을 공간이 없어 자연스러운 줄넘김이 가능합니다. 블록 속성을 가진 요소들 중에는 , , 요소들과 , , 이 있습니다. 주로 화면구성과 레이아웃을 만들 때 사용 됩니다. 따라서 블록 레벨 요소는 한 묶음으로 이루어져 오롯이 하나의 존재로 이루어져 있는 요소로 그 안이 비어져 있습니다. 텍스트와 인라인 요소를 자식 요소로 포함 하여 집어 넣을 수 있습니다. 블록레벨 요소 중에는 블록레벨 요소를 자식으로 포함할 수 있는 요소와 없는..