CSS CSS 정리

[택견꾼]

1.font-weight: 글자의굵기 - 100~900(100-300가늘게, 400-600중간, 700-900굵게

2.

*font-size:16px(기본값) 속상값에 비례해서 결정되는 상대 단위, 정확히 어디에 있는 font-size 속성값인지에 
따라 차이가 발생
em: 해당 단위가 사용되고 있는 요소의 font-size 속성값 기준, 어떤 요소에 font-size 속성이 정의되지
않는 경우 부모의 font-size 값을 그대로 상속
rem: r은 root, 즉 최상위 요소를(html) font-size 속성값 의미

예)
0.5em = 16px x 0.5 = 8px

*em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고
*브라우저의 글꼴 크기를 '작게'에서,'최대 크게'로 조정함에 따라 특정 요소의 font-size를 자동 변경
시에 좋다.

3.

margin: auto: display 속성에 지정한 값에 맞도록 자동으로 크기 조절, 백분율: 박스 모델을 포함하고
있는 부모 요소를 기준으로 % 지정

margin: 0 auto; /*중앙정렬 =  dispay:flex;justify-content:center;*/
==> 안먹힐때
1.<!Doctype ~>선언 확인
2. 가로값이 설정 되어 있는지 확인
3. display: inline 속성이 아닌 block 요소에서만 가능

span에서 먹지 않는다면
display: block과 width값을 설정하던지 아니면 block요소 태그인 
p, div 등을 사용하고 width값을 지정해야 정상 작동합니다.

4.

inline :margin과 padding 속성은 좌우 간격만 반영
nline-block:inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 
및 margin과 padding 속성의 상하 간격 지정이 가능
<button>이나 <input>, <select> 태그

5.

*display기본 속성: display 속성을 설정하면 요소가 표시되는 방식만 변경, 요소의 종류는 변경되지 않음.
예: display:block;을 가지는 인라인요소에는 그 안에 다른 블록 요소를 가질수 없다.

1). block: 항상 새줄에서 시작하여 사용 가능한 전체 너비를 차지함
article, section, ul, ol, table, div, h1-h6, p, form, header, footer

2 ) . inline: 새 줄에서 시작하지 않으며 필요한 만큼 너비를 차지함, 글자를 위한 요소, 속성 부여 하지않고,

부모 block요소에게 타이포그라피 속성 부여 하여 상속 시킴
span, a, img, b

3 ) . list-item : 요소가 <li> 요소처럼 동작, = 특성은 block 과 동일
 li

4) inline-block : width만 보통 부여함, 나머지는 모두 block에게 부여함

6. 선택자

- 속성 선택자

a[title] { }, a[href="https://example.com"]{}

-의사클래스: 요소의 특정 상태 스타일을 지정

hover

-자식 결합자

article > p { } : 직계 자식 선택

-후손 결합자

body article p

.box p {} : box클래스 내에 p 태그만 선택

-인접 형제결합자

 p + img :  <p> 요소 바로 다음에 있는 <img> 요소를 선택

-일반 형제결합자

h1 ~ p : h1 다음에 오는 모든 p 요소 선택(단 형제 들만 해당)

-결합자 사용

ul > li[class="a"] { } : ul의 직계 자식의 클래스명이 A인 모든 li   요소 선택

- 공백 없이 클래스끼리 붙어 있는 경우

.class1.class2{} : 클래스 속성 내에 class1과 class2가 모두 설정된 모든 요소 선택

-쉼표가 있는 경우

element, element2, element3{}

:해당 요소와 일치하는 모든 요소 선택

-공백으로 연결해서 사용

.class1 .class2 .class3 : class1 클래스 내부의 class2클래스 내부 class3 클래스요소에만 스타일 적용

-span#id1{} : span태그 중 아이디가 id1인 요소 선택

-span.class1{} : span태그 중 클래스명이 class1인 요소 선택

7.css 우선순위
-전체(*): 0점
-태그,가상요소:1점
-클래스,가상클래스:10점
-아이디:100점
-인라인스타일:1000점
-!important:10000점

8.

li > 높이는 자식만큼

*브라우저의 초기점(절대좌표)
*부모의 초기점 (절대좌표 또는 상대좌표)
*자신의 초기점: 상대좌표

*inline, block 의높이는 자식 만큼

* margin : 상속되지만, float,absolute,fixed 상황에서는 안됨
*position: relative -> margin이 상속되지 않아 마진으로 여백을 못줄때 사용

- top 등 부여시: 자신의 초기점

- relative 부여시 다른 z-index auto로 변경됨

*position: absolute  > 부모의 초기점으로 감, 이동 가능하다 단 부모에게 position 부여

-  절대 좌표에서 초기점  

- 부모에게 position (relative) 부여시 부모의 초기점에서 움직임

- 자식이 top,left 등 + absolute 인 경우  > 브라우저의 초기점, 단, 부모에게  position 부여시 부모초기점에서 이동

- 자식이 absoulte만 사용하는 경우 부모에게 높이(height) 부여

*빈공간은 주인이 없기에 여백을 활용하여 반대로 이동 가능

*타이포그라피 속성은 글자 관련 span 은 상속됨, %는 사용 못함

