나는 처음에 CSS도 프로그램을 새로 깔아서 하는 줄 알았다 ㅎ
아예 다른 과목이 아니고 HTML속에서 더 감각 있고 편리한 디자인을 위한 언어라고 부르기는 좀 그런., 기능?!
1. CSS란?
: 쉽게 말하면 HTML 문서의 스타일을 꾸밀 때 사용하는 것(Cascading Style Sheets)
* CSS의 기초작성
→ 스타일은 설정이기 때문에 head 태그 안에 작성
다른 언어이기 때문에 style이라는 태그 내에만 작성
2. 선택자와 선언
예시) body 태그안에 <h2>주황색</h2>을 쓰고, style 태그 안에 선택자(h2)와 선언작성
h2{
color:orange;
background-color: beige;
}
이렇게 글자색과 배경색이 바뀐다..!
3. 선택자의 종류
- 선택자에는 전체선택자, 태그선택자, 클래스선택자, 아이디선택자, 계층선택자, 반응선택자 등이 있다
- 계층선택자는 자손선택자, 자식선택자, 후행선택자, 근접후행선택자가 있는데 그건 다음 포스팅에 올릴거다 !
<body>
<h1>CSS</h1>
<p>웹페이지를 꾸며주는 스타일 시트 언어</p>
<ul>
<li>CSS구조</li>
<li>CSS선택자</li>
<li>CSS스타일</li>
</ul>
<h1>오늘은 뭐먹지?</h1>
<ul>
<li>알배추전</li>
<li>국수</li>
<li>돈까스</li>
</ul>
</body>
body 태그 안에 위의 내용을 넣고 디자인을 시작해보자!
(1) 전체 선택자
: 기호 (*), 모든 요소를 선택
(2) 태그 선택자
: 태그이름
이렇게 전체 선택자와 태그 선택자를 이용하면 편하게 색을 바꿀 수 있지만,
특정한 요소를 선택하여 바꾸는 건 불가능하다.
선택자들을 구분해서 지정해줘야 하는 경우(특정한 요소를 선택하여 바꾸는 경우)는
→ 클래스 선택자와 아이디 선택자를 사용
(3) 클래스 선택자
: .클래스이름 → 점(.)이 중요
이 경우에는 밑에 있는 body 태그 내의 바꿀 부분을 class로 묶기 위해 속성값을 입력해주어야 함!
이렇게 class를 지정해준 부분만 네이비 색으로 변한 걸 알 수 있다.
(4) 아이디 선택자
: #아이디이름 → #이 중요
이 경우에도 밑에 있는 body 태그 내의 바꿀 부분을 id로 지정을 해주어야 함!
이렇게 id로 지정한 배경색만 노란색으로 바뀐 걸 알 수 있다.
(5) 계층선택자
는 다음 포스팅에 자세히 ~!
(6) 선택자 가중치
전체~아이디는 밑으로 갈수록 힘이 강해진다!
그래서 아무리 전체가 salmon색이어도 태그나 class, id로 따로 지정된 부분은 salmon색이 아니다.
그걸 가중치라고 표현한다.
마무리로
정리를 하자면 ~
'HTML - CSS > 기초정리' 카테고리의 다른 글
| CSS 기초 - 공간분할태그 / 자주 쓰이는 속성 (0) | 2023.01.08 |
|---|---|
| CSS 기초 - 계층선택자 / 반응선택자 / 그룹선택자 (0) | 2023.01.06 |
| HTML 기초 - 회원가입 폼 만들기 실습 (0) | 2023.01.05 |
| HTML 기초 - form 태그 (0) | 2023.01.05 |
| HTML 기초 - a 태그 / 테이블 태그 (0) | 2023.01.04 |