공부블로그

웹디자인 기능사 실기 연습 (슬라이드, 메뉴, 갤러리, 제이쿼리) 웹디자인 기능사 실기는 웹디자인 기술과 역량을 평가하는 시험입니다. 일반적으로 다음과 같은 주요 내용을 다룹니다. 1. HTML 및 CSS: 웹 페이지의 구조와 스타일링에 대한 이해와 적용력을 평가합니다. HTML 태그와 CSS 속성을 사용하여 웹 페이지를 만들고 디자인하는 기술이 필요합니다. 2. 웹 그래픽 디자인: Adobe Photoshop, Illustrator 등의 그래픽 편집 도구를 사용하여 웹 그래픽을 디자인하는 능력을 평가합니다. 배경 이미지, 아이콘, 버튼 등을 디자인하고 편집하는 기술이 중요합니다. 3. 웹 접근성: 웹 콘텐츠에 대한 접근성을 고려하는 능력을 평가합니다. 장애인이나 저시력자 등 모든 사용자가 웹 페이지에 ..

웹디자인 기능사 실기 메뉴, 슬라이드 유형! 웹디자인 기능사 실기 A~E 유형의 메뉴와 슬라이드를 만들어봤습니다. 단일메뉴, 전체메뉴 로고 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 하단메뉴 COPYRIGHT document.querySelectorAll(".nav > ul > li")을 사용하여 HTML 문서 내에서 클래스가 "nav"인 요소의 자식 중에서 ul 태그를 가지고 있고, 그 자식 요소 중에서 li 태그인 모든 요소를 찾아옵니다...

웹디자인 기능사 실기 유형별 레이아웃 정리! 웹디자인 기능사 실기 A~E 유형별로 레이아웃을 만들어봤습니다. 웹디자인 기능사 실기 A유형 1번 레이아웃 로고 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 COPYRIGHT SNS 웹디자인 기능사 실기 B유형 1번 레이아웃 로고 이미지 슬라이드 공지사항 배너 바로가기 로고 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 C유형 1번 레이아웃 로고 이미지 슬라이드 공지사항/갤러리 배너 바로가기 로고 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 D유형 1번 레이아웃 LOGO LOGO SNS 웹디자인 기능사 실기 E유형 1번 레이아웃 LOGO 배너 공지사항 갤러리 링크 이미지 슬라이드 LOGO 하단메뉴 COPYRIGHT 웹디자인 기능사 실기 유형별 메뉴..

사이트 제작 - 메인 페이지 시안 짜집기 사이트 메인 시안 작업을 했습니다. 팀 프로젝트 오픈런 대행사 사이트를 만들기 입니다. 제 기준으로 사이트를 트렌디 하면서 심플하게 만들려고 노력했고, 생각한거 만큼 쉽지 않았습니다. 각종 유명한 브랜드 사이트, 쇼핑몰 사이트를 살펴 보았고 '나중에 필요 할 수 있겠다.' 싶은 사이트들을 저장해놨으며 더 추려서 피그마에 따로 정리했습니다. Figma [ 여러 사이트를 부분 짜집기 한 시안입니다. ] 쓸만한 사이트 주소 찾아본 사이트 중에 쓸만한 사이트 주소를 저장하고, Figma에 추리기 더 추려서 피그마에 따로 풀페이지로 캡쳐를 떴습니다. 헤더, 슬라이더, 이미지, 텍스쳐, 푸터 유형을 마음에 드는것들을 골라 짜집기 했습니다. 헤더 유형 https://www.s..

웹디자인 기능사 실기 홈페이지 만들어보기 시험 실기를 위해 연습을 해봤습니다. VSCode 즐길거리 요금/우대혜택 참여프로그램 이용가이드 소통서비스 롯데월드 소식 | 뉴스 공지 그럴싸진관 미라클2018.11.19 드림스테이지'힘내 소중한 너'2018.11.30 '힘내 소중한 너' 음원 발배2018.11.19 이용 요금 조정 안내2018.11.19 더보기 특별한 경험 연간회원안내 연간회원안내 연간회원안내 연간회원안내 서울특별시 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자: 박동기 사업자등록번호:219-85-00014 | 통신판매업신고번호: 송파 제 5513호 | 전화:1661-2000 COPYRIGHT 2018 LOTTEWORLD. ALL RIGHTS RESERVED. 완벽하게 만든건 아니지만 일단..

사이트 만들기 최종본 (헤더, 배너, 슬라이드, 카드, 이미지, 텍스트,이미지/텍스트, 푸터 유형) 을 합친 사이트 입니다. 블로그 슬라이드 유형 : https://ehcjswo.tistory.com/42 이미지 유형 : https://ehcjswo.tistory.com/36 이미지/텍스트 유형 : https://ehcjswo.tistory.com/41 푸터 유형 : https://ehcjswo.tistory.com/51 블로그에 포스팅을 안한 사이트가 많지만 완성은 다 했습니다! 완성 화면 헤더 : https://ehcjswo.github.io/web2023/site/headerType/headerType01.html 슬라이드 : https://ehcjswo.github.io/web2023/site/s..

