워드프레스 관리자 사용법 (엔엑스디자인, 엔엑스웹)

엔엑스 디자인에서 제작하시는 반응형 홈페이지는 워드프레스를 기반으로 제작됩니다 실제 구동중인 홈페이지의 문구를 수정해 보도록 하겠습니다 지금 보고 계시는 화면의 페이지를 수정해보도록 하겠습니다 우선 관리자로 로그인 하기 위해 관리자 로그인 페이지로 이동합니다 관리자 아이디와 패스워드를 입력합니다 보시는 것처럼 관리자 화면으로 이동했습니다 페이지를 수정하기 위해 워드프레스 관리자 메뉴 중 페이지로 이동합니다 수정하려는 페이지를 편집모드로 오픈해 보도록 하겠습니다 실제 구성된 홈페이지의 레이아웃과 유사한 형태로 되어있어 수정하고자 하는 영역을 빠르게 찾을 수 있습니다 실제 홈페이지에서 수정하고자 하는 영역을 살펴보겠습니다 선택된 영역의 부분을 실제로 변경해 보도록 하겠습니다 수정하려는 위치를 관리자에서도 쉽게 파악할 수 있습니다 수정대상 영역에서 연필 아이콘을 클릭하면 수정팝업이 표시됩니다 이곳의 텍스트를 수정해 보도록 하겠습니다 수정 후 Save Changes 를 클릭합니다 최종적으로 Update를 클릭하면 저장이 완료됩니다 실제 페이지가 적용되었는지 확인해 보도록 하겠습니다 관리자에서 변경한 내용대로 바로 변경이 된 것을 확인할 수 있습니다

인디고 스튜디오(Indigo Studio)로 만드는 반응형 웹페이지 레이아웃

안녕하세요 여러분 이번 동영상에서는 인디고 스튜디오의 최신버전의 기능인 반응형 웹페이지 레이아웃 기능을 소개할겁니다

PICK A VIEWPORT 메뉴에서 브라우저를 선택하면 새로운 메뉴들이 보일겁니다 첫번째로 모바일을 우선한 디자인(Start with Mobile-First Approach) 이구요 두번째는 일반적인 타블렛이나 피씨를 위한 반응형 레이아웃입니다(a responsive layout for Tablet/Desktop) 우선 모바일을 우선한 디자인을 살펴볼까요 디자인 캔버스를 통해 Bootstrap Container 가 추가된 것을 볼 수 있습니다 인디고 스튜디오가 Bootstrap 을 이용해 반응형 웹페이지 디자인 기능을 실현하고 있기 때문입니다

Bootstrap Container 이외에도 또 하나의 드롭다운메뉴를 볼 수 있는데요 드롭다운 메뉴에는 Bootstrap 을 통해 이용할 수 있는 4가지 세부 메뉴가 표시됩니다 각각 모바일폰, 타블렛, 데스크탑 그리고 대형 데스크탑입니다 또한 기본적으로 Row 가 화면에 추가 되어 있는 것을 알 수 있습니다 이것은 Bootstrap Row 이며 초기 화면에는 3개의 Row가 포함되어 있습니다

모든 Row 는 최소한 하나의 셀을 포함해야 합니다 기본화면에서 Bootstrap 은 총 12 개의 컬럼을 사용하여 레이아웃 표시를 하고 있습니다 또한 초기화면의 셀은 12컬럼 모두를 사용하게끔 펼쳐져 있습니다 마우스를 드래그 하면 Span 된 컬럼을 조정 할 수 있습니다 첫번째 Row 의 셀을 6컬럼으로 변경하고 또 두번째 Row 도 마찬가지로 변경하면 두 Row 가 하나로 합쳐집니다

셀을 편집하려면 셀을 마우스로 더블클릭하거나 다른 컨트롤을 셀에 드래그 & 드랍 하면 됩니다 타이틀요소를 한 번 추가해 볼까요 Alt + 클릭을 하고 Title 을 검색합니다 추가된 컨텐츠 또는 컨트롤 또한 셀과 마찬가지로 컬럼 span 의 개념이 적용됩니다 따라서 컨트롤의 폭은 픽셀단위로 조정되는 것이 아니라 컬럼 사이즈에 따라 자동으로 변경됩니다

보시는 것처럼 타이틀의 폭을 변경하기위해 컬럼의 span을 마우스 드래그로 변경하고 있습니다 편집모드 상태에서 다른 셀의 편집을 시작하기 위해서는 해당 셀을 한 번만 클릭하면 됩니다 또는 기존의 편집모드를 종료하고 다른 요소를 드래그 & 드롭으로 화면에 추가합니다 화면에 추가된 요소를 셀에 드래그 하는 동안 별도의 추가 메뉴가 표시됩니다 스페이스키를 누른 상태에서 요소를 드롭하면 컨트롤이 자동으로 화면에 맞게 리사이즈 됩니다

