<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>스타일시트, 선택자</title>
<style>
/* style 안에 작성하는 주석방법 */
/* 전체 선택자 : html내에 등장하는 모든 형태를 선택하는 선택자. (초기화, 기본 설정값)
가급적 사용안하는 것이 좋음. */
*{
margin: 10px;
/* 바깥여백 */
padding: 10px;
/* 안쪽여백 */
}
/* margin:바깥쪽 여백, padding:안쪽 여백 */
/* 태그 선택자
특정한 태그 이름을 부여하며 선택하는 선택자로, html화면 내에서 하나의 이름으로 한번만 사용권장 주로 큰 단락, 부모에서 사용, 위치이동, 이름 */
body {
background: #000000; /* 배경색은 블랙 */
color: white; /* 글자색 */
}
body{
font-family: '돋움';
font-size: 10px;
color: red;
line-height: 30px;
} /* 기본 글꼴 돋움, 글자 크기 12px */
a{
text-decoration: none;
color:yellow;
/* 클래스 : 본문(class="name")
특정한 이름을 부여하여, html 문서 내에서 하나의 이름으로 여러군데 여러번 사용가능
주로 작은 요소, 작은단락, 변화가 잦을 스타일 */
}
.color1{
color: green;
}
/* 아이디 선택자를 통한 스타일 적용 : 본문(id) / 스타일(#)
id 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일을 적용할 때 사용.
마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법은 동일.
클래스 선택자는 여러번 반복 사용이 가능한데 id선택자는 문서 내에서 한번만 사용할 수 있음.(권장사항 일뿐)
주로 큰 단락, 부모에서 사용.
자바스크립트에서 사용. getElementById() */
#title1 { color : #666666;} /* 글자 색상 */
#title2 { color : blue;} /* 글자 색상 */
#title3 { color : orange;} /* 글자 색상 */
#title4 { color : red;} /* 글자 색상 */
#title5 { color : gray;} /* 글자 색상 */
#title6 { color : green;} /* 글자 색상 */
/* 1순위-#id선택자, 2순위-.class선택자, 3순위-태그선택자
</style>
</head>
<body>
<!-- 클래스 : 본문(class="name")
특정한 이름을 부여하여, html 문서 내에서 하나의 이름으로 여러군데 여러번 사용가능
주로 작은 요소, 작은단락, 변화가 잦을 스타일 -->
<h1>스마트폰 웹 디자인</h1>
<h2 class="color1">Smartphone Web Design</h2>
<p class="color1">
스마트폰 가입자가 급속히 증가하는 스마트폰 시대에 맞춰 모바일 기반에 최적화된 새로운 UI, UX와 콘텐츠로 구성하여 이용하기 쉽고 데이터 사용도 적은 웹사이트가 제작되고 있습니다.
</p>
<h4>Artwork Concept Drawing</h4>
<h1>아트윅 컨셉 드로잉</h1>
<p>
편집 <a href="#">포트폴리오에</a> 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트윅 실습,
3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트윅 표현에 대하여 학습합니다.
</p>
<h1 id="title1"> 웹디자인 </h1>
<h2 id="title2"> 스마트폰 웹디자인 </h2>
<h3 id="title3"> 웹기획 </h3>
<h4 id="title4"> 웹프로그래밍> </h4>
<h5 id="title5"> 웹퍼블리쉬 </h5>
<h6 id="title6" style="color: red;"> 제이쿼리 </h6>
</body>
</html>
