web42 워드프레스 테마에 대해 배워보기 워드프레스의 모든 테마는 공식테마를 기반으로 만든다 [외모]-[테마] 에서 디자인을 변경할 수도 있고 오른쪽 테마 목록에서 '사용자 정의하기'를 클릭해서 디자인을 변경할 수도 있다. 유료 테마에서는 [사용자 정의하기]를 사용하기도 하지만 [테마 옵션(Theme Option)] 등과 같이 따로 메뉴를 두고 테마를 관리하는 경우가 많다. 유료 테마에는 기능이 많기 때문에 별도의 메뉴로 분리한 것이다. 워드프레스에 위젯은 없어졌다?! 예전에는 '테마'탭에 위젯이 있었는데 지금은 안보인다! '플러그인'으로 통합된것인가? 그게 아니라 이것도 테마에 따라 위젯이 나왔다가 안나왔다가 하는것 같음. Demo 데이터를 활용하기 전 시스템을 백업하자 Demo 데이터가 문제를 발생시킬 경우 시스템 전체를 백업해야 Demo .. 2023. 7. 25. 워드프레스 관리자 메뉴 설정방법 및 글 고유주소 셋팅하지 않으면 생기는 문제 워드프레스 관리자 메뉴 우측 상단에는 '화면 옵션'이 있다. 확인을 잘 못하고 넘어갈 수 있지만 화면 옵션에서 보여지는 화면을 체크해서 설정할 수 있다. 체크를 한 화면들이 아래쪽에 나오는데 드래그에서 순서를 변경할 수 있다. 워드프레스 테마를 수정하려면 '외모'로 들어가야 한다. 원래 '테마디자인'이라는 이름이였는데 '외모'로 변경됐다. 인기 무료테마 중 'sydeny'라는 것이 있다. 무료테마 '인기순'이라는 카테고리도 있으니 그걸 참고해도 좋다. 여러가지 테마를 설치해보고 많이 테스트를 해보자. 카테고리 정리를 잘해야 한다. 처음부터 카테고리와 태그를 활용해 글을 잘 분류해야 한다. 글이 많아져도 찾기도 쉽고 검색엔진 최적화에도 도움이 된다. 우측에 있는 특성이미지 워드프레스 글쓰기 우측에 있는 '.. 2023. 7. 25. 홈페이지를 쉽게 만들 수 있는 framer 우연히 소식을 접하게된 프레이머 난 당연히 피그마인줄 알았고 이제 UI뿐만 아니라 웹사이트 발행까지 가능해졌다고 한줄 알았는데 피그마가 아니라 프레이머였다! 어디서 들어본것 같기도 하고 아닌것 같기도하고.. 아마도 피그마랑 비슷한 느낌이여서 그런걸까? 프레이머 대략적으로 본 글로는 피그마 같은 기능을 하다가 홈페이지도 쉽게 만들 수 있게 바꼈다고 본것 같은데 아닌가? 좀 더 알아봐야지! 홈페이지 디자인이 좀 더 쉬워진다면.. 이런 기술을 더 배운다면 재미있어질것 같다. 아직 유튜브에는 많은 영상이 없고 있는 영상에도 조회수가 높지도 않다. 책을 찾아보니 라는 책이 있다. 2017년도에 출간이 되었는데 벌써 5년전이니까 내용이 엄청 많이 바꼈을것 같다. 해외 유튜브 영상을 찾아보든지 국내껄로 찾아보던지 해.. 2022. 9. 2. 워드프레스 홈페이지 제작 배워보기 도메인등록 업체: 호스팅케이알, 후이즈, 가비아, 카페24 웹호스팅 업체: 카페24 (호스팅케이알이 제일 저렴하다.) .com 기준으로 10,500원이다. 국내 워드프로세스 유저 대부분이 고유주소를 가지고 있는 '설치형'을 이용하고 있다. 워프프레스 사이트에서 설치 파일을 다운 받아서 설치해야 하고, FTP프로그램을 필수로 설치해야 한다. 파일질라를 사용하자. 워드프레스 6.0.1 까지 나왔구나! 내가 예전에 만들었던 워드프레스 사이트는 어디갔지? 그땐 호스팅서버도 연결안하고 그냥 썼던것 같은데.. 아! 그땐 설치형이 아니라 가입형으로 만들었던것 같네! 가입형은 wordpress.com 으로 가서 만들고 설치형은 wordpress.org로 가서 만들어야 한다. 가입형 서비스는 단순한 블로그를 운영할 사람.. 2022. 8. 16. 워드프레스 다시 시작해보자 워드프레스는 구글 검색에 최적화 되어 있다고 한다. 워드프레스의 특징으로 텍스트와 이미지가 분리되어 있기때문에 반응형 페이지에 맞춰져 있다. 워드프레스를 만든 후 구글 검색에 노출을 시키려면 우선 글을 많이 작성해야 한다. 제목에 맞는 컨텐츠를 주기적으로 작성하면 구글에 지속적으로 노출될 확률이 높아진다. 그리고 그 글에 관련된 웹페이지가 있다면 링크를 걸어 놓으면 구글 검색 최적화에 효과가 좋아진다고 한다. SEO관련 플러그인을 활용해 구글 노출 확률을 높일 수 있다. 워드프레스로 홈페이지를 만들려면 무조건 테마를 설치해야 한다. 그리고 플러그인으로 홈페이지의 기능을 추가할 수 있다. 1단계-사이트 기획 2단계-도메인 3단계-웹호스팅 4단계-테마 선정 5단계-워드프레스 제작 홈페이지를 제작하기 전에 꼭.. 2022. 8. 15. 가변 글꼴 가장 많이 사용되는 단위는 em, rem 1em=16px 글자 크기(em)=글자크기(px) / 16px 태그에서 srcset속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있다. 기본형 srcset 속성을 사용해 픽셀 밀도가 1일 때 표시할 이미지와 픽셀 밀도2일 때 표시할 고해상도 이미지를 따로 지정할 수 있다. (픽셀 밀도 2란 픽셀 밀도 1일 때보다 화면 1인치당 표시하는 픽셀 수가 2배라는 뜻이다. 동일한 크기를 표시하는 데 2배의 픽셀을 사용하니까 그만큼 해상도가 더 뛰어난다.) 태그와 태그를 이용해 화면 너비에 따라 다른 이미지 파일을 표시할 수도 있다. 고정 그리드 레이아웃이든 가변 그리드 레이아웃이든 맨 먼저 할 일은 펜으로 종이에 그리거나 프로그램을.. 2022. 3. 8. 미디어커리, 뷰포트에 관하여 배워보기 웹키트(webkit)기반인 모바일 브러우저들의 기본 뷰포트 너비는 980px이다. 그래서 스마트폰의 모바일 브라우저에 맞춰 웹페이지는 980px로 표시된다. 웹키트 기반의 브라우저란 브라우저를 동작시키는 실행 엔진이 '웹키드(webkit)'엔진이기 때문에 붙은 이름이다. 스마트폰 브라우저는 대부분 웹키트 엔진을 기반으로 하는 브라우저이다. 뷰포트는 태그를 이용해서 태그 사이에 작성해 넣는다. 뷰포트의 너비를 스마트폰화면 너비에 맞추고 초기 화면 배율을 1로 지정한 것으로 가장 많이 사용하는 형태. width: 뷰포트 너비, device-width(브라우저 기본 값) initial-scale: 초기 확대/축소 값 (기본값 1) 크롬 브라우저 F12: 개발자 도구 창. 390x844 아래쪽에 있는 회색 바를.. 2022. 3. 7. 뷰포트와 미디어 쿼리에 관하여 미디어 쿼리는 접속하는 브라우저의 너비에 따라 사이트 레이아웃을 바꾸기 때문에 반응형 웹 사이트를 제작하는 가장 기본적인 방법이다. 뷰포트(viewport)는 스마트 폰에서 실제 콘텐츠가 표시되는 부분을 가리키는 말이다. 문서의 콘텐츠를 스마트폰 화면 너비에 맞춰 표시해야 한다. 이때 사용하는 것이 태그이며, 다음 소스가 가장 기본으로 사용하는 뷰포트 설정 소스다. width=device-width: 문서 너비를 현재 기기의 너비에 맞춘다. initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정한다. 태그에서 뷰포트를 설정하기 위한 속성 width height initial-scale user-scalable minimum-scale maximum-scale target-d.. 2021. 10. 25. 크롬 브라우저에 사용중인 서체 확인하는 방법과 변경하는방법 크롬 브라우저를 설치하고 난 뒤에 그냥 기본값으로 셋팅된 서체를 사용하는데 그 기본값 서체가 뭔지 궁금해서 찾아봤다. 크롬브라우저를 실행 후 cmd+ , 설정창이 뜨면 좌측의 [모양]-[글꼴맞춤 설정]을 클릭하면 위와 같은 화면이 뜬다. 나는 아이맥을 사용중이라 기본 한글서체로 지정된 산돌고딕Neo가 브라우저에서도 기본 서체로 적용되어있었다. 본인이 원하는 다른 서체가 있다면 '표준 글꼴'에 나와 있는 서체를 클릭 후 원하는 폰트로 변경해주면 된다. 2021. 10. 21. 배경색과 글자색의 대비 정도를 측정해주는 사이트 색상이 있는 배경위에 어떤 컬러의 텍스트를 얹혀야 잘 보이는지를 수치로 측정해주는 사이트 https://webaim.org/resources/contrastchecker/ WebAIM: Contrast Checker Contrast Checker You are here: Home > Resources > Contrast Checker This tool requires Javascript. Normal Text The five boxing wizards jump quickly. Large Text The five boxing wizards jump quickly. Graphical Objects and User Interface Components image/svg+x webaim.org 2021. 10. 18. 동영상 풀스크린 배경 html5에는 태그가 있어서 플러그인 프로그램 없이도 웹 브라우저에서 직접 동영상을 재생할 수 있다. 아직까지는 모바일 브라우저에서는 동영상 풀 스크린 배경을 사용할 수 없기 때문에 모바일 기기로 접속하는 사용자를 위해 동영상 풀 스크린 배경 대신 표시할 이미지를 함께 사용한다. (언제까지 안될까?!) 최신 웹 브라우저에서는 mp4형식의 파일을 재생할 수 있도록 지원한다. 동영상파일은 재생 시간이 20~20초 정도로 짧고, 파일 용량은 5MB 이하인 것을 사용하는것이 좋다. 동영상 파일을 로딩하는 동안 동영상 대신 표시할 이미지를 포스터 이미지(poster image)라고 한다. 포스터 이미지는 태그를 인식하지 못하는 브라우저에서 동영상 대시 표시되고, 동영상을 풀 스크린 배경으로 사용할 수 없는 모바일.. 2021. 10. 12. 풀 스크린화면의 웹페이지를 만들때 이미지로 풀 스크린 배경을 만들고 싶다면 어떤 스마트 기기에서도 배경 이미지를 볼 수 있게 설정해야 한다. 화면 크기에 따라 적절하게 배경 이미지를 조정할 수 있어야 한다. 풀스크린 이미지는 주로 1100~1200px의 사진을 많이 사용한다. 이미지 풀 스크린 배경은 배경 이미지 삽입을 위한 CSS에 background-size속성을 추가해서 사용한다. 배경을 슬라이드 쇼로 표현하고 싶다면 jQuery 플러그인을 사용하면 된다. 2021. 10. 7. 이전 1 2 3 4 다음
