CSS에 대해서 알아보자
CSS는 Cascading Style Sheets의 약자로 문서를 꾸며주기 위한 시트를 이야기 한다
주로 HTML이나 PHP와 같은 WEB언어에서 많이 사용된다.
그 외에도 SVG 또는 XML, 등에서도 사용된다.
CSS는 순차적인 개발을 거치며 CSS1, CSS2.1..그리고 현재의 CSS3이 되었다.
CSS는 문서의 내부에 내장할 수도 있고 별도의 파일에서 호출하여 사용이 가능하다.
CLASS와 ID로 구분하여 꾸며줄 수 있으며
동일 속성이 주어진다면 CLASS보다는 ID가 우선적으로 적용된다.
ID와 CLASS의 차이점은
ID는 동일 속성을 복수 사용이 불가능하다.
하지만 CLASS는 복수 지정이 가능하다.
예를들어 내가 2개의 DIV와 같은 OBJECT를 생성하였고
1개의 OBJECT에는 AAA 라는 ID를 지어줬다면 다른하나의 DIV에는 AAA라는 이름을 사용하면 오류가 발생한다.
실제 사용은 ID로는 액션감을 더하기위해 스크립트에서 주로 사용하며 CLASS는 꾸며주는데 많이 이용한다.
CSS에서 ID의 속성을 입력할떄는
앞에 #을 붙히며 CLASS의 속성이름을 입력할때는 .을 붙힌다.
<DIV CLASS = "AAA" ID = "AAA">MEMO</DIV>
여기서 속성을 넣어 본다면
CLASS 는
.AAA{
WIDTH:100%
HEIGHT: 100%
}
이런식으로 입력이 되고
ID라면
#AAA{
WIDTH:100%
HEIGHT: 100%
}
이렇게 입력이 된다.
CSS는 코드만으로 백터그래픽을 구성하는 것도 가능하며 그라데이션, 반투명 형태의 표현도 가능하다.
어렵지 않으며 막상해보면 꽤나 재미있다.
특별한 프로그램도 필요 없이
윈도우 기본 내장 프로그램인 윈도우 익스플로러 또는 크롬, 웨일로 결과를 볼 수 있고
워드패드나 이클립스, 또는 메모장으로도 작성이 가능하다.
웹에 관심이 있다면 한번쯤 공부하는 것을 권장한다.
'교육 > HTML+CSS' 카테고리의 다른 글
[CSS] KEYFRAME 애니메이션 기초 (19) | 2023.01.12 |
---|---|
[CSS] CALC (5) | 2022.11.22 |
[HTML/CSS] 슬라이딩 애니메이션 : KEYFRAMES (8) | 2022.11.14 |
[HTML/CSS] 버튼에 HOVER 속성을 이용하여 에니메이션을 넣어보자 (5) | 2022.10.31 |
[CSS] CSS로 동그라미를 그려보자. (4) | 2022.10.14 |