[CSS] 기초 - ★

 

 

 

 

 

1. <style> - 사용할 줄 알아야함.

방법1

방법2

 

 

 

 

 

 

 

 

 

 

2. 선택자의 종류 - "태그 선택자"

5번째 줄을  "선택자"라고 부릅니다. (태그 선택자)

 

 

 

 

 

 

 

 

3. 선택자의 종류 - "아이디 선택자"

(참고) #은 id 입니다.

 

 

 

 

4. 선택자의 종류 - "클래스 선택자"

(참고) .은 class 입니다.

 

 

 

 

 

 

 

5. 선택자의 종류 - "부모 자식 선택자"

 

 

 

 

6.

 

 

 

 

 

7. 직계자손만 주는거 - >

ol의 li만 주는거

 

 

 

 

 

8. 왼쪽이나 오른쪽 코드나 똑같은 거임(그냥 한번에 쓸 수 있다고,,)

따로따로 쓴거	합쳐서 쓴거

 

 

 

 

 

 

9. 글꼴 - px, rem

 

 

 

 

 

 

10. color - 색깔

방법1

 

방법2

 

 

 

 

 

11. text-align - 정렬, border - 테두리, solid - 테두리 색깔

 

 

 

 

 

 

 

12. font-family - 글꼴 설정, font-weight - 굵게, line-height - 글자 줄간격

 

 

 

 

 

 

13. font - 글자 꾸미는거

위에 12번을 한번에 적을 수 있는게 할 수 있음.

 

 

(참고)

 

 

 

 

 

 

14. 웹에서 폰트 받아서 작용하는거

(참고) 구글에서 제공하는 폰트 사이트 - https://fonts.google.com/?authuser=1

 

 

 

 

 

 

16. 케스케이딩

하나의 태그에 여러가지의 css가 중텁되었을 때의 적용되는 우선 순위

 

 

 

 

 

근데, 위에 있는 우선순위를 전부 무시하고 그냥 반영해 버리는거 -> !important

 

 

 

 

 

 

 

 

17. h1, a 차이점

h1 태그 -> 한줄 전체를 쓴다     <- 이런걸 "block 엘리먼트"        ex) "제목" 같은거 할 때

a 태그 -> 일부만 쓴다   <- 이런걸 "inline 엘리먼트"

 

 

 

근데 임의로 설정을 줄 수(바꿔줄 수도 있음)가 있다.

 

 

 

 

 

18. 박스모델(box model)

 

 

 

 

 

 

 

19. box-sizing <- 해주면 좋음 ★

box-sizing:border-box 하면 맞쳐줌.

 

결과

사용전	사용후

코드

 

 

 

 

근데 일반적으로 이렇게 전체(*)에다가 주고 사용한다네,

 

 

 

 

 

 

 

 

 

20. 포지션

static

relative

absolute

fixed  -> 이거 그냥 화면에 고정 되어 버리는거

 

위치가지고 노는거

 

 

 

 

 

 

 

 

21. FLEX - 레이아웃을 구조화 시키는거

(1)

레이아웃의 역사

Table -> Position -> Float -> 

FLEX

 

(2)

 

(3)

 

 

 

사용예 1

	아무것도 안한거
	display:flex;    (한줄로됨) 만 적은거,
	display:flex; flex-direction:row-reverse;    ("행"기준의 오른쪽으로) 만 적은거,

 

 

 

사용예 2

	(세로)     flex-direction:column;    ("열"기준)       .item:nth-child(2){    flex-basis: 200px; } 설명 -> item클래스 중에 2번째의 기본크기(flex-baasis)가 200px 이다.
	(가로)   flex-direction:row;    ("행"기준)
	주석줌
	flex-grow:1;   설명-> 이거하면, 그냥 꽉 채움
	하나만 더 크게 할 수도 있음, 자식꺼에다가 주면됨.     flex-grow:1;
없음	flex-shrink (찾아보기)

 

 

 

 

 

 

 

22. holy grail layout  (들어가서 보기)

성배 레이아웃(holy grail layout)

 

https://opentutorials.org/course/2418/13526

flex - 생활코딩

 

 

 

 

 

 

 

 

23. media query ("반응형디자인"의 핵심 기술이다) - @media  ★★★

 

(1)

설명->화면의크기가 딱 500px이 되었을 때, 배경색을 "red"로 설정합니다.

 

 

(2)

설명->화면의크기가  최대 500px일 때 까지만, 배경색을 "red"로 설정합니다. (500보다 크면 그냥 월래색깔)

 

 

 

 

(3)

설명->화면의크기가  최소 500px일 때 까지만, 배경색을 "red"로 설정합니다. (500보다 작으면 그냥 월래색깔)

 

 

 

(4) 더 작은 구간을 코드 위쪽에다가 적어주어야 합니다.

 

 

 

 

(5)

만약에 "모바일" 상에서도 반응을 보이게 할려면 적어주어야합니다.

 

 

 

 

 

 

 

 

 

