웹언어 (193) 썸네일형 리스트형 [CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ }) ** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문입니다. - 다른 매체 유형/장치에 대해 서로 다른 스타일을 적용하는데 사용합니다. - 보통 스크린 사이즈를 조건으로 걸어 반응형웹에서 많이 사용하는 코드입니다. - 미디어 쿼리는 반응형웹디자인을 데스트톱, 랩톱, 태블릿 및 휴대폰에 각각 CSS언어를 전달해줄 수 있기 때문입니다. - 또 미디어 쿼리를 사용하여 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록도 할 수 있습니다. @media 조건{ } 2. 뷰포트 너비(width)에 맞춘 미디.. [JS강좌] 13.5강 기본내장객체 - Date - 오쌤의 니가스터디 ** 강좌를 쭉 올리고 보니 Date객체를 안해서 13.5강으로 만들어봤습니다. 제 강좌를 쭉 보신분들은 13강까지 보고 보시면 좋을 듯합니다. ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=qggDJk9UHOY * 기본내장객체 종류 설명 String 문자열 객체 Number 숫자 객체 Math 수학 객체 Array 배열 객체 Date 날짜시간객체 - 기본내장객체는 첫글자를 대문자로 작성하는 것이 규칙 1. Date 객체 선언 - Date객체는 자바스크립트가 서버의 날짜와 시간을 가져올 수 있도록 하는 객체입니다. - 이 파트는 선언 시 무조건 new 키워드를 써서 생성자 함수 방식으로 사용해야 합니다. 1) 변수식 선언 - 없습니다. .. [VS CODE] 도구설명힌트(마우스 오버시 뜨는 창) 없애는 법 - VS CODE를 쓰다보면 태그나 코드에 마우스를 올리면 자꾸 설명해주려고 뜨는 창이 있습니다. - 도움이 될 수도 있으나 잘못해서 클릭하면 계속 인터넷으로 연결되서 새창이 뜨고 짜증나는 측면이 있습니다. - 그래서 이번 강의에서는 VS CODE에서 도구설명힌트를 뜨지 않게 하는 법을 보도록 하겠습니다. 1. [F1]을 눌러 검색창을 꺼냅니다. 2. 검색창에 [setting]이라고 검색한 후 [Open Settings(UI)]를 클릭합니다. 3. 설정창에서 [editor.hover.enabled]를 검색하여 나오는 체크박스를 해제합니다. - 이렇게 해놓으면 이제 안뜹니다! [Adobe XD] 17강 XD 이미지 내보내기 ** 제공파일을 먼저 다운받으세요. 이것을 이용해서 내보내기를 해볼게요! 1. 아트보드 화면을 이미지로 내보내기 - 우리가 디자인해놓은 아트보드 전체 이미지를 내보낼 수 있습니다. 1) 아트보드 화면전체 내보내기 - [파일]-[내보내기]-[모든 아트보드]를 통해 내보내기를 해줍니다. 2) 파일포맷과 위치를 잘 선택하여 저장합니다. - 내보내기 크기의 [1x]는 보이는대로 저장하거나, PC웹디자인을 코딩시 사용하면됩니다. 3) 파일을 확인해봅니다. 2. 체크한 이미지만 일괄적으로 내보내기 - 우리는 [PC디자인한곳] 아트보드의 첫번째와 두번째 이미지만 내보내보도록 하겠습니다. 1) 해당 이미지를 레이어에서 내보내기처리 - 우선적으로 해당 이미지를 레이어에서 내보내기 아이콘을 눌러 체크해야합니다. 2) 이미.. [Adobe XD] 16강 에셋을 이용한 스타일가이드와 구성요소 1. Asset기능을 활용한 스타일가이드 - Asset기능은 디자인 프로토타입을 만들면서 반복적으로 작업되는 것을 미리 등록하는 것입니다. - 특히, 색상과 글자설정은 자주 쓰는 것을 등록해놓으면 편리하게 작업할 수 있습니다. 1) 예시 사이트 : 싱그러운집(https://www.shouse.garden/main/main.html) 똑똑한 식물집사를 위한 올인원 식물 플랫폼 싱그러운집 반려식물부터 플랜테리어까지 식물집사의 첫걸음, 싱그러운집 www.shouse.garden - 이런 사이트가 있다고 볼게요. 2) 컬러파악하기 - 우선적으로 메인컬러는 로고에 사용된 녹색계열입니다. (#019a3f) - 그리고 서브컬러로 오렌지 컬러를 사용했습니다. (#e05439) - 기본텍스트컬러로는 진한 회색을 사용했습.. [웹컨텐츠제작꿀팁] 번외편 - 새해맞이 윷놀이 만들기 ** 영상으로 보실분은 아래 주소를 클릭해주세요. 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.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 25 다음
