채워 나가기 HTML, CSS, JS

RN styles

text

1. text-indent 을 이용하여 css로 들여쓰기
   html에서 아무리 space를 눌러도 실제로는 적용되지 않는다.
   따라서 이 css를 사용한다.
   .ti {text-indent: 10px}

etc)
1. blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그로 양쪽 여백을 넣는 기본 스타일을 자동으로 적용
2. html 내용 안에  를 이용하면 space적용이 된다.

table

<td class="gray" colspan="2">Yoga marathon</td>
와 같이 행을 table에서 element를 담당하는 td에서 2열을 담당한다고 선언하는 colspan을 이용해 두군데를 차지할 수 있다. 행은 rowspan을 이용한다.

placeholder

input[type="text"]::placeholder {
  color: red;
}

input중 "text" type을 가지는 것들 중 placeholder을 빨간색으로 한다.

placeholder에는 많은 속성이 있다. 그 안에서 특정한 속성에 대한 css설정은 하고 싶다면 위와 같이 한다.

img

img를 가운데 정렬

img{
  display: block;
 margin: 0px auto;  
}

order

order 속성을 각 요소에 적용할 수 있다.
order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.
배열의 순서와 같이 바꾸는 것이 아니라 나 기준으로 왼쪽(음수) 오른쪽(양수)로 이동

div1	div2	div3

.div3 { order:-1}

div3    div1    div2

Flex

align-self

align-self는 개별 요소에 적용할 수 있는 또 다른 속성
교차축(cross axis) 아이템 정렬하고 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.

flexbox
	box
    
#box {
	align-self:center;
}

flex-wrap

line에 있는 요소들을 정렬하는 방법

nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

flex-flow

flex-direction과 flex-wrap은 같이 쓰이는 경우가 많기 때문에 동시에 표현 가능한 flex-flow를 사용한다.

flex-direction과 flex-wrap의 속성을 넣는다.

flex-flow: flex-direction flex-wrap