프로그래밍 언어 활용 7일차(24/11/19)

웹프로그래밍/CSS

프로그래밍 언어 활용 7일차(24/11/19)

wkun 2024. 11. 19. 17:57

CONTENTS

CSS Game&Review

Section2 박스 속성

1.박스모델

2.테두리 속성

3.박스 속성

참고사이트) Box Shadow CSS Generator

-----------------------------------------------------------------------------

CSS Game&Review

문제풀기

CSS Diner

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

정답
1. plate
2. bento
3. #fancy
4. plate apple
5. #fancy pickle
6. .small or apple.small
7. orange.small
8. bento orange.small
9. plate, bento
10. *
11. plate*
12. plate+apple
13. bento~pickle 인접형제
14. plate>apple 일반형제 *공백:후손
15. orange: +first-child
16. plate: only-child
17. .small: last-child
18. plate: nth-child(3)
19. bento: nth-last-child(3) <-뒤에서부터
20. apple: first-of-type
21. plate: nth-of-type(even) or (2n)
22. plate: nth-of-type(2n+3)
짝 시작점
23. apple: only-of-type
24. .small: last-of-type
25. bento: empty
26. :not(.small, plate)
27. [for]
28. plate[for]
29. [for="Vitaly"]
30. [for^="Sa"]
31. [for$="ato"]
32. [for*="obb"]

-----------------------------------------------------------------------

Section2 박스속성

1. 박스모델

◎ 박스모델

-웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용

-웹 문서의 전체 레이아웃을 정의

-각종 요소들을 원하는 위치에 배치

◎박스의 속성

-content: 실제 내용이 표현되는 곳

-padding: 콘텐츠와 테두리 사이의 여백(내부)

-border: 박스의 테두리 두께

-margin: 테두리와 박스의 최종 경계 사이의 여백(외부)

박스 모델 이해하기

<head>

<style>

div {

background-color: yellow;

width: 300px;

padding: 25px;

border: 15px solid navy;

margin: 25px;

}

</style>

</head>

<body>

<p>CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다.</p>

<div>박스 모델의 padidng, border, margin 속성의 기본 값은 0이며, 상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있습니다.</div>

</body>

◎Content

-실제 내용이 표현되는 곳

-속성: width(너비 지정), height(높이 지정)

<width과 height에 사용되는 속성값>

속성	설명
value	실제로 측정한 데이터 값
min, max	데이터가 인식하는 최솟값과 최댓값, 기본값 0~1
low, hight	허용되는 범위의 최솟값과 최댓값, low~high 값은 항상 min~max 값 범위 내

박스의 내용 영역 크기 지정하기

<head>

<style>

p {

background-color: yellow;

color: red;

font-weight: bold;

font-size: 16pt;

}

p.c1 {

width: 700px;

height: 80px;

color: green;

}

p.c2 {

width: 50%;

height: 150%;

color: purple;

}

p.c3 {

width: 10cm;

height: 3cm;

color: blue;

}

</style>

</head>

<body>

</body>

* px: 고정크기

%: 부모 요소에 영향

◎padding, margin

-padding: 박스의 안쪽 여백 설정

-margin: 박스의 바깥쪽 여백 설정

<padding과 margin에 사용되는 속성값>

속성값	설명
수치	여백을 픽셀(px), 포인트(pt), 센티미터(cm) 같은 수치 단위로 지정
백분율	여백을 부모 요소를 기준으로 하여 백분율(%)로 지정
auto	여백을 웹 브라우저가 자동으로 지정, 기본값 ex) margin: 0 auto; 가운데 정렬

박스의 안쪽 여백과 바깥쪽 여백 지정하기

<head>

<style>

/* * {

margin: 0px;

padding: 0px;

} */

p {

background-color: yellow;

color: red;

font-weight: bold;

font-size: 16pt;

}

p.pad {

color: purple;

padding: 20px;

}

p.mar {

color: green;

margin: 30px;

}

p.mp {

color: blue;

padding: 5%;

margin: 5%;

}

</style>

</head>

<body>

<p class="pad">(1) 안쪽 여백 지정 - padding 20px</p>

<p class="mar">(2) 바깥쪽 여백 지정 - margin 30px</p>

<p class="mp">(3) 안쪽, 바깥쪽 여백 지정 - padding 5%, margin 5%</p>

</body>

◎네 방향 여백 크기 설정

