박스모델
모두 상자로 간주함
상자를 꾸미면서 여백 content,padding, border,margin
| border | |||||
| padding | |||||
| content | |||||
| margin | |||||
컨텐츠 바로위에 씌우는게 padding
패딩은 투명하므로 요소에 배경색이랑 배경이미지가 설정되어잇는경우 그게 보이게된다
전체사이즈를 잡을땐, 저 네개의 너비를 다 잡아야 전체의 너비가 됨
css로 너비 높이 설정시, 콘텐츠만의 너비가 되는거임
border
-style, color, width (스타일(모양), 컬러, 두께 지정가능)
border-style을 먼저 지정해야 다른 속성 사용가능. 이걸적어야 border가 보인다.
각 변별로 border-left 이런식으로 스탕리 색상 두께 지정 하능
위를 기준으로 시계방향 border-style : dotted solid dotted solid 이렇게 줘도 각변마다 다름
border-style: dotted solid double dashed;
3개만 쓰면 왼쪽꺼는 없어짐. (오른쪽꺼 갖다씀)
2개만 쓰면 위=아래, 오른=왼으로 같이씀
둥근 모서리 표현 가능
border-radius:5px;
| margin | paddin |
| 요소의 테두리밖공간 | 요소내용과 테두리공간사이 |
| 음수값허용 (겨 | 음ㅇ수값허용x |
| 그래서 마진붕괴현상있을수있음 | box sizing이용해서 요소의 너비 유지가능 |
| px,pt,cm%사용 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>박스모델 예제</title>
<style type="text/css">
#target1 {
width: 100px;
height: 50px;
background-color: yellow;
}
#target2 {
width: 100px;
height: 50px;
background-color: lime;
}
.test {
width: 200px;
height: 50px;
padding: 10px;
border: 5px solid blue;
border-style: dotted solid double dashed;
margin: 10px;
background-color: aqua;
border-top: 10px solid lime;
border-bottom-left-radius: 50px;
border-top-right-radius: 50px;
}
.box{
width: 300px;
padding: 25px;
border: 1px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<p id="target1">이것은 p요소 입니다.</p>
<div id="target2">이것은 div요소 입니다.</div>
<div class="test">이것은 div요소로 전체폭은 250px이다.</div>
<div class="box">Box-sizing적용</div>
</body>
</html>
CSS아웃라인
border처럼 outline-style,color,width 가있음 사이즈엔 전혀 영향을 주지않음 그냥 border밖에 색을 칠해준다고 생각하면됨
background
background-image:url(" .jpg") <src가 아니고 이렇게 적음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
font-size:2em;
color: white;
width: 100%;
height: 100%;
background: url("../images/sun.jpg");
background-size: 100vh 100vh;
background-repeat: round;
background-attachment: local;
}
</style>
</head>
<body>
<div>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
지금 그 사람의 이름은 잊었지만 그의 눈동자 입술은 내 가슴에 있네<br>
</div>
</body>
</html>
a:active는 a:hover뒤에 와야함
a:hover는 a:link및 a:visited뒤에 와야함
list-style-type : circle, square, upper-roman ... 이런식
이걸 이미지로 넣고싶으면 list-style-image를 쓰면됨
list-style-position:outside가 있고 inside가 있는데 함 해보기
테이블 속성
border : 테이블의 경계선
border-collapse : 이웃한 셀의 경계선을 합칠것인지 여부 ( separate분리, collapse합침
border-spacing : 셀사이의 거리
caption-size : 테이블 제목의 위치
table-layout:셀의 데이터길이에 의한 셀의 너비 조정
nth-child 잘 알아두기
only-child
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
caption{
caption-side: bottom;
color: skyblue;
font-size: 1.5em;
}
table{
width : 100%;
height: 100px;
font-size: 2em;
text-align : center;
/* border: 3px solid skyblue; */
border-collapse: separate;
font-family: "굴림";
}
td:nth-child(2){
/* text-align: left; */
padding-left: 10px;
font-weight: bold;
font-family: "궁서";
}
tr:nth-child(2n){
background-color: lightgrey;
}
tr:nth-child(2n+1){
background-color: yellow;
}
td,tr,th{
border: 1px solid lime;
height: 30px;
}
th{
color: white;
background-color: blue;
}
#table2 {
empty-cells: show;
border-collapse: collapse;
border : 2px solid red;
color: white;
}
#table2 caption{
color: black;
caption-side: top;
font-family: "돋움";
}
#table2 th, #table2 td{
border : 2px solid red;
font-family: "돋움";
}
#table2 th{
background-color: orange;
color : black;
}
#table2 tr:nth-child(2n){
background-color: #00fa9a;
}
#table2 tr:nth-child(2n+1){
background-color: #00ced1;
}
</style>
</head>
<body>
<table id="table">
<caption>VIP 고객 리스트</caption>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
<tr>
<td>을지로</td>
<td>young@google.com</td>
</tr>
<tr>
<td>김땡땡</td>
<td>young@google.com</td>
</tr>
<tr>
<td>한우리</td>
<td>young@google.com</td>
</tr>
</table>
<hr>
<table id="table2">
<caption>가상클래스이용하기</caption>
<tr>
<th>이름</th>
<th>이메일</th>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
<td>김영희</td>
<td>young@google.com</td>
</tr>
<tr>
<td>을지로</td>
<td>young@google.com</td>
<td>을지로</td>
<td>young@google.com</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div>
화장실
</div>
</body>
</html>
빈셀이 안보이는건 height를 주면 됨.
icon도 보면 좋음
CSS 레이아웃
웹페이지에서 HTML요소의 크기위치를 정하는것
레이아웃표시를 위해서 CSS에서 display라는 속성을 사용할거임
block 한줄을 다 쓰겠다.,
inline 내용만큼만 잡아먹을게
none 화면에표시를 하지않는다.
hidden 화면에서 감춰짐
*display와 visibility의 차이
display:hidden : 요소가 숨겨지고 페이지에 해당 요소가 없는것으로 표시됨. 공간차지x
visibilty:hidden : 요소가 숨겨지지만 공간은차지하고 있음
블록레벨요소 : 항상 새줄에서 시작. 한줄 전부 차지
<h1>,<p>,<ul>....
인라인요소 : 현재중레서필요한만큼의 너비만
<a><img><strong>..
인라인블럭
span{
display inline이 디폴트 : 위아래 높이조절은 되지만 너비조절은안됨 w h 100으로줘도 안먹힘
displat: inline-block : w h 다 먹힘
display : block : w h 다 먹고 한줄 다 차지해버림
}
레이아웃의 overflow :
자식요소가 부모요소의 범위를 벗어났을때 어떻게 처리할것인지
높이가 지정된 블록요소에서만 작동함
CSS DISPLAY가 오늘한거고
CSS POSITION 내일할거고
CSS OVERFLOW가 지금하는거
div의 범위를 넘쳐버릴때 overflow를 쓰고 scroll을 주면 안에 담기면서 scroll이생김
auto는 scroll이 필요할때만 생기고 짧으면 안생김
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>보더백그라운드 연습</title>
<style>
div{
border: 20px solid #00ffff;
padding : 50px;
color : white;
font-weight: bold;
background: url(../images/grace.jpg);
background-size: 50px;
background-repeat: repeat;
}
p{
width:100%;
height:200px;
background-color: #00fa9a;
overflow: auto;
}
</style>
</head>
<body>
<div>
<p>
애국가(愛國歌)는 대한민국의 국가이다. 1919년 안창호에 의해 대한민국
임시 정부에서 스코틀랜드 민요인 〈올드 랭 사인〉에 삽입해서 부르기
시작하다가 1935년 한국의 작곡가 안익태가 지은
한국환상곡》에 가사를 삽입해서 현재까지 부르고 있다.
가사의 작사자는 윤치호 설, 안창호 설, 윤치호와 최병헌 합작설 등이 있다.
윤치호의 작사설 때문에 대한민국 임시 정부에서는 애국가를 바꾸려 하였으나
대한민국 임시 정부 주석 김구의 변호로 계속 애국가로 채택하게 되었다.[1]
이후 1948년의 정부 수립 이후 국가로 사용되어 왔으며, 2010년 국민의례
규정에서 국민의례시 애국가를 부르거나 연주하도록 함으로써 국가로서의
역할을 간접적으로 규정하고 있다
애국가(愛國歌)는 대한민국의 국가이다. 1919년 안창호에 의해 대한민국
임시 정부에서 스코틀랜드 민요인 〈올드 랭 사인〉에 삽입해서 부르기
시작하다가 1935년 한국의 작곡가 안익태가 지은
한국환상곡》에 가사를 삽입해서 현재까지 부르고 있다.
가사의 작사자는 윤치호 설, 안창호 설, 윤치호와 최병헌 합작설 등이 있다.
윤치호의 작사설 때문에 대한민국 임시 정부에서는 애국가를 바꾸려 하였으나
대한민국 임시 정부 주석 김구의 변호로 계속 애국가로 채택하게 되었다.[1]
이후 1948년의 정부 수립 이후 국가로 사용되어 왔으며, 2010년 국민의례
규정에서 국민의례시 애국가를 부르거나 연주하도록 함으로써 국가로서의
역할을 간접적으로 규정하고 있다
</p>
</div>
</body>
</html>
img에 float:left주면 왼쪽으로 가면서 뒤의 글이 옆에 붙는다.
.class a 는 클래스찾고 그중에 a찾아라
a.class는 a찾고 그중 class를 찾아라
붙여쓰면 필터를 거는거임
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.menu li{
display: inline;
font-size: 1.5em;
padding: 1px;
background-color: #CECEF6;
border: 2px solid #8181F7;
}
.menu a{
padding:5px 10px;
color: white;
text-decoration: none;
}
img{
height: 200px;
}
img.left{
float: left;
}
img.right{
float: right;
}
p{
margin: 10px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">홈으로</a></li>
<li><a href="#">회사소개</a></li>
<li><a href="#">제품소개</a></li>
<li><a href="#">질문과대답</a></li>
<li><a href="#">연락처</a></li>
</ul>
<hr>
<img src="../images/cosmic.jpg" class="left">
<img src="../images/stars.jpg" class="right">
<p>애국가(愛國歌)는 대한민국의 국가이다. 1919년 안창호에 의해 대한민국
임시 정부에서 스코틀랜드 민요인 〈올드 랭 사인〉에 삽입해서 부르기
시작하다가 1935년 한국의 작곡가 안익태가 지은
한국환상곡》에 가사를 삽입해서 현재까지 부르고 있다.
가사의 작사자는 윤치호 설, 안창호 설, 윤치호와 최병헌 합작설 등이 있다.
윤치호의 작사설 때문에 대한민국 임시 정부에서는 애국가를 바꾸려 하였으나
대한민국 임시 정부 주석 김구의 변호로 계속 애국가로 채택하게 되었다.[1]
이후 1948년의 정부 수립 이후 국가로 사용되어 왔으며, 2010년 국민의례
규정에서 국민의례시 애국가를 부르거나 연주하도록 함으로써 국가로서의
역할을 간접적으로 규정하고 있다</p>
<p class="clear">애국가(愛國歌)는 대한민국의 국가이다. 1919년 안창호에 의해 대한민국
임시 정부에서 스코틀랜드 민요인 〈올드 랭 사인〉에 삽입해서 부르기
시작하다가 1935년 한국의 작곡가 안익태가 지은
한국환상곡》에 가사를 삽입해서 현재까지 부르고 있다.
가사의 작사자는 윤치호 설, 안창호 설, 윤치호와 최병헌 합작설 등이 있다.
윤치호의 작사설 때문에 대한민국 임시 정부에서는 애국가를 바꾸려 하였으나
대한민국 임시 정부 주석 김구의 변호로 계속 애국가로 채택하게 되었다.[1]
이후 1948년의 정부 수립 이후 국가로 사용되어 왔으며, 2010년 국민의례
규정에서 국민의례시 애국가를 부르거나 연주하도록 함으로써 국가로서의
역할을 간접적으로 규정하고 있다</p>
</body>
</html>
float의 용도 :레이아웃에 많이 사용된다
clear : float 속성 종료할때 사용
div를 이요한 레이아웃
'학원수업_Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| java script (0) | 2020.11.30 |
|---|---|
| 1127 POSITION (0) | 2020.11.27 |
| CSS (0) | 2020.11.25 |
| 1124 (0) | 2020.11.24 |
| 1123 (0) | 2020.11.23 |