PUZZLE – 박스 스타일 페이지 기능

  • by

width, height

가장 기본이 되는 폭, 높이를 먼저 만들어 보자.

크기가 미세하게 바뀌면 재미가 없는 것 같고, 100, 300, 500px 단위로 커지게 했다.

<!
-- width --> <div> <h2><code>width: </code></h2> <h3>너비를 설정합니다.

</h3> </div> <input type="radio" name="width" id="box-width-100" checked> <label for="box-width-100"> <code>100px;</code> </label> <input type="radio" name="width" id="box-width-300"> <label for="box-width-300"> <code>300px;</code> </label> <input type="radio" name="width" id="box-width-500"> <label for="box-width-500"> <code>500px;</code> </label> <!
-- height --> <div> <h2><code>height: </code></h2> <h3>높이를 설정합니다.

</h3> </div> <input type="radio" name="height" id="box-height-100" checked> <label for="box-height-100"> <code>100px;</code> </label> <input type="radio" name="height" id="box-height-300"> <label for="box-height-300"> <code>300px;</code> </label> <input type="radio" name="height" id="box-height-500"> <label for="box-height-500"> <code>500px;</code> </label>

/* width */
#box-width-100:checked~.preview-box {
    width: 100px;
}

#box-width-300:checked~.preview-box {
    width: 300px;
}

#box-width-500:checked~.preview-box {
    width: 500px;
}

/* height */
#box-height-100:checked~.preview-box {
    height: 100px;
}

#box-height-300:checked~.preview-box {
    height: 300px;
}

#box-height-500:checked~.preview-box {
    height: 500px;
}

구조는 다른 스타일 속성과 동일합니다.

맨 위에 h2 태그에 속성 이름을 넣고 h3 태그에 간단한 설명을 제목으로 입력하자.

기본이 되는 사이즈를 결정해, 라디오 버튼 checked 속성을 주어 초기에 선택되고 있도록 하고,

나중에 재설정할 때 이 초기 버튼으로 변경할 수 있도록 설정합니다.


background-color

다음은 배경색을 추가해 보겠습니다.

<div>
    <h2><code>background-color: </code></h2>
    <h3>배경 색을 설정합니다.

</h3> </div> <input type="radio" name="color" id="box-color-palevioletred" checked> <label for="box-color-palevioletred"> <code>palevioletred;</code> </label> ... <input type="radio" name="color" id="box-color-orangered"> <label for="box-color-orangered"> <code>orangered;</code> </label>

palevioletred, royalblue, gold, rebeccapurple, greenyellow, orangered

색깔은 총 6개의 색깔을 선택했다.

서로 매칭도 좋아지고 구별도 좋아지는 다양한 색으로…

(길이가 너무 길어 보이기 때문에 중복 텍스트는 생략되었습니다.

)

#box-color-orangered:checked~.preview-box {
    background-color: orangered;
}

...

#box-color-orangered:checked~.preview-box {
    background-color: orangered;
}

박스 사이징

다음은 테두리의 속성을 추가합니다.

괘선에 스타일을 넣기 전에 모서리의 곡률을 먼저 넣어준다.

곡률이 없을 때의 값 0과 조금 넣었을 때, 많이 넣었을 때를 구별하기 위해 10px, 50px를 추가하고,

마지막으로 원을 만들 수 있도록 50%도 추가해준다.

<!
-- border-radius --> <div> <h2><code>border-radius: </code></h2> <h3>모서리의 곡률을 설정합니다.

</h3> </div> <input type="radio" name="border-radius" id="box-border-radius-0" checked> <label for="box-border-radius-0"> <code>0;</code> </label> ... <input type="radio" name="border-radius" id="box-border-radius-50p"> <label for="box-border-radius-50p"> <code>50%;</code> </label>

/* border-radius */
#box-border-radius-0:checked~.preview-box {
    border-radius: 0;
}

...

#box-border-radius-50p:checked~.preview-box {
    border-radius: 50%;
}

border

이제 테두리 라인과 관련된 스타일을 추가해 보겠습니다.

1. border-style: none, solid, double, dashed, dotted, groove, ridge, inset, outset

라인 스타일은 가능한 한 관련된 것들 사이에 가깝게 배치합니다.

2. border-width: 10px, 30px, 50px

선폭의 변화가 확실하게 보이면서도 지나치게 지나지 않도록 설정

3. border-color: 색상은 위의 6가지 색상을 사용합니다.

4. box-sizing : 프레임을 안쪽에 적용할지 외부에 적용할지를 결정하는 옵션도 추가한다.

border-style 속성은 선의 최소 너비가 필요하기 때문에

그런 다음 다른 속성을 추가할 때 추가되는 속성 값이 적용되도록 먼저 배치합니다.

이와 같이 1~4회의 속성을 조합하여 적용해 볼 수 있도록 한다.

<!
-- border-style --> <div> <h2><code>border-style: </code></h2> <h3>테두리 스타일을 설정합니다.

