초보자가 WEB 디자인한다면, STUDIO! (헤더 편)

이번에는 웹 사이트 제작에서 좌절하고 초보자의 내가 발견한 구세주 "STUDIO"를 사용하여
반응형 대응부터 SEO 대책까지 갖춘 웹사이트를 작성합니다!
게다가 모두,,,,,,, 노코드로! ! ! 너무 많지 않니?

STUDIO는 일본에 본사를 둔 STUDIO 주식회사가 2018년 4월에 정식 발매한 국산 홈페이지 제작 툴입니다. 2020년 6월에는 CMS 기능도 추가되었습니다!
공식 사이트 STUDIO에서 등록을 실시 기본 무료로 작성부터 공개까지 할 수 있다.
또한 유료 콘텐츠에서는 추가 기능과 독자 도메인 연결, 외부 앱 연계 등도 할 수 있습니다.

STUDIO에 대해 장점과 단점을 설명합니다.

이점

・노코드로 디자인을 할 수 있다
・템플릿뿐만 아니라 자유도가 높은 디자인을 할 수 있다
・운동이 있는 디자인도 간단하게 만들 수 있어 세세하게 설정할 수 있다
・디자인⇨공개까지 간단
・응답 대응을 간단하게 할 수 있다
・튜토리얼 동영상도 무료로 충실

단점

· html, CSS에 필요한 최소한의 지식이 있습니다.
・STUDIO에 실장되어 있지 않은 기능은 사용할 수 없다

이번은 header 부분을 작성해 반응 대응에 했습니다. 모바일 대응의 곳은 동경의 햄버거 메뉴를 구현했습니다. STUDIO를 사용해 불과 3시간 정도로 완성했습니다.

조작 방법에 익숙해질 때까지 힘들지도 모릅니다만, 그래도 압도적으로 눈으로 확인하면서 레이아웃 할 수 있으면, 즐겁고 알기 쉽다고 생각합니다.

header를 만드는 방법에 대해

① 왼쪽 작업 공간에 있는 메뉴에서 박스를 선택하는 초기값은 div 박스입니다.
왼쪽 메뉴 막대에서 header 상자를 선택합니다.

② 오른쪽의 작업 메뉴에서 탭의 종류 변경이 가능하므로 header로 변경. 크기는 적당히 가로 100%, 세로 70px라든지 시작은 하고 있습니다.

③, 우선 나는 기업의 로고를 배치하고 싶었기 때문에 박스에서 image를 선택
마우스 오른쪽 버튼을 클릭하여 이미지 상자에 넣을 이미지를 선택합니다. 업로드한 이미지 지정

④, header의 박스에 image를 넣습니다 ※이때 image 박스의 가로폭, 세로폭이 heder 박스보다 크면 들어가지 않으므로 주의!

⑤, 상기와 같은 순서로 메뉴 바도 만들어 갑니다. 텍스트를 목록 상자에 넣어
첫 번째 문자 사이즈, 문자 사이를 조절하면 카피 앤 페이스트로 필요 항목분 만들면 시단입니다.

⑥, 메뉴 항목이 생기면, nuv 박스를 만들어 안에 넣어 갑니다.
요소를 넣으면 옆으로 지정합시다. padding 등 간격 조정도 여기에서 합니다. 상단 메뉴에 항목이 있으므로 각 요소마다 수행하십시오.