형식	설명
padding-top: 속성값;	위쪽 패딩
padding-bottom: 속성값;	아래쪽 패딩
padding-right: 속성값;	오른쪽 패딩
padding-left: 속성값;	왼쪽 패딩
margin-top: 속성값;	위쪽 마진
margin-bottom: 속성값;	아래쪽 마진
margin-right: 속성값;	오른쪽 마진
margin-left: 속성값;	왼쪽 마진

◎속성값의 개수에 따라 적용되는 위치

h1 { margin: 5px 10px 5px 10px; }

↓ ↓ ↓ ↓

top right bottom left

h1 { margin: 5px 10px 5px; }

↓ ↓ ↓

top right& left bottom

h1 { margin: 5px 10px; }

↓ ↓

top&bottom right&left

h1 { margin: 5px; }

↓

top&right&bottom&left

cf)시계방향으로 생각할 것

박스의 여백을 네 방향으로 지정하기

<head>

<style>

/* *{

margin: 0px;

padding: 0px;

} */

body {

font-weight: bold;

font-size: 16pt;

}

.mp1 {

background-color: aqua;

color: red;

margin-bottom: 40px;

padding-left: 50px;

}

.mp2 {

background-color: silver;

color: green;

margin: 20px;

padding: 10px 20px;

}

.mp3 {

background-color: gray;

color: purple;

margin: 50px 15px 20px;

padding: 20px;

}

</style>

</head>

</body>

2. 테두리 속성

◎border-width

-테두리 두께 설정

-Top, bottom, left, right를 이용하여 네 방향으로 설정 가능

속성값	설명
수치	테두리의 두께를 픽셀(px), 포인트(pt), 센티미터(cm) 같은 단위로 지정
thin	얇은(1px) 두께의 테두리를 지정
medium	중간(3px) 두께의 테두리를 지정, 기본값
thick	굵은(5px) 두께의 테두리를 지정

◎border-color

-테두리 색상 지정

-CSS3 기본 색상 표현 방법: 색상 이름, 16진수 값(#000000), 10진수 값(0, 0, 0)(RGB값)

◎border-style

-테두리 스타일 지정

< border-style에 사용되는 속성값>

속성값	설명	속성값	설명
none	테두리가 나타나지 않음, 기본값	double	테두리를 이중선으로 지정
hidden	테두리를 감춤	groove	테두리를 오목한 선으로(홈이 파인 듯 입체적으로) 지정
dotted	테두리를 점선으로 지정	ridge	테두리를 볼록한 선으로(튀어나온 듯 입체적으로) 지정
dashed	테루리를 파선으로 지정	inset	테두리의 안쪽이 오목한 선으로 지정
solid	테두리를 실선으로 지정	outset	테두리의 안쪽이 볼록한 선으로 지정

테두리 스타일 지정하기

<head>

<style>

body { font-family: consolas; }

h3.none { border-style: none;}

h3.hidden { border-style: hidden; }

h3.dotted { border-style: dotted; }

h3.dashed { border-style: dashed; }

h3.solid { border-style: solid; }

h3.double {border-style: double; }

h3.groove { border-style: groove; }

h3.ridge { border-style: ridge; }

h3.inset { border-style: inset; }

h3.outset { border-style: outset; }

h3.mix { border-style: dotted dashed solid double; }

</style>

</head>

<body>

<h3 class="none">no border</h3>

<h3 class="hidden">hidden border</h3>

<h3 class="dotted">dotted border</h3>

<h3 class="dashed">dashed border</h3>

<h3 class="solid">solid border</h3>

<h3 class="double">double border</h3>

<h3 class="groove">groove border</h3>

<h3 class="ridge">ridge border</h3>

<h3 class="inset">inset border</h3>

<h3 class="outset">outset border</h3>

<h3 class="mix">mix border</h3>

</body>

테두리의 네 방향에 각각 다른 속성 지정하기

<head>

<style>

body {

font-weight: bold;

font-size: 12pt;

font-family: consolas;

}

.bt1 {

background-color: aqua;

color: red;

margin-bottom: 15px;

padding-left: 50px;

border-style: dotted;

border-width: thick;

border-color: green;

}

.bt2 {

background-color: silver;

color: green;

margin: 20px;

padding: 5px 10px;

border-style: solid;

border-width: 1px 3px 5px 3px;

border-color: navy red fuchsia black;

}

.bt3 {

background-color: gray;

color: purple;

margin: 50px 15px 20px;

padding: 20px;

border-style: dashed double;

border-width: 5px 0px;

border-color: red;

}

.bt4 {

border-top: 5px solid red;

border-bottom: 5px solid red;

}

</style>

</head>

<body>

<p class="bt4">박스의 상하좌우 테두리는 border-top, boder-right, border-bottom, border-left라는 속성을 이용해 지정할 수 있습니다.</p>

</body>

*테두리 순서: 두께->스타일>컬러

3.박스 속성

◎border-radius

-테두리의 모서리를 둥글게 설정

<둥근 모서리 설정>

형식	설명
border-radius: 속성값;	네 개의 모서리를 모두 둥글게 함
border-top-left-radius: 속성값;	상단 왼쪽 모서리를 둥글게 함
border-top-right-radius: 속성값;	상단 오른쪽 모서리를 둥글게 함
border-bottom-right-radius: 속성값;	하단 오른쪽 모서리를 둥글게 함
border-bottom-left-radius: 속성값;	하단 왼쪽 모서리를 둥글게 함

cf) overflow: hidden; 숨김/ (width, height) 같게 만들면 원

