6-1웹문서에 디자인 입히기
CSS는 웹문서의 글꼴이나 디자인등을 설정하여 겉모습을 바꿔주는 역할을 한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원 가입</title>
<style>
width:600px;
margin:10px auto;
}
</style>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<div id="container">
<h1>회원 가입을 환영합니다</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required>
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail" required>
</li>
<li>
<label for="pwd1">비밀번호</label>
<input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
</li>
<li>
<label for="pw2">비밀번호 확인</label>
<input type="password" id="pwd2" required>
</li>
<li>
<label for="path">가입 경로</label>
<select id="path">
<option value="blog">블로그</option>
<option value="search">검색</option>
<option value="sns">SNS</option>
<option value="etc">기타</option>
</select>
</li>
<li>
<label for="memo">메모</label>
<textarea cols="40" rows="4" placeholder="남길 말씀이 있다면 여기에"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
<label for="mailing_y">메일 수신</label>
<input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
<label for="mailing_n">메일 수신 안 함</label>
</fieldset>
<div id="buttons">
<input type="submit" value="가입하기">
<input type="reset" value="취소">
</div>
</form>
</div>
</body>
</html>
css파일을 html파일과 분리하는 이유
1. 내용과 디자인을 분리하기 위해서 이다
분리가 되어 있으면 각각의 경우에 수정할 경우에 찾기가 편하고 효율적이다
2.여러가지 기기에 탄력적으로 반응하게 하기 위해서.
pc, 핸드폰, 태블릿, 스마트티비등 다양한 기기에서 웹이 접근이 가능해지면서 화면의 비율에 따라 조정을 해야하는데 이 역할을 css가 수행한다
내부 스타일 시트는 style 태그를 이용하여 적용하는 것이다. 이것은 head윗 부분에 적용한다
외부스타일 시트는 외부에 따로 파일을 만들어서 적용하는 것을 말한다. 그리고 link 태그로 css파일을 연결해 주면 된다.
기본 선택자
전체 선택자
브라우저의 기본스타일을 초기화 시키고 싶을 때 사용
*{ }
타입선택자
특정 태그에만 적용하고 싶을 때 사용
p{}
class 선택자
id 선택자
특정한 부분에만 다르게 선택하고 싶을 때 사용 . 클래스는 여러번 사용할 수 있지만 id는 한번만 사용할 수 있다는 차이가 있다
클래스 : .명칭{}
태그 전체에 적용하고 싶을 때는 <p class='redtext'></p> 처럼 나타내 주면된다
단어 하나에 적용하고 싶을 때는 span을 사용하여 <span class='redtext'></span>로 표시해준다
아이디: #명칭{}
<div id='container'></div>
그룹선택자
여러개의 선택자를 ,로 묶어서 적용할 수 있게 해준다
ex) h1,p{color=blue;}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
h1 {
padding:10px;
background-color:
color:
}
</style>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>
6-2 캐스캐이딩 스타일 시트
캐스캐이딩
위에서 아래로 흐른다는 뜻으로 선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정한다
1. 스타일 우선순위 . 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
2. 스타일 상속. 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식요소로 위에서 아래로 전달
# 스타일 시트에서 '캐스캐이딩'은 가장 기본적인 개념이기 때문에 일반적으로 스타일 시트는 캐스캐이딩 스타일 시트와 같은 의미로 사용됨
원칙1.
1. 얼마나 중요한가에 따라
(사용자 스타일)->(제작자 스타일)->(브라우저 스타일)
2. 얼마나 범위를 한정 지을 수 있는가에 따라
(!important)->(인라인스타일)->(id스타일)->(클래스스타일)->(타입스타일)
3.소스 순서에 따라
중요도와 명시도가 같다면 소스 순서에 따라 결정
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀
원칙2.
자식요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스탙일 속성들이 자식요소로 전달됨
상속을 이용하면 스타일 시트를 효과적으로 만들 수 있음
주의할 것은 스타일의 모든 속성이 부모 요소애서 자식 요소로 상속되는 것은 아니라는 점
(예, 글자 색은 상속되지만 배경 색은 상속되지 않음)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
color:black;
}
h1 {
color: brown !important;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1 style="color:green">레드향</h1>
<p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>