아라의 WWW

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

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.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침이 주는 효과 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 전압을 회수하면 하루가 점점 늘어나고 기억력이 좋아지고, 몸의 대사 기능도 빨라집니다. 에너지 충전 아침밥은 에..