HTML (19) 썸네일형 리스트형 [웹컨텐츠제작꿀팁] 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 제작 *.. [웹컨텐츠제작꿀팁] 1강 Table 코딩 이렇게 써라! ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=wNOGuj5uATw 이번 강의에서는 웹컨텐츠를 직접적으로 제작해보겠습니다. 웹컨텐츠 중 표(table)를 만들어보도록 하겠습니다. ★ 제작해볼 표이미지와 소스 ** 표 제목에 들어갈 이미지 소스입니다. 다운받아주세요. ** 코드 전체 확인 See the Pen table by OSSAM (@5ssam) on CodePen. 1. HTML 구조 확인하기! - 첫째로는 표를 확인해서 테이블 구조를 먼저 짜야합니다. 1) 테이블 태그 작성 ## 테스트 코드 : [index.html] - HTML 기본구조 작성 후 태그를 작성해줍��다. - 이때 table태그에는 border 속성을 주는데 그 이유.. [유튜브] 오쌤의 니가스터디 - 웹컨텐츠제작꿀팁 - HTML/CSS중급편 보호되어 있는 글입니다. [HTML5강좌] 19강 tabindex태그속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/o3DeYfWQMUY 1. 초점이동이란? - 키보드 접근성이란 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것을 의미한다. - 특히, 초점이동이란 [tab]키를 누르면 좌측상단부터 초점받는 요소로 부터 이동되고, [shift] + [tab]키를 누르면 반대로 올라가는 것을 의미한다. 1) 네이버 사이트의 초점이동 - 위에 보면 까만 테두리가 초점의 이동을 보여줍니다. 과거에는 파란색으로 크롬에 체크해줬으나 요즘은 저런 검은색 테두리로 처리합니다. 2) 기본적으로 초점을 받는 태그 - HTML태그가 기본적으로 초점을 받는 것들이 있습니다. - 그 태그들을 알아보도록 하겠습니다. 태그명 설명 a 클릭 .. [HTML기초문법] 18강 a태그의 링크의 종류 - 오쌤의 니가스터디 1. URL을 이용한 하이퍼링크 ## 문법 1) 절대 경로 - 파일의 탐색 경로가 파일 시스템의 루트로부터 시작해 명시된 파일의 경로 이름 - /images/common/xxx.jpg - 외부 페이지 경로 : https://tistory.com TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com ## 문법 티스토리 바로가기 2) 상대 경로 - 파일 시스템에서 현재 작업 디렉토리부터 찾아갈 파일에 이르는 경로 - 현재 작업 파일이 무엇이냐에 따라 상대적으로 바뀌는 경로 - ./현재폴더의 파일선택 - ../상위폴더의 파일선택 - 하위폴더명/하위폴더의 파일선택 - 자세한 경로 공부 : ossam5.tistory.com/31?category=897196 [HTML기초문법] 3강 a(.. [HTML기초문법] 12강 시멘��구조태그 - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=WBSKYz7oUQQ 1. 시멘틱 구조 태그란? 1) 정의 ## 시멘틱 태그란? - 시멘틱(Semantic) 태그란 의미에 맞게 태그를 작성하는 것을 의미합니다. 의미에 맞게 태그를 작성하여 브라우저나 개발자가 그 태그의 사용의미를 잘 받아들일 수 있도록 코딩하는 것이 중요합니다. ## 시멘틱 구조 태그란? - 과거 XHTML1.0를 웹표준으로 쓰던 시대에는 [div]태그로 대부분 구조를 짰습니다. - [div]태그란 여러 태그를 하나로 묶는 태그를 의미합니다. - 그러다보니 [div]태그를 너무 많이 사용하게 되었습니다. 그래서 클래스나 아이디로 [div]태그를 식별해서 사용하게 됩니다. - 대.. [HTML기��문법] 11강 파비콘과 아이콘연결 1. 파비콘이란? - 홈페이지 타이틀 옆에 붙는 조그만 아이콘 - 실제 작업시 16x16사이즈로 제작해야함 - 확장자는 ico 혹은 png 확장자로 제작하면 된다. 1) 문법 - 이전 1 2 3 다음