퀴즈 사이트 만들기 객관식 문제들을 많이 풀 수 있도록 만들어 보겠습니다. [ 문제가 좀 많개 ] https://ehcjswo.github.io/web2023/javascript/quiz/quizEffect05.html 링크를 눌러 큰 화면으로 편하게 보실 수 있습니다! VSCode Quiz 객관식 확인하기 (여러문제) 유형 1 2 3 4 5 html 부분 입니다. 페이지는 header와 main 요소로 구성됩니다. header 요소에는 페이지 제목과 각 퀴즈에 대한 링크가 포함된 메뉴가 있습니다. main 요소에는 quiz__wrap 클래스가 있는 div 요소가 있으며, 여러 퀴즈의 정보가 이 div 요소 안에 동적으로 로딩됩니다. 주석 처리된 코드를 제거하면, 퀴즈 질문과 선택지, 그리고 정답 확인 ..

푸터 (footer) HTML에서 태그는 일반적으로 웹 페이지의 하단에 있는 섹션을 나타냅니다. 이 섹션은 페이지의 제작자 정보, 저작권 정보, 연락처 정보, 관련 링크 등을 포함할 수 있습니다. [ 완성된 푸터 피그마 ] 일반적으로 태그는 웹 페이지의 내용의 끝을 표시하고, 페이지가 끝났음을 나타내기 위해 사용됩니다. 태그는 보통 태그와 쌍을 이루며, 이 둘은 웹 페이지의 상단과 하단을 각각 나타냅니다. VSCode 푸터 간식 사이트 소개하기 간식 이야기 간식 추천 간식 만들기 인기 상품 상품 목록 간식 추천 간식 고르기 쿠키 인기 상품 간식 랭킹 간식 세일 간식 목록 케이크 인기 상품 간식 랭킹 간식 세일 간식 목록 음료수 인기 상품 간식 랭킹 간식 세일 간식 목록 정보 이용 약관 간식 주의점 개인정..

텍스트 유형 사이트 웹 디자인에서 텍스트는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다. [ 피그마 텍스트 유형 사이트 ] VSCode NOTICE 간식의 무서운점 비만 과다한 간식 섭취는 비만 및 대사 증후군의 위험을 증가시킬 수 있습니다. 신체에 불필요한 에너지를 제공할 뿐만 아니라 체중 증가 및 당뇨병, 고혈압 등의 질병 발생 가능성을 높일 수 있습니다. 더보기 소화장애 과도한 간식 섭취는 소화장애의 원인이 될 수 있습니다. 간식은 대개 지방과 설탕이 많아 소화를 위해 추가적인 소화 효소가 필요할 수 있습니다. 소화장애 증상을 유발할 수 있습니다. 더보기 치아 우식 과도한 간식 섭취는 치아 우식의 위험을 증가시킬 수 있습니다. 많은 간식에는 설탕이 들어가 있으며, 이는 ..

퀴즈 사이트 ( 4 ) 객관식 문제를 풀 수 있도록 만들어 보겠습니다. [ 모르면 찍으시개 ] VSCode " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 주말이 좋개~ ]

슬라이드 유형 사이트 슬라이드 사이트(Slide site)란 이미지나 동영상, 텍스트 등을 슬라이드 형태로 구성한 웹사이트를 말합니다. 슬라이드 사이트는 보통 특정한 주제나 테마에 대해 정보를 제공하거나, 프리젠테이션을 위해 사용됩니다. VSCode 메인 슬라이드 영역 event 고민하지 마세요! 매일매일 힘든 일상에서, 달콤한 한 입의 쉼을 드세요. 우리의 간식은 당신의 하루를 달달하게 만들어줄 거예요. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 HTML 부분 입니다! 피그마의 사진중 맨 윗장을 작업했습니다. 슬라이더 클래스를 만들어 사진이 들어갈 자리를 만들어 주고, 슬라이더 클래스 안에 event박스, 타이틀, 내용,을 적어두고 밑에 버튼..

