SITE15 [사이트 만들기]모든 유형을 모아서 만들어보자 실전유형01 사이트 만들기 _ 실전 돌입 01 여러분 여태까지 온갖 유형에 대해서 공부를 했는데요. 드디어 결전의 날입니다!!👊 그동안 공부했던걸 열심히 모으고 모아서 사이트를 만들어 볼까요? HTML + CSS + JS (+α로 반응형까지) 삼위일체 가봅시다. 할 수 있어요! (없는거 같기도) 📝 피그마로 밑작업(?) 본인이 만들 사이트를 바로 코딩부터 들어가면 머리터질걸요? 우리같은 뉴비들은 이렇게 편집 소프트웨어를 이용해서 먼저 작업해준 뒤 코딩을 들어가는 습관을 갖도록 합시다. 저는 피그마가 편해서 피그마로 작업했는데요. 포토샵으로 하셔도 무관합니다. 프로그램은 편한걸로 알아서~ 반응형도 할 예정인데, 반응형은 굳이 레이아웃을 미리 구상하지 않았어요. 그래서 완성본 캡처로 대체합니다. 화질이 조금 떨어지지만 .. 2022. 9. 12. [사이트 만들기] 슬라이드 유형01 사이트 만들기 _ 슬라이드 유형01 슬라이드 유형에 대해 알아보겠습니다. 사실 사이트만들기는 여태까지 했던 내용들이 계속해서 나오는 부분이라 이렇다할 내용이 없네요...? 그래도 같이 보시죠 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } 웹 표준 준수를 위해 .dot a 에 ir 효과를 부여합니다. 이외도 .slider__arrow a 에도 똑같이 부여합니다. CSS 속성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon.. 2022. 9. 6. [사이트 만들기] 푸터 유형01 사이트 만들기 _ 푸터 유형01 오늘은 사이트에서 최하단을 담당하는 푸터 유형을 만들어 보겠습니다. 보통 회사 사이트의 경우 회사의 주소 등을 입력하는 곳입니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ 간단한 부분이라 이렇다할 내용은 없습니다. '.footer__menu '안의 내용은 flex로 코딩하여 메뉴들이 일렬로 배치될 수 있도록 해주세요. CSS 속성 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: "NexonLv1Gothic"; font-weight: 400; } /* 리셋 */ *{ margin: 0; padding: 0; } a{ tex.. 2022. 9. 6. [사이트 만들기] 배너 유형01 사이트 만들기 _ 배너 유형01 오늘은 사이트에서 일반적으로 홍보 이미지 등을 삽입하는 배너 유형을 만들어 보겠습니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .banner__inner { background-image: url(../site1/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: white; } 배경이미지를 삽입하였는데, repeat으로 반복없이 한번만 출력, position:center로 가운데 정렬을, size:cover를 통해 사이즈에 맞게 채웁니다. CSS .. 2022. 9. 5. [사이트 만들기] 이미지/텍스트 유형 01 사이트 만들기 _ 이미지텍스트 유형01 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ 유용한 사이트 살펴보기 .blind{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 대제목에 블라인드 효과를 주어 감추었습니다.큰 주제이지만 구조상 밑으로 내려가니깐 웹표준을 준수하기 위해서 이렇게 한게 아닐까...?싶습니다. .imgText__txt ul li::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 5px; top: 9px; background: #666; } li태그에서.. 2022. 9. 1. [사이트 만들기]헤더 유형01 사이트 만들기 _ 헤더 유형01 이번엔 헤더 유형을 만들어 보겠습니다. 헤더 유형은 간단해서 크게 설명할 부분은 없지만 그래도 같이 공부해볼까요 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ .header__menu { width: 60%; text-align: center; } .header__member { width: 20%; text-align: right; } .header__logo { font-size: 30px; font-weight: 700; text-transform: uppercase; width: 20%; } 로고와 메뉴바, 로그인버튼에 width값을 주지않으면 추후에 내용이 추가될 경우 배치가 어색해보이게 됩니다. 그렇기 때문에 언제든지 가운데정렬로 보이게 하기 위해서 각각 width값을 .. 2022. 9. 1. [사이트 만들기] 텍스트 유형03 사이트 만들기 _ 텍스트 유형03 이번 시간은 텍스트 유형 세번째 시간입니다. 이번엔 제가 임의로 만든 사이트라서 제가 여러가지 실험 아닌 실험을 많이한 사이트네요. 같이 가보시죠 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ ir효과와 이미지스프라이트효과에 대한 설명은 또 할 이유가 있을까요ㅎㅎ패스하겠습니다. 구글 아이콘 활용하기! star star 오늘의 피그마를 보시면 별점을 메기는 박스가 있었는데요. 세개의 박스에 전부 같은 별점그림이면 이미지태그를 썼겠지만 하나는 별점이 4개라서 두개의 이미지로 저장해서 또 넣기는 조금 비효율적인것 같더라구요!그래서 저는 이걸 이미지말고 또 색다른 방법으로 구현을 해보고 싶더라구요. (근데 이게 웹표준을 준수할 수 있는 방법일지...😶) 아.무.튼! 단순하게 이미지파일로.. 2022. 9. 1. [사이트 만들기]텍스트 유형 02 사이트 만들기 _ 텍스트 유형02 이번 시간은 텍스트 유형 두번째 시간입니다. 들어가기에 앞서 이번엔 레이아웃 배치를 원활하게 하기 위해서 dispaly:grid를 사용해서 작업했구요. 더보기링크가 없으므로 아이콘에 a링크를 부여할 예정입니다. 한번 따라가 보실까요 ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } .icon{ background: url(img/text_type02.svg) no-repeat; width: 60px; height: 60px; border-radius:.. 2022. 8. 31. [사이트 만들기] 텍스트 유형01 사이트 만들기 _ 텍스트 유형01 이번 시간에는 텍스트 유형을 만들어 보겠습니다. 6개의 섹션으로 구성되어 있으며, 아이콘은 div태그에 background를 이용했지만 웹표준을 준수하기 위해 ir효과를 입힐 예정입니다. ■ 그림으로 미리보기🎨 ■ 핵심내용✍ - html 코드 - icon - css 코드 - .ir{ overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } 시각적으로는 아이콘이 표시되지만 웹표준을 준수하기 위해서는 의미없는 div태그에 이미지를 입혀서는 안되겠죠? 그래서 span태그에 그림에 대한 설명을 적어주고 ir효과를 주어서 시각적으로 텍스트는 가리지만 리더기가 읽.. 2022. 8. 30. 웹사이트 만들기/ImageType 03 사이트 만들기 _ 이미지 유형03 이번 시간은 이미지 유형 세번째 시간입니다. 5개의 이미지로 구성되어 있으며 마우스 오버시 아이콘과 내용이 출력되게 구성해 보겠습니다. 여태까지는 flex를 사용했지만 이번구조는 flex를 사용하게 되면 2-5번째 이미지를 한 박스로 묶어서 작업하다보니 추후에 불편할 수 있으므로 이번엔 grid를 이용해서 레이아웃을 작업할게요! 앞서 말씀드렸듯 이번 구조는 gird를 이용해서 작업했습니다. 이번 구조는 와이드웹구조라서 기존에 사용하던 1160px의 구조로는 구현할 수 없습니다. 그래서 사용한게 다음과 같은 속성값입니다. .container-fluid{ width: 100%; padding: 0 100px; box-sizing: border-box; } 와이드 웹이다보니 .. 2022. 8. 21. 웹사이트 만들기/ImageType 02 사이트 만들기 _ 이미지 유형02 기존 이미지유형에서 한단계 더 발전한 이미지 유형02에 대해 공부해보겠습니다. 레이아웃이 3개로 늘었고 마우스 오버했을때 효과를 부여해보겠습니다. 이미지 유형01번처럼 카드타입유형02번의 코드를 활용해서 만들어 봅시다. transform: scale(1.05); 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 속성입니다. * scale() : x축 or y축으로 확대/축소 * rotate() : 지정 요소 회전 * translate() : 요소 x축 or y축으로 이동 * skew() : x축 or y축 기울이기 transition: all 0.6s ease-in; 속성을 서서히 변화시키는 속성입니다. transition: property timing-function.. 2022. 8. 17. 웹사이트 만들기/ImageType 01 사이트 만들기 _ 이미지 유형01 이번엔 새로운 유형인 이미지 유형에 대해 알아보겠습니다. 기존에 했었던 카드타입과 굉장히 유사했던 부분이라 어렵지 않게 따라하실 수 있을거에요. 기존 카드타입01번과 레이아웃은 크게 다르지 않으므로 카드타입01번의 코드를 조금 활용해서 작업했습니다. background: url(이미지경로) no-repeat center; 이미지 위에 글씨를 나타내기 위해서는 여태까지 position을 이용했었는데요. 이번에 새롭게 등장한 이녀석은 배경 자체에 그림을 입히는 방법입니다. no-repeat과 center는 선택사항이고, url()안에 이미지경로만 입력해주면 원하는 그림을 단색배경대신 사용할 수 있습니다. * no-repeat: background-repeat속성에 해당하는 .. 2022. 8. 17. 웹사이트 만들기/CardType 03 사이트 만들기 _ 카드 유형03 사이트 만들기 세번째 시간입니다. 오늘은 카드유형 중 세번째 유형입니다. 기존 텍스트 형태 밑에 프로필아이콘과 간단한 텍스트들이 추가 되었네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 시멘틱 태그를 사용한 이후엔 h태그가 필수적으로 와야 하는데요. 그래서 html소스의 이후에 h태그를 사용했습니다. 하지만 저희는 이 h태그를 보여주면 안되겠죠? 그래서 이번엔 이 h태그에 class="blind"를 부여해서 blind라는 css속성을 사용해보겠습니다. 그리고, footer부분의 배치가 애매하죠? 저도 어려워요...😥 오른쪽부터 배치될 수 있게 하기 위해 새로운 justify-content 속성인 flex-end를 사용해봐요. justify-content: flex-en.. 2022. 8. 10. 웹사이트 만들기/CardType 02 사이트 만들기 _ 카드 유형02 사이트 만들기 두번째 시간입니다. 오늘은 카드유형 중 두번째 유형입니다. 4개의 카드가 한줄에 구성된 총 두줄의 카드유형이네요! 웹 표준을 준수해서 사이트를 만들어 봅시다. 웹표준을 준수하여 사이트를 만들어 보겠다고 했었는데 카드타입1유형과는 다르게 시간과 다르게 더보기가 텍스트가 사라지고 이미지로만 구성되어있기 때문에 alt태그를 통해서 이미지에 대한 설명을 덧붙여줘야합니다. 그런데 이번에는 더보기를 a링크로만 구성하고 css를 이용해서 작업해서 alt링크를 넣을 수가 없네요...또 이미지가 혹시라도 출력이 안될 경우 읽어줘야하는데 못읽는 경우가 발생할 수 도 있습니다. 이럴땐 어떻게 해야할까요? 정답은 'IR효과를 사용해라' 입니다. IR 효과 IR 기법은 이미지 대체.. 2022. 8. 9. 웹사이트 만들기/CardType 01 사이트 만들기 _ 카드 유형01 사이트 만들기 첫번째 시간입니다. 사이의 구성 유형은 메뉴 유형, 배너 유형, 이미지 유형 기타 등등 많은 유형이 있습니다. 그 중 카드 유형에 대해 공부해보겠습니다. 카드 유형 중 기본이 되는 유형입니다. 아래 피그마를 참조하여 똑같이 만들고 웹표준 기준도 준수해봅시다. 보통 wrap의 width 값을 1200px으로 부여했지만, 이번 사이트-카드유형은 양쪽에 살짝식 여백이 있으므로 1160px로 작업합니다. 레이아웃 배치 속성은 'display:flex'를 사용하여 작업하겠습니다. aria-hidden="true" 웹표준을 준수하기 위해 aria-hidden="true"을 사용하였습니다. 청각장애인들이 사이트를 이용할때는 스크린리더를 통해 사이트를 이용하는데요. 위 사.. 2022. 8. 8. 이전 1 다음 반응형