하나의 셀에는 복수의 UI 요소가 추가될 수 있습니다 그럼 계속해서 두번째 Row를 편집해 볼까요 Row의 높이는 추가된 컨텐츠에 의해 결정됩니다 셀에 새로운 컨텐츠가 추가 될 때마다 거기에 맞게 셀의 높이가 자동으로 변경됩니다 그럼 또 한 번 타이틀 요소를 추가해 볼까요

보시는 것처럼 자동으로 처음에 추가된 이미지 아래에 타이틀 요소가 배치되는 것을 알 수 있습니다 UI요소가 중첩되지 않는 일반적인 웹디자인의 개념과 일치하죠 두번째 Row 에는 두 개 이상의 컨텐츠가 배치되었습니다 또 모든 컨텐츠는 기본적으로 일반적인 웹디자인처럼 하부 여백(margin) 프로퍼티를 개별 지정할 수 있습니다 이제 편집모드를 종료해 봅시다

Duplicate Cell 액션을 이용하면 빠르고 간단하게 같은 셀을 추가할 수 있습니다 복사된 셀에서는 새로운 이미지를 선택합시다 만약 추가된 컨텐츠들을 위해 더 많은 공간을 확보하고 싶으시면 Margin 을 지정하면 됩니다 이제 기본적인 모바일 폰 화면 디자인이 마무리 되었습니다 이제 타블렛 화면을 편집할텐데 처음에 설명한 세부메뉴 드롭다운을 이용해 간단히 추가할 수 있습니다

변경하고 싶은 것은 이 두가지 요소를 옆으로 나란히 배치되게 하고 싶습니다 그러기 위해서는 해당되는 셀의 폭을 드래그 하여 6 컬럼사이즈로 축소합니다 다음셀도 마찬가지로 폭을 조정합니다 만약 버튼 컨트롤의 폭을 조정하고 싶다면 컨트롤을 선택하시고 Span 을 수동으로 설정할 수도 있습니다 일반적인 Bootstrap 의 작성방식과 마찬가지로 타블렛용의 설정은 폰용의 설정위에 작성됩니다

프로퍼티 편집기를 보시면 타블렛 표시를 위한 Responsive Option 이 보일것입니다 여기에 보이는 모든 설정은 기본적으로 모바일폰용 화면의 설정을 계승하게 됩니다 하지만 타블렛용의 화면에서 변경 한 내용은 타블렛용의 화면에만 적용되게 됩니다 좀 더 명확히 차이를 알아보기 위해 데스크탑용의 레이아웃도 설정해 봅시다 다시 한 번 상당의 드롭다운 메뉴를 통해 데스크탑모드를 선택합니다

데스크탑 모드에서는 여기 보이는 이미지와 문자열이 옆으로 나란히 표시되도록 변경하려고 합니다 따라서 다음과 같이 이미지를 선택하고 폭을 7컬럼 정도로 조정합니다 나머지 빈공간에 문자열의 컨트롤이 배치되도록 남은 공간만큼 문자열의 폭을 변경합니다 공간을 조정하기 위해 이미지 컨트롤의 Margin 프로퍼티를 변경합니다 다시 한 번 설명드리자면 데스크탑 모드에서 변경한 설정들은 타블렛 모드에서의 설정을 계승합니다

지금까지 변경한 사항들이 어떻게 실제 화면에서 보여지게 될지를 Run Screen 버튼을 클릭하여 알아봅시다 화면사이즈가 변화함에 따라 모바일폰, 타블렛 또 데스크탑용의 화면으로 자동적으로 화면이 바뀝니다 (실행화면의 사이드메뉴에서 단말기모양의 아이콘을 클릭하고 Fit to Screen 으로 모드를 변경해 주세요) 인디고 스튜디오에서 신기능인 반응형 웹페이지 레이아웃 작성을 위한 기본을 알아봤습니다 더많은 정보를 원하신다면 저희 유튜브 채널을 정기구독하세요!

HTML – 웹사이트 만들기

이번시간에는 좀 더 실전적인 예제를 살펴볼겁니다 생각하기에 따라서는 우리가 아직 할 게 많이 있죠 그런데 여러가지 태그들이 있습니다 140개 정도의 태그가 현재까지 있는데 태그를 다 살펴보는 거는 쉽지도 않은 일일 뿐더러 별로 의미가 없습니다

