HTML
1. HTML FRAMESET 프레임분할
바디를 나누는 것이므로 <body>는 지워야한다.
1) 가로로 나누기 cols
<frameset cols=" 10%,20%,* "></frameset>
나머지 공간은 *로 표시한다.
src : 문서연결
noresize : 여백조절불가능
-1) file. 15_Frameset.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="utf-8">
<title>15_Frameset.html</title>
</head>
<!--프레임 분할 <body></body>를 나누는 것에 주의-->
<!--가로로 나누기 cols-->
<frameset cols="250,*">
<frame name="main" src="leftmenu.html" noresize>
<frame name="sub">
</frameset>
<!--세로로 나누기 rows
<frameset rows="250,*">
<frame name="main" src=";eftmenu.html" noresize>
<frame name="sub">
</frameset>
-->
</html>
-2) file. leftmenu.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="utf-8">
<title>leftmenu.html</title>
<base target="sub">
</head>
<body>
* 관리자페이지 *<hr>
<a href="http://www.soldesk.com">■ 솔데스크</a>
<hr>
<a href="http://www.daum.net">■ 다음</a>
<hr>
<a href="10_표작성test.html">■ 표</a>
<hr>
</body>
</html>
분석 ->
<base target="sub"> 의 의미는 file15에 frame을 두개로 주었다. 메인과 sub. 메인에는 관리자페이지가 뜨게 만들고
옆의 sub에 관리자페이지의 페이지링크를 구현하게 하라는 뜻이다.
링크는 각 사이트의 링크뿐만 아니라 파일의 링크도 연결해올 수 있다.
[웹의 3요소]
- 웹표준
- 웹접근성
- 웹호환성
[웹표준의 3요소]
- 구조 : HTML
- 표현 : CSS
- 동작 : JavaScript, jQuery 등
CSS
1. CSS (Cascading Style Sheets) 기본문법
- HTML4 / CSS2
- CSS3 모바일전용
- 웹문서의 표현, 서식, 일관성유지
- 대소문자 반드시 구분한다.
- 종결문자 ;
- 주석 /* */
- 스타일 적용하는 방식
| 1) Inline style | style="" , 일시적으로 쓰는 것이기 때문에 자주 안씀 |
| 2) Internal style sheet | <style></style> |
| 3) External style sheet | .css |
1) Inline style
**폰트 크기 단위
| Unit | Description |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12pt) |
※참조 사이트 : https://www.w3schools.com/css/css_units.asp
2) Internal style sheet
- CSS Syntax and Selectors (선택자)
-> 선택자 {property:value; ~ }
※참조 사이트 : https://www.w3schools.com/cssref/css_selectors.asp
- 선택자(Selectors) 유형
1) .선택자이름 -> 적용할때 class="선택자이름"
2) #아이디이름 -> 문서에서 id=""
3) 태그 -> h1 p div body 등
3) External style sheet (.css파일)
border:0px ; 테두리를 주지마라
margin ; 내용바깥쪽여백
-> margin: auto 수평기준으로 가운데정렬
padding ;
h1, p {background-color: yellow;} : 모든 <h1> <p>
div p {background-color: red;} : <div>안에 있는 모든 <p>
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="utf-8">
<title>20_다양한selector.html</title>
<style>
div,p{background:red; }
</style>
</head>
<body>
<p>수박</p>
<div><p>망고</p></div>
<div>
<span><p>레몬</p></span>
</div>
</body>
</html>
#navi>ul{list-style: none;}
->list 앞의 - ,ㆍ표식이 사라진다.
**
->링크와 관련된 클래스 관리
'공부 > 화면구현 UI' 카테고리의 다른 글
| 7월9일 - JavaScript 2 (0) | 2019.07.09 |
|---|---|
| 7월8일 - JavaScript 1 (0) | 2019.07.08 |
| 7월4일 - UI 구현 CSS (0) | 2019.07.04 |
| 7월2일 - UI 구현 HTML2 (0) | 2019.07.02 |
| 7월1일 - UI 구현 HTML1 (0) | 2019.07.01 |
