본문 바로가기

HTML12

웹사이트 만들기 : 푸터 유형 레이아웃01 레이아웃 : 푸터 유형01 다음과 같은 푸터 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 푸터 영역은 먼저 footer__menu 클래스를 가진 div 박스 안에 메뉴의 개수만큼 6개의 div 박스를 만들어 주고, 그 안에 각각의 메뉴 제목, 목록을 작성해 주었습니다. 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 콘텐츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 mo0647. Portf.. 2022. 9. 5.

웹사이트 만들기 : 텍스트 유형 레이아웃03 레이아웃 : 텍스트 유형03 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 제목을 적어 주고, 카드 부분은 contents 박스를 만들어, contents 박스 안에 세 개의 card를 만들어 주었습니다. 각각의 카드는 내용 부분과 info 부분, 링크 부분으로 나누어 주었습니다. info 박스는 icon과 정보 부분으로 나누어 주었습니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달 전만 해도 여러 원인들로 인해 자존감이 밑바닥이었던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음 속으로 울고 싶다를 외쳤던 저였는데 이제는 조금이나마 이겨낼 수 있을 것 같네요. 다음에 선생님을 만났을 때는 많.. 2022. 9. 1.

웹사이트 만들기 : 텍스트 유형 레이아웃02 레이아웃 : 텍스트 유형02 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, 컨테이너 박스 안에 title과 contents 박스를 만들어준 뒤, section 클래스에 display: flex, space-between 속성을 추가해 레이아웃을 배치했습니다. title 안에는 sub title 상자, title, desc를 만들어 주었습니다. contents는 top과 bottom으로 나누어, 각각 두 개의 card가 배치되도록 작업해 주었습니다. TEXT TYPE02 귀여운 동물들 전문과정 세상의 귀여운 댕댕이... 귀여운 고양이... 귀여운 다람쥐... 귀여운 고라니... 귀여운 알파카... 귀여운 고릴라... 세상의 귀여운 댕댕이 귀, 귀, 귀 자로 끝나는 말.. 2022. 8. 31.

웹사이트 만들기 : 텍스트 유형 레이아웃01 레이아웃 : 텍스트 유형01 다음과 같은 텍스트 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 먼저, container 박스를 만들어 주고, 그 안에 text__card 클래스명을 가진 div 박스를 만들어 주었습니다. 총 6개의 카드를 만든 뒤, 각각의 카드 안에는 아이콘과 제목, 설명, 더보기 버튼을 추가해 주었습니다. 텍스트 유형01 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효과를 위해서 조금 더 더보기 세상의 귀여운 야옹이 세상의 귀여운 댕댕이... 댕댕이 이야기만 몇 번째인지... 댕댕이 글자를 보면 게슈탈트 붕 괴 현상이 일어날 것만 같다. 세 줄 효.. 2022. 8. 30.

HTML : 블록 구조와 인라인 구조 블록 구조와 인라인 구조 HTML 태그를 배우기 전에는 요소의 유형과 성질을 먼저 알아두어야 합니다. 요소의 유형은 '블록 구조'와 '인라인 구조'로 나누어집니다. 블록 구조와 인라인 구조의 특징 요소 유형 특징 블록 구조 1. 블록 구조는 줄 바꿈이 일어납니다. 2. 블록 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 블록 구조 중에는 블록 구조를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다. 인라인 구조 1. 인라인 구조는 줄 바꿈이 일어나지 않습니다. 2. 인라인 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 인라인 구조는 블록 구조를 자식 요소로 포함할 수 없습니다. HTML5로 넘어오면서 블록 구조와 인라인 구조.. 2022. 8. 21.

웹사이트 만들기 : 이미지 유형 레이아웃02 레이아웃 : 이미지 유형02 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. 이번에는 이미지가 총 세 개이며, 이미지 위에 마우스를 hover하면 '자세히 보기' 버튼이 나타나는 CSS 요소도 추가하였습니다. HTML 소스 먼저, 세 개의 article 태그를 만들어 각각 이미지를 첨부해 주었습니다. article 태그 안에서도 image 부분과 desc 부분을 나누어 작업해 주었습니다. 바다에 사는 생물들 바다에는 어떤 생물들이 살고 있을까요? TTUNG-E 자세히 보기 JingJing-E 자세히 보기 Jibgeo-Sajang 자세히 보기 CSS 소스 폰트는 지마켓 산스를 사용하였고, display: flex를 이용하여 세 개의 이미지를 가로로 배치하였습니다. overflow-hidde.. 2022. 8. 17.