24. float 사용법 - (글자들이 사진을 피해가는 방법)

이미지에다가 float를 주면 글자들이 알아서 피해서 출력된다.

 

 

 

 

 

 

 

25. holy grail layout 이런식임... 참고만

결과

코드

(1) 구조 잡고

(2) 꾸미는거

 

 

 

 

 

 

 

26. 다단(multi column, 멀티컬럼)

(1) 그냥 글씨만 있는거

 

(2) 글씨 나눈거

column-count: 2; 

 

 

(3) 글씨 나눈거 - 이쁘게 글씨 나오게(가지런함)

text-align: justify;

 

 

 

(4) 글씨 나눈거 - 이쁘게 글씨 나오게(그냥 column-width크기에 맞게 잘림)

column-count: 2;     <- 주석함

 column-width: 200px 사용함

 

 

창 크기를 줄이면 밑에 그림처럼 됩니다.

 

 

(5) 글씨 나눈거 - 꾸미는거(구분선도 넣을 수 있음)

 

 

 

 

(6) 제목을 안짤리고 초월을 하고 싶으면,

짤린거	적용후

 

 

 

 

 

 

 

 

27. 배경

 

 

 

 

 

 

28. 배경

반복

 

 

 

29. 배경 - 고정

배경 사진 설정한게 스크롤하면 월래 내려와야하는데, 그냥 사진을 딱 고정 시켜버림.

 

 

 

 

30. 배경 - 사진을 다꽉 넣던지, 그냥 잘리던지

 

 

 

 

31. 배경 - 사진 위치 조정

 

 

 

 

 

 

 

32. 필터(filter)

마우스를 이미지 위에 갖다 놓으면

 

 

 

 

 

 

 

 

 

 

33. 혼합(blend) - "원본 이미지"에다가 효과 주는거? 그런거임.

예1)

	순서1 - 일단, 코드랑 결과만 확인하기
이렇게 색깔을 줄 수도 있음.           색깔의 투명도도 줄 수 있음 (rgba)	blend효과를 적용하기 위해서는 혼합할려는 대상들이 있어야합니다. 그것들이 background-color랑 background-image 입니다.     그리고 이것들을 혼합할 때는,  background-blend-mode를 사용하시면 됩니다.       (참고) background-blend-mode 안에는 여러가지 속성이 있습니다.       그리고 background-size의 cover를 사용해서 이미지의 크기를 사각형 크기에 딱맞게 맞쳐줍니다.

 

 

 

 

 

예2) 이건 마우스 올려놓았을 때 변하게하는 방법 (hover)

 

 

 

 

예3) 이건 마우스 올려놓았을 때 변하게하는 방법 (hover)   - 서서히 변하게(transition:background-color)

 

 

 

 

 

예4) 이건 마우스 올려놓았을 때 변하게하는 방법인데,   마우스를 다른곳에 이동하면, 그냥 화면이 너무 딱 색깔이 변하는게 촌스러워보이니깐,   월래 상태되로 돌아 갈때도 서서히 변하게 하고 싶으면 똑같이 transition:background-color 적어주면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

34. transform - 엘리먼트의 크기, 위치, 모양을 변경해주는거

(참고) 여러가지 쓰고 싶으면 옆에다가 계속 써서 적용하면 됩니다.

 

 

 

예1) 해당 글에 마우스를 올려 놓았을 때, 

 

 

 

(참고)https://opentutorials.org/course/2418/13684

 

 

 

 

 

 

 

 

 

 

 

35. SVG파일 - "벡터이미지"를 저장하는 포맷입니다.

 

-설명-

- svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다.

 

 

- 일단, 비트맵, 벡터를 확대 했을 때의 형태

비트맨 vs 벡터

비트맵 확대하면 깨짐         -           벡터 확대하면 안깨짐

JPG, GIF, PNG -> 비트맵 형식

SVG, 일러스트레이터  -> 벡터 형식

 

 

 

-svg파일 안에 내용-

그냥 이런거 안에 있는 거임

(왼쪽이 해당 파일의 이미지임.)

 

 

 

 

-svg파일을 위에처럼 직접 만들어서 사용할 수도 있고, 그냥 외부꺼 퍼와서 사용해도 됩니다.-

 

 

 

 

 

 

 

36. transition - 전환하는 거

 

(참고)

a:hover{  }   ->   마우스를 올려 놓았을 때,

a:active{  }   ->   클릭 했을 때,

 

---

 

transition-property : all   ->    해당하는 엘리먼트에 이것을 넣으면 해당 엘리먼트에 변화가 일어 났을 때, 부드럽게 전환해주는 거 

 

transition-duration: 5s    ->    5초 동안에 전환 하는 거

 

 

(참고)

 

 

---

 

 

 

 

---

 

 

 

코드	기본상태	마우스 갖져다 놓으면

 

 

 

 

 

37. 웹페이지 화면이 서서히 보이게 하는거?