문서의 구조는 HTML
문서의 스타일은 CSS
Cascading style Sheets 의 약자임
한번에 여러페이지의 레이아웃 제어 가능
별도의 css파일로 생성가능 (외부 스타일 시트)
개발시간 단축 및 공유가능
거대,복잡한 사이트 관리 시 피요
캐스캐이딩은 폭포같은 연속적인 계속되는 이라는 뜻
연속폭포처럼 위에서 아래로 순차적으로 적용됨
하나의 요소에 여러개의 css가 충돌할 경우 우선순우가 결정됨.
(외부 css<style에 정의된 일반css<인라인css가 가장 가중치 높음(요소에 직점 css준것)
선택자(selector****) - 요소(태그), 전체(*), id(#), Class(.)
Selector : 뭔가를 뽑아낼때.. div. input처럼 요소이름으로 뽑아내든가 전체*뽑든가 요소별로 유일한 id를 이용하든가
class라는 속성으로 뽑아내는 방법도 있음
요소하나하나가 하나의 작은 박스로 이루어져잇다고 보면됨
CSS문법
선택자(selector){속성:값;}
끝에 반드시 ;를 적어준다.
ex ) p {border : 2px red;} -> html에서 <p>라는 요소들에는 다 이 속성이 적용됨
맨앞의 p가 선택자, border : 속성, 2px red가 값
css의 주석 : /*....*/ , //
CSS 삽입 (3가지)
1. 외부 스타일 시트
.css로 파일을 따로 만드는 거임
많은 페이지에 동일한 스타일을 적용하려고 할 때 좋은방법
<link type="text/xss" rel="stylesheet" href="mystyle.css">
보통 head에 많이 씀
2. 내부 스타일 시트
head부분에 style을 열어서 쓰는거임
스타일넣고자하는 html의 헤드부분에
<head>
<title>div,span연습</title>
<style>
h1{color:yellow;}
p{color: grey;}
</style>
</head>3. 인라인 스타일 시트
html 요소 각각에 스타일 넣어주는것
다중 스타일 시트
-하나의 요소에 대하여 외부,내부,인라인 스타일이 서로 다르게 지정하고 있다면 어떤 스타일이 적용될까?
1. 인라인
2. head,섹션에 저장된 외부와 내부스타일 시트
3. 웹브라우저의 디폴트값
이제 메모장 버리고 이클립스 해보자
file - new- dinamic web project
| 네비 | 소스1 | 소스2 |
| 콘솔 (로그나 에러메세지가 찍힘) |
서버 |
webcoffee 다시만들어주면
*ctrl m 누르거나 파일이름 옆 빈공간 더블클릭하면 최대화 됨.
이걸 브라우저로 띄우는 방법
경로 잘 보기
이제 외부 css로 만들어보자
보통으로 쓰는 css는 common.css 라고 많이 함
패키지별로 따로쓴다면 패키지명으로 짓기도한다.
메뉴랑 거의 맞춰서 간다
| 메인 | 상품 | 업체 | 내정보 |
라면, html도 밑에 main, product, company, myinfo 가있음
css는 전체 common하나, product밑에 여러개에 적용할 product css .. 이런식으로 만드는거임
html에 head에 외부파일가져올거니까 <link>
css.하고 ctrl 엔터면 자동으로 만들어짐
font size 바꿀때는 px보다 em(배수)를 씀
font-size: 3em;
그리고 hr이 아니다
border가 아래족에만 들어간거임
border-bottom: 5px double gray;
**꿀팁
네비게이션 저거 킨 상태에서 ctrl 누르고 화면 누르면 그 경로가 네비에 뜬다
이렇게 합쳐서도 쓸수잇따.
이제 내부스타일시트를 써볼거임
한줄주석 : ctrl shift c
선택자의 종류
요소선택자 (element) (우리지금까지한거)
클래스선택자 아이디는 # 클래스는 .이다.
아이디 #id이름 하면 됨
전체
속성
의사
선택자를 ,로 분리하여 나열할 수 있다.
h1,#text라고 해도됨
*아이디와 클래스는 모~든요소에 다 들어갈 수 있다.
아이디는 중복되면 안되지만 class는 그룹을 묶는거..중복가능
자손,자식선택자
body em{ color: red;}
body안 의 em요소를 샅샅히 뒤져서 찾으라는뜻임... ,가 아님!!
body > h1 {color:blue;}
>는 바로!! 밑에 자식중에 찾는거임 직계아니면 안찾음
의사/가상클래스
클래스가 정의된것처럼 간주
상태나 구조에 의해서 선택이 이루어진다.
a:link{color:blue}
a:visited{color:green} a태그 다녀온 후에 색깔
td:nth-child(2n)
th가 ~번째라는뜻 td여러개중 n번째인데 2n (짝수)로 td골라서 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web</title>
<style type="text/css">
h1{background-color : yellow;
color : black;
border: 3px solid red;
font-family: "바탕체";
font-weight: bold;}
a:link{
text-decoration: none; /*밑줄이 사라짐!*/
color: blue;
background-color: white;
}
a:visited{
text-decoration: none;
color: yellow;
background-color: violet;
}
a:hover{ /*:으로 이벤트발생시의 스타일도 줄수있음*/
text-decoration: none;
color: green;
background-color: pink;
}
</style>
</head>
<body>
<h1 id="test" class="sample">This is heading.</h1>
<a href="http://www.naver.com">겨울왕국</a><br>
<a href="http://www.google.com">눈의여왕</a><br>
<a href="http://www.daum.net">라푼젤</a><br>
<a href="http://www.youtube.com">라따뚜이</a>
</body>
</html>
속성 선택자
특정한 속성을 가지는 요소를 선택한다
h1[title]{color:blue;}
p[class="example"]{ }
css 속성들
그냥 color라고 쓰면 텍스트색상
padding 가장자리와 내용의 간격
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1 {background-color : #6495ed;}
/* p.a{background-color : #ff0000;} */
/* p.b{background-color : #00ff00;} */
/* p.c{background-color : #0000ff;} */
/* p.d{background-color : #888888;} */
#aid{background-color : #008080;}
#bid{background-color : #00ced1;}
#cid{background-color : #00ffff;}
#did{background-color : #00fa9a;}
</style>
</head>
<body>
<h1>CSS Color Chart1</h1>
<p class="a" id="aid">Color #1</p>
<p class="b" id="bid">Color #2</p>
<p class="c" id="cid">Color #3</p>
<p class="d" id="did">Color #4</p>
</body>
</html>
폰트 패밀리
serif는 우아 전통
sans-serif는 깔끔가독
monospace는 타자기서체
cursive fantasy는 장난스러우며 스타일리쉬
font-family:"Times New Roman", Times, serif;
안깔려있을까봐 여러개 나열해주는거. 폰트명에 스페이스있으면 ""로묶
폰트크기단위
pt : 포인트
px : 픽셀
% : 퍼센트
em : 배수
키워드 :xx-small, small....
font-weight 볼드체여부
font-style 이탤릭체여부 (normal, italic , oblique)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
h1 {background-color : #6495ed; color: white;}
/* p.a{background-color : #ff0000;} */
/* p.b{background-color : #00ff00;} */
/* p.c{background-color : #0000ff;} */
/* p.d{background-color : #888888;} */
p{font-size: 2em; font-weight: bold; color:white;}
#aid{background-color : #008080; text-align: center;}
#bid{background-color : #00ced1; text-align: right; text-decoration: line-through;}
#cid{background-color : #00ffff; text-align: left; text-decoration: underline;}
#did,#ex3{background-color : #00fa9a; text-align: justify;}/*얘는 모르겟삼*/
#ex,#ex2{color:black;}
#ex{font-size:60px; font-style: italic; font-family: arial,sans-serif; text-decoration: overline;}
#ex2{font-size:40px; font-weight:bold; font-family: Georgia,sans-serif; text-transform: uppercase; text-shadow: 5px 5px 5px #00fa9a;}
#ex3{font-size:20px; font-weight:bold; font-family: sans-serif; text-transform: capitalize;}
</style>
</head>
<body>
<h1>CSS Color Chart1</h1>
<p class="a" id="aid">Color #1</p>
<p class="b" id="bid">Color #2</p>
<p class="c" id="cid">Color #3</p>
<p class="d" id="did">Color #4</p>
<p id="ex">font: italic 30px arial,sans-serif</p>
<p id="ex2">font: bold 40px Georgia,sans-serif</p>
<p id="ex3">No servers are available</p>
</body>
</html>
align의 justify는 양쪽정렬임
capitalize
img의 vertical-align도 top middlem bottom으로 줄수있음
자주쓰는 단축키
ctrl d 행삭제
alt shift a 한번에 입력하기
'학원수업_Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| java script (0) | 2020.11.30 |
|---|---|
| 1127 POSITION (0) | 2020.11.27 |
| 1126 (0) | 2020.11.26 |
| 1124 (0) | 2020.11.24 |
| 1123 (0) | 2020.11.23 |