React css,태그속성 메모장

tip

.className #idName tagName name tagname

표기법순서

{
    margin
    border
    padding
      ...
}

---

위치관련

position

기본값 : static

top , left , right , bottom 은 position값을 주어야만 사용가능한걸로 알고있다
z-index 라는 css의 레이어(겹쳤을 때 뭐가 앞으로 보여질지에대한 순위지정)를 설정할 때도 position값을 주어야한다.

relative

현재 위치(본인기준)를 중심으로 조정이가능하게 되며 , 부모태그의 영향을 받지않게됨 , 원래위치에서 자유롭게 벗어날 수 있게 됨
top,left 조정가능 / bottom,right 조정불가(상위기준이 없기 때문에)

absolute

배치기준이 상위요소(position:static이 아닌 것)가 됨 → 상위요소의 좌측상단에 붙음
top,bottom,left,right 전체 사용 가능

sticky

지정된 위치에 있다가 스크롤해서 해당요소가 안보일 때 부터 따라다님

fixed

화면을 움직이더라도 해당위치에서 절대 벗어나지않음

inherit

부모요소 속성값을 상속 받음

display

기본값 : block

none

화면에서 사라짐 (말그대로)

block

div가 갖게되는 기본값 ( width가 자신의 요소 100%되게 하는 것 )

inline

컨텐츠를 감쌀정도로만 되는 것 → span,label 태그의 기본값임

inline-block

span,label 태그도 한블록을 먹게 됨

flex

주축이 바뀐다 div의 경우 블록레벨로 아래로 쌓였으나,
지정하는 순간해당요소를 flex-container라고 지정하여
자식요소들이 flex-item이 됨
flex-direction:row가 기본값으로 설정되어있어 주축의 방향이 바뀐다
(아래로쌓이던게 옆으로 쌓임)

주축

row 좌측에서 우측으로 진행
column 좌측상단에서 하단으로 진행
row-revers 우측에서 좌측
column-revers 하단에서 상단

태그 위치

justify-content: space-between

주축을 기준으로 설정
flex-direction:row 일 경우 수평정렬이 됨

align-items

교차축을 기준으로 설정
flex-direction:row 일 경우 수직정렬이 됨

content, items

content : 큰 묶음
items : 작은 묶음

flex-grow

자식요소에 써야하며 부모요소의 공간에비례하여 채운다
height로 값을 지정해버리면 창이 늘어나도 변하지않지만 이걸 사용하면 반응형웹처럼 사용가능

text-align

start || end || left || right || center || justify || match-parent
컨텐츠를 움직이는 요소

line-height

글의 높이지정

transform

본인 기준(좌측상단 꼭짓점)에서 위치이동이 가능함
position과 주로 같이 쓰이며, 수평정렬에 용이하다

	position : absolute || relative
	top: 50%;
	transform: translateY(-50%);

---

이벤트관련

transition

이벤트 발생시 약간의 딜레이를 설정하여 요소에 애니메이션효과를 주는 것

---

태그별

ul , li

셀형태로 배치할수도있고(이미지나열), 리스트형태로 보여줄 수 있음

list-style-type

none : 리스트 태그의 점을 없앰

button

tag type : submit , button , reset ...
기본값 : box-shadow,active 값이 있어서 누를 때 효과가 있음

text-decoration

underline : 밑줄
overline : 윗줄
line-through : 취소선

&:hover

버튼 밝게 & 어둡게하기

본문태그 값 주기전 → filter : brightness(기본값:1)
hover → filter : brightness(밝게+,어둡게-)

input

tag type : text , password , checkbox , radio ...
기본값 : border 1px solid가 이미 적용 되어있음 ?
label의 for와 id를 맞춰주면 label을 클릭하여도 선택이 됨
radio의 경우 요소의name을 맞춰주면 묶인다

value

기본적으로 value값을 설정해놓으면 수정이 불가함
defaultValue로 설정해놓으면 수정가능함

checkbox

<div class="form-check form-switch">
	<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"></input>
	<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

npm , css

npm i react-bootstrap bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

---

css변수 (root 전역변수)

---