테두리 너비를 넓게 하고 확인해보세요!
</h3> </div> <input type="radio" name="border-style" id="box-border-none" checked> <label for="box-border-none"> <code>none;</code> </label> ... <input type="radio" name="border-style" id="box-border-outset"> <label for="box-border-outset"> <code>outset;</code> </label> <!
-- border-width --> <div> <h2><code>border-width: </code></h2> <h3>테두리 너비를 설정합니다.

<strong>테두리가 없으면 적용되지 않습니다!
</strong></h3> </div> <input type="radio" name="border-width" id="box-border-10" checked> <label for="box-border-10"> <code>10px;</code> </label> ... <input type="radio" name="border-width" id="box-border-50"> <label for="box-border-50"> <code>50px;</code> </label> <!
-- border-color --> <div> <h2><code>border-color: </code></h2> <h3>테두리 색을 설정합니다.

<strong>테두리가 없으면 적용되지 않습니다!
</strong></h3> </div> <input type="radio" name="border-color" id="box-border-palevioletred" checked> <label for="box-border-palevioletred"> <code>palevioletred;</code> </label> ... <input type="radio" name="border-color" id="box-border-orangered"> <label for="box-border-orangered"> <code>orangered;</code> </label> <!
-- box-sizing --> <div> <h2><code>box-sizing: </code></h2> <h3>테두리를 바깥쪽으로 적용할지 안쪽으로 적용할지 설정합니다.

</h3> </div> <input type="radio" name="box-sizing" id="box-counter-box" checked> <label for="box-counter-box"> <code>counter-box;</code> </label> <input type="radio" name="box-sizing" id="box-border-box"> <label for="box-border-box"> <code>border-box;</code> </label>

/* border-style */
#box-border-none:checked~.preview-box {
    border: none;
}

...

#box-border-outset:checked~.preview-box {
    border: 10px outset #333;
}

/* border-width */
#box-border-10:checked~.preview-box {
    border-width: 10px;
}

...

#box-border-50:checked~.preview-box {
    border-width: 50px;
}

/* border-color */
#box-border-none:checked~.preview-box {
    border-color: none;
}

...

#box-border-orangered:checked~.preview-box {
    border-color: orangered;
}

/* box-sizing */
#box-counter-box:checked~.preview-box {
    box-sizing: content-box;
}

#box-border-box:checked~.preview-box {
    box-sizing: border-box;
}

outline

아웃라인도 마찬가지로 설정해 준다.

1. outline-style: border-width 와 동일하게 설정

2. outline-offset : 테두리와의 간격 설정, 없을 때 0과 10px, 50px 추가

3. outline-width: border-width 와 동일하게 설정

4. outline-color : border-color 와 동일하게 설정

<!
-- outline-style --> <div> <h2><code>outline-style: </code></h2> <h3>외곽선 스타일을 설정합니다.

외곽선 너비를 넓게 하고 확인해보세요!
</h3> </div> <input type="radio" name="outline-style" id="box-outline-none" checked> <label for="box-outline-none"> <code>none;</code> </label> ... <input type="radio" name="outline-style" id="box-outline-outset"> <label for="box-outline-outset"> <code>outset;</code> </label> <!
-- outline-offset --> <div> <h2><code>outline-offset: </code></h2> <h3>외곽선과 테두리 사이의 간격을 설정합니다.

<strong>외곽선이 없으면 적용되지 않습니다!
</strong></h3> </div> <input type="radio" name="outline-offset" id="box-outline-offset-0" checked> <label for="box-outline-offset-0"> <code>0;</code> </label> ... <input type="radio" name="outline-offset" id="box-outline-offset-50"> <label for="box-outline-offset-50"> <code>50px;</code> </label> <!
-- outline-width --> <div> <h2><code>outline-width: </code></h2> <h3>외곽선 너비를 설정합니다.

<strong>외곽선이 없으면 적용되지 않습니다!
</strong></h3> </div> <input type="radio" name="outline-width" id="box-outline-10" checked> <label for="box-outline-10"> <code>10px;</code> </label> ... <input type="radio" name="outline-width" id="box-outline-50"> <label for="box-outline-50"> <code>50px;</code> </label> <!
-- outline-color --> <div> <h2><code>border-color: </code></h2> <h3>외곽선 색을 설정합니다.

<strong>외곽선이 없으면 적용되지 않습니다!
</strong></h3> </div> <input type="radio" name="outline-color" id="box-outline-palevioletred" checked> <label for="box-outline-palevioletred"> <code>palevioletred;</code> </label> ... <input type="radio" name="outline-color" id="box-outline-orangered"> <label for="box-outline-orangered"> <code>orangered;</code> </label>

/* outline-style */
#box-outline-none:checked~.preview-box {
    outline: none;
}

...

#box-outline-outset:checked~.preview-box {
    outline: 10px outset #333;
}

/* border-radius */
#box-outline-offset-0:checked~.preview-box {
    outline-offset: 0;
}

...

#box-outline-offset-50p:checked~.preview-box {
    outline-offset: 50%;
}

/* outline-width */
#box-outline-10:checked~.preview-box {
    outline-width: 10px;
}

...

