반응형
box sizing 공부해오기
<p class="txt" id="title"
p{color : red}
p{background : blue}
## 두 개의 효과( color, background) 모두 적용
p {color : red} -- 적용되지 x
p {color : blue}
## 글자색은 두 개 이상의 효과를 동시에 적용할 수 없음
## 선택 방법이 같은 경우 나중에 작성된 효과가 적용됨
#title{color : red} -- 100
.txt{color : blue} -- 10
p{color : green} -- 1
p{color : yellow important} - 최상위 우선순위
## 점수환산법 적용(점수 높은게 적용되는 기법)
.box p { }
#title { }
->이럴경우 #title 태그로 적용이 됨 (단, 다른 태그가 걸려있으면 같이 됨)
## 점수환산법 적용2(점수 높은게 적용되는 기법)
<p class="txt" id="title" style="color : pink"></p> --- inline 1,000점 적용
## 점수환산법 적용3(점수 높은게 적용되는 기법)
p{color : red}
p{background : blue}
## 두 개의 효과( color, background) 모두 적용
p {color : red} -- 적용되지 x
p {color : blue}
## 글자색은 두 개 이상의 효과를 동시에 적용할 수 없음
## 선택 방법이 같은 경우 나중에 작성된 효과가 적용됨
#title{color : red} -- 100
.txt{color : blue} -- 10
p{color : green} -- 1
p{color : yellow important} - 최상위 우선순위
## 점수환산법 적용(점수 높은게 적용되는 기법)
.box p { }
#title { }
->이럴경우 #title 태그로 적용이 됨 (단, 다른 태그가 걸려있으면 같이 됨)
## 점수환산법 적용2(점수 높은게 적용되는 기법)
<p class="txt" id="title" style="color : pink"></p> --- inline 1,000점 적용
## 점수환산법 적용3(점수 높은게 적용되는 기법)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소레벨</title>
<style>
.box1{
border: 5px solid teal;
margin-bottom : 10px
}
</style>
</head>
<body>
<h2>*요소 레벨</h2>
<div class="box1">
문장의 중간에 태그를 작성하였을 때
<div>
줄이 바뀌는
</div>
태그들을 블럭 레벨 요소라고 부름
</div>
<div class="box1">
문장의 중간에 태그를 작성하였을 때
<span>
줄이 안 바뀌는
</span>
태그들을 인라인 레벨 요소라고 부름
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소레벨</title>
<style>
.box1{
border: 5px solid teal;
margin-bottom : 10px
}
</style>
</head>
<body>
<h2>*요소 레벨</h2>
<div class="box1">
문장의 중간에 태그를 작성하였을 때
<p>
줄이 바뀌는
</p>
태그들을 블럭 레벨 요소라고 부름
</div>
<div class="box1">
문장의 중간에 태그를 작성하였을 때
<em>
줄이 안 바뀌는
</em>
태그들을 인라인 레벨 요소라고 부름
</div>
</body>
</html>
div 요소레벨 -> 블럭 (기본 너비 100%, 사전에는 auto / 기본 높이는 0, 사전에는 auto)
height : 100px -> 이렇게 되어있으면 작성된 높이로 고정됨
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
*약관동의도 <div>~~~~</div>태그와 css : overflow-y:auto사용 (<textarea>사용하는거 x)
728x90
반응형
'Information' 카테고리의 다른 글
| 자바스크립트 첫 수업 (0) | 2023.09.25 |
|---|---|
| [수업 여덟번째 시간] 웹린이의 여덟번째 html 수업 시간 (0) | 2023.09.14 |
| [수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간 (0) | 2023.09.12 |
| [수업 여섯번째 시간] 웹린이의 여섯번째 html 수업 시간 (0) | 2023.09.08 |
| [수업 다섯번째 시간] 웹린이의 다섯번째 html 수업 시간 (0) | 2023.09.05 |
