3. 워드프레스로 프런트 페이지 만들기 – carousel slide

[음악] 자, 계속해서 프론트 페이지를 편집하겠습니다 php get header 소괄호, 세미콜론

그리고 끝나고 부분에 php get footer 소괄호 세미콜론 주석을 하나 넣지요 front section 닫히는 주석도 넣겠습니다 다음에 이 사이에 section에 아이디는 front-section, 그 밑에 클래스로 section-content, 그 밑에 클래스 container 그 밑에 클래스 row 탭키를 눌러주세요

여기에는 우측에 main 섹션 좌측에 side 섹션이 들어옵니다 그래서 front main이라고 주석 표시해주고, 닫히는 주석도 표시합니다 이 주석들을 복사해서 붙여넣기 합니다 그리고 main 대신에 side라고 수정합니다 여기 메인 섹션에는 div 클래스 col-md-9, 9개의 컬럼으로 하나의 단을 만듭니다

탭키를 눌러주세요 먼저 슬라이드를 넣을텐데요, 부트스트랩 사이트에서 카로우젤 슬라이드라는 컴포넌트가 있습니다 좌우 화살표 콘트롤이 있는 슬라이드, 슬라이드 아래에 인디케이터라고 하는 이런 바가 있는 슬라이드도 있네요 캡션이 들어가게 할 수도 있습니다

예제 코드를 카피해서, 텍스트 에디터로 갑니다 그 전에 주석으로 slide라고 하고, 이 사이에 붙여넣기 합니다 줄정리를 하겠습니다 서브라임에서는 Edit 메뉴에서 Line에 Reindent를 클릭해주세요 여기에서 조금 수정할 필요가 있는 것이, 여기 아이디인데요, 이것들을 모두 컨트롤 D를 눌러 4개를 지정하고, carousle-front라고 고쳐줍니다

그 다음, src에는 슬라이드 이미지가 오는데, 더미이미지로, http viaplaceholodercom에 사이즈는 1600×1100으로 하겠습니다 알트는 그대로 합니다 슬라이드에 물음표 text 이퀄 first + slide라고 해주세요

이 부분을 드래그 합니다 아, 1660이 아니라 1600으로 해주세요 두번째 슬라이드에도 고쳐줍니다 세번째도 고칩니다 텍스트를 다른 슬라이드에도 넣을텐데, 이러면 더미이미지에 사이즈 대신 이미지 타이틀이 보이게 됩니다

text = second + slide 세번째도 물음표 text = third + slide라고 추가합니다 이제는 슬라이드의 아래부분에 캡션을 넣겠습니다 이 캡션은 여기에서 보듯이 carousel-items div 속에 이런 클래스들과 함께 넣어주면 된다고 합니다 복사하고, 텍스트에디터로 가서 이미지 밑에다가 붙여 넣기를 해주십니다 reindent 하고, h5에 퍼스트 슬라이드 캡션이라고 넣고 p 태그에는 lorem 10개의 단어를 더미텍스트로 넣겠습니다 그리고 이제는 이 부분들을 모두 복사해서 다른 슬라이드에도 같은 위치에 붙여넣기 해주세요

파트 구분을 하기 위해 carousel-indicators라고 주석을 넣고, 두번째는 carousel-inner라고 하고 줄도 좀 띄웁니다 그리고 아, 캡션을 붙여넣기할때 div가 빠졌네요 첫번째 div 캡션을 복사하고, 다시 붙여넣기 합니다 Second라고 고칩니다

세번째는 third로 고쳐주세요 그리고 이 부분은 carousel-controls라고 주석을 넣어줍니다 그리고 세이브해 주세요 브라우저로 가서, 대쉬보드로 갑니다 지난 번에 페이지에 홈이라는 페이지를 만들었구요

이 페이지를 프런트 페이지로 등록해야 합니다 설정에 읽기로 들어가서, 전면 페이지를 홈으로 선택하고 변경사항 저장을 눌러줍니다 프런트 엔드로 가서, 주소창에 localhost:8080/coding_diy로 엔터를 치면, 이런 전면페이지가 보입니다 네 슬라이드는 반영된 걸 볼 수 있구요, 인디케이터 제대로 되구요

그런데 컨트롤이 제대로 안되네요 다시 텍스트 에디터로 갑니다 콘트롤 파트를 보니까, href에 이 아이디들이 처음 설정할 때의 아이디와 다르죠 인디케이터에 target에만 carousel-front라고 수정하고, 콘트롤의 href도 바꿨어야 하는데, 그렇지 못해서 작동이 제대로 되지 못했습니다 수정하구요

세이브를 하고, 브라우저에 가서 리프레쉬한 다음 좌측 우측 인디케이터를 누르니까 이번에는 모두 제대로 잘 됩니다 네 그런데 슬라이드는 오른쪽에 위치시키려고 계획했고, 좌측에는 사이드 메뉴를 넣으려고 하는데, 슬라이드가 왼쪽에 있지요 이런 경우에는 부트스트랩에서 컬럼의 순서를 변경시키는 클래스가 있는데요, 부트스트랩 사이트 flex에 order를 보시죠 div에 코딩은 첫번째, 두번째, 세번째로 아이템들을 넣었지만, 프런트 엔드에서는 순서를 변경시킬 때 order를 쓰고 하이픈을 한 다음 순서의 숫자를 적어줍니다

또한 이 클래스는 breakpoint를 넣어 디바이스마다 순서를 다르게 지정해 줄 수도 있습니다 이 클래스와 breakpoint를 잘 활용하면, PC에서는 어떤 순서가 모바일과 태블릿에서는 각각 다른 순서대로 엘리먼트를 배치할 수 있습니다 그래서 프런트 페이지에서 메인섹션과 아직 코딩하지 않은 사이드 섹션의 순서를 임의로 정할 수 있겠지요 지금 메인 섹션은 오른쪽에, 사이드 섹션은 왼쪽으로 하고 싶습니다 그래서 이 front-main 부분에서 col-md-9 다음에 order-2 아니면 안전하게 12라고 해줍니다

그리고 미디엄 이상에서만 이 순서로 배치하게 하기 위해서 order 다음에 하이픈 md라고 해줍니다 사이드 섹션에서는 order-md-1로 해주면 되겠지요 그냥 front-main의 div를 모두 복사해서, 사이트 섹션 주석들 사이에 붙여넣기, 그리고 12 대신 1이라고 해줍니다 닫히는 div 태그 달아 줍니다 그리고 일단 이 사이에는 lorem 100개의 더미 텍스트를 넣고 세이브합니다

브라우저로 가서 리프레쉬하면 이제는 슬라이드가 오른쪽에 위치하고, 사이드 섹션은 왼쪽에 위치하게 되었습니다 order라는 클래스는 위치를 변경하는 클래스가 아니라 배열 순서를 지정하는 건데, 사실상 위치를 조정하는 효과가 생깁니다 breakpoint를 넣어 디바이스마다 개별 지정이 가능하고, 숫자는 1에서 12까지 정할 수 있는데, 이번에는 그냥 12로 지정을 했습니다 만약 order를 정할 엘리먼트가 2개뿐이라면 이렇게 1과 12라고 해도 되겠습니다 프런트 페이지 슬라이드는 여기까지 마무리하고, 다음에는 페이지 아이템 박스에 대해 코딩하겠습니다