File enctype 주의
<form name="myForm" action="target.html" method="post" enctype="multipart/form-data">
파일선택: <input type="file" name="theFile"><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>fieldset/legend
<form name="myForm" action="target.html" method="post">
<fieldset>
<legend>로그인</legend>
아이디: <input type="text" name="userid" value="inky4832"><br>
비밀번호: <input type="text" name="passwd"><br>
</fieldset>
</form>pre 태그
- pre태그 내에서 문자 작성시 문장에 포함된 줄 바꿈과 여백 등을 그대로 표현 가능.
특수문자
공백
따옴표 "
엠퍼센드 &
문단표시 ¶
보다 작은 <
보다 큰 >CSS
선택자 위주로 공부할 예정이다.
css 내에서의 주석
/* */
css 문법
selector(선택자) + Declaration(선언)
선언 : property(속성):value(값)
css의 적용방법 3가지
- inline 스타일 ( 적용하려는 태그내에서 style=“CSS” 형식 사용 )
- internal 스타일 ( 적용하려는 태그가 포함된 HTML파일에서 사용 )
- external 스타일 ( HTMl 파일과 다른 파일에서 사용, *.css 파일형식 )
선택자
전체선택자 *
HTML 문서 내의 모든 태그를 선택할 때 사용한다.
태그 선택자
태그{}
특정한 HTML 태그를 선택한다. 한꺼번에 여러 개 선택할 때 ,(쉼표) 사용
아이디 선택자
#아이디{}
- 특정한 id 속성을 가지고 있는 태그를 선택한다. ( 중복 불가 )
클래스 선택자
.클래스{}
부모, 자식, 자손
자식 선택자
부모선택자 > 자식선택자 {}
자손 선택자
부모선택자 자손선택자 {}
인접한 특정 형제 선택자
선택자 + 형제선택자
- 인접한 바로 뒤의 형제 요소를 선택할 때 사용한다.
인접한 모든 형제 선택자
선택자 ~ 현재선택자
- 인접한 뒤의 모든 형제 요소를 선택할 때 사용한다.
속성 선택자1 - 기본 속성 선택자
- 특정한 속성을가진 요소를 선택할 때 사용한다.
- 기본 속성 선택자는 특정한 속성의 존재 유무와 속성값을 이용하여 선택할 때 사용한다.
선택[속성]
속성 선택자2 - 문자열 속성 선택자
- 속성이 가지는 특정한 문자열을 가진 요소를 선택할 때 사용한다.
선택자[속성~=값] 특정 값을 단어로 포함하는 태그를 선택
선택자[속성=값] 특정 값을 단어로 포함하는 태그를 선택
선택자[속성^=값] 특정 값으로 시작하는 태그를 선택
선택자[속성$=값] 특정 값으로 끝나는 태그를 선택
선택자[속성*=값] 특정 값을 포함하는 태그를 선택
의사코드 클래스
- 의사코드는 이름(단어)만으로 의사전달이 가능한 형태의 코드를 의미한다.
- 특정 태그의 상태를 체크하여 선택한다.
:focus : 포커스상태에서 적용할 스타일을 지정할 때 사용
:hover : 마우스를 올려놓은 상태의 스타일을 지정
input:checked :
input:disaled
:first-child : 자식요소 중에 가장 첫번째를 선택하는 가상클래스
:last-child :
:only-child :혼자만 자식요소로 있는 태그를 선택
:nth-child(2n) : 자식 요소 중에서 n'th 를 선택. n을 가지고 다양한 방식으로 선택가능
<style>
p:nth-child(2n-1){
color: red;
}
</style>테이블 짝수번째행 색깔 꾸미기 같은 곳에 사용할 수 있다.
- 색상표현시 - RGB 방식 표현 (red(2자리)green(2자리blue(2자리)) : 6자리 사용
1자리 : 16진법으로 표현 0~15 0~9, A,B,C,D,E,F
0-사용안함, F: 최대한 사용
EX) #FF 00 00 -> RED
EX) #00 00 FF -> BLUE
EX) #00 00 00 -> BLACK
EX) #FF FF FF -> WHITE
크기단위
폰트 사이즈의 기본값은 12pt, 16px, 1em, 100% 이다
pt 고정
em 가변 폰트 단위
색상 단위
RGB
16진법(HEX) 코드 단위
RGBA 값 ( alpha:투명도)
- 0이면 완전투명, 1이면 완전 불투명
#one{
color: red;
}
#two{
color: #ff0000;
}
#three{
color: rgb(0,0,255);
}
#four{
color: rgba(0,0,255,0.3);
}
#five{
font-size: 32px;
}
#six{
font-size: 12pt;
}display 속성
none 화면에서 보이지 않게 만듭니다.
block
inline
inline-block
inline은 width와 height 설정이 불가능하다.
inline-block은 width와 height 설정이 가능하다.
visivility 속성
visible
hidden
collapse
display 속성을 none 키워드로 지정하는 것과 달리 영역을 유지한 채로 보이지 않게만 만든다.
opacity 속성
- 요소의 투명도를 지정하는 속성이다.
- 0 ~ 1 사이의 숫자를 입력한다. ( 0은 투명이고 1은 불투명 )
Box 모델
- Box 모델은 웹 페이지의 레이아웃을 구성할 때 가장 중요한 개념으로, 블록
박스와 인라인 박스가 화면에 표시되는 영역과 다른 Box와의 배치 등에 대한
중요한 내용을 담고 있다.
content 영역
padding 영역
border
margin 영역
margin 속성
- Box 사이의 여백을 제어하고, 그 값들은 길이 또는 %로 설정.
margin: 10px;
margin: 10px 10px 10px 10px; // 상 우 하 좌 (시계방향)
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left:10px;
margin: 10px 20px; // 상하 / 좌우
margin: 10px 20px 30px; // 상 좌우 하margin: auto;
자동 중앙 정렬
border 속성
border-style
border-width
border-color
border: width(굵기) style(스타일) color(색상)
border: thick dashed black;padding 속성
- Content와 border 사이의 여백(안쪽 여백)을 의미한다.
box-sizing 속성 ( CSS 3 )
width와 height값을 고정시키는 효과를 준다.
패딩이 바뀌면 콘텐트의 크기가 변경된다.
- box-sizing: border-box
background 관련 속성
background-color :
background-image: url('../images/BackgroundFront.png');
background-image 속성 ( 중첩, CSS3 ) (이미지 여러개 쉼표로 나열가능)
background-repeat 속성
background-repeat: repeat;
기본적으로 이미지를 수평 및 수직 반복해서 전체화면에 꽉 차게 보여진다.
이때 수평 또는 수직으로 반복 처리 및 반복 처리하지 않는 경우에 사용 가
능한 속성이다.
background-attachment 속성
- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 속성이다.
이것은 배경 이미지와 이미지 위에 보여지는 텍스트를 서로 조화롭게 설정하기
위한 방법이다. ( 기본은 scroll )
backgound-position 속성
- 배경 이미지의 위치를 지정하는 속성이다.
폰트 속성
- 글꼴(font)과 관련된 속성들이다.
font-family
font-size
font-style
font-weight
- font-family 속성
- 폰트를 지정하는 속성이다.
- CSS에서는 다음과 같은 2가지 기본적인 font family 이름을 사용한다.
가. generic family
비슷하게 보여지는 font family들의 그룹을 의미 ( ‘Serif’ , ‘Monospace’ 등)
나. font family
구체적인 font family를 의미 ( ‘Arial’ , ‘Times New Roman’ 등 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.font-arial{
font-family: '기상천외한 폰트', sans-serif;
}
.font-roman{
font-family: '있는 폰트', serif;
}
.font-ansang{
font-family: '굵은안상수체', sans-serif;
}
</style>
</head>
<body>
</body>
<h1 class="font-arial">Lorem ipsum</h1>
<h1 class="font-roman">Lorem ipsum</h1>
<h1 class="font-ansang">Lorem ipsum</h1>
</html>font-size
웹 브라우저의 기본 폰트 사이즈는 16px,12pt 이다.
xx-small ~ midium ~ xx-large
font-style : 폰트의 스타일, 글꼴
font-weight : 폰트의 두께 설정
lighter ~ normal ~ border
text 속성
color
text-align
text-decoration
text-transform
text-indent
letter-spacing
line-height
word-spacing
text-align 정렬
justify: 양쪽정렬
text-decoration
h1{
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
a{
text-decoration: none;
}text-transform
<style>
p.uppercase{
text-transform: uppercase;
}
p.lowercase{
text-transform: lowercase;
}
p.capitalize{
text-transform: capitalize;
}
</style>text-indent
첫문장 들여쓰기
text-indent: 50px;letter-spacing
글자 간격을 설정할 때 사용한다,
letter-spacing : 3px;word-spacing
단어 간격을 설정할 때 사용한다.
word-spacing: 10pxline-height 속성
- 라인 간격을 설정할 때 사용한다
<style>
p.small{
line-height: 0.8;
}
p.big{
line-height: 1.8;
}
</style>position 속성
- 태그의 위치 설정 방법을 변경할 때 사용한다.
- static : 기본방식
- relative : 초기 위치에서 상하좌우로 위치를 이동.
- absoulute : 절대 위치 좌표를 설정 (부모요소 기준)
- fixed : 화면을 기준으로 절대 위치 좌표를 설정
- relative 속성
- normal position 기준으로 부터 상대적인(relative) 위치가 결정된다.
- relative position은 top, bottom, left, right 속성과 같이 사용된다.
- fixed 속성
- viewport를 기준으로 하는 상대적인(relative) 위치가 결정된다.
따라서 페이지가 scroll 되도 항상 고정된 위치에 보여진다.
- absolute 속성
- 가장 가까운 부모 요소 기준으로 하는 상대적인(relative) 위치가 결정된다.
만약 부모 요소가 없거나 부모요소에 position 설정값(static제외)을 설정하지
않으면 body 요소를 기준으로 설정된다. 따라서 scroll하면 움직이게 된다.
다음은 부모 요소안에 자식요소를 absolute 속성을 이용하여 위치시키는 기본 방법이다.
가. 부모요소에 height 속성을 설정한다.
나. 부모요소에 relative position을 설정한다.
다. 자식요소에 absolute position을 설정한다.
z-index 속성 (Overlapping 요소 처리 )
- 요소가 position 될 때 겹쳐져 보일 수가 있다. 이때 요소의 stack 순서를 변
경할 수 있는 속성이다. ( 기본은 아래 입력한 요소가 위로 올라온다.) - 큰 값을 입력할 수록 위로 올라온다.
z-index: -1;overflow 속성
- 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할 지 지정하는 속성이
다. - visible : 넘쳐도 전부 표시
- hidden : 넘치면 숨김
- scroll : 항상 스크롤이 가능하게 처리
- auto : 넘치는 경우에만 스크롤이 가능하게 처리
float 속성
- 특정 태그의 주위로 wrap할 수 있도록 left 또는 right로 밀어 넣을 수 있는
방법이다. ( horizontal 만 가능, up과 down은 불가능 ) - floating 태그의 before 요소는 영향을 받지 않는다.
- clear 속성으로 해제한다.
- 웹 페이지의 레이아웃을 구성할 때 반드시 사용하는 속성이다.
- 부유하는 대상을 만들 때 사용한다.
float 속성에 사용 가능한 키워드값
left 해당 태그를 왼쪽에
right 해당 태그를 오른쪽에
clear:both 속성을 이용하여 특정 태그는 float 속성의 영향을 받지 않게 만들 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
margin: 10px;
}
/*
div 태그에 CSS 적용
*/
#all{
border: 1px solid blue;
width: 960px;
height: 900px;
overflow: hidden;
}
#top{
background-color: red;
width: 100%;
height: 20%;
border: 1px solid red;
}
#nav{
background-color: yellow;
width: 100%;
height: 5%;
text-align: right;
}
ul{
margin: 0px;
}
#nav li{
display: inline;
}
#left{
background-color: green;
float: left;
width: 20%;
height: 65%;
}
#center{
background-color: gray;
float: left;
width: 80%;
height: 65%;
}
#bottom{
background-color: yellow;
clear: both;
width: 100%;
height: 10%;
text-align: center;
}
</style>
</head>
<body>
<div id="all">
<div id="top">
</div>
<div id="nav">
<ul>
<li><a href="">로그인</a></li>
<li><a href="">회원가입</a></li>
<li><a href="">게시판</a></li>
</ul>
</div>
<div id="left">
<ul>
<li>Java</li>
<li>Java2</li>
<li>Java3</li>
<li>Java4</li>
</ul>
</div>
<div id="center">
</div>
<div id="bottom">
copyright ~~~~
</div>
</div>
</body>
</html>