✿∘˚˳°∘°
34일차 : 텍스트 / 목록스타일 / 레이아웃 본문
20230112
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>
<link rel="stylesheet" href="css/text1.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
</head>
<body>
<h1>글꼴관련 스타일</h1>
<hr>
<h3>font-family : 텍스트의 글꼴 지정</h3>
<pre>선택자 { font-family : "글꼴이름" }</pre>
<p class="ff1">글꼴 변경 테스트</p>
<p class="ff2">글꼴 변경 테스트</p>
<p class="ff3">글꼴 변경 테스트</p>
<p>웹폰트 제공 사이트 : <a href="http://fonts.google.com" target="_blank">구글웹폰트</a></p>
<p class="webfont1">웹 폰트 적용1</p>
<p class="webfont2">웹 폰트 적용2</p>
<p class="webfont3">웹 폰트 적용3</p>
<hr>
<h3>font-size : 텍스트 크기 지정</h3>
<pre>선택자 { font-size : 크기 }</pre>
<ul>
<li class="size1">절대크기</li>
<li class="size2">상대크기</li>
</ul>
<hr>
<h3>font-weight : 두꺼운 글씨 표현</h3>
<pre>선택자 { font-weight : normal | bold | bolder | lighter | 100~900 }</pre>
<ul>
<li class="fw1">기본 글꼴</li>
<li class="fw2">얇은 글꼴</li>
<li class="fw3">두꺼운 글꼴</li>
<li class="fw4">더 두꺼운 글꼴</li>
</ul>
<hr>
<h3>font-variant : 작은 대문자로 변경</h3>
<pre>선택자 { font-variant : small-caps }</pre>
<h3>font-style : 텍스트 기울기 설정</h3>
<pre>선택자 { font-style : normal | italic | oblique }</pre>
<ul>
<li class="fv">Hello</li>
<li class="fs1">italic 기울기</li>
<li class="fs2">oblique 기울기</li>
</ul>
<hr>
<h3>font : 폰트 관련 스타일을 한번에 지정할 때 사용</h3>
<pre>선택자 { font : font-style font-variant font-weight font-size/line-height font-family </pre>
<!-- font-size/line-height는 필수 작성 -->
<ul>
<li class="f1">font 테스트1</li>
<li class="f2">font 테스트2</li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>.ff1{
font-family: "궁서체";
}
.ff2{
/* 최대 3개까지 쓸 수 있는데 순서대로 설치된 글꼴 적용 */
font-family: "고딕체","궁서체","바탕체";
}
.ff3{
font-family: "없는글꼴1","없는글꼴2";
}
.webfont1{
font-family: 'Do Hyeon', sans-serif;
font-size: 20px;
}
/* 다운로드한 글꼴 등록 */
@font-face {
font-family: ns-light;
src: url(../Noto_Sans_KR/NotoSansKR-Light.otf);
/* 상위 디렉토리 ../ */
}
.webfont2{
font-family: ns-light;
}
@font-face {
font-family: ns-black;
src: url(../Noto_Sans_KR/NotoSansKR-Black.otf);
}
.webfont3{
font-family: ns-black;
}
.size1{
font-size: 50px;
}
.size2{
/* 기본 16px에 1.5배 */
font-size : 1.5em;
}
.fw1{
/* font-weight : 400; */
font-weight: normal;
}
.fw2{
/* font-weight : 100; */
font-weight: lighter;
}
.fw3{
/* font-weight : 600; */
font-weight: bold;
}
.fw4{
/* font-weight : 900; */
font-weight: bolder;
}
.fv{
font-variant: small-caps;
}
.fs1{
font-style: italic;
}
.fs2{
font-style: oblique;
}
.f1{
font: 20px/20px "궁서체";
}
.f2{
font : italic bold 16px/30px "고딕체";
}<!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>텍스트 스타일2</title>
<link rel="stylesheet" href="css/text2.css">
</head>
<body>
<h1>텍스트 스타일2</h1>
<hr>
<h3>color : 텍스트 색상을 변경하는 속성</h3>
<pre>선택자 { color : 색상명 영문 | #16진수rgb | rgb(r,g,b) | rgba(r,g,b,a) }</pre>
<ul>
<li class="c1">색상명 영문</li>
<li class="c2">#16진수rgb</li>
<li class="c3">rgb(r,g,b)</li>
<li class="c4">rgba(r,g,b,a)</li>
</ul>
<p><a href="https://color.adobe.com/ko">색상 조합 사이트 1</a></p>
<p><a href="https://colorhunt.co/">색상 조합 사이트 2</a></p>
<p><a href="https://material.io/resources/color">색상 조합 사이트 3</a></p>
<hr>
<h3>text-decoration : 텍스트에 줄을 긋거나 없앨때 사용</h3>
<pre>선택자 { text-decoration : none | underline | overline | line-through }</pre>
<ul>
<li class="td1">줄긋기1</li>
<li class="td2">줄긋기2</li>
<li class="td3">줄긋기3</li>
<li><a href="#" class="td4">줄긋기4</a></li>
</ul>
<hr>
<h3>text-transform : 영문 텍스트의 대/소문자 변환</h3>
<pre>선택자 { text-transform : none | captitalize | uppercase | lowercase }</pre>
<ul>
<li class="tt1">none</li>
<li class="tt2">captitalize</li>
<li class="tt3">upperCAse</li>
<li class="tt4">LOWERcase</li>
</ul>
<hr>
<h3>text-shadow : 텍스트에 그림자 효과</h3>
<pre>선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상 }</pre>
<pre>
<span class="shadow ts1">HTML5</span> <span class="shadow ts2">HTML5</span>
</pre>
<hr>
<h3>white-space : 공백을 처리하는 속성</h3>
<pre>선택자 { white-space : normal | nowrap | pre | pre-line | pre-wrap }</pre>
<p class="ws1">
1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
3. 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
4. 이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<p class="ws2">
1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
3. 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
4. 이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<p class="ws3">
1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
3. 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
4. 이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<p class="ws4">
1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세
2. 남산 위에 저 소나무 철갑을 두른 듯
바람 서리 불변함은 우리 기상일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
3. 가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
4. 이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<hr>
<h3>letter-spacing / word-spacing : 글자간격 / 단어간격</h3>
<pre>선택자 { letter-spacing : 간격; word-spacing : 간격; }</pre>
<p class="ls1">테스트 문구!!!</p>
<p class="ls2">테스트 문구!!!</p>
<p class="w-s1">테스트 문구!!!</p>
<p class="w-s2">테스트 문구!!!</p>
<hr>
<h3>text-align : 문자 정렬 기준</h3>
<pre>선택자 { text-align : left | center | right | justify }</pre>
<p class="p ta1">가나다라마바사 가나다라마 바사 가나다라 마바사 가나다 라마바사 가나다라마바사 가나다라마바사가나다라마바사가나다라마바사</p>
<p class="p ta2">가나다라마바사</p>
<p class="p ta3">가나다라마바사</p>
<p class="p ta4">가나다라마바사 가나다라마 바사 가나다라 마바사 가나다 라마바사 가나다라마바사 가나다라마바사가나다라마바사가나다라마바사</p></p>
<hr>
<h3>text-indent : 들여쓰기</h3>
<pre>선택자 { text-indent : 간격; }</pre>
<p class="ti1">abcdefg</p>
<p class="ti2">abcdefg</p>
<hr>
<h3>line-height : 줄간격</h3>
<pre>선택자 { line-height : 줄간격; }</pre>
<p class="lh1">abcdefg</p>
<p class="lh2">abcdefg</p>
<p class="p lh3">abcdefg</p>
<hr>
<h3>text-overflow : 영역을 벗어나는 텍스트 처리 속성</h3>
<pre>선택자 { text-overflow : clip | ellipsis }</pre>
<p class="p to1">abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</p>
<p class="p to2">abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>.c1{
color: blue;
}
.c2{
/* #red/green/blue
0~255/0~255/0~255 -> 16진수 00 0F 10 1F FF */
color : #0000ff;
}
.c3{
/* rgb(red,green,blue) */
color: rgb(0,0,255);
}
.c4{
/* rgba(r,g,b,alpha)
alpha : 0~1 실수, 색상의 투명도 담당
0이면 안보임, 1이면 투명도 없음 */
color: rgba(0, 0, 255, 0.5);
}
.td1{
text-decoration: underline;
}
.td2{
/* 취소선 */
text-decoration: line-through;
}
.td3{
text-decoration: overline;
}
.td4{
/* 링크 밑줄 없애기 */
text-decoration: none;
}
.td4:hover{
/* 마우스 올렸을 때 밑줄 생김 */
text-decoration: underline;
}
.tt1{
text-transform: none;
}
.tt2{
/* 맨 앞 글자만 대문자 */
text-transform: capitalize;
}
.tt3{
text-transform: uppercase;
}
.tt4{
text-transform: lowercase;
}
.shadow{
font-size: 100px;
font-weight: 900;
}
.ts1{
/* 여러번 가능 */
color: orangered;
text-shadow: 10px 10px 10px orange, 7px 7px 7px blue;
}
.ts2{
text-shadow: 0px 0px 4px #ccc,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -19px 18px #f20;
}
.ws1{
/* 한 줄로 쭉 */
white-space: nowrap;
}
.ws2{
/* pre 태그 그 자체 */
white-space: pre;
}
.ws3{
/* 띄어쓰기 처리x, 엔터 처리 */
white-space: pre-line;
}
.ws4{
/* pre 태그 + 길이 넘어가면 줄바꿈 */
white-space: pre-wrap;
}
.ls1{
letter-spacing: 10px;
}
.ls2{
letter-spacing: 20px;
}
.w-s1{
word-spacing: 10px;
}
.w-s2{
word-spacing: 20px;
}
.p{
width: 500px;
height: 50px;
border: 1px solid black;
}
.ta1{
text-align: left;
}
.ta2{
text-align: right;
}
.ta3{
/* 좌우기준 가운데 */
text-align: center;
}
.ta4{
/* 줄맞춤해서 줄바꿈, 공백이 늘어남 */
text-align: justify;
}
.ti1{
text-indent: 100px;
}
.ti2{
text-indent: 200px;
}
.lh1{
line-height: 20px;
}
.lh2{
line-height: 40px;
}
.lh3{
/* 위아래 가운데 정렬 */
text-align: center;
line-height: 50px;
}
.to1{
/* 넘치는거 잘림 */
overflow: hidden;
text-overflow: clip;
}
.to2{
/* 넘치면 ... 표시 */
overflow: hidden;
text-overflow: ellipsis;
}
2. 목록스타일
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" hrdf="css/list.css">
<link rel="stylesheet" href="css/list.css">
</head>
<body>
<h1>목록관련스타일</h1>
<hr>
<h3>list-style-type : 목록기호의 스타일 지정</h3>
<pre>
ul : 선택자{list-style-type : dics | circle | square | none}
ol : 선택자{list-style-type : decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha}
</pre>
<ul class="ul1">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ul class="ul2">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ul class="ul3">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ul class="ul4">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ol class = "ol1">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ol>
<hr>
<h3>list-style-image : 기호대신 이미지를 사용</h3>
<pre>선택자{list-style-image : url(파일경로);}</pre>
<!-- ul.ul5>li*3 -->
<ul class="ul5">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<hr>
<h3>list-style-position : 목록기호 들여쓰기 여부</h3>
<pre>선택자{ list-style-position : inside | outside }</pre>
<ul class="ul6">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ul class="ul7">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<hr>
<h3>list-style : 목록관련 설정 한번에 지정</h3>
<pre>선택자{list-style : type position image}</pre>
<br><br><br><br><br><br><br>
</body>
</html>.ul1{
list-style-type: disc;
}
.ul2{
list-style-type: cicrle;
}
.ul3{
list-style-type: square;
}
.ul4{
list-style-type: none;
}
.ol1{
list-style-type: lower-roman;
}
.ul5{
list-style-image: url(../image/kakao.jpg);
}
.ul6{
list-style-position: inside;
}
.ul7{
list-style-position: outside;
}
3. 레이아웃
3 - 1 ) width / height / display
<h1>레이아웃스타일</h1>
<hr>
<h3>width/height : 내용이 차지하고 있는 영역의 크기</h3>
<pre>선택자{width:크기(단위); height:크기(단위)}</pre>
<div class="div1">
width/height 테스트
<div>내부요소</div>
</div>
<br><br><br>
<hr>
<h3>display : 요소의 화면 배치 방법을 변경</h3>
<pre>선택자{ display:none | block | inline | inline-block | flex }</pre>
<!-- none : 숨김 -->
<!-- block / inline : inline이어도 display:block을 이용해 block으로 사용가능-->
<!-- inline-block : 크기조정 여러개배치가능-->
<!-- flex : -->
<div>
<div class="div2 dis">div</div>
<span class="span1 dis">span1</span>
<span class="span2 dis">span1</span>
<span class="span3 dis">span1</span>
</div>
<span class="span4">span1</span>
<span class="span5">span1</span>
<div>
<div class="div3">마우스를 올려보세요</div>
<ul class="ul1">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
</div>.div1{
/*블록요소의 너비는 지정하지 않으면 부모너비의 100%
부모비율이 커지면 커지고 작아지면 작아지고*/
background-color: antiquewhite;
/*지정해주면 부모너비와 무관하게 고정됨*/
width: 50%;
/*너비를 px로 하면 고정 %로하면 부모에따라 변동*/
/*블록요소의 높이는 지정하지 않으면 내부컨텐츠 높이의 합*/
/*현재 글자높이+div높이*/
height: 30px;
/*단, 지정해주면 고정됨*/
}
.div1>div{
background-color: cadetblue;
/*너비를 상대크기로 주면 부모크기의 비율로 지정*/
/*위에서 500px로 지정해주었으므로 250px이 된다*/
/*부모가 늘어나면 같이 늘어난다*/
width: 50%;
/*높이는 독립적이다(자식을 먼저생각하면된다)*/
/*실행 결과를보면 부모의 높이도 변동*/
height: 50px;
}
.div2{
background-color: antiquewhite;
/*div태그 이지만 inline으로 변경*/
/*display속성을 이용해 inline, block을 변경할 수 있다.*/
display: inline-block;
/*inline-block : 크기조정+여러개배치 가능*/
}
.span1{
display: inline-block;
background-color:rgb(156, 113, 197);
}
.span2{
display: inline-block;
background-color: rgb(117, 72, 72);
}
.span3{
display: inline-block;
background-color: green;
}
.span4{
display: none;
background-color:rgb(226, 199, 130);
width:100px;
height:100px;
}
.span5{
display: inline-block;
background-color: rgb(165, 144, 92);
width:100px;
height:100px;
}
.dis{
width: 200px;
height: 200px;
}
/*span에도 dis가 있지만 크기가 변하지 않음*/
/*인라인이기 때문에 크기조정이 안된다.*/
.div3{
width: 300px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: black;
color: white;
}
.ul1{
display: none;
}
.div3:hover+ul{
display: block;
}
3 - 2 ) 테두리 스타일(border)
<h2>테두리 스타일</h2>
<h3>border-style : 테두리 스타일 지정</h3>
<pre>선택자{ border-[방향]-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid }</pre>
<h3>border-width : 테두리 두께 지정</h3>
<pre>선택자{ border-[방향]-width : thin | medium | thick | px(지정) }</pre>
<h3>border-color : 테두리 색상 지정</h3>
<pre>선택자{ border-[방향]-color : 색상값 }</pre>
<h3>border : 테두리 스타일을 한번에 지정</h3>
<pre>선택자{ border-[방향] : width style color }</pre>
<h3>border-radius : 박스 모서리를 둥글게 하는 속성</h3>
<pre>선택자{ border-[방향]-radius : 숫자 }</pre>
<h3>box-shadow : box에 그림자 효과를 주는 속성</h3>
<pre>선택자{ box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상}</pre>
<div class="div b1"></div>
<div class="div b2"></div>
<div class="div b3"></div>
<div class="div b4"></div>
<div class="div b5"></div>
<div class="div b6"></div>
<div class="div b7"></div>
<div class="div b8"></div>
<div class="div b9"></div>
<div class="div b10"></div>
<div class="div b11"></div>
<div class="div b12"></div>
<div class="div b13"></div>.div{
width: 100px;
height: 100px;
display: inline-block;
}
.b1{
border-top-style: solid;/*실선*/
border-left-style: dashed;/*- - -*/
border-bottom-style: dotted;/*점선*/
border-right-style: double;/*이중선*/
border-top-width: 1px;
border-left-width: 2px;
border-bottom-width: 3px;
border-right-width: 4px;
border-top-color: aliceblue;
border-left-color: antiquewhite;
border-bottom-color: aqua;
border-right-color: aquamarine;
}
.b2{
/*방향을 빼면 4방향에 모두적용*/
border-style: groove; /*입체적효과*/
border-width: 5px;
border-color: blue;
}
.b3{
border-style: outset;/*나온버튼스타일*/
}
.b3:active{
border-style: inset;
}
.b4{
border-style: inset;/*들어간버튼스타일*/
}
.b5{
border-style: ridge;/*액자스타일*/
}
.b6{
border : 5px solid red;
}
.b7{
border : 10px dashed blue;
}
.b8{
border: 1px solid black;
/*오른쪽위*/
border-top-right-radius: 30px;
/*왼쪽아래*/
border-bottom-left-radius: 40px;
}
.b9{
border: 2px dashed red;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.b10{
border: 3px solid blue;
border-radius: 50px;
}
.b11{
border : 3px solid black;
/*그림자효과*/
box-shadow: 5px 5px 3px 2px gray;
}
.b12{
border-style: ridge;
box-shadow: 5px 5px 3px 2px gray;
}
.b13{
border-style: hidden;
box-shadow: 5px 5px 3px 2px gray;
}
3 - 3 ) 여백 스타일( margin / padding )
<h2>여백스타일</h2>
<h3>magin : 요소와 요소 사이의 거리</h3>
<pre>선택자{ magin-[위치] : 거리; }</pre>
<h3>padding : 테두리(border)와 컨텐츠 사이의 거리</h3>
<pre>선택자{ padding-[위치] : 거리; }</pre>
<div class="div4 div-m">내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111내용111</div>
<div class="div5 div-m">내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222내용222</div>
<hr>
<div class="div6">
<div class="div7"></div>
</div>.div-m{
width: 300px;
height: 300px;
border: 10px solid black;
background-color: antiquewhite;
}
.div4{
/*간격을 지정해 줄 때 사용*/
/*방향을 지정해주지 않으면 모든방향*/
margin: 100px;
}
.div5{
padding-top: 50px;
padding-left: 100px;
}
.div6{
width: 500px;
background-color: antiquewhite;
/*글자가 아니기 때문에 text-align 사용불가*/
/* text-align: center; */
/*자식상하 정렬 시 부모의 height를 제거하고 padding이용*/
padding: 100px 0px;
}
.div7{
width:50%;
height:100px;
background-color: aqua;
/*글자(또는인라인)좌우정렬*/
text-align: center;
/*글자상하정렬*/
line-height: 100px;
/*부모의width를 변경해도 항상 가운데로 감*/
margin : 0 auto;
}
/* 가운데 정렬 맞추는 방법
1. 글씨, inline-block요소의 경우
-> 좌우 가운데 정렬 : text-align
-> 상하정렬 : line-height
--> 해당글씨와 inline-block을 품고있는 부모가 설정
2. block요소의 경우
-> 좌우 가운데 정렬 : magin: 0 auto;로 설정
단, 부모요소의 너비가 정렬하려는 요소의 너비보다 넓어야함
--> 해당 블록요소가 직접 설정
-> 상하 정렬 : 부모요소 padding으로 처리
*/
3 - 4 ) 포지셔닝 스타일 - box-sizing : width / height
<h1>포지셔닝 스타일</h1>
<hr>
<h3>box-sizing : width/height의 범위를 설정하는 속성</h3>
<pre>선택자{ box-sizing:content-box | border-box }</pre>
<div class="div d1"></div>
<div class="div d2"></div>.div{
width: 200px;
height: 200px;
border: 10px dashed black;
padding: 50px;
display: inline-block;
}
.d1{
/*content영역만 200x200*/
box-sizing: content-box;
}
.d2{
/*border까지 포함해서 200x200*/
/*컨텐츠를 줄여서 맞춤*/
box-sizing: border-box;
}
3 - 5 ) 배치관련 스타일
- position
<h2>배치관련 스타일</h2>
<h3>position : 페이지 요소들의 위치를 설정하는 속성</h3>
<pre>선택자{ position : static | relative | absolute | fixed }</pre>
<div class="outer">
<div class="in1"></div>
<div class="in2"></div>
<div class="in3"></div>
</div>.outer{
background-color: antiquewhite;
/*outer시작 위치부터 기준을 잡음*/
position: relative;
}
.outer>div{
/*절대위치*/
position:absolute;
}
.in1{
width: 300px;
height: 300px;
background-color: aquamarine;
/*제일위에서 20px아래에 배치*/
/*전체 브라우저 크기가 기준*/
/*부모에 position: relative; 요소추가*/
/* top:50px;
right:100px;*/
}
.in2{
width: 200px;
height: 200px;
background-color: blueviolet;
top: 50px;
left: 50px;
}
.in3{
width: 100px;
height: 100px;
background-color: blue;
top: 100px;
left: 100px;
}
/*나중에 작성된게 제일 위*/
- isibility / opacity / z-index
<h3>isibility : 페이지에 요소를 보이거나 보이지않게 하는 속성</h3>
<pre>선택자{visibility : visible | hidden}</pre>
<!-- 기본적으로 visible -->
<h3>opacity : 페이지의 요소의 투명도를 설정</h3>
<pre>선택자{opacity : 0 ~ 1}</pre>
<div class="vi">
<div class="vi1">
<div></div>
</div>
<div class="vi2">2</div>
<div class="vi3">
<div></div>
</div>
</div>
<br><br><hr><br>
<h3>z-index : 요소들을 쌓는 순서를 지정</h3>
<!-- absolute를 사용해서 요소를 겹처사용할 때 순서를 지정해줄 수 있음-->
<pre>선택자{z-index:숫자}</pre>
<!-- 숫자가 클수록 위로올라옴 -->
<div class="z-wrap">
<div class="z-1"></div>
<div class="z-2"></div>
<div class="z-3"></div>
</div>.vi{
background-color: black;
}
.vi>div{
width: 100px;
height: 100px;
background-color: antiquewhite;
border: 1px solid black;
}
.vi>.vi1{
background-color: red;
/* 투명도 요소전체를 투명하게만듬 */
opacity: 0.5;
}
.vi>.vi3{
/*rgba : 배경색만 투명하게 사용*/
background-color: rgba(255,0,0,0.3);
}
.vi2{
visibility: hidden;
}
/* display:none;으로 처리하면 사라지지만 1번다음에 3번이 바로옴 */
/* visivility:hidden;으로 처리하면 사라지지만 공간을 차지하고는 있음 */
.vi>div>div{
width: 50px;
height: 50px;
background-color: blue;
}
.z-wrap{
position: relative;
}
.z-wrap>div{
width: 150px;
height: 100px;
position: absolute;
}
.z-1{
background-color: antiquewhite;
z-index: 10;
}
.z-2{
background-color: aquamarine;
left: 50px;
/*z-index값이 가장 크므로 제일 위로 온다.*/
z-index: 100;
}
.z-3{
/*z-index를 설정해주지 않을경우 제일 나중에 작성된 .z-3이 제일위에 있음*/
background-color: blueviolet;
left: 100px;
z-index: 1;
}
- float / clear / overflow
<h3>float : 요소 배치를 왼쪽 또는 오른쪽으로 지정하는 속성</h3>
<pre>선택자{float : left | right | none}</pre>
<h3>clear : float으로 인해 다음요소가 받는 영향을 초기화하기위한 속성</h3>
<pre>선택자{ clear : left | right | both | none }</pre>
<div class="float">
<div class="f">1111</div>
<div class="f">2222</div>
<div class="f">3333</div>
<div class="f">4444</div>
<div class="f">5555</div>
</div>
<div class="clear">설명설명</div>
<br><br><hr>
<h3>overflow : 표현하려는 컨텐츠가 요소 크기를 넘어갔을 때</h3>
<pre>선택자{overflow: scroll | auto | hidden | visible}</pre>
<!-- 작성하지 않으면 visible상태 -->
<div class="over over1">abcd</div>
<div class="over over2">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>
<div class="over over3">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>
<div class="over over4">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>
<div class="over over5">abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc</div>.float{
background-color: antiquewhite;
overflow: hidden;
}
.float>div{
width: 100px;
height: 30px;
border: 1px solid black;
float: left;
/* 다음요소를 옆에 바로나오게 하기위해 사용 */
/*float을 사용하게되면 부모요소가 높이값을 찾을 수 없음*/
/*부모에게 overflow : hidden; 옵션을 주면 높이값을 찾을 수 있음*/
}
/*
.clear{
float의 영향을 해제하기 위함
clear : left;
}
*/
.over{
width: 100px;
height: 100px;
border: 1px solid black;
}
.over1{
/*auto : 내부컨텐츠가 넘치는 경우 스크롤*/
/*scroll : 양이 넘치던 안넘치던 일단 스크롤*/
overflow: scroll;
}
.over2{
overflow: auto;
}
.over3{
/*넘치는 컨텐츠가 잘림(더이상표현X)*/
overflow: hidden;
}
.over4{
/*넘치거나 말거나*/
overflow: visible;
}
/* .over5{}는 아무속성도 주지않았으므로 자동으로 visible */
'국비수업 > HTML+CSS' 카테고리의 다른 글
| 36일차 : [실습] 헤더 / 약관동의 / 회원가입 (0) | 2023.01.17 |
|---|---|
| 35일차 : 배경스타일 / 트랜스폼 / 애니메이션 (0) | 2023.01.14 |
| 33일차 : 선택자 (0) | 2023.01.11 |
| 32일차 : 테이블 / 영역분할 / 하이퍼링크 / 폼 (0) | 2023.01.11 |
| 31일차 : 글자태그 / 목록태그 (0) | 2023.01.09 |
'국비수업/HTML+CSS' Related Articles
more
Comments