지난번까지의 개요

저번에는 111(gamecome) 사이트에 공개된'키보드 입력 플러그인'을 활용해 실제 텍스트를 입력한 뒤 CSS(스타일시트)를 개조해 게임에 더 적합하게 보이도록 한 글이 실렸다.
이번에는 기존 CSS의 내용을 이해하고 개조 도구를 가져옵니다.

기존 CSS 이해

CSS(스타일시트)는 주로 홈 페이지의 모양새를 상세하게 지정하는 데 사용됩니다.
이 지정에 따라 게임에 적합한 외관(가능)이 될 수 있다는 것이다.
당장InputForm.css 안에 있는 거 한번 봅시다.

#_111_input{
    position: absolute; /* */
    z-index:999; /* */
    font-size: 15px;
    width : 20em;
    height : 1.5em;
}
#_111_submit{
    position: absolute; /* */
    z-index:999; /* */
}

먼저, #111_input은 텍스트 상자에서 #111_submit은 단추입니다.
{}에 포위되는 과정에서 필요한 설정값이 적혀 있습니다.
텍스트 상자부터 한 줄 한 줄 보세요.
position은 텍스트 상자의 위치를 지정하는 방법입니다. 지정한 값의 absolute는 왼쪽 상단에서 절대 위치를 지정합니다.
왼쪽 상단에서 어느 위치에 배치할지 결정하고 창의 크기를 변경해도 움직이지 않습니다.

position: absolute;

z-idex는 중첩된 우선도로 숫자가 클수록 높고 수치는 999로 지정됩니다.
참고로 최대치는 현행 브라우저 규격의 2147483647입니다.

z-index:999;

font-size는 이름과 같이 글꼴 크기입니다.
다만, 단위는 메모장, 문자 등에 사용되는 글씨체 크기와 다르다.
메모장 등은 포인트(pt) 단위를, CSS는 픽셀(px) 단위를 사용한다.
(그리고 상대적으로 변화하는 em와rem도 있다)
글자 중 일반적인 초기값의 11pt는 14.67px이기 때문에 대체적으로 글자의 초기값과 같다.

font-size: 15px;

width는 너비이고 Height는 높이입니다. em라는 값을 지정합니다. 여기서 1em는 한 글자의 양입니다.
그래서 너비는 20자의 300px, 높이는 1.5자의 22.5px이다.

    width : 20em;
    height : 1.5em;

따라서 텍스트 상자의 설정은 다음과 같습니다.

/*テキストボックス*/
#_111_input{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999;
    /*フォントサイズ*/
    font-size: 15px;
    /*幅*/
    width : 20em;
    /*高さ*/
    height : 1.5em;
}

버튼에 관해서는 지금까지의 지식으로도 확인할 수 있습니다.

#_111_submit{
    /*位置指定*/
    position: absolute;
    /*重なり優先度*/
    z-index:999; 
}

개조에 도움이 되는 소프트웨어를 설치하다

좋아하는 텍스트 편집기를 사용할 수 있지만 Wiondows의 메모장은 추천하지 않습니다.
열 때 줄을 바꾸지 않기 때문이다.
역시 못생겼어요?

벚꽃 편집기 이전부터 많이 사용돼 가볍고 간단해 보기 쉽다.
줄을 바꿔도 보기 힘들어요?

저Visual Studio Code는 사용하고 있지만 가볍게 강조하면 색깔이 붙어서 보기 쉽다는 뜻입니다.
하지만 메뉴는 영어(^^;)
상당히 설정되어 있지만, 이런 느낌일 뿐이다.

설치 후, 다음에는 텍스트 상자와 단추를 실제적으로 개조해야 한다.
CSS 리모델링 2 진입