과제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
html,body{
width: 100%;
height: 100%;
}
div{
padding: 60px 30px;
border : 1px solid black;
color:white;
font-size: 2em;
display: inline-block;
box-sizing: border-box;
}
.header{
color: black;
background-color: yellow;
display: block;
height: 20%;
}
.nav{
width: 20%;
float: left;
background-color: red;
height: 60%;
}
.content{
width: 80%;
float: right;
background-color: blue;
height: 60%;
}
.footer{
clear: right;
background-color: #00fa9a;
display: block;
height: 20%;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="nav">Nav</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</body>
</html>
<!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>
calc(100% - 200px)을 쓰면 200px을 차지하면서 나머지놈의 여백이 창크기에따라 달라진다.
연산자 앞뒤로 띄어쓰기 잊지말기
근데 고정값떄문에 옆의 요소가 화면이 넘 작아졌을때 어는부분이 사라진다면.. 최소너비
min-width : 200px;을 주면됨
CSS POSITION
위치설정방법에따라... topbottomleftright
전체박스를 컨테이너라고 얘기한
위에서부터 얼만큼 떨어뜨려놓을게.. > top:100px
위치설정방법
static(정적위치) : 정상적흐름에따른배치 default
relative(상대위치): 원래있어야하는 자리기준으로 얼만큼떨어뜨릴건가요
absolute(절대위치):나를 감싸고있는요소의 기준
fixed (고정위치) : 윈도우의 원점(맨가에 모서리)기준이기떄문에 원점이 바뀌지않음 스크롤 내려도 항상 고정으로떠있다.
1. 정적위치설정
static인경우에는 top left등 아무리써도 안먹힘
디폴트고 이동이안되서 안먹히는거임
2. fixed
브라우저(윈도우)기준으로 요소의 위치잡음. 스크롤이동해도 고정위치임
*fixed : position:fixed;주고 bottom:0 right:0 주면 밑에 딱 붙음
3. relative
원래있어야할 자리를 기준으로 이동하는거임
4. absolute 절대위치
position이 디폴트가 아닌 relative따위의 위치지정ㅇ이 된 가까운 상위요소를 기준으로..
겹치는 요소 발생시
z-index속성으로 요소의 스택순서를 지정. 값이 클수록 높이올라가있따.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
z-index: 1;
position: relative;
}
p{
color: white;
font-size: 2em;
z-index: 2;
position: absolute;
left: 50px;
top:200px;
}
.coffee{
z-index: 3;
position: absolute;
right: 50px;
top:400px;
}
</style>
</head>
<body>
<img alt="" src="../images/sun.jpg">
<p>img 요소의 z-index가 -1이므로 다른 요소의 뒤에 위치한다 </p>
<img alt="" src="../images/coffee.jpg" class="coffee">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
}
.blue{
background-color: blue;
position: relative;
z-index: 3;
}
.yellow{
background-color: yellow;
position: absolute;
z-index: 2;
left: 100px;
top: 100px;
}
.green{
background-color: green;
position: absolute;
z-index: 1;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="yellow"></div>
<div class="green"></div>
</body>
</html>
시맨틱태그 : 웹페이지의 구조를 쉽게 이해할수있도록 정의된 태그
div랑 똑같은데 구분하기위해 이름지어준거임
단순컨테이너역할
웹사이트 구축과정
링크누르면 iframe 바뀌는 부분
<!DOCTYPE html>
<html>
<head>
<title>iframe연습</title>
</head>
<body>
<h1>커피메뉴</h1>
<a href="table.html" target="myFrame">아메리카노</a>
<a href="background.html" target="myFrame"> 카페라떼</a>
<a href="webcoffee.html" target="myFrame"> 카푸치노</a>
<h1>멀티미디어</h1>
<a href="ex_webpage.html" target="myFrame">오디오</a>
<a href="boxmodel.html" target="myFrame"> 비디오</a>
<br><br>
<iframe src="layout_ex.html" width="800px" height="600px" name="myFrame" ></iframe>
</body>
</html>iframe에 name 넣고
a 에 target넣으면 됨
'학원수업_Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| 1201 (0) | 2020.12.01 |
|---|---|
| java script (0) | 2020.11.30 |
| 1126 (0) | 2020.11.26 |
| CSS (0) | 2020.11.25 |
| 1124 (0) | 2020.11.24 |