꿈트(GGUMT)

웹디자인기능사 실기 레이아웃 만들기 완성화면

웹사이트 만들기 유형별로 나누어 만들었던 웹페이지의 HTML, CSS를 합쳐 하나의 웹사이트로 만들어 보려고 합니다. 그동안 공통css와 reset.css는 같은 걸로 작업해 왔기에 잘 조합만 하면 쉽게 만들 수 있겠죠?. 아직 좀 더 다듬어야 하지만 @media 태그를 적용하여 반응형으로도 만들 예정 입니다. 🏁. 완성화면 ✈. HTML 헤더영역바로가기 슬라이드영역바로가기 이미지영역바로가기 이미지/텍스트영역바로가기 카드영역바로가기 배너영역바로가기 텍스트영역바로가기 푸터영역바로가기 슬라이드영역 event 식물 건강하게 키우기 이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요. 처음 보는 식물도 잘 키울 수 있어요! 자세히보기 상담신청 이전이미지 다음이미지 첫번째이미지 두번째이미지 세번째이..

텍스트 타입 웹페이지 만들기 여섯개의 텍스트컨텐츠가 들어있는 웹페이지를 만들어 보려고 합니다. ✈. 완성화면 ✈. FIGMA 디자인화면 ✈. 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/textTypeType/textType01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com `✈. 작업순서 작업할 내용 수집하고 정리하기 -> 피그마로 정확하게 디자인 -> VS코드에서 코딩 🏁. HTML body> NOTICE 나에게 맞는 반려식물 고르기 건강 관심형..

슬라이더 타입 웹페이지 만들기 슬라이더타입 웹페이지는 주로 웹사이트이 메인 화면에 쓰입니다. 이벤트를 연동하거나 웹페이지의 중요한 이슈를 다루는 슬라이더 타입 웹페이지를 만들어 보겠습니다. 완성화면 Figma작업 화면 코딩은 하나만 작업했지만 실제로 슬라이더는 여러 장 일 때 쓰이므로 디자인 작업은 3페이지를 했습니다. 🏳 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/sliderType/sliderType01.html HTML 메인 슬라이드 영역 event 식물 건강하게 키우기 이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요. 처음 보는 식물도 잘 키울 수 있어요! 자세히보기 상담신청 이전이미지 다음이미지 첫번째이미지 두번째이미지..

이미지텍스트 타입 웹페이지 만들기 이미지와 텍스트가 함께 들어간 웹페이지를 만들어 보았습니다. 완성화면 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/imgtextType/imgtextType01.html GitHub - aimeekwon/web2023: 수업시간 예제 수업시간 예제. Contribute to aimeekwon/web2023 development by creating an account on GitHub. github.com 작업순서 1. FIGMA로 레이아웃 만들기(컨텐츠 미리 준비해놓기) 2. VSCODE에서 코딩하기 1) FIGMA로 레이아웃 만들기 레이아웃 디자인을 할 때는 여백, 줄간격, 폰트크기, 이미지크기 등을 명확하고 ..

html/ css로 이미지 타입 웹페이지 만들기 FIGMA로 레이아웃 만들기 소스링크 https://github.com/aimeekwon/web2023/blob/main/site/imageType/imageType01.html 코드보기 html PLANT 반려 식물 건강하게 키우기 품종에 맞는 흙과 비료 다양한 식물이 가지는 특성에 맞춰 잘 자랄 수 있도록 조건에 맞는 흙과 비료를 알아두세요. 자세히보기 적당한 빛과 바람, 물 적당한 햇볕과 통풍이 잘되는 환경이 필요합니다. 때에 따라 일정한 주기로 물을 주시는 것도 중요합니다 자세히보기 css : reset 소스 홈페이지를 만들 때 기본적으로 쓰이는 요소에 대해 작성해놓고 시작합니다. /* reset */ * { margin: 0; padding: 0;..

텍스트 타입 웹페이지 만들어보기 완성 된 웹사이트를 만들기 전 다양한 유형의 웹페이지 구조를 만들어 보고 있습니다. 하나의 웹사이트에는 용도에 따라 다양한 유형의 페이지들이 조합되어 있습니다. 헤더타입, 배너타입, 이미지타입, 카드타입, 텍스트타입, 푸터타입 등으로 분류하여 작업 중 입니다. 이번에 메모할 유형은 문자가 많이 보여지는 형태인 텍스트타입 페이지 입니다. 완성된이미지 코드보기 NOTICE 나에게 맞는 반려식물 고르기 건강 관심형 스투키는 사막에 살던 다육식물로 물을 자주 줄 필요가 없어 키우기 쉬운 편에 속합니다. 또 밤에 이산화탄소를 배출하는 보통 식물과는 달리, 밤에 이산화탄소를 흡수하고 산소를 배출해 침실에... 더보기 깜빡깜빡형 식물에 물 주는 것을 자꾸 깜빡~깜빡하는 분들은 주목해 ..

예제 - 외부소스 연결 (예: 스타일시트) 정의 다른 웹페이지 소스 등을 현재 웹페이지에 끌어와 적용할 때 사용. (= 외부파일링크) 1. head 태그 내부에 사용해야 하지만, 각 개별 웹페이지 상단에 넣어 사용할 수도 있음. 2. HTML5에서 일부 속성 제거 및 추가. 3. HTML에서는 종료 태그없이 단독 사용하나, XHTML에서는 반드시 끝에 / 붙여 닫아야 함. 4. 구글 웹마스터 Favicon (파비콘) 가이드라인 https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ko 구문 cf. XHTML 경우. 속성 속성 속성값 쓰임새 비고 rel alternate archives author bookmark externa..

CSS grid 사용하여 레이아웃 만들기 CSS grid로 레이아웃을 만들게 되면 table태그로 만든 것과 마찬가지로 각 열과 행을 맞추어 요소를 배치할 수 있다. table보다 grid를 사용하면 더 많이 쉽게 만들 수 있는데, 예를들어 grid container의 하위요소는 css위치지정 요소와 유사하게 실제로 겹치고 레이어 되도록 스스로 위치를 지정할 수 있다. / 예제. grid 사용하여 레이아웃 만들어보기 01. 공간에 맞는 html을 구성한다. 02. id="wrap"이 이 레이아웃의 컨테이너다. 컨테이너를 기반으로 테이블(표)처럼 행과 열을 나누어 크기를 계산한다. 분할 된 선택자에 grid-area이름을 지정하여 grid를 쓸 준비를 한다. #wrap { margin: 0 auto; wi..

display : flex 로 만든 레이아웃 이해하기 // display : flex; // flex-wrap: flex; 두 속성을 정렬이 필요한 요소들의 부모 요소에 준다. 요소들이 여러 행에 나열되도록 하려면 flex-wrap 속성의 값을 wrap으로 지정한다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치된다. . flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다. nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.

float 으로 만든 레이아웃 이해하기 float는 일반적으로 요소들이 나란히 놓이도록 웹 사이트의 전체 레이아웃을 만드는데 널리 사용되어 왔다. ▶정렬이 필요한 가운데 부분의 요소에 float:left;속성을 쓴다. ▶float: left;속성을 준 요소들의 바로 다음 요소에 clear: both; 속성을 주어야 예시 처럼 float(떠오른)된 공간으로 다음 요소가 밀어올라 가는 것을 방지할 수 있다. .clearfix::before, .clearfix::after { display: block; content: ""; line-height: 0; } .clearfix::after { clear: both; } ▶또는 float: left;를 쓴 요소들을 감싸고 있는 태그에 .clearfix를 주어 f..

10보다 큰 숫자 찾기 수업시간에 배운 배열을 이용하여 10보다 큰 수를 찾아내는 미션이다. 길라잡이 배열요소의 개수만큼 for문을 반복한다 if문을 사용해서 요소의 값과 10을 비교한다 document.write문을 사용해서 화면에 표시한다 자바스크립트 사용시 불편한 점 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다. 제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다.제목1에 대한 설명글 입니다. 불편한 점 제목1에 대한..

/ HTML 구조 관련 요소 종류 " 문서와 관련된 태그(Document Related Tag) / 문서의 최상단 요소를 나타냅니다. / 문서 정보에 해당하는 내용을 설정합니다. / 문서 본문에 해당하는 내용을 설정합니다. / 문서의 기본 URL을 설정합니다. / 문서의 외부 리소스를 설정합니다. / 문서의 메타 정보를 설정합니다. / 문서의 스타일 정보를 설정합니다. / 문서의 제목을 설정합니다. " 섹션과 관련된 태그(Section Related Tag) / 문서의 주요 콘텐츠 영역을 설정합니다. / 주제별 그룹의 콘텐츠 섹션을 설정합니다. / 문서의 독립적인 컨텐츠 섹션을 설정합니다. / 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. / 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다. / 문..

/ 시멘틱 마크업 이란 ? 시멘틱(Semantic)은 사전적으로 '의미론적인'이라는 뜻으로, 시멘틱 마크업은 '의미가 명시된 HTML 문서'이다. 시멘틱 마크업은 h1, header, nav, section, footer등 다양한 태그들을 문서 내용에 맞게 선택하여 사용하는 것을 말한다. / 시멘틱 태그 작성방법 헤더 / 푸터에 와 사용 내비게이션에 사용 메인 컨텐츠에 과 사용 독립적인 컨텐츠에 사용 최상위 제목으로 사용 순서가 없는 목록으로 과 사용 / 시멘틱 마크업의 필요성 SEO - 검색엔진 최적화에 유리하다 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와준다 유지보수 - 정리된 마크업은 코드 식별이 용이하다 / 논리적 순서 마크업 이란 ? 시멘틱 마크업과 함께 웹 문서의 뼈대가 되는 ..

==

블록 레벨 요소(Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 인라인요소 (Inline Elements) 인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 인라인 요소는 텍스트 라고 생각하면 됩니다. HTML 삽입 미리보기할 수 없는 소스