ruriruriya

CSS 미디어쿼리란? CSS 미디어쿼리는 브라우저의 환경에 따라 CSS 스타일을 적용하는 방법입니다. 미디어쿼리는 @media 키워드로 시작하며, 미디어 유형과 미디어 표현식을 괄호로 묶습니다. @media screen and (max-width: 600px) { /* 화면 너비가 600px 이하일 때 적용되는 CSS */ } 위 예시에서는 화면 너비가 600px 이하일 때 @media 블록 내의 CSS가 적용됩니다. CSS 미디어쿼리 활용방법 CSS 미디어쿼리는 화면 너비, 해상도, 장치 유형 등 브라우저의 환경에 따라 다양한 방식으로 활용할 수 있습니다. 다음은 몇 가지 예시입니다. 화면 너비에 따른 스타일링 화면 너비에 따라 다른 스타일을 적용하는 것은 CSS 미디어쿼리의 가장 기본적인 사용법입니다..

프로그램 없이 홈페이지 화면 전체 캡처하는 방법 프로그램 깔고 제대로 되지도 않던 전체 캡쳐... 드디어 방법을 찾았어요! 엄청 쉬우니 따라해 보세요 :) 1. 구글의 크롬으로 홈페이지를 열어두고 [F12] 키를 눌러 개발자모드로 접속하세요. 2. 개발자 모드에서 오른쪽 상단에 점 3개 버튼을 눌러서 [Run command]를 클릭하세요. 3. Run > 옆에 명령어를 [screenshot] 이라고 검색해서 [Capture full size screenshot]을 눌러주면 끝! 4. 웹 브라우저 화면 왼쪽 하단에 보면 바로 png로 다운로드가 됩니다. 5. 열어보면 길고 깔끔하게 캡쳐된 전체화면 이미지를 얻을 수 있답니다. 이렇게 매우 쉬운 방법으로 웹사이트 화면 캡처가 가능하다는 걸 이제 알았어요.....

컬러 색조합 래퍼런스 사이트 5곳 추천! 항상 디자인, 또는 발표자료, 포트폴리오 등 무언가 제작할 때 가장 시간을 많이 할애하는 것 중 한 과정이 컬러 정하기다.. 컬러 감각이 있는 사람들 참 부럽다... 하지만! 우리도 컬러 조합 래퍼런스 사이트만 알면 손쉽게 예쁜 컬러를 지정해서 쓸 수 있다! 1. COLORLOVERS 가장 오랫동안 애용한 사이트 내가 정한 주제를 영어(단어)로 검색을 하면 그에 맞는 색조합 결과가 나온다. www.colourlovers.com/ https://www.colourlovers.com/ www.colourlovers.com 2. COLORS 컬러즈에서는 나만의 색조합을 만들 수도 있다. RGB, CMYK 등 종류별로 지정해서 내가 마음에 드는 색조합을 찾을 수 있다. ..

웹디자이너와 퍼블리셔가 꼭 알아야 할 웹 용어 정리-3 1. 레이아웃(layout) 텍스트, 이미지, 버튼 등 여러가지 요소를 정해진 공간안에서 효과적으로 배치하는 것 2. 뎁스(depth) 홈페이지 방문 이동경로 깊이. 대메뉴(1depth)-중메뉴(2depth)-소메뉴(3depth) 3. 메인(Main) Main 혹은 Main Page라고 불리며 때론 Home이라고도 불림. 도메인을 입력하여 접속되는 첫페이지를 일반적으로 메인이라 부르며, 특정 사이트의 경우 메인으로 들어가기 전 SKIP 페이지가 있기도 함. 4. 서브(Sub) Sub 혹은 Sub Page라고 불리며, 실질적인 컨텐츠가 보여지거나 정보를 제공하는 페이지들을 말한다.(메인페이지 외 페이지들) 5. 템플릿(template) 무엇인가를 만들..

웹디자이너와 퍼블리셔가 꼭 알아야 할 웹 용어 정리-2 1. 플러그인 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해서 웹 브라우저의 기능을 확장시키는 방법이다. 대표적으로 액티브(ActiveX) 또는 플래쉬(Flash)가 있다. 2. CSS(Cascading style sheets) 웹 문서의 전반적인 스타일을 미지 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄일 수 있게 발전했다. 3. HTML(Hypertext Markup Language) 웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다. 4. HTML5 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTM..

웹디자이너와 퍼블리셔가 꼭 알아야 할 웹 용어 정리-1 1. Header (헤더) 로고, 메인메뉴, 검색창 등이 위치하는 부분으로 모든 페이지에서 동일하게 보인다. 2. Contents(콘텐츠) 웹사이트의 메인 컨텐츠가 보이는 부분으로 각각의 페이지별로 내용이 변경되며, 일반적으로 웹페이지의 내용을 입력하는 부분이다. 콘텐츠는 웹상에서 제공되는 정보나 내용물을 말하며 웹사이트에서의 콘텐츠란 인사말/제품소개 등과 ㅏ같이 고객에게 제공되는 정보 페이지이다. 3. Footer(푸터) 사이트 맨 아래에 바(bar) 형태로 위치하고 보통 copyright 문구와 주소, 개인정보취급방침 등이 삽입되어 있다. 이것 또한 헤더와 함께 모든페이지에서 동일하게 보여진다. 4. 유틸 영역 로그인, 회원가입, 즐겨찾기, 마이..

[CSS] 구글 웹폰트 사용법(폰트 굵기 조절 가능) 웹폰트란? 웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치되어 있지 않아도 임시 글꼴을 받아 웹페이지에서도 볼 수 있게 하는 폰트이다. 1. 구글 폰트에 접속한다. fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 언어를 한국어로 바꾼다. 생각보다 한국어는 많지 않다. 3. 마음에 드는 폰트를 선택한 다음 사용할 폰트 굵기 별로 선택한다. 선택하면 우측 Selected family에 추가되는 것이 보인다. HTML에 적용하는 방법(인라인 방법) 4. 추가한 후 Embed 를 클릭하면 첫번째..

[HTML] 자주 쓰는 엔티티코드(Entity Code) 총정리 엔티티 코드란? HTML 문서에서 특수문자를 입력할 때 코드로 인식되지 않게 하기 위해 엔티티코드 또는 넘버로 입력해줘야한다. 그냥 특수문자로 입력했을 때 HTML 코드로 인식하여 문제가 발생할 수도 있기 때문이다. 가장 많이 쓰는 엔티티 코드는 , &, ", ⓒ, 공백 등이 있다. 문자 엔티티코드 엔티티숫자 설명 공백 끊기지 않는 공백 & & & 앰퍼샌드 " " " 인용부호 © © © 저작권 기호 ® ® ® 등록된 기호 ™ ™ ™ 상표 기호 “ “ “ 큰 따옴표 열기 ” ” ” 큰 따옴표 닫기 ‘ ‘ ‘ 작은 따옴표 열기 ’ ’ ’ 작은 따옴표 닫기 › › 꺽쇠 닫기 § § § 섹션 기호 ¶ ¶..