예제 33

패럴렉스 이펙트 07_리빌효과

html Javascript parallax Effect07 페럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은 바다에서 표류하는 쪽배와 같다. 09 sectin9 꿈이 없는..

게임 이펙트03_ 뮤직 리스트 생성

오늘은 뮤직 리스트 부분을 추가하였습니다. 수정한 부분 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list"); const musicList = musicWrap.querySelector(".music__list"); const musicListUl = musicWrap.querySelector(".music__list ul"); const musicListClose = musicWrap.querySelector(".music__list h3 .close"); // 이전곡 듣기 const prevMusic = () => { musicIn..

게임 이펙트01_ 재생바, 컨트롤버튼 활성

오늘은 재생바와 컨트롤 버튼을 활성화 하였습니다. 재생버튼, 일시정지 버튼 이전곡 버튼 다음곡버튼으로 곡재생을 하였고 기본적으로 전체 재생을 주었으므로 마지막 곡이 재생되면 다시 돌아가 곡이 재생됩니다. 마지막으로 뮤직 재생바라 활성화 되면서 재생바의 위치에 따라 곡의 위치와 곡의 진행도를 알 수 있습니다. // 재생 버튼 const playMusic = () =>{ musicWrap.classList.add("paused"); musicPlay.setAttribute("title","정지"); musicPlay.setAttribute("class","stop"); musicAudio.play(); } // 일시정지 버튼 const pauseMusic = () =>{ musicWrap.classList...

게임 이펙트01_드레그 액션,음악재생

html ARARA GAME WORLD 2023년 04월 24이 09시 30분 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 roading... : 마우스 커서를 나타내는 요소입니다. img 태그를 포함하고 있어 이미지를 표시하고 있습니다. : 웹 페이지의 헤더를 나타내는 요소입니다. h1 태그를 포함하고 있어 제목을 표시하고 있습니다. 또한 현재 시간을 나타내는 div 요소도 포함하고 있습니다. : 웹 페이지의 주요 콘텐츠를 나타내는 요소입니다. icon_box 클래스를 가진 div 요소를 포함하고 있습니다. : 아이콘 박스를 나타내는 요소입니다. icon1~icon4 클래스를 가진 div 요소를 포함하고 있으며, 각각의 아이콘과 텍스트를 표시하고 있습니다. : 웹 페이지의 푸터를 나타내는 요소입니다. d..

페럴랙스 이펙트02 : 플러그인