여러분들이 지금까지 배운 것들, 가장 중요한 것을 우리가 다 배웠고, 바로 그런 것들을 이용해서, 최소한의 지식을 통해서 우리가 뭔가 의미 있는 것들을 해보는 것이 제가 보기엔 더 중요해요 그래서 지금해 볼 것은 이런걸 만들어 볼거예요 보시는것 처럼 이렇게 생긴 웹페이지 인데 여기 있는 항목들을 클릭하면 그 항목에 대한 링크로 이동을 하고 여기 있는 html 부분을 클릭하면 보시는 것처럼 첫 번째 페이지로 이동을 하는 그래서 여기있는 각각의 링크들이 서로 상호 작용하면서 이렇게 움직일 수 있는 완결된 웹사이트 하나 만들어 보자는 거죠 그래서 첫 번째 페이지는 여기있는 html을 클릭했을때 나오는 페이지인데 이 페이지의 이름은 보시는 것처럼 indexhtml 입니다 그리고 첫번째 링크를 클릭하면 1html 이 나오고 두번째는 2html 세번째는 3html 네번째는 4

html 이 나와서 어디로든지 이동할 수 있는 동선을 구성해 보자는 거에요 그러면 우리가 이걸 만들기 위해 필요한 파일은 총 다섯 개의 파일이 필요할 겁니다 그럼 지금부터 한번 해보죠 우선 chtml에 있는 내용을 그대로 재활용 하겠습니다 chtml을 다른이름으로 저장을 할게요 그리고 파일의 이름은 index

html이라고 하겠습니다 이건 대문 페이지예요 모든 파일로 해서 저장 이제 indexhtml 파일을 만들었으니까 한번 열어보시죠 이렇게 열렸죠? 자 그리고 우리가 뭐~ 1html / 2html / 3html 이런거 만들기 전에 우선 링크를 먼저 마련해 놓는게 좋습니다 왜냐하면 여기있는 각각의 링크들 여기에 걸리게 될 링크들은 각각의 페이지마다 똑같이 들어갈 내용이기 때문에 여러분이 파일을 먼저 만들고 링크를 추가하면 중복되는 작업이 생겨요

그런데 링크를 다 완성한 다음에 그걸 복제하면 더욱 효율적으로 일을 할 수 있다는 거예요 한번 해보죠 우선 여기있는 html은 이 부분이죠 이걸 클릭했을 때는 indexhtml이 나와야하니까 여기는 이렇게 indexhtml에 링크를 걸었습니다 그리고 기술소개라는 것을 클릭했을때는 1html이 나오면 돼요 물론 아직 우리는 1

html을 가지고 있진 않지만 링크부터 만든다고 문제 될 건 없습니다 그럼 보시는 것처럼 기술소개는 1htm이죠 물론 클릭해도 파일이 없기 때문에 해당 웹페이지를 찾을 수 없다는 메시지가 뜨겠죠 그 다음에 밑에 있는 기본 문법은 2html 3html 복사 붙여넣기를 이용하시면 조금 수월하죠 자 이렇게해서 각각의 링크를 일단 완성했어요 자 그럼 이제 indexhtml만 있으니까 1

html / 2html / 3html 이걸 이제 만들어야겠죠 자, 그럼 여기있는 indexhtml을 제가 다른 이름으로 저장하기를 해서 1 html 이라는 파일로 만들었습니다

그럼 이제 기술소개라는걸 클릭하면 보시는 것처럼 1html 페이지로 가죠 물론 내용의 변화는 없습니다 왜? 내용을 수정 안했으니까요 여기있는 내용을 수정해 봅시다 1html은 기술소개니까 이렇게 기술소개라고 하고 본문은 html은 아무거나 입력하세요 'html은 Hyper Text Markup 약자로 약자로서 웹페이지를 만드는 언어입니다' 라고 이렇게 하고 여기서 리로드를 해보면 보시는 것처럼 이렇게 되죠 그럼 이제 여기 있는 제목을 클릭하면 indexhtml로 갈테고 기술소개를 클릭하면 이제 기술소개에 대한 페이지로 이동을 하겠죠 그럼 여기서 1html을 다시 2

html로 복사한 다음에 여기있는 내용을 2html에 해당되는 기본문법으로 바꾸는거죠 내용은 아무거나 하시면 되죠 그 다음에 3html 그리고 하이퍼텍스트와 속성이라고 하고 텍스트와 속성 a 를 사용합니다 대충쓰는거죠

여러분 실습에 너무 집착하지마세요 4html 그리고 4

