웹언어/웹컨텐츠제작꿀팁-HTMLCSS중급편 (9) 썸네일형 리스트형 [웹컨텐츠제작꿀팁] 8강 Image Sprite와 CSS움짤 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=31Hvgosnwgg&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=9 1. Image Sprite를 사용하는 이유 - Sprite(스프라이트)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 의미합니다. 웹, 즉 CSS에서는 여러 개의 이미지를 하나의 이미지로 합쳐서 만들어 놓은 것을 의미합니다. - Image Sprite를 쓰는 이유는 크게 2가지입니다. 렌더링시간줄이기, 용량줄이기입니다. 1) 렌더링시간 줄이기 - 브라우저는 화면에 구현하는 모든 자원을 서버에 요청하고 불러와서 구현(렌더링)합니다. - 그래서 코드를 .. [웹컨텐츠제작꿀팁] 7강 TabBar와 SwitchButton제작 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=JmNXShXYKAA&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=8 ** 이번 강의는 HTML과 CSS로만 제작하는 탭바컨텐츠와 스위치버튼을 해보도록 하겠습니다. - 이 두개를 같이 묶은 이유는 체크박스/라디오버튼의 체크를 통한 컨텐츠이기 때문입니다. - 여기서 알아야 할 것은 두가지 포인트인데, 첫번째는 label태그를 클릭해도 체크/미체크가 된다는 점이고, 두번째는 입력양식 선택자 중 체크되었을 때가 있다는 점입니다. ## 문법 입력양식요소:checked{ } - 위에 보이는 이 선택자를 통해 다양한 작업을 할 수 있습니다. 1. TabBar 제작 *.. [웹컨텐츠제작꿀팁] 번외편 - 새해맞이 윷놀이 만들기 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=aW3rxRZyODk ** 사용될 이미지(윷은 일러스트레이터로 자제체작, 느낌표만 다운로드) 1. 전체 미리보기 See the Pen OSSAM 윷놀이 - Korean traditional game by OSSAM (@5ssam) on CodePen. [웹컨텐츠제작꿀팁] 6강 Board Preview 이렇게 써라! ** 영상으로 보실 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=nFC2X30Pm6k&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=7 ** 아래 작성될 보드프리뷰는 HTML중급편으로 글자줄이는 CSS를 모른다면 아래 기초편 중 글자줄임을 보고 오는 것이 좋습니다. https://ossam5.tistory.com/80?category=898948 [CSS3강좌] 19강 CSS 텍스트줄임 ** 동영상으로 보실분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=YCwDcJygDkw 1. 글자줄임이란? - 영역보다 글자가 많아서 넘칠때 [...]기호를 처리하는 것을 의미 2. 한줄 텍스트인 경우.. [웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=PBLIwR58Ex8 ** 이번에는 웹사이트에 많이 사용되는 Hover Effect 수업을 해보도록 하겠습니다. ** 사용될 이미지 : 출처 - pixabay ** 이미지를 다운받아 실습해보세요! 1. overscale - 확대 효과 See the Pen OSSAM HOVER EFFECT01 by OSSAM (@5ssam) on CodePen. ## HTML코드 유럽여행 갤러리 - 전체를 한 챕터로 묶기 위해 로 묶었습니다. - 그리고 컨텐츠가 두개 이상 나열되면 리스트태그로 묶어주세요. - 그리고 이미지 클릭 시 다른 페이지로 이동도 되서 태그로 묶기도 했지만, :hover 선택이나 :foc.. [웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=rIOQoh_cajw 이번 강의에서는 로그인 폼을 제작해보도록 하겠습니다. - 위의 이미지는 결과이미지입니다. - 이런 로그인 창을 만들어 보도록 하겠습니다. ** 최종 정답 미리 보기! See the Pen loginbox by OSSAM (@5ssam) on CodePen. 1. 폼 구조 짜기 - HTML로 마크업하기 로그인 로그인 구역 아이디(E-mail) 비밀번호 아이디/비밀번호찾기 회원가입 로그인 - 스타일은 외부스타일시트를 사용하기 위해 태그를 작성했고, login.css 를 연결했습니다. - 는 태그와 태그를 페이지 가운데 오게 하기 위해 하나로 묶었습니다. - 폼 데이터를 관리하.. [웹컨텐츠제작꿀팁] 3강 체크박스 모양변경, 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=zaW5D-h6eP4 이번 강좌에서는 체크박스 모양변경을 하도록 하겠습니다. 원래 체크박스는 크기만 변경되고 모양이 변경되지 않습니다. 하지만 사이트들을 보면, 체크박스 모양이 다채롭습니다. 이것은 CSS Trick을 사용한 것입니다. 그래서 같이 보도록 하겠습니다. 1. 체크박스 모양변경 - CSS 특수문자 사용 See the Pen checkbox01 by OSSAM (@5ssam) on CodePen. ## HTML 코드 아이디 저장하기 - 태그 내부에 작성했습니다. - 태그는 태그와 이어져 내부에 있는 모든 요소를 클릭하면 도 체크됩니다. - 그리고 태그는 원래 글자를 기울이는 태그인데.. [웹컨텐츠제작꿀팁] 2강 텍스트네비게이션 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=bvz6jwZxxZU 이번 강좌에서는 텍스트네비게이션을 제작해보도록 하겠습니다. - 위에 보이는 상단네비나, 하단네비 같은 것을 텍스트네비게이션이라고 합니다. 1. 글자 사이 테두리있는 네비게이션 - border속성 사용 위 이미지에 보이는 네비게이션처럼 글자 사이에 선을 두도록 하겠습니다. ## HTML코드 로그인 회원가입 사이트맵 - 2개 이상 나열된 컨텐츠는 리스트태그로 작성해주세요. - 가끔 태그에만 담는 사람들도 있는데, 좋은 방법은 아닙니다. - 태그는 의미론적으로 작성하는 것이 좋습니다. 그러므로 여러개가 나열된 컨텐츠는 리스트태그에 담으세요. ## CSS코드 *{ padding:.. 이전 1 2 다음
