CSS의 개요 및 사용방법
: cascading style sheets
=> 문서를 구성하는 구성요소의 스타일을 정의
[css를 정의하는 방법]
1) <head>태그 안에 정의하고 사용
- 문서 해드태그의 하위 태그인 <style>태그를 선언하고 내부에 정의
<style>
선택자 { css속성명1:속성값1;
css속성명2:속성값2;
css속성명3:속성값3; .... }
</style>
*선택자 - [ p, h1, div ... ]
태그명, class명, id명 ...
어떤 컨텐츠에 스타일을 적용할 것인지 알려주는 목적
ex) <style type = "text/css">
*{ color: blue; font-size: 9pt; }
p{ color: rgb(255, 128, 192); font-size: 20pt; }
h1{ color: rgb(128, 255, 128); font-size: 16pt; }
2) 외부파일로 선언하고 사용하는 방법
- 태그에서 style 속성을 정의하고 사용
- 내 사이트를 구성하는 모든 문서에 동일하게 스타일을 적용하고 싶은 경우는 외부 문서로 정의해서 사용해야 한다. ->공통속성을 정의
ex) <link rel="stylesheet" type="text/css" href="../common/css/style.css">
3) infile로 선언하고 사용하는 방법
태그 내부에 style속성을 정의하고 사용. 우선순위 가장 높음
<시작태그명 style="속석명1:속성값1; 2,3 ..."> 내용 </종료태그명>
ex) <p style="color: orange; font-size: 40pt"> 내용 </p>
[선택자] 특정한 것을 독립적으로 표현하고자 할 때 사용.
1. 태그명 -> 태그명 {스타일시트속성...}
ex) h3,h4{ color : aqua; background-color : red; }
2. 클래스 선택자(css에서 활용)
태그와 상관없이 내가 원하는 부분만 동일한 속성으로 적용하고 싶은 경우
첫 번째. 원하는 컨텐츠에 class속성을 이용해서 이름을 정의
<p class="클래스이름"> 내용 </p>
<div class="클래스이름"> 내용 </div>
<img class="클래스이름"> 내용 </class>
두 번째. 스타일시트를 적용
외부파일, 해드태그 모두 동일하게 적용
.class명 { 속성1:속성값; 속성2:속성값2; .... } => body밖 head에 .class이름
선언하기
ex) .mycontent { border: solid green 5px;}
<div class="mycontent"> 내용 </div>
3. id선택자 (자바스크립트, 제이쿼리)
웹문서를 구성하는 다양한 컨텐츠 중에서 하나의 컨텐츠만 식별해서 사용하고 싶은 경우 사용하는 선택자
class속성을 정의해서 사용하는 경우는 여러 번 적용해서 사용할 수 있으나 id속성은 하나의 문서에서 한 번만 적용하여 사용할 수 있다.
css에서 id속성은 레이아웃을 설정하는 용도로 많이 사용
'HTML, CSS, JS' 카테고리의 다른 글
| 2022-09-23 javascript 사용방법, 함수정의 (0) | 2022.09.24 |
|---|---|
| 2022-09-22 CSS우선순위, 속성 (0) | 2022.09.22 |
| 2022-09-21(1) html 양식태그 입력하여 서버로 전송 (0) | 2022.09.21 |
| 2022-09-20 html 파일구조, 테이블 (0) | 2022.09.20 |
| 2022-09-19 환경구축 (0) | 2022.09.19 |
댓글