이미지 / 텍스트 유형 사이트 웹 디자인에서 이미지 / 텍스트는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다. [완성된 이미지/텍스트 유형 사이트] VSCode NOTICE 수 많은 간식의 종류 간식은 다양한 종류가 있습니다. 자신이 좋아하는 종류의 간식을 선택하고, 그 간식을 즐기기 위한 시간을 가져보세요. 간식을 즐기기 위해 충분한 시간을 가지는 것은 행복감을 느끼는 데 큰 도움이 됩니다. · 과일 (바나나, 사과, 오렌지, 딸기 등) · 초콜릿 (땅콩초콜릿, 밀크 초콜릿 등) · 쿠키 (초코칩 쿠키, 버터 쿠키, 오트밀 쿠키 등) · 케이크 (초콜릿 케이크, 생크림 케이크 등) · 아이스크림 (바닐라, 초콜릿, 딸기, 민트 등) · 과자 (스낵과자, 쿠키와퍼, 빼빼로, ..

퀴즈 사이트 ( 3 ) 주관식 문제를 3개를 풀 수 있도록 만들어 보겠습니다. [ 분신술이개! ] VSCode " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 오늘은 울개 😢 ]

이미지 타입 사이트 웹 디자인에서 이미지는 중요한 역할을 담당하며 웹 페이지의 시각적인 효과를 높이는 데 기여합니다. [ 완성된 이미지타입 사이트 ] VSCode 어떤 간식이 더 맛있을까 어떤 간식이 야무지게 나를 만족시킬수 있을까요? 사탕을 입에 넣어보세요 다 녹을때까지 깨물어 먹지마세요.천천히 녹여 드셔야 오래갑니다. 자세히보기 크게 한입 깨물어보세요 달콤함을 커피와 함께 드시면 좋습니다 자세히보기 이제 슬슬 좀 구조가 익숙해 지고 있습니다. image__wrap 태그 틀 안에 이미지 두 장을 넣을 container 태그 클래스를 만들고 그 안에 image 아티클 태그 클래스를 두 개를 넣어 사진 자리를 잡은 뒤, figure 태그를 사용해 사진을 넣었는데 figure는 처음 보는 태그라 검색을 해봤..

퀴즈 사이트 ( 2 ) 주관식 문제를 풀 수 있도록 만들어 보겠습니다. [ 염색했개~ ] 퀴즈 이펙트01 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 정답 맞췄개~ ] 정답을 맞혔을 때 모습입니다! 참 귀엽죠~

퀴즈 사이트 퀴즈를 풀어볼 수 있는 사이트를 만들어 보겠습니다. 와~ 강아지가 너무 귀엽습니다! 사이트를 어떻게 만들었는지 코드를 한번 보겠습니다~ 퀴즈 이펙트01 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 [ 안녕하개~ ]

flex Flex 레이아웃은 아이템의 크기와 위치를 동적으로 조정할 수 있는 CSS 레이아웃 방법입니다. Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 합니다. Flexbox는 행 또는 열로 아이템을 배치하고, 아이템의 크기, 간격, 정렬 및 순서를 지정하는 것이 가능합니다. Flex 레이아웃을 만들기 위해서는 부모 요소에 display: flex; 속성을 지정해주면 됩니다. 이후에는 아이템들에 대해 flex 속성을 이용하여 크기, 간격, 정렬, 순서 등을 조정할 수 있습니다. 자세히 알아 보겠습니다. display: flex CSS의 속성 중 하나로, Flex 레이아웃을 적용하기 위해 부모 요소에 지정하는 속성입니다. 이 속성을 지정하면 부모 요소가 Flex 컨테이너가 되어, ..

구조관련 요소중 하나인 section과 그에 관련된 태그들을 살펴보겠습니다. 이미지출처 1. section 태그란? section 태그는 HTML 문서에서 섹션(section) 부분을 정의합니다. 또한 태그는 HTML5에서 새롭게 추가된 요소입니다. 섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미합니다. HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화해주는 태그이며 주제에 대한 제목 요소 (~) 를 포함하는것이 좋습니다. 텍스트,인라인 요소, 블록 요소를 포함할 수 있습니다. 주로 연관된 문서의 독립적 단락을 정의할 때 사용합니다. 태그 안에 태그를 사용할 수 있지만, 반대로 태그 안에 태그를 사용할 순 없습니다. 이제 과 연관된..

시멘틱 마크업 이미지출처 시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다. 모든 사람들이 동등하게 정보를 동일하게 받아들일수 있는 환경이 다를 수 있습니다. 예를 들어 시각장애인에게 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다. 시멘틱의 태그들 입니다. 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 문서 의 주요 콘텐츠를 나타냅니다. 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 ..

이미지 출처 블록 레벨 요소(Block-lever Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 블록 요소는 모든 인라인 요소를 포함할 수 있고, 다른 블록요소도 일부 포함할 수 있다. 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width,height,margin,padding 등을 사용하여 형태를 변형하여 레이아웃을 수정할 수 있습니다. width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정됩니다. 블럭 요소 : ,,~,,,,,,,,,, 예시를 들어보자면, 김도현은 두명이다. 정말 놀랍다! 이대로 출력해보면 이렇게 배경색깔이 들어간 블록이 한줄을 끝까지 차지하게 되며 wid..