워드프레스에서 게시물 썸네일 및 대표이미지 사용하기(Featured Image)1)워드프레스 대시보드에서 appearance의 editor로 이동합니다. 2)사이트 블록편집기에서 Templates로 이동합니다. 개별 포스트에서 대표 이미지 사용 설정(single post) 3)썸네일 및 대표이미지를 사용 설정할 템플릿을 선택합니다. 개별 포스트에 대표 이미지 사용을 설정하려면 single post 템플릿을 선택합니다. 4)사이트의 블록편집기에서 개별 포스트(single post)의 미리보기 템플릿을 표시합니다. 5)사전 설정된 템플릿에서 대표 이미지 블록이 존재하며 사용 설정되어있는것을 확인할수있습니다. 6)대표 이미지 블록을 추가하려면 좌측 상단 블록 추가에서 featured image를 검색 및 추가..
워드프레스 썸네일 및 대표 이미지(Featured Image)의 게시물 링크 활성화하기(Link to Post)1)워드프레스 대시보드에서 appearance의 editor로 이동합니다. 2)사이트 블록 편집기에서 템플릿(Templates)으로 이동합니다. 3)Templates에서 게시물 링크를 사용할 템플릿을 선택합니다. Blog Home은 사이트 홈페이지에서 최신글 Post 목록을 표시하는 템플릿입니다. 4)블록 편집기에서 Blog Home 템플릿 미리보기를 확인할수있습니다. 5)대표 이미지(Featured Image) 블록을 선택합니다. settings에서 Link to Post가 비활성화되어있는것을 확인할수있습니다. 이 옵션이 비활성화되있으면 대표 이미지를 클릭해도 해당 게시물로 연결되지않습니다. ..
워드프레스 모바일 게시물 작성에서 구글 드라이브의 이미지 추가하기 워드프레스 모바일 어플에서 사이트 게시물을 작성하려면 워드프레스 사용자 계정 생성 및 비밀번호를 설정하고 계정에 워드프레스 사이트를 연결해야합니다. 워드프레스 모바일 어플에서 비밀번호를 사용하여 사용자 로그인하기 https://learnandcreate.tistory.com/2933워드프레스에서 Jetpack 플러그인 설치하고 사이트 연결하기 https://learnandcreate.tistory.com/2931 1)워드프레스 모바일 어플을 실행합니다. 2)상단에서 게시물을 작성할 사이트를 선택하고 하단에서 새로 만들기를 선택합니다. 3)게시물 유형을 선택합니다. 4)블로그 글 또는 사이트 페이지 작성에서 하단의 이미지 선택하기를 선택합..
사이트의 반응형 미리보기(데스크톱, 모바일, 태블릿)를 확인할수있는 웹사이트 데스크톱, 모바일, 태블릿 등 다양한 장치의 디스플레이 크기 및 해상도에대하여 반응형 사이트의 미리보기를 확인할수있습니다.1)아래 웹사이트로 이동합니다. https://responsivedesignchecker.com/ 2)반응형 미리보기를 확인하려는 사이트 주소를 입력합니다. 3)입력한 사이트의 기본 데스크톱 미리보기를 표시합니다. 4)좌측에서 장치와 디스플레이 크기 및 해상도를 선택하면 사이트 반응형 미리보기를 표시합니다. 기타 https://ui.dev/amiresponsivehttps://screenfly.org/
워드프레스에서 포스트 및 페이지의 반응형 미리보기 확인(데스크톱, 태블릿, 모바일)반응형 미리보기에서 데스크탑(PC), 태블릿, 스마트폰 등 다양한 장치에서 사이트 레이아웃이 적절하게 자동 조정되는지 확인할수있습니다.1)워드프레스에서 반응형 미리보기를 확인하려는 포스트 및 페이지 편집으로 이동합니다. 2)포스트 및 페이지 편집의 상단에서 보기 옵션을 확인합니다(데스크톱, 태블릿, 모바일) 3)옵션을 선택하면 장치에따라서 레이아웃이 자동 조정되는 사이트 미리보기를 확인할수있습니다.데스크탑(Desktop) 태블릿(Tablet) 스마트폰(Mobile)
워드프레스에서 게시글에 구글 포토(Google Photos)의 사진을 업로드하기워드프레스 사이트에 Jetpack 플러그인을 설치하면 게시글 작성에서 구글 포토(Google Photos)의 이미지를 선택 및 업로드할수있습니다.워드프레스에서 Jetpack 플러그인 설치하고 사이트 연결하기1)새로운 게시글 작성에서 add image의 select image를 선택합니다. 2)Google Photos를 선택합니다. 3)사이트를 구글 포토 라이브러리와 연결하려면 connect to google photos를 선택합니다. 4)사이트에 연결할 구글 포토의 계정을 선택합니다. 5)WordPress.com 서비스로 로그인에서 계속하기를 선택합니다. 6)WordPress.com에서 액세스할수있는 항목을 선택합니다. 7)..
워드프레스에서 Jetpack 플러그인 설치하고 사이트 연결하기jetpack은 워드프레스의 모회사인 Automattic에서 개발한 공식 플러그인으로 워드프레스닷컴 계정과 연동하여 사이트 보안, 성능, 분석, 통계, 마케팅등을 위한 유용한 기능을 무료로 제공합니다.1)워드프레스 사이트 관리자페이지의 좌측에서 플러그인(plugins) 메뉴로 이동하고 jetpack 플러그인을 검색 및 설치합니다(install now) 2)설치한 jetpack 플러그인을 활성화합니다(activate) 3)새로 열기한 페이지에서 supercharge my site를 클릭합니다. 4)해당 사이트에 연결하려는 워드프레스(WordPress.com) 계정을 선택하고 connect my site를 클릭합니다.워드프레스(WordPress.c..
워드프레스(WordPress.com) 사용자 계정 만들기(회원가입, 로그인, 이메일 주소 확인)WordPress.com 계정과 wp-admin 계정 차이 WordPress.com 계정 - 다수의 워드프레스 사이트 관리, Jetpack등의 서비스 이용, 통합 대시보드 사용을 위한 이메일 주소 기반의 계정 wp-admin 계정 - 웹호스팅에 독립형 워드프레스 사이트 설치시 제공되는 관리자 계정으로 해당 사이트를 운영하는데 사용 wp-admin 계정 1)아래 워드프레스 사이트 대시보드의 우측 상단에서 현재 사이트에 로그인한 관리자 계정(wp-admin)을 확인할수있습니다. WordPress.com 계정 2)워드프레스 계정을 생성하려면 아래 WordPress.com 웹사이트에서 계정을 생성하고 로그인합니다..
워드프레스 모바일 어플에서 비밀번호를 사용하여 사용자 로그인하기워드프레스 어플에서 사용자 로그인하고 웹사이트를 관리하려면 워드프레스 사용자 계정을 생성 및 비밀번호를 설정하고 워드프레스 사이트 연결을 진행해야합니다.워드프레스 사용자 계정 생성워드프레스(WordPress.com) 사용자 계정 만들기 워드프레스(WordPress.com) 사용자 계정 만들기(회원가입, 로그인, 이메일 주소 확인)워드프레스(WordPress.com) 사용자 계정 만들기(회원가입, 로그인, 이메일 주소 확인)WordPress.com 계정과 wp-admin 계정 차이 WordPress.com 계정 - 다수의 워드프레스 사이트 관리, Jetpack등의 서비스 이용, 통learnandcreate.tistory.com 워드프레스 사용자..
워드프레스 미디어 라이브러리 관리 무료 플러그인 FileBird 사용하기미디어 라이브러리를 폴더 구조로 정리할 수 있게 해주는 미디어 관리 무료 플러그인 FileBird 설치 및 사용법1)워드프레스 관리자 페이지에서 좌측 media의 library 메뉴로 이동합니다. 워드프레스 기본 미디어 라이브러리는 업로드한 이미지, 영상을 폴더 구조로 정리할수있는 기능을 제공하지않습니다. 2)좌측 플러그인(plugins)의 add plugin으로 이동하고 filebird 플러그인을 검색 및 설치합니다(install now) 3)설치 완료된 filebird 플러그인을 활성화합니다(activate) 4)미디어 라이브러리에서 filebird가 추가된것을 확인할수있습니다. 5)new folder를 클릭하여 새로운 폴더를 생..
웹 호스팅 서비스 이용할때 도메인(DNS), SSL, PHP도메인(Domain)웹사이트의 고유 주소 도메인은 인터넷에서 웹사이트를 식별하고 접근할 수 있도록 해주는 고유한 주소입니다. 예를 들어 google.com, amazon.com 등의 웹사이트 주소가 도메인입니다. 사용자는 IP 주소를 기억할 필요 없이 도메인 이름만으로 웹사이트 주소를 기억하고 쉽게 접속할 수 있습니다. 도메인을 구성하는 두 가지 주요 부분 최상위 도메인(TLD, Top-Level Domain) - .com, .org, .net 같은 확장자 형식 두 번째 도메인 - 도메인의 핵심 이름 부분으로 google, amazon 등이 여기에 해당. 예시 example.com example은 두 번째 도메인이고 .com은 최상위 도메인. ..
디자인 어워드 웹사이트 목록(제품, 웹사이트) 최신 디자인 트렌드를 파악하고 다양한 디자인 작품을 감상할수있는 웹사이트 모음 1)Awwwards https://www.awwwards.com/ Awwwards - Website Awards - Best Web Design Trends Awwwards are the Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world. www.awwwards.com 2)Red Dot Design Award https://www.red-dot.org/ko/ 3)Designspiration https://..
