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는 공통, 박스, 텍스트등으로 전부 나누어 놓고 이것 정도… 😂
좀 더 깔끔하게 정리할 수 있도록 고민해봐야 한다.