박스에 둥근 모서리 적용하기

<head>

<style>

body {

font-weight: bold;

font-size: 12pt;

}

.br1 {

background-color: lime;

color: red;

border-style: solid;

border-width: thick;

border-color: green;

border-radius: 30%;

}

.br2 {

background-color: maroon;

color: yellow;

border-style: dotted;

border-width: 2px;

border-color: white;

border-radius: 15px 35px;

}

.br3 {

background-color: teal;

color: aqua;

border-style: dashed;

border-width: 5px;

border-color: red;

border-radius: 5px 15px 25px 35px;

}

.br4 {

border: 3px solid red;

border-top-left-radius: 30px;

}

</style>

</head>

<body>

</body>

◎box-shadow

-박스에 그림자 효과 적용

{ box-shadow: 수평 그림자(필수) | 수직 그림자(필수) | 그림자 흐림 | 그림자 번짐 | 그림자 색상 | 삽입 효과; }

-수평 그림자(h-shadow): 그림자의 수평 거리 지정(x축 위치)

-수직 그림자(v-shadow): 그림자의 수직 거리 지정(y축 위치)

-그림자 흐림(blur): 그림자의 흐림 정도 지정 ex)'0'px 완전 진함

-그림자 번짐(spread): 그림자의 번짐 정도 지정

-그림자 색상(color): 그림자의 색상 지정

-삽입 효과(inset): 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과

박스에 그림자 효과 주기

<head>

<style>

body {

font-weight: bold;

font-size: 12pt;

}

.boxshadow1 {

background-color: yellow;

border: 5px solid blue;

box-shadow: 10px 10px 0px teal;

}

.boxshadow2 {

background-color: orange;

border: 5px solid red;

box-shadow: 20px 20px 50px red;

}

.boxshadow3 {

background-color:silver;

border: 5px solid black;

box-shadow: 20px 20px 30px -20px maroon;

}

.boxshadow4 {

background-color:lime;

border: 5px solid olive;

box-shadow: 10px 10px 0px 10px fuchsia inset;

}

</style>

</head>

<body>

</body>

<head>

<style>

div {

width: 200px;

height: 50px;

padding: 10px;

margin: 30px;

}

#bs1 {

border: 1px solid rgba(102, 186, 255, 0.4);

box-shadow: 0px 0px 20px 10px rgba(102, 186, 255, 0.4);

}

#bs2 {

border: 1px solid black;

box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;

}

</style>

</head>

<body>

</div>

</div>

</body>

<head>

<style>

img {

padding: 20px;

margin: 20px;

}

.shadow1 { /* Bottom right coner */

box-shadow: 5px 5px 10px #000;

}

.shadow2 { /* Up tight coner */

box-shadow: 5px -5px 10px #000;

}

</style>

</head>

<body>

</body>

cf) 양수 아래쪽, 음수 위쪽

참고사이트)

<박스 그림자 효과>

Box Shadow CSS Generator

https://cssgenerator.org/box-shadow-css-generator.html

Box Shadow CSS Generator

A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations.

cssgenerator.org

'웹프로그래밍 > CSS' 카테고리의 다른 글

프로그래밍 언어 활용 10일차 (24/11/22) (0)	2024.11.22
프로그래밍 언어 활용 9일차(24/11/21) (0)	2024.11.21
프로그래밍 언어 활용 8일차(24/11/20) (2)	2024.11.20
프로그램 언어 활용 6일차(24/11/18) (4)	2024.11.18
프로그래밍 언어 활용 5일차(24/11/15) (2)	2024.11.15

현재글프로그래밍 언어 활용 7일차(24/11/19)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그