#box-outline-50:checked~.preview-box {
    outline-width: 50px;
}

/* outline-color */
#box-outline-none:checked~.preview-box {
    outline-color: none;
}

...

#box-outline-orangered:checked~.preview-box {
    outline-color: orangered;
}

box-shadow, box-shadow inset

이제 그림자 속성을 추가합시다.

그림자는 x, y축의 이동 속성, 흐림/확대 속성의 두 구획으로 나누어 적용합니다.

그림자는 box-shadow 속성이 하나만 존재하므로 중복 적용할 수 없기 때문에

따로 다루어야 한다.

외부 그림자와 내부 그림자, 그림자 색을 하나의 라디오 그룹으로 결합합니다.

(위와 같이 중복 적용되지 않습니다.

)

<!
-- box-shadow --> <div> <h2><code>box-shadow: </code></h2> <h3>바깥쪽 그림자를 설정합니다.

첫번째, 두번째 값은 x축 y축을 나타냅니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-none" checked> <label for="box-shadow-none"> <code>none;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-xy40"> <label for="box-shadow-xy40"> <code>40px 40px black;</code> </label> <div> <h3>세번째, 네번째 값은 blur, spread 값을 조절할 수 있습니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-blur10"> <label for="box-shadow-blur10"> <code>20px 20px 10px black;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-b10s10"> <label for="box-shadow-b10s10"> <code>20px 20px 10px 10px black;</code> </label> <!
-- box-shadow-inset --> <div> <h3>안쪽 그림자를 설정합니다.

첫번째, 두번째 값은 x축 y축을 나타냅니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-x20-inset"> <label for="box-shadow-x20-inset"> <code>inset 20px 0 black;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-xy40-inset"> <label for="box-shadow-xy40-inset"> <code>inset 40px 40px black;</code> </label> <div> <h3>세번째, 네번째 값은 blur, spread 값을 조절할 수 있습니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-blur10-inset"> <label for="box-shadow-blur10-inset"> <code>inset 20px 20px 10px black;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-b10s10-inset"> <label for="box-shadow-b10s10-inset"> <code>inset 20px 20px 10px 10px black;</code> </label> <!
-- box-shadow-color --> <div> <h3>바깥쪽 그림자의 색을 설정합니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-color-palevioletred"> <label for="box-shadow-color-palevioletred"> <code>20px 20px palevioletred;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-color-orangered"> <label for="box-shadow-color-orangered"> <code>20px 20px orangered;</code> </label> <!
-- box-shadow-inset-color --> <div> <h3>안쪽 그림자의 색을 설정합니다.

</h3> </div> <input type="radio" name="box-shadow" id="box-shadow-color-inset-palevioletred"> <label for="box-shadow-color-inset-palevioletred"> <code>inset 20px 20px palevioletred;</code> </label> ... <input type="radio" name="box-shadow" id="box-shadow-color-inset-orangered"> <label for="box-shadow-color-inset-orangered"> <code>inset 20px 20px orangered;</code> </label>

/* box-shadow */
/* x, y */
#box-shadow-none:checked~.preview-box {
    box-shadow: none;
}

...

#box-shadow-xy40:checked~.preview-box {
    box-shadow: 40px 40px black;
}

/* box-shadow */
/* blur, spread */
#box-shadow-blur10:checked~.preview-box {
    box-shadow: 20px 20px 10px black;
}

...

#box-shadow-b10s10:checked~.preview-box {
    box-shadow: 20px 20px 10px 10px black;
}

/* box-shadow-inset */
/* x, y */

#box-shadow-basic-inset:checked~.preview-box {
    box-shadow: inset 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

...

#box-shadow-xy40-inset:checked~.preview-box {
    box-shadow: inset 40px 40px black;
}

/* box-shadow-inset */
/* blur, spread */
#box-shadow-blur10-inset:checked~.preview-box {
    box-shadow: inset 20px 20px 10px black;
}

...

#box-shadow-b10s10-inset:checked~.preview-box {
    box-shadow: inset 20px 20px 10px 10px black;
}

/* box-shadow-color */
#box-shadow-color-palevioletred:checked~.preview-box {
    box-shadow: 20px 20px palevioletred;
}

...

#box-shadow-color-orangered:checked~.preview-box {
    box-shadow: 20px 20px orangered;
}

/* box-shadow-color-inset */
#box-shadow-color-inset-palevioletred:checked~.preview-box {
    box-shadow: inset 20px 20px palevioletred;
}

...

#box-shadow-color-inset-orangered:checked~.preview-box {
    box-shadow: inset 20px 20px orangered;
}

한 번 여기에 기본 상자 스타일 속성을 추가해보십시오.

나중에 다른 속성이 기억되면 계속 추가하는 방법으로 진행할 예정이다.

몇 가지 좋지 않다고 생각하지만, 길이가 이미 HTML 문서는 600 줄이고 CSS는 400 줄을 넘었습니다.

그래도 CSS는 공통, 박스, 텍스트등으로 전부 나누어 놓고 이것 정도… 😂

좀 더 깔끔하게 정리할 수 있도록 고민해봐야 한다.