html은 본문이 리스트와 태그의 중첩 리스트는 li를 쓰고 ul 이나 ol로 감싸서 사용합니다 그렇게하면 우리가 모든 웹페이지를 다 완성했기 때문에 보시는것 처럼 이렇게 순환하는 웹페이지를 또 웹 사이트를 만들 수가 있는 것이죠 지금까지 제가 소개해드린 내용들이 html에서 가장 중요한 내용들은 다 다룬겁니다 나머지것들은 제가 생각하기에 훨씬 더 어려운데 훨씬 덜 중요한 것들이예요 그래서 여러분들은 제일 중요한 것들을 살펴봤다는 거예요 자 그럼 이제 우리 예전에 제가 수업 시작 할 때 여러분들한테 뭐를 말씀드렸었냐면 웹 페이지에서 오른쪽 클릭해서 소스보기를 한번 해보라고 말씀드린 적 있었죠 이렇게하면 나오는 것들 바로 여기있는 html 코드가 바로 이 웹 페이지에 해당되는 html 코드 였잖아요 자 그런데 여기서 제가 얘기하고 싶었던 건 뭐였냐면 여기는 코드를 이제 여러분들이 상당히 많은 부분 해석할 수 있게 되었다는 겁니다 위에있는 DOCTYPE 뭔지 아시겠죠 그리고 이 문서도 정말 html로 시작하네요 여러분들 네이버나 구글이나 여러분들 자주가는 사이트들 아무데나 들어가서 소스 보기를 해서 꼭 살펴보세요 그리고 정말로 head라는 태그로 시작하고 있네요 그리고 이렇게 생긴 태그들이 있는데 쭉 내려가보면 우리가 모르는 것도 상당히 많아요 여기 있는 것도 다 모르겠죠 쭉 내려가보면 여기 있는 태그 하나만 살펴볼까요? 여기 보시면 버튼이라는 태그가 있네요

여기 제가 선택한 이거, 이게 뭔진 여러분들이 잘 모르실 겁니다 하지만 무얼 알 수 있냐면 얘가 태그라는 사실은 이미 알고 있어요 그렇죠? 그렇다면 여러분이 이 태그라는 사실을 알고 있으면 뭘 할 수 있냐면, 검색할 수 있습니다 또는 질문할 수 있어요 어떻게? 예를 들면 검색을 이렇게하는 거죠 구글 같은 검색엔진에서 우리가 지금 원하는 것은 버튼이라고 하는 태그잖아요? 근데 그냥 버튼이라고 하면 이 세상의 수 많은 버튼이 있을거 아니예요 그럼 여기에 html 이라고 쓰는거죠

그리고 조금 더 정확하게 하기위해서 태그라고 하면 이렇게 검색어를 입력하고 엔터를 치면 엄청나게 많은 html버튼 태그라는 문자가 들어있는 웹페이지를 검색엔진이 순식간에 검색해줍니다 자 그럼 그 중에서 아무거나 제일 먼저 나온 걸 클릭해서 들어가 보면 보시는 것처럼 html 버튼 태그에 대한 설명이 나오네요 그럼 여러분들이 이걸 보시고 여기 있는 Try it yourself 같은 걸 보면 이렇게 clik me라고 돼 있는 부분이 보이네요 무슨 뜻이겠어요 바로 여기있는 버튼이라는 태그가 여기 오른쪽에 있는 버튼을 만들어주는 역할을 하는 태그라는 뜻인 거죠 즉 여러분이 여기 있는 모든 태그를 미주알고주알 기본적으로 다 암기하고 있지 않다고 하더라도 어떠한 것이 태그라는 사실을 알면 또는 어떠한 것이 속성이라는 것을 알면 여러분은 검색할 수 있습니다 또 누군가에게 html의 버튼이라는 태그는 무엇인가요 타입이라는 속성이 submit으로 되어 있으면 어떤 의미를 갖는 건가요 라는 질문을 할 수 있다는 것이죠 제가 생각하기에는 하나하나의 태그를 여러분들이 익히는 것 못지않게 질문하는 법 검색하는 법 이런 것들을 알아가는 것이 훨씬 더 중요할 수 있습니다 왜냐, 지식이라는 것은 계속 바뀌니까요 그 지식을 습득하는 방법만이 사실은 중요한 것이겠죠 자 이렇게 해서 우리가 지금까지 html의 문법, 구조 그리고 하이퍼텍스트를 통해서 완결성이 있는 웹사이트를 만드는 방법까지 살 봤고요 다음 시간부터는 주요한 html의 태그들을 살펴보도록 하겠습니다

Generame – 웹프레임 제너레이터

site making and doesde 웹을 알았습니까? online code 최상위 요소 당신 만의 사이트가 완성되었습니다 color 사이트는 별개의 세션으로 관리됩니다

site map with additional and required 간단한지도를 추가하십시오 모바일 플랫폼 슬로건 제작 된 사이트는 한번만 불러도 될까요? 로고, 색상, 위치 간단하게 쇼핑몰도 운영 할 수 있습니다