아라의 WWW

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

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

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

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..

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

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침이 주는 효과 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 전압을 회수하면 하루가 점점 늘어나고 기억력이 좋아지고, 몸의 대사 기능도 빨라집니다. 에너지 충전 아침밥은 에..