*글자크기는 가로기준, 가로가 변경되면 세로는 비율로 변함, 특히 세로 값은 알수 없다, 가로사이즈에 따라 자동 변함

*width, height 사용조건: block, inline-block

*코드 컨벤션 : 영역 , 여백, 배치(positon, top)

*케스케이딩 : 영역 > 여백,배치 > 배경 > 타이포그라피

width/height(영역) > padding > border > margin > position > top,left > 배경 > 타이포그라피(text-align, line-height) >  display

-line-height: 글자 크기 상관없이 중앙 배치

> 실사이즈에 영향을 못주지만, float, absolute, fixed 이면 실사이즈에 영향을 줌, 왜냐면 부정적으로 영향주기 때문

*가상선택자 > display:block: content:"" 뒤에 입력 (코드 컨벤션 순서)

.img_box::before(display:block: content:"";

                            ...

}

*가상선택자 > display:block: content:"";

* display:block: content:"";clear:both;  > float 해제

9. h1 : 로고 이용, h2:본문 제목이용

10:사이즈 계산법

총길이 - 여백개수 * 임의의 여백사이즈)/내용물개수 = 내용물사이즈

11.z-index:auto : 형이 동생을 업는거. 형 요소가 동생 요소에 깔리는 현상이 발생됨.

12. 부모에게 마우스 올리면 자식이 바껴라는 되나, 형에게 마우스올리면 동생이 바껴라는 안됨.

왜냐면 부모 자식 관계가 되기때문에..

13.

position이 있어야만 사용가능한 속성

top/left/right/bottom
+
z-index

14.display:flex

[html/css] display flex 속.. : 네이버블로그 (naver.com)

[html/css] display flex 속성 flex-direction, flw-wrap, justify-content, align-items 사용방법

- flex-grow:부족시 증가 시킬값, flex-shrink: 가로가 넘칠경우 얼마만큼 뺄것인지 (0: 기존 가로폭 유지)

CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해 (apost.dev)

- 자식들 전체 새로 중앙 정렬: align-items: center;

15. 상속: 부모의 속성을 자식에게 그대로 물려 받을수 있다.

- 타이포그라피 속성 상속은 최 하위 block 요소에게 부여 하여 상속 시킴

- div > h1 > a > img 구조에서는 div 태그에 타이포그라피 속성 부여 해서 상속 가능함

(h1 태그는 제목이라 글자이기 때문에 부모인 div 태그에 부여 해도 상속됨, 즉 태그마다 상속은 다름.)

- h1,h2 태그에 타이포그라피 속성을 부여하면 태그마다 상속이 또 달라지기 때문(?, 정확히는 이해 안감.ㅠ.ㅠ)

- 정리하면, 보통 타이포그라피 상속은 div, li 에게 부여 해서 상속 시킨다 보면됨.

-상속 가능한 속성:타이포그라피 속성

. font-family
· font-size
· font-weight
· line-height
· visibility
· opacity
· color
· text-align
· white-space
· list-style

-상속 불가능 태그

· margin
· padding
· border
· box-sizing
· display
· background
· vertical-align
· text-decoration
· top/bottom/left/right
· position
· overflow
· width/height

16. article

-본문의 단락일 경우 사용

예:

가.이미지 나열시 상품 카테고리별로 나열시

: 만약 마우스 오버시 레드,그린,블루 등 색깔별로 상품 나열시 에는 ul > li 사용 가능

나.

베스트 상품 나열

신상품 상품 나열

17.wrap: width100% 주는 이유

하위 자식중 absoulte, fixed 인 경우 가로크기는 자식이 존재하는만큼 변화기 때문에, 가로 사이즈 100% 줌

(float  > clear로는 해결 안됨)

(flex인경우에는 크게 문제없음,)

17-1.position: fixed + width:100% + top:0  > fixed 때문에 가로크기가 줄어들어서 width 값을 부여 해줘야되며,

line-height 부여 했던 수치가 일부 적용 안됨.

header > ul > li > 텍스트 가 형태에서는 텍스트가 보일 정도로 상단으로 위치이동되어 top:0을 부여해야됨.단, header에

fixed 부여한 경우에 최상단에 붙어서 고정되는 경우만 해당

*aside에 fixed를 부여하는 경우 left:0; right:0 를 부여, 단 좌/우에 붙어서 고정되는 경우

즉,  정리하면

브라우저 기준에서 고정적인 fixed를 사용하는 경우
top/left/right/bottom을 사용한다.

**position:fixed는 자신의 자리를 지키지 않는다!(요소 마다 이유가 다달라서 외우기 어려움.)
-> 부모의 초기점!!으로  -> 자신의 초기점을 변경 함,
단 자식들이(  li > 텍스트 ) 넘어가지 못하는 공간까지 이동됨.!!

18. 정렬

- 영역을 중앙 정렬시에는 margin: 0 auto;

- 이미지를 중앙 정렬시에는 text-align:center;

- 중앙에 있는 로고이미지를 왼쪽에 두고 싶을때에는 

반응형에서 media 쿼리로 로고 영역에 가로값을 부여 하면 왼쪽 정렬이 됨.