오늘은 플러그인을 사용하여 스크롤을 내릴수록 애니메이션이 진행되는 효과를 주었습니다. 미리 말씀드리지만 소스가 길어요😂 css *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'ReciaSerifDisplay'; } body { height: 20000px; background-color: #E0E4DD; } .scrollTop { position: fixed; left: 10px; top: 10px; z-index: 1000; width: 40px; height: 40px; color: #fff; text-align: center; font-size: 14px; line-height: 40px; background-color: rgba(0..

페럴랙스 이펙트01 : 메뉴효과

HTML Javascript parallax Effect01 페럴랙스 이펙트 : 메뉴효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은..

슬라이드 이펙트07_썸네일

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번과 다르게 자바스크립트만 적습니다. HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com : 헤더 요소로 제목과 설명을 포함하고 있습니다. : 제목을 나타내는 제목 요소입니다. : 설명을 나타내는 단락 요소입니다. : 순서 없는 목록 요소로, 다른 페이지로 이동할 수 있는 링크들을 포함하고 있습니다. : 각각의 목록 항목을 나타내는 리스트 요소입니다. : 링크를 나타내는 앵커 요소입니다. : 메인 컨텐츠를 감싸는 메인 요소입니다. : 슬..

슬라이드 이펙트06_버튼, 닷메뉴

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3,4,5번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect06 슬라이드 이펙트06 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next jo0132@naver.com 헤더 부분에는 제목과 설명이 포함된 h1, p, 그리고 ul 태그가 있습니다. ul 태그 안에는 이미지 슬라이드의 다른 페이지로 연결되는 링크가 포함되어 있습니다. 메인 부분에는 이미지 슬라이드가 표시되는 영역이 구성되어 있습니다. slider__img와 sli..

슬라이드 이펙트05_아래에서 위로 움직이기(연속으로)

이미지를 여러개 배치하여 움직이게 하며 연속으로 아래에서 로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect05 슬라이드 이펙트05 : 아래에서 위로로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { wi..

슬라이드 이펙트04_좌에서 우로 움직이기(연속으로)

이미지를 여러개 배치하여 움직이게 하며 연속으로 옆으로 지나가는 슬라이드 이펙트를 만들어 보도록 합니다. 어제 올린 1,2,3번도 마찬가지지만 gsap과 jqurey를 활용하여 세가지 방법을 사용하였습니다. 모두 올리니 차이점을 확인해 보시길 바랍니다 HTML Javascript slider Effect04 슬라이드 이펙트04 : 좌로 움직이기(연속적으로) 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%..

슬라이드 이펙트03_아래에서 위로 움직이기

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

슬라이드 이펙트02_우에서 좌로 움직이기

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect02 슬라이드 이펙트02 : 좌로 움직이기 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 그리고 slide__inner로 감싸 움직이도록합니다. CSS /* slider__wrap */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 ..

슬라이드 이펙트01_트렌지션과 불투명도

이미지를 여러개 배치하여 움직이게 하는 슬라이드 이펙트를 만들어 보도록 합니다. HTML Javascript slider Effect01 슬라이드 이펙트01 1 2 3 4 5 6 jo0132@naver.com 헤더와 풋터는 기존 마우스 이펙트와 동일하게 하며 메인부분을 slider__wrap으로 슬라이드를 감싸고 slider__img로 이미지를 한번에 감쌉니다. 이미지를 단독으로 사용하지 않고 .slider의 div를 사용하여 효과를 부여합니다. CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; ..

퀴즈 이펙트_여러문제를 풀 수 있도록 만들어 봅시다!(JSON)_보충02

어제와 비슷하지만 오늘 수정한 부분이 있어서 보충하고자 합니다. 점수 나오기(버튼 나오면 점수나오기) const answerQuiz = () => { const cbtHeaderScore = document.querySelector(".time_submit__score span") cbtHeaderScore.innerHTML = `총 ${Math.ceil((quizScore / questionLength)*100)}입니다!`; cbtScorebox.style.display = "block"; } 함수는 querySelector() 메서드를 사용하여 HTML 요소 중 클래스가 time_submit__score인 요소의 하위 요소인 span 요소를 선택하고, 해당 요소의 innerHTML 속성을 수정하여 퀴..

퀴즈 이펙트_여러문제를 풀 수 있도록 만들어 봅시다!(JSON)_보충

모달창 추가 html 기능사 시험 도전하기 정보처리기능사 2005년 2회 정보처리기능사 2005년 4회 정보처리기능사 2005년 5회 정보처리기능사 2006년 1회 정보처리기능사 2006년 2회 정보처리기능사 2006년 3회 정보처리기능사 2006년 5회 정보처리기능사 2007년 1회 정보처리기능사 2007년 2회 정보처리기능사 2007년 5회 정보처리기능사 2008년 1회 정보처리기능사 2008년 2회 정보처리기능사 2008년 4회 정보처리기능사 2008년 5회 정보처리기능사 2009년 1회 정보처리기능사 2009년 5회 정보처리기능사 2010년 2회 정보처리기능사 2010년 5회 정보처리기능사 2011년 1회 정보처리기능사 2011년 2회 정보처리기능사 2011년 4회 정보처리기능사 2011년 5회 ..

퀴즈 이펙트_여러문제를 풀 수 있도록 만들어 봅시다!(JSON)

HTML 2020년 1회 정보처리기능사 기출문제 수험자 : 노지영 전체 문제수 : 문항 남은 문제수 : 문항 제출하기 59분 10초 태그를 사용하여, 퀴즈의 틀을 만드는데 사용됩니다. 여기서 퀴즈의 제목, 문제, 보기, OMR 카드 등이 들어갑니다. 태그를 사용하여, 객관식 문제의 보기를 만듭니다. type="radio" 속성을 사용하여, 라디오 버튼 형태로 만듭니다. 객관식 문제에서는 보기 중 하나만 선택할 수 있기 때문에, 라디오 버튼이 사용됩니다. 그리고 마지막으로 제출하기 버튼과 시간을 나타내는 부분이 들어갑니다. SCRIPT 우선const 를 사용하여 변수 cbt, cbtQuiz, cbtOmr, cbtSubmit를 선언합니다. 이 변수들은 이후 DOM 요소를 참조하는 데 사용됩니다. let 키워..

사이트의 유형별로 만든 섹션을 통합해봅시다(1)

오늘은 지금까지 만든 유형별 색션을 seo에 맞게 통합해 봅시다. index의 기본형 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 베너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 먼저 seo(검색엔진 최적화)을 위해 작성해야 하는 것들이 있습니다. 메타 테그의 네임에 따라 콘텐츠가 달라집니다. author : 아라라 description : 프론트엔드를 준비하고 공부하는 사이트 튜토리얼입니다. keyword : 프론트엔드, 사이트 사이트 만들기 , 튜토리얼 robots : all을 주어 로봇이 모두를 색인 하도록 지정합니다. 파비콘을 지정해 주고 css을 fons / reset / common / stlye이라는 이름으로 나..

퀴즈 이펙트_여러문제를 넘겨가며 풀 수 있도 만들어 봅시다!

html Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 jo0132@naver.com 이번에도 html은 앞서 했던 퀴즈 이펙트에 사용한 html을 사용하도록 합니다. 하지만 이번에는 몇문제가 남았는지 몇점인지가 나옵니다. 문자 정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : ["시간의 흐름", "연필의 갯수", "온도의 변화", "식물의 성장"], infoAnswer : "연필의 갯수", infoD..

퀴즈 이펙트_여러문제의 객관식 문제 만들어 봅시다!

선택자 const quizWrap = document .querySelector(".quiz__wrap"); let quizScore = 0; 문제 정보 // 문제정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : { 1: "시간의 흐름", 2: "연필의 갯수", 3: "온도의 변화", 4: "식물의 성장" }, infoAnswer : "2", infoDesc : "연필은 1.5개가 존재 하지 않으므로 디지털입니다" // 문제1 end },{ infoType : "정보처리..

검색 이펙트_css속성을 찾아봅시다

html 1 2 3 4 5 6 자바스크립트😋 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성의 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. .... word-spacing : 단어 사이 간격을 지정합니다. word-wrap : 글자 단위에서 줄바꿈을 결정하는 방법을 지정합니다. z-index : HTML/CSS에서 요소(element)들의 수직 위치를 결정하는 속성으로, 값이 높을수록 다른 요소들보다 위에 나타나게 됩니다. jo0132@naver.com 리스트로 정리한 cs..

푸터유형을 만들어 봅시다!

html 푸터 아침밥 레시피 한식 일식 양식 간편식 재료선정 탄수화물 단백질 지방 섬유질 건강별 정리 심혈관 질환 성인병 고관절 질환 레시피 도서 추천 한식 일식 양식 간편식 나이별 메뉴 어린이 청소년 청년 중장년 노년 Q&A 문의하기 F&A 2023 아침밥 먹기 실천 위원회 All Right Reserved 우선 각각의 큰 카테고리 별로 div를 만들어 큰 카테코리는 h4로 감싸고 아래로 작은 메뉴는 li로 감싸 작업하였습니다. 그렇게 6개 정도 만들면 됩니다. 아래로는 홈페이지의 이름이 오게됩니다. 중간에 웹표준에 맞추기 위해 페이지의 제목을 h2로 감싸고 그것을 블라인드 처리하기위해 클래스에 blind를 주어 가립니다. css 리셋과 common은 전부터 사용하던 것을 그대로 사용하여 정리할 것이 ..

마우스 이펙트03_마우스를 따라다니는 돋보기효과

HTML Javascript Mouse Effect03 마우스를 따라다니는 조명효과입니다. 1 2 3 4 5 6 "The road to success and the road to failure are almost exactly the same." 성공하는 길과 실패하는 길은 거의 같다. 오늘은 마우스을 움직이면 따라다니면서 돋보기처럼 선명하게 보이는 효과를 줍니다. 마우스을 따라다니는 200px의 원을 만들고 커서의 가운데로 오도록 합니다.(background-position: center center;) 속성 속성특징 속성 내용 background-attachment: fixed; 배경 이미지가 화면에서 고정되어 스크롤해도 항상 같은 위치에 남아 있게 됩니다. 배경이미지를 고정하여 커서를 움직여도 배경..

마우스 이펙트02_GSAP를 이용해서 마우스를 따라다니는 효과

html Javascript Mouse Effect03 GSAP를 이용해서 마우스를 따라다니는 효과입니다. 1 2 3 4 5 6 Success is not final; failure is not fatal: It is the courage to continue that counts. 성공은 종점이 아니며, 실패는 치명적이지 않습니다. 중요한 것은 용기이다. jo0132@naver.com 우선 html에서는 별다른 효과 없이 명원이 나오는 것으로 주었습니다. 저번과 다른 점은 마우스 커스를 대신할 div박스가 두개라는 점입니다 이는 실행할때 나오는데 두 박스는 서로 다르게 움직이게 css를 주었습니다. 그리고 active를 주어 서로 span에 닿을 때 애니메이션 효과가 나도록 transform을 주었습니..

마우스 이펙트01_마우스 따라다니기

HTML Javascript Mouse Effect01 마우스 이팩트 - 마우스 따라다니기 1 2 3 4 5 6 Change will not come if we wait for some other person or some other time. 변화는 누군가 언젠가 가져다줄 거라 기다리면 절대로 오지 않는다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px jo0132@naver.com 마우스 이펙트는 마우스 커서의 좌표값을 받아 표시하고 커서를 따라다니는 오브젝트를 만들었습니다. 또한 여러가지 효과를 주어 커서가 특정 단어에 올라갈때 커서의 모양이 변하는 애니..

텍스트유형을 만들어 봅시다!

html NOTICE 아침밥 재료 선정 기준 영양성분 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 영양소를 섭취하면 하루 내내 집중력과 기억력이 좋아지고, 몸의 대사 기능도 원활해집니다. 더보기 칼로리 아침밥은 하루 중 첫 식사이기 때문에 체중 증가나 소화 불량 등의 문제가 발생할 수 있습니다. 적당한 칼로리를 유지하면서 영양소를 고루 섭취할 수 있는 것이 좋습니다. 더보기 시간 아침은 일상 생활에서 가장 바쁜 시간 중 하나입니다. 따라서 아침밥은 간단하면서도 영양소가 풍부한 재료로 준비하는 것이 좋습니다. 또한 미리 재료를 준비해두면 시간을 절약할 수 있습니다. 더보기 개인 취향 아침밥은 개인의 취향에 따라 다양한 메뉴를 선택할 수 있습니다. 예를 들어, 샐..

퀴즈 이펙트_객관식 문제 만들어 봅시다!

html Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 jo0132@naver.com 우선 지금까지 만들었던 퀴즈 이펙트에서 여러 가지 보기중 하나를 선택하면 선택한 답이 정답과 동일한지 비교하는 객관식입니다. 우선 label로 보기를 만드는데 for이라는 속성으로 이름들 지정합니다. 또한 value로 값을 주어 번호를 매깁니다. script 우선 늘 그랬듯이 문제 정보에 키값과 원하는 정보를 객체에 저장합니다. 이때 우리는 객관식 문제를 만들기때문에 정답 선택지를 저장하기 위해 infoChoice라는 키값에 배열로 선택지를 저장합니다. 그 후 문제 출력부분에서 updateQuiz함수를 만들어 문제를 불러오는데 이때 innerHTML을 사용하여 html속성까지 불..

슬라이드유형을 만들어 봅시다!

HTML 메인 슬라이드 영역 EVENT 아침식사를 합니다🥪 아침밥은 하루를 시작하기 위해 필요한 에너지를 제공하고, 신진대사를 촉진하여 체내 기능을 개선시키는 데 도움이 됩니다. 또한, 혈당 수준을 안정시켜주어 집중력과 기억력을 개선시켜줄 수 있습니다. 자세히보기 상담 신청 이전이미지 다음이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 메인에 들어가는 슬라이드를 피그마로 만들어 HTML로 구현 하였습니다. 제가 원하는 컨테이너영역에 이미지가 꽉 차서 화살표 버튼으로 움직이는 모양으로 구현하였습니다. 밑에 점으로 이미지가 움직일때마다 변화될 수 있도록 HTML을 구현하였습니다. CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration..

이미지텍스트유형을 만들어 봅시다!

html NOTICE 아침에먹기 좋은 건강한 레시피 아침밥으로 먹을만한 메뉴는 다양하지만, 아래는 건강하고 맛있는 아침밥 메뉴 종류입니다. 오트밀 쉐이크 스크램블 에그토스트 그릭 요거트 파르페 김밥 오므라이스 샌드위치샐러드 에그 베네딕트 수프 container안에 cont의 div를 3개 만들었습니다. cont에 width값과 height값을 주어 간격을 맞추고 한박스는 텍스트만 나머지 두박스는 이미지를 넣었습니다. 첫번째 cont는 텍스트 관련 기본적으로 들어가는 span태그와 h2, p, ul, li태그를 넣었습니다. 두번째와 세번째는 figure를 넣어 이미지를 넣었습니다. css .section__small { font-size: 14px; border-radius: 50px; background..

퀴즈 이펙트_여러 문제를 한번에 풀 수 있도록 만들어 봅시다!

오늘 은 퀴즈 이펙트를 한페이지에 여러개를 넣어 한번에 풀 수 있도록 하려고 합니다. html . 정답입니다! 틀렸습니다! 정답 확인하기 html을 위와 같이 세개를 만들어 줍니다. 이는 한페이지에 3문제를 한번에 볼 수있도록 하는것으로 똑같은 이펙트를 html로 구현합니다. 선택자 const quizWrap = document .querySelector(".quiz__wrap"); const quizTitle = quizWrap .querySelectorAll(".quiz__title"); // 시험 날짜_시간 const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); // 문제 번호 const quizQuestion = quizW..

이미지유형을 만들어 봅시다!

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침을 먹어야하는 이유 아침밥을 꼭 먹어야 하루의 체력과 기분이 달라집니다. 간편한 아침 아침을 간편하게 먹기 위해서 빵이나 간편식으로 잘 나와있습니다. 자세히 보기 여유로운 아침 아침을 여유롭게 먹을 때 너무 무겁게 ..