css 란?
문장의 "형용사" 같은 것이다.
cascading style sheet
= 웹페이지를 디자인하기 위해 사용 (계층구조, 연속적)
본격적으로 CSS를 다뤄본다.
1. CSS 참조방식
총 3가지가 있다.
1) 외부스타일 시트
2) 내부스타일 시트
3) HTML 태그 내의 스타일 지정 (인라인)
1) 외부스타일 시트
01) .css확장자를 가진 스타일 시트 파일을 생성
02) HTML 문서에 연결하여 사용 (호출하여 사용)
2) 내부스타일 시트
: HTML 문서 내에 <head> 태그내부에 <style>태그를 이용해 CSS를 정의하는 방식
<html>
<head>
<style> </style>
</head>
</html>
3) HTML 태그 내의 스타일 지정
: HTML 태그 안에 style 속성을 이용해 정의한다.
이때 장점은 코드가 직관적이다.
Q. 내장 방식에서 <style> 태그는 <head>에 사용한다. 그 이유는?
HTML 문서를 읽을 때, 위에서부터 하나씩 실행하게 되기 때문에
head에 두어서 먼저 적용될 수 있도록 하는 것이다.
2. CSS 작성법
p {color : red; padding: 5px;}
선택자 {프로퍼티: 값;}
= 선택자의 프로퍼티를 값으로 변경하겠다는 것! (이때 p가 선택자이자 태그이다)
해석하면 p태그 선택자 안의 color를 red라는 값으로 변경하고, 내부여백은 5픽셀을 주라는 의미이다.
3. CSS - 많이 쓰이는 속성
- color, background-color
- font-size, font-weight, font-family, font-style
- width, height
- border
- margin, padding
태그를 외우지 않더라도 이해하는 건 필수
HARD모드
4. CSS 선택자 - 단일 선택자
- 전체 선택자 (*)
: 모든 요소를 선택한다. 보통 폰트를 지정할 때 사용한다. (통일하고자 할 때)
* { font-family: Georgia, cursive;}
- 태그 선택자
: 태그 이름 그대로 사용 ex. color
- class 선택자
: class는 중복이 가능하다. 중첩 사용도 가능하다.
만드는 방법
.orange { color : red;}
사용법 : body태그에서
<li class="orange">오린지</li>
중첩사용
= 중첩으로 사용할 시에는 띄어쓰기를 통해 사용한다.
- ID 선택자
: 고유값이므로 중복적으로 사용 X
만드는 방법
#orange{ color: red;}
사용법 : body태그에서
<li id="orange">오린지</li>
5. CSS선택자 - 복합선택자
- 하위 선택자 : 후손 선택자 (자식 모두선택)
사용법 : 선택자 띄고 선택자
div .orange {color : red;}
= div아래에 있는 모든 class(오렌지)를 선택해서 color를 빨간색으로
- 자식 선택자
사용법 : > 사용
바로 밑에 있는 것만 선택
#div2>.apple { text-decoration: underline;}
- 형제 선택자
1) 인접형제선택자는 다음 형제 중 하나
+ 사용
2) 일반형제선택자는 다음 형제 모두 선택
~ 사용
.apple+p { background-color: pink;}
/* 인접형제선택자는 + */
/* .apple을 먼저 찾고 그 다음에 'p 태그'를 찾고 하나만 선택 */
.b + span { color :red;}
/* 인접형제 선택자는 바로 다음 것 '하나'만 선택한다. */
.b ~ span { color :aqua;}
/* 일반형제 선택자는 내 뒤(b class 다음)에 존재하는 '모든' 형제에 적용한다. */
Q. 두 개가 같이 있는 경우
.b+span { color :red;}
/* 인접형제 선택자는 바로 다음 것 '하나'만 선택한다. */
.b ~ span { color :aqua;}
= 코드는 위에서 아래로 읽으므로 먼저 red가 적용되었다가, 최종적으로 보이는 것은 aqua가 된다.
- 가상 선택자
: 가상의 상황에 맞춰서 선택
E::hover
div:hover {cursor: pointer;}
E::active
div:hover {cursor: pointer; background-color: aqua;}
/* hover 마우스가 올라갔을 때 */
a { color:black;}
/* a:active {color: brown;}
active는 활성화로, 보통 클릭 했을 때를 의미하게 된다
E::focus
p:active {color: brown;}
input:focus {background-color :aquamarine;}
E::link & E::visited
a:link {color: rgb(97, 70, 164);}
a:visited {color: rgb(20, 122, 27
body와 함께 쓰면 이렇게
<div></div>
<a href="http://naver.com">naver</a>
<a href="http://naver.com">a태그</a>
<p>p태그</p>
<input type="text">
E::first-child
선택자가 첫번째 자식요소라면 선택한다.
.fruits span:first-child{ color: brown;}(
<div class="fruits">
<span>딸기</span>
<span>수박</span>
<div>오렌지</div>
<p>망고</p>
<h3>사과</h3>
</div>
E::last-child
선택자가 형제 요소 중 막내라면 선택 (이때는 혼자라도 마지막이니 선택이 된다!)
E::nth-child(n){}
선택자가 형제요소 중 (n)째라면 선택한다.
E::not(XYZ){}
선택자 XYZ가 아닌 요소를 선택한다.
6. CSS 우선순위
여러 선택자가 겹쳐져 실행되는 경우 우선적인 순서가 있다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자/ 태그 선택자 / 전체 선택자
7. CSS 복잡한 속성
1) position
- static : 정적 위치 지정 방식 (기본값-고정위치)
- relative : 상대 위치 지정방식 (정적 위치-static기준-로부터 상대적으로 이동되어 지정)
- absolute : 절대 위치 지정방식 (가장 가까운 부모 혹은 조상 중, relative 기준으로 지정)
- fixed : (화면 기준) 원하는 곳에 위치 고정 (창이 움직여도 위치가 그대로)
- z-index : 축을 기준으로 레이어 쌓기 (값은 무엇이든 상관 x, 초기값은 1)
모든 포지션에 사용하는 게 아닌, relative 와 absolute에 사용
Q. z-index는 부모가 기준이므로 자식태그에 100을 줘도 부모가 1이라면 z-index는 1이다!
2) transform
- skew : 기울기
transform:skewX(10deg); transform:skewY(10deg); transform:skew(10deg,10deg);
- rotate : 회전
transform:rotateX(10deg); ==x 축이 돈다.
XY 따로 지정하지 않으면 그냥 돈다.
- translate: 이동 (x,y,z)
transform:translateX(-10deg)
- scale : 확대
transform:scale(2,3)
튼튼한 기초 위에 건강한 정신이...
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL🚴♀️] CodingON' 카테고리의 다른 글
| [JQuery] 제이쿼리와 부트스트랩(Bootstrap) ch.1 (0) | 2022.11.10 |
|---|---|
| [JavaScript] 자바스크립트 함수와 조건문, 객체(object) (0) | 2022.11.06 |
| [CSS, JavaScript] display와 animation, 자바스크립트 기초와 연산자 (4) | 2022.11.04 |
| [git] git hub : 기초부터 차근차근 (and wakatime) (0) | 2022.10.28 |
| [HTML] HTML의 기초 - 태그 사용하기 (with github) (0) | 2022.10.27 |
