티스토리 뷰
1. 조합 선택자 (****)
- 기존의 여러 선택자를 복합적으로 조합하는 방법을 제공한다.
- 1 ) 후속 선택자 ( 선택자A 선택자B )
- : 선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택한다.
- : 직계가 아니더라도 후손이라면, 전부 찾게 된다.
- 2 ) 자식 선택자 ( 선택자A>선택자B )
- : 부모 선택자A의 바로 아래 직계 자손인 선택자B를 선택한다.
- 3 ) 인접 형제 선택자 ( 선택자A + 선택자B )
- : 형제 관계에서 선택자A의 바로 옆에 위치한 선택자B를 선택한다.
- 4 ) 일반 형제 선택자 ( 선택자A ~ 선택자B )
- : 형제 관계에서 선택자A 뒤에 나타나는 모든 선택자B를 선택한다.
- : 앞에 나온 선택자A를 기준으로 앞에서 나온 태그의 경우 형제 관계일지라도 선택되지 못한다.
- 5 ) 그룹 선택자 ( 선택자A, 선택자B )
- : 선택자A와 선택자B를 모두 선택한다.
2. 박스 모델
- 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용한다.
- 웹 문서의 전체 레이아웃을 정의하며, 각종 요소들을 원하는 위치에 배치할 수 있게 한다.
3. 박스의 속성
- 1 ) 콘텐츠( content ) : 실제 내용이 표현되는 곳
- 2 ) 패딩( padding ) : 콘텐츠와 보더(테두리) 사이의 여백
- 3 ) 보더( border ) : 박스의 테두리 두께
- 4 ) 마진( margin ) : 테두리와 박스의 최종 경계 사이의 여백
- + 마진( margin )은 외부의 요소와 겹칠 수 있기에, css reset을 하게 된다.
4. Box – shadow ( 박스 그림자 )
- 선택자{ box-shadow : 수평 그림자(필수) | 수직 그림자(필수) | 그림자 흐림 | 그림자 번짐 | 그림자 색상 | 삽입 효과; }
- 1 ) 수평 그림자( 필수 ) : 그림자가 가로로 얼마나 빠져나와 있는 가를 지정
- 2 ) 수직 그림자( 필수 ) : 그림자가 세로로 얼마나 빠져나와 있는 가를 지정
- 3 ) 그림자 흐림 : 그림자의 흐림 정도를 지정한다.
- 4 ) 그림자 번짐 : 그림자가 상하좌우로 얼마나 번지는 가를 지정한다.
- 5 ) 그림자 색상 : 그림자의 색상을 지정한다.
- 6 ) 삽입 효과 : 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과이다.
- + 삽입 효과는 잘 사용하지 않는다.
[ 1. 조합 선택자 - 후손 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조합 선택자</title>
<style>
/* 조합 선택자 - 후손 선택자 ( 공백 ) */
div ul {
color: red;
}
/* 이번 경우에는 div태그 바로밑에 ul과 h2태그가 있기 때문에 div>ul 또는 div>h2로 작성해도 같은 결과가 나타난다. */
div h2 {
color: mediumaquamarine;
background-color: blueviolet;
}
/* div태그 밑의 h2태그를 찾는 것이기에 후손 선택자2는 선택되지 않는다. */
/* 후손 선택자2는 div과 형제관계이기 때문에 후손 선택자로는 선택할 수 없다. */
</style>
</head>
<body>
<div>
<h2>조합 선택자1</h2>
<ul>
<li>자식의 자식(후손1)</li>
<li>자식의 자식(후손2)</li>
</ul>
</div>
<h2>후손 선택자2</h2>
</body>
</html>[ 2. 조합 선택자 - 자식 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조합 선택자 - 자식 선택자</title>
<style>
/* 조합 선택자 - 자식(자손) 선택자 */
body > div > h3 {
color: red;
}
body > p {
color: green;
background-color: yellow;
}
body > h3 > tel > home{
color: blue;
}
/* 자식 태그를 여러번 사용하여 후손 태그를 선택할 수도 있지만, body home이라는 후손 선택자를 사용할 수도 있다. */
/* 하지만 후손 선택자보다는 자식 선택자를 선택하는 편이 좀 더 명확하게 선택할 수 있다. */
</style>
</head>
<body>
<!-- div>h3 -->
<div>
<h3>Child Selector_1</h3>
</div>
<p>자식 선택자</p>
<!-- h3>(sno+std+(tel>(office+home))) -->
<h3>
<sno>123456</sno><br>
<std>홍민성</std><br>
<tel>
<office>02-4567-1010</office><br>
<home>010-1234-5678</home>
</tel>
<!-- 사용자 정의 태그는 인라인 요소로 들어가게 된다. -->
</h3>
</body>
</html>[ 3. 조합 선택자 - 인접 형제 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인접 형제 선택자</title>
<style>
/* 조합 선택자 - 인접 형제 선택자 */
h1 + h2 + ul {
color: blue;
}
/* h1의 바로 옆 형제인 h2의 바로 옆 형제인 ul을 선택한다. */
div + h3 {
color: red;
}
/* 여러 h3태그 중에 div태그의 바로 옆 형제의 h3을 선택한다. */
h3 + p {
color: blueviolet;
background-color: yellow;
}
/* h3태그의 바로 옆 형제인 p태그를 선택한다. */
</style>
</head>
<body>
<div>
<h1>인접 형제 선택자1</h1>
<h2>인접 형제 선택자2</h2>
<ul>목록
<li>주제1</li>
<li>주제2</li>
</ul>
</div>
<h3>Adjacent Selector</h3>
<p>인접 형제 선택자에 의한 스타일 적용</p>
<h3>Adjacent Selector_2</h3>
</body>
</html>[ 4. 조합 선택자 - 일반 형제 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>조합 선택자 - 일반 형제 선택자</title>
<style>
/* 조합 선택자 - 일반 형제 선택자 */
h1 ~ ul {
color: blue;
}
/* h1태그와 형제 관계에 있는 모든 ul태그를 선택한다. */
div ~ h3 {
color: red;
}
/* div 태그와 형제 관계에 있는 모든 h3태그를 선택한다. (**) */
h3 ~ p {
color: violet;
background-color: yellow;
}
/* h3태그와 형제 태그로 있는 p태그를 선택해 준다. */
/* 단, 일반 형제 선택자에서는 첫번째로 나온 태그를 기준으로 밑으로 찾지 위를 찾지는 않는다. (***) */
h3 ~ div {
background-color: brown;
}
/* 이를 보면, div태그는 h3태그 위에 있지 아래에는 없기에 선택되지 않아 스타일이 적용되지 못하고 있음을 알 수 있다. (***) */
</style>
</head>
<body>
<div>
<h1>형제 선택자1</h1>
<h2>형제 선택자2</h2>
<ul>목록
<li>주제1</li>
<li>주제2</li>
</ul>
</div>
<h3> Sibling Selector_1 </h3>
<h4>같은 레벨의 형제</h4>
<p>일반 형제 선택자에 의한 스타일링 적용</p>
<h3> Sibling Selector_2 </h3>
<h3> Sibling Selector_3 </h3>
</body>
</html>[ 5. 조합 선택자 - 그룹 선택자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>조합 선택자 - 그룹 선택자</title>
<style>
h3, p, h2 {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Group Selector_1</h2>
<p>스타일 지정을 그룹으로 적용</p>
<div>
<h3>Group Selector_2</h3>
</div>
</body>
</html>[ 6. 박스모델 알아보기 - box-sizing ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델1</title>
<style>
div{
box-sizing: content-box;
/* 박스 사이징의 기본 속성은 content-box이다. */
/* 콘텐츠 박스를 기준으로 가로와 세로 길이를 지정했다는 의미이다. */
width: 300px;
/* 콘텐츠 박스의 길이 사이즈가 300px이라는 의미이다. */
padding: 25px;
/* 콘텐츠 박스와 보더 사이의 여백을 25px씩 주어진 것이다. */
/* padding 값을 지정하면, padding까지 content로 간주한다.(***) */
border: 15px solid navy;
/* border은 두께, 선의 종류, 선의 색 순으로 작성하는 것이 관례이다. */
margin: 25px;
/* 값을 하나만 지정하면, 상우하좌 모두 같은 값이 들어가게 된다. */
background-color: yellow;
/* 박스모델과 관련된 속성은 모아서 작성하고, 관련없는 배경색은 구분해서 작성해야 한다. */
}
</style>
</head>
<body>
<p> CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다. </p>
<div>박스 모델의 padding, border, margin 속성의 기본값은 0이며, 상하좌우 방향인
top, bottom, left, right를 이용하여 값을 지정할 수 있다.</div>
</body>
</html>[ 7. 박스모델 연습하기 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스모델 연습</title>
<style>
/* 박스모델에 대해서 알아보자 */
*{
padding: 0;
margin: 0;
}
div{
box-sizing: content-box;
/* box-sizing : border-box로 하면, 가로와 세로 길이를 지정한 것이 border 박스 기준으로 된다. */
/* 그렇기 때문에 가로와 세로 길이가 padding + content + border을 합친 값으로 되기에, content-box로 지정했을 때처럼 부풀어 오르는 것이 아니다. */
/* 이렇게 되면 복잡하기 때문에, css reset을 통해 margin과 padding을 0으로 하면 편할 수도 있다. */
width: 200px;
/* 콘텐츠의 가로 길이 조정 */
height: 200px;
/* 콘텐츠의 세로 길이 조정 */
border: 3px solid blueviolet;
/* 보더는 선의 종류를 지정하지 않으면, 기본값이 없기 때문에 두께와 색을 지정해도 나타나지 않는다. */
padding: 50px;
/* 배경색을 보면 padding도 content로 간주되고 있음을 알 수 있다. */
margin: 100px;
/* margin은 콘텐츠 영역이 아니기 때문에, 배경색이 없으며 상하좌우 100px의 여백을 주고 있다. */
line-height: 200px;
background-color: yellow;
}
div#box2{
box-sizing: content-box;
width: 200px;
height: 200px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>CONTENT</div>
<!-- 1. padding, border, margin에 값을 지정하지 않으면, 콘텐츠를 제외한 이 3가지는 값이 0으로 지정된다. -->
<!-- 2. 콘텐츠에 가로와 세로 길이를 지정하게 되면, 블록요소는 가로 길이를 다 차지하는 것처럼 보이다가 가로와 세로 길이가 지정한 길이만큼 보이게 되는데 -->
<!-- 이때 보이는 영역이 가로와 세로 길이를 지정한 만큼 보이는 것이지, 실제로는 아직 가로영역을 전부 차지하고 있다. -->
<!-- 3. padding, border, margin에 값을 지정할때 값을 하나만 지정하면, 상우하좌 모두 해당 값이 지정되지만 -->
<!-- 값을 2개나 3개를 지정하게 되면 비어있는 부분은 다른 값을 참고하게 된다. ( 하의 길이는 상의 길이와 동일하게, 좌의 길이는 우의 길이와 동일하게 지정된다. (*) ) -->
<!-- 지정된 값을 더 정확하게 알아보기 위해서는 개발도구를 통해서 알아보는 것이 좋다. -->
<!-- + 한쪽에만 값을 지정하기 위해서는 bottom, top, left, right를 사용하는 편이 좋다. -->
<div id="box2">CONTENT Box2</div>
</body>
</html>[ 8. 박스모델 사이즈 지정하기 - px , % , cm ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스모델 사이즈</title>
<style>
p{
background-color: yellow;
color: red;
font-weight: bold;
font-size: 16pt;
}
/* 모든 p태그를 선택하여, 스타일 지정 */
p.c1{
width: 700px;
height: 80px;
color: green;
}
/* p태그 중 class가 c1인(.c1) 태그를 선택한다. */
/* 블록 요소는 margin을 지정하지 않으면, 자동으로 브라우저에서 margin을 형성해 준다. */
p.c2{
width: 50%;
height: 150%;
/* %는 부모 태그를 기준으로 %를 결정하게 된다. */
/* 이 경우에는 부모 태그가 body태그, 즉 뷰포트가 되었기에 뷰포트의 가로 길이의 50%가 된다. (**) */
/* 하지만 세로 길이의 %는 원래 태그인 p태그의 세로 길이를 1로 하고 이를 기준으로 한다. */
/* 하지만 실제로는 %로 세로 길이를 지정할 경우, 콘텐츠가 차지하는 공간만 차지하게 된다. (***) */
color: blueviolet;
}
p.c3{
width: 10cm;
height: 3cm;
color: blue;
}
/* cm는 정확하게 지정한 길이만큼 콘텐츠 영역을 나타내지만, 주로 px이나 %를 사용하지 cm는 잘 사용하지 않는다. */
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="c1">1. 박스 모델의 크기를 px 단위로 지정</p>
<p class="c2">2. 박스 모델의 크기를 % 단위로 지정</p>
<p class="c3">3. 박스 모델의 크기를 cm 단위로 지정</p>
</body>
</html>[ 9. 박스모델 padding , margin ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스모델 패딩</title>
<style>
p{
background-color: yellow;
color: red;
font-weight: bold;
font-size: 16pt;
}
/* 모든 p태그를 선택하여, 스타일 지정 */
p.pad{
color: purple;
padding: 20px;
}
p.mar{
color: green;
margin: 30px;
}
/* 바깥쪽 여백인 margin이 30px씩 지정되었기에 content가 오른쪽으로 움직인 것처럼 보인다. */
p.mp{
color: blue;
padding: 5%;
margin: 5%;
}
/* margin은 다른 요소의 margin과 겹칠 수 있다. */
/* padding과 margin은 %로 가로 / 세로 길이를 지정할 수 있다. */
</style>
</head>
<body>
<p>박스 모델의 내용 영역 크기 지정</p>
<p class="pad">1. 안쪽 여백 - padding </p>
<p class="mar">2. 바깥 여백 - margin </p>
<p class="mp">3. 안 / 밖 여백 - padding / margin </p>
</body>
</html>[ 10. border 스타일의 종류 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border style</title>
<style>
body{
font-family: consolas;
}
.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;
}
/* inset과 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>
</html>더보기
border style
[ 출력 결과 ]
no border
hidden border
dotted border
dashed border
solid border
double border
groove border
ridge border
inset border
outset border
mix border
[ 11. 둥근 테두리 만들기 (***) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>둥근 테두리 만들기(**)</title>
<style>
body{
font-weight: bold;
font-size: 12pt;
}
.br1{
width: 200px;
height: 200px;
border: 3px solid red;
border-radius: 10%;
/* %를 증가할 수록 테두리의 모서리가 둥글어지게 만들어진다. */
/* 50%를 지정할 경우 원의 형태가 되어버린다. */
background-color: bisque;
}
.br2{
width: 200px;
height: 200px;
border: 3px solid blue;
border-radius: 50%;
/* %를 증가할 수록 테두리의 모서리가 둥글어지게 만들어진다. */
/* 50%를 지정할 경우 원의 형태가 되어버린다. */
background-color: bisque;
}
</style>
</head>
<body>
<h1 class="br1">둥근 모서리 스타일링 예제1</h1>
<h1 class="br2">둥근 모서리 스타일링 예제1</h1>
</body>
</html>[ 12. 박스 그림자 (**) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 그림자</title>
<style>
div{
width: 200px;
height: 50px;
padding: 10px;
margin: 30px;
}
#bs1{
border: 1px solid rgba(136, 136, 236, 0.4);
box-shadow: 0px 0px 20px 10px rgba(102, 186, 255, 0.4);
/* 0.4자리는 투명도를 나타내는 위치이다. ( 0부터 1사이의 투명도를 지정할 수 있다. ) */
}
#bs2{
border: 1px solid rgba(136, 136, 236, 0.4);
box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.4);
/* 일반적인 그림자를 나타내는 정도이다. */
}
#bs3{
border: 1px solid black;
box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px rgb(173, 238, 173);
/* 그림자는 이와 같이 여러개의 그림자를 지정하여 생성할 수 있다. (***) */
}
#bs4{
border: 1px solid black;
border-radius: 50%;
box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px rgb(173, 238, 173);
/* 그림자는 이와 같이 여러개의 그림자를 지정하여 생성할 수 있다. (***) */
}
.shadow1{
padding: 20px;
margin: 20px;
box-shadow: 5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="bs1">
<h3>박스 그림자 특수 효과1</h3>
</div>
<div id="bs2">
<h3>박스 그림자 특수 효과2</h3>
</div>
<div id="bs3">
<h3>박스 그림자 특수 효과3</h3>
</div>
<div id="bs4">
<h3>박스 그림자 특수 효과3</h3>
</div>
<img class="shadow1" src="https://picsum.photos/id/684/600/400" alt="">
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 62일차 - 변이효과 / 애니메이션 / 반응형 웹 (*****) (0) | 2022.05.25 |
|---|---|
| KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***) (0) | 2022.05.24 |
| KH 59일차 - CSS 기본 다지기 5 ( 선택자 ) (*****) (0) | 2022.05.20 |
| KH 58일차 - CSS 기본다지기 4 (***) (0) | 2022.05.19 |
| KH 57일차 - CSS 기본 다지기3 (0) | 2022.05.18 |
댓글