CSS은 HTML과 함께 웹 표준의 기본 개념으로써 HTML이 텍스트나 이미지,표 같은 웹 문서에 넣어 뼈대를 만드는 역할이라면 CSS은 텍스트나 이미지, 배경의 크기나 배치 방법등의 요소를 이용하여 디자인을 담당. Cascading style sheet 로 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정. 케스케이딩은 스타일끼리 충돌하지 않도록 막아주는 방법으로 2가지 방법 존재.
1. 스타일 우선순위
1) 얼마나 중요한가? 2) 적용범위는 어디까지인가? 3)소스 코드의 작성 순서는 어떠한가? 에 따라 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말함.
2.스타일 상속
웹 문서에서 사용하는 여러 태그는 서로포함 관계가 존재. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라 할때, 스타일시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이를 스타일 상속이라고 함.
3.스타일시트
스타일 시트에는 브라우저 기본스타일과 사용자 스타일이 있고, 사용자 스타일에는 인라인 스타일,내부 스타일시트, 외부 스타일 시트로 구성되어 있습니다.
1.CSS 기본 선택자
1.전체요소에 스타일을 적용하는 전체선택자
전체선택자는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용합니다.주로 모든 하위 요소에 스타일을 한꺼번에 적용할때 사용.
*{속성:값;....}
2.특정 요소에 스타일을 적용하는 타입 선택자
타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용. 타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용.
태그명{스타일 규칙}3.특정부분에 스타일 적용하는 클래스 선택자
같은 태그라도 일부는 다른 스타일을 사용하고 싶다면 특정 부분만 선택해서 스타일을 적용하는 클래스 선택자
.클래스명{스타일 규칙}4.특정 부분에 스타일을 한번만 적용할 수 있는 id 선택자
id선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정.클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러번 적용할 수 있는 반면, id 선택자는 문서에서 한번만 적용할 수 있다는 것.
#아이디명 { 스타일 규칙 }5.같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
여러 선택자에서 같은 스타일 규칙을 사용하는 경우에 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의
선택자1,선택자2 {스타일 규칙}
2.텍스트를 표현하는 다양한 스타일
1.글꼴을 지정하는 font-family 속성
웹 문서에서 사용할 글꼴 지정. <body>,<p>,<hn>태그처럼 텍스트를 사용하는 요소에서 주로 사용
<body>태그 스타일에서 일단 한번 정의하면 문서 전체에 적용되고, 문서 안의 모든 자식 요소에 계속 같은 글꼴 사용.
font-family:<글꼴 이름> | [<글꼴 이름>,<글꼴 이름>]
2.글자 크기를 지정하는 font-size 속성
글자 크기는 font-size 속성을 사용하여 조절
font-size:<절대 크기>| <상대 크기>|<크기>|<백분율>3.이탤릭체로 글자를 표시하는 font-style 속성
font-style:normal|italic|oblique4.글자 굵기를 지정하는 font-weight 속성
글자 굵기를 지정하는 속성은 font-weight 으로 웹 문서를 작성할 때 자주 사용.
font-weight:normal|bold|bolder|lighter|100|...5.글자색을 지정하는 color 속성
문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 color 속성 사용.16진수나 rgb, hsl 또는 색상이름으로 색상 지정.
color:<색상>등 여러가지 속성등이 존재하지만 저는 UI/UX전문가가 아니기 때문에....가볍게 지나가보도록 할께용! CSS 공부는 하면서 필요한 부분만 추가로 정리해나가는걸로 하고 웹프로그래밍의 꽃 자바스크립트로 점프 해보도록 할께용
'Study > FrontEnd' 카테고리의 다른 글
| FrontEnd (0) | 2024.01.18 |
|---|---|
| HTML,CSS을 활용한 자기 페이지 만들기 (3) | 2024.01.03 |
| JAVASCRIPT(1) (0) | 2023.12.27 |
| HTML(2) (0) | 2023.12.26 |
| HTML(1) (0) | 2023.12.21 |
