parisangsoo
CSS 02/20 ~ 02/21 본문
CSS
일반적으로 스타일 시트는 <body>가 아닌 <head> 안에 작성 해야하며 <style></style> 태그를 먼저 선언한 뒤 안에 내용을 작성 해야한다. 스타일시트는 모든 태그들을 지정하여 꾸밀수 있다.
<!-- css(cascading style sheets) : body 영역에 만들어진
내용에 대한 디자인을 위해 설계된 언어 -->
<style>
/* style태그는 반드시 head태그 내부에 있어야 한다 */
.h1{ color:gray; } /* 클래스 지정 */
#a1{color : blue; } /* ID 지정 */
h1{ color: red; }
h2{ color: #C4DEFF; }
h3:active { color: #aaf; }
p { color: #00f; }
span { color: green;} /* 일부분 지정해서 스타일 시트 변경 */
div { color: red; }
</style>
<body>
<h1 class="h1">스타일 연습</h1>
<h1 id="a1">스타일 연습</h1>
<h2>스타일 연습</h2>
<h3>스타일 연습</h3>
<p>스타일 <span>연습 중</span> 입니다.</p> <!-- span태그 -->
</body>
<div>
<!-- 짝을 이뤄서 함께 움직일 태그들을 묶어서 관리하는 태그 -->
<!-- 패널같은 개념 -->
안녕하세요<br>
<h4>반가워요</h4>
</div>
<style>
/* text라는 이름의 클래스로 접근하기 위해 .을 사용 */
.text{ color: red; } /* 클래스가 text인 태그에 전체 적용 */
p.text{ color: blue; } /*p태그 중에서 클래스가 text인 태그에만 접근 */
.text2 { color: #aaf; }
/* 일반적으로 모든 태그에는 클래스를 넣을 수 있다. */
</style>
<body>
<!-- class 속성 : 태그의 디자인만을 위해 존재하는 속성
중복된 이름으로 여러개의 태그에게 클래스를 지정하는 것이 가능.-->
<h2 class="text">클래스 연습</h2>
<p class="text2">파리 생제르맹 선수단</p>
<p class="text">메시,네이마르,음바페,라모스,마르키뉴스,멘데스,하키미</p>
</body>
.box h2 { color: red; } /* 공백은 내부로 접근하라는 의미 결국 box라는 클래스를 가진 태그의 내부의 h2 태그로 접근 */
Ex) div .box : div내부로 들어가 box인 클래스를 찾는것
div.box : div중에서 클래스가 box인 것을 찾는것 /* 중요 띄어쓰기 유무가 중요함 */
<!-- id : 스타일 변경 뿐만 아니라, 태그의 검색, 접근 등의 다양한 기능을 포함하고 있는 속성 이므로 중복된 id를 생성할 수 없다. 중요 !!! -->
/* 클래스의 접근이 . id의 접근은 #이다. */
#aa { color: red; background: aqua;} /*id가 aa인 태그의 속성 변경
#bb.cc{ color: fuchsia; } /* id가 bb인 태그 중에서 클래스가 cc인 태그인 속성의 변경
{ color : rgb,#00f,#C4DEFF; } 글자색 변경 // 색상의 여러가지 형식 존재.
{ background: aqua; } 배경색 변경
border : 테두리 설정
{ border-width: 20px; } 테두리의 두께를 변경
{ border-color: graytext; } 테두리의 색을 변경
{ border-color: graytext; } 테두리의 색을 변경
{ border-style: none; } 테두리의 스타일을 변경