웹사이트 만들기 : 이미지 유형 레이아웃01 레이아웃 : 이미지 유형01 다음과 같은 이미지 유형의 레이아웃을 작업해 보도록 하겠습니다. HTML 소스 카드 유형과 유사하게, 두 개의 카드를 만들어 이미지를 백그라운드 방식으로 삽입했습니다. 웹 표준 준수를 위해, a 태그에는 title을 추가해 주었습니다. 세상의 귀여운 댕댕이 강아지 종류는 매우 다양합니다. 하지만 하나같이 정말 귀엽습니다. 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 세상의 귀여운 댕댕이 누가 뭐래도 댕댕이는 참 귀엽다. 왜 나는 댕댕이가 없을까? 자세히 보기 CSS 소스 폰트는 넥슨 Lv1 고딕을 사용하였고, display: flex를 이용하여 두 개의 이미지를 가로로 배치하였습니다. /* fonts */ @import url.. 2022. 8. 17.

HTML : 구조 관련 요소 구조 관련 요소 기존 HTML에서는 콘텐츠의 구조를 구분할 수 있는 시멘틱한 요소가 제공되지 않았지만, HTML5에서는 구조를 설계할 수 있는 main, nav, section, article, aside, header, footer 등 다양한 구조 관련 요소가 새롭게 추가되었습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 반응형웹 MENU01 MENU02 MENU03 MENU04 MENU05 콘텐츠 그룹01 콘텐츠 그룹02 주요 기사 광고 경기도 안산시 단원구 고잔동 어딘가 031)234-5678 mo0647@naver.com 저작권이 뭐지? 결과보기 구조 관련 요소를 사용하여도 HTML만을 이용해 작업하면, 레이아웃이 나타나지 않습니다. CSS로 스타일 속성을 추가해 .. 2022. 8. 15.

웹사이트 만들기 : 카드 유형 레이아웃03 레이아웃 : 카드 유형03 이번에는 다음과 같은 3개의 카드가 있는 레이아웃 유형을 작업해 보도록 하겠습니다. CSS 소스 폰트는 에스코어 드림을 사용했고, 컨테이너 안에 3개의 카드를 만들어 display:flex로 가로 정렬을 해 주었습니다. blind 효과는 ir 효과와 마찬가지로, 글자가 눈에 보이지 않게 작업하지만, 스크린 리더기에서는 읽히게끔 만들어 웹 접근성을 준수하게끔 합니다. /* fonts */ @import url('https://webfontworld.github.io/score/SCoreDream.css'); .score { font-family: 'SCoreDream'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } .. 2022. 8. 10.

웹사이트 만들기 : 카드 유형 레이아웃02 레이아웃 : 카드 유형02 이번에는 카드가 총 8개인 유형입니다. 다음과 같은 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 ir 효과는 글자를 시각적으로 보이지 않게 작업해주고 있지만, 스크린 리더기에서 글자가 읽히게 해 줌으로써 웹 표준을 준수할 수 있습니다. /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: 'GmarketSans'; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, .. 2022. 8. 9.

HTML : 웹 표준과 웹 접근성, 웹 호환성 웹 표준과 웹 접근성, 웹 호환성 웹 사이트를 제작할 때는 웹 표준(Web Standards), 웹 접근성(Web Accessibility), 웹 호환성(Cross Browsing)을 준수하여야 합니다. 웹 표준이란? 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법을 의미합니다. 국내의 웹들은 특정 브라우저와 사용자 등의 이용환경, 비표준 페이지 및 과도한 플러그인 사용으로 인해 장애인, 노약자를 포함한 모든 사용자들에게 있어 정보 접근 제약이 존재합니다. 따라서, 브라우저의 종류나 버전에 상관.. 2022. 8. 8.

웹사이트 만들기 : 카드 유형 레이아웃01 레이아웃 : 카드 유형01 다음과 같은 카드 유형의 레이아웃을 작업해 보도록 하겠습니다. CSS 소스 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* common */ .container { width: 116.. 2022. 8. 8.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바