Youna

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

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

검색 이펙트 검색 이펙트는 검색 결과가 노출되는 것 자체가 인지적 영향을 미치는 현상입니다. 검색 이펙트는 검색 엔진 결과 페이지에서 웹사이트가 노출되는 위치,타이틀,설명 등의 정보에 영향을 받습니다. 검색 이펙트는 사용자들이 검색을 할 때, 검색 결과 페이지에서 웹사이트가 노출되는 위치에 따라 사용자의 인지적인 영향을 받기 때문에 중요합니다. 상위 검색 결과에 노출될수록, 해당 웹사이트를 방문하는 사용자 수가 늘어나고,검색어에 대한 신뢰도가 높아집니다. HTML 자바스크립트 💛 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계..

푸터 유형 페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다. 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에서 각 요소들에게 효과를 준 ..

CSS 문자 관련 스타일 우리가 사이트나 화면을 볼 때 그림과 사진도 눈에 들어오지만 절대적으로 빼먹을 수 없는 것이 있습니다. 바로 폰트! 글인데요 요즘 트랜드로도 강조형 타이포그래피 같은 글자 스타일과 크기로 강조하는 디자인이 떠오르는 만큼 글자에 대해서 잘 알고 활용하는 것이 중요하다고 생각합니다. 그러므로 오늘은 CSS 속성 중 문자 관련한 속성들을 알아보는 시간을 가지도록 하겠습니다. 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: "돋움", Dotum, Arial, Helvetica, sans-serif ; ..

Grid layout grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조 관점에서 html 기본 요소로 작성된 요소 입니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 그리고 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 쉽게 말해 저번 시간에 정리했던 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로,세로)레이이아웃 시스템입니다. 01. grid를 활용한 레이아웃 grid 레이아웃 만드는 방법 flex와 비슷한 형태로 시멘틱 태그를 만들어 줍니다. 시멘틱 태그로 만들어진 태그에 배경색과 grid area에 각 시멘틱 태그 이름을 붙혀줍니다. 태그들을 총 감싸고 있는 wrap태그 안에 wi..

레이아웃 Flex 요소들이 포함된 크느 박스에 flex를 선언하고, 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 박스 안에 구문은 해당 요소에 flex로 레이아웃을 계한다고 선언하는 뜻입니다. 01. flex layout flex를 이용해 레이아웃을 만든다 이렇게 코드진행을 할 수 있습니다. 가운데 부분은 class container를 이용해서 만들어 줍니다. 박스가 3개 나열 된다고 생각하고 처음에는 큰 메인 박스를 만들어 준 후 그 아래로 차례로 section1,2,3에 가로와 세로 값 배경색을 부여한 후 display: flex를 main부터 sectio..

선택자(selector) 선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다. See the Pen Untitled by younajeong (@younajeong) on CodePen. CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 01. 태그선택자(type Selector) 태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한..

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 01. 레이아웃 - float float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다. float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. 이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경..

Id 와 Class 01.이름을 불러올 때 클래스를 불러올 때는 클래스명 앞에 마침표를 찍어준다. 아이디를 불러 올 떄는 아이디 값 앞에 샵(#)표시를 해줍니다. 또 여러개의 요소에 같은 class명을 부여해줄 수 있습니다. 또한 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. 자료출처 이미지 처럼 id로 "attendance"를 불러왔고 값 앞에 #표시를 해둔 걸 볼 수 있습니다. 또 class="name"을 사용해서 김영희라는 이름을 사용했습니다. 02. 중복 사용 class는 중복 사용이 가능하지만 id는 중복사용이 불가능 합니다. class는 동일한 클래스명을 페이지 여러곳으로 사용해도 되지만 id는 한개의 id로 딱 한 페이지에서 사용이 가능합니다. 자료출처 사람으로 생각한다면 하나..

CSS CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 01. 내부 스타일시트 CSS를 HTML문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 태그에 태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 이미지출저 이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에..