니꼴라스 코코아 클론 코딩.

html파일 내부의 head 태그안에서 <style>을 통해 조정하는ㄴ 방법 internal

css파일을 새로 만들어서 head 태그안에 <link href="sytles.css" rel="stylesheet">

적용하면 external 방식

padding : border와 contents 사이의 간견

padding: 20px 10px;  상하 좌우

padding: 5px 10px 8px 20px; 는 상 우 하 좌(시계방향)

margin : border 외부의 간격을 조정

border: width style color;


block 은 크기에 상관없이 옆으로는 아무것도 허용하지 않는다. default 값
display : inline-block; 해주면 옆으로 가능
-박스는 둘중 하나를 선택해줘야한다.

display: inline; 은 텍스트의 값에따라 적용해주는 것

모든박스의 default 값은 position: static;
positon:fixed;는 스크롤 해도 계속 그자리에 따라댕김 고정됬기 때문에.
position:absolute; 는 부모관계 태그에 상응하는 태그를 기준으로 위치를 이동한다.
position:relative; 기준으로 자리잡음(relative가 없는 경우 본문body를 기준으로 이동)

display: flex; 부모태그에만 설정해주면 자식들이 알아서 inline-block처럼 정렬한다.
justify-content :  ; 가로방향으로 설정을 가능하게
align-items:  ;  세로방향을 설정


flex-direction: column; 은 세로방향으로 콘텐츠를 세워줌    row; defualt값 수평

row냐 column이냐에 따라서 justify-content 값과 align-items값이 가로/세로가뒤바뀜

flex-wrap: wrap; 으로 설정해주면 넘치는 부분에 대해서는 다음줄로 넘어감


div>div{$}*10
>는 div안에 div를 만든다 . {}는 div사이의 내용을 넣는다
div(span)
div다음에 span을 만든다( div 안과는 다름)


박스안에 내용을 움직이고 싶으로 그 해당 박스를 display:flex; 해주면 된다.

가상의 selector 해주는법 (해당 input에 class를 설정해 줘도 되지만)
<style> 안에서
input[type="password"] {
background-color : red;
}


box:last-child {}        하면 마지막 박스만 바꿔줄수 있다
box:nth-chiild(2 or 2n+1 or 3n+4) {}    ()의 숫자로 몇번쨰를 바꿀것인가 정할 수 있다.
input + .box {}  는 둘이 형제라는 것
.container > .box {}   직계 자식만 해당함
ex>
<div class="container">
   <div class="box">
       <div class="box chilf"></div>    <--이놈은 직계가 아니다
    </div>
   <div class="box"></div>
   <div class="box"></div>
</div>

.box { background-color: red;}   그리고 써도됨
.box:hover {} 뭔가 위에 올라가면 색이 바뀌거나 지정된 일이 생김
.box:active {} 클릭 햇을경우