공부일기 셋째날

오늘은 css 속성에 대해 정리하면서 다시 한번 복습해보고자 한다.

css 속성

너비

너비:요소의 가로 세로 너비를 지정해주는 속성
width,height
기본값:auto 단위:px,em,vw %등 단위로 지정
여기서 vh=화면 세로 vw=화면 가로 100vw는 화면의 가로 넓이 100vh 화면의 높이
width:가로 
height:세로
말 그대로 요소의 크기를 지정해주는것이다.
나중에 정리할 padding 속성이랑 이용해서 재밌는 기능을 하나구현할수있다.

예를들어 부모요소에 padding-right를 먹이고 자식한테 wdith100%를 주게되면
로그인창이 오른쪽에서 살짝 밀린 내가 원하는 위치에 조정이 가능하다

max-width, max-height
기본값:none 단위:px,em 등 단위로 지정
말그대로 max 최대치다 
이 속성은 width,height를 무시한다.
예를들어 width:700px; max-width:500px;을 주게되면
이 요소는 500px의 크기까지밖에 가지지 못한다.
모든 기계들의 화면이 다르기 때문에
요소의 크기가 내가 생각한것 이상으로 너무 커질수있기 때문에 
max값을 먹여서 크기를 조절할때 쓰이는 속성이라고한다.
반응형 웹을 디자인할때 많이 쓰인다고 하는데 나는 아직 사용하지 못해봤다.
많이 사용해봐야지 나도 이해하고 그럴텐데 앞으로 사용하는날이 오면 꼭 잊지않고 잘 사용해야지

min-width ,min-height
기본값:none 단위:px 등등 단위로 지정
이또한 말그대로 min    max의 반대다 
뭐 말로는 min은 스마트폰 크기로 시작해서 점점 넓힌다는데 사실 적용해보지 않아서 잘 모르겠다.
max min 둘다 반응형 웹을 작성하는 날이 오면 나는 아마 한번에 이해할것이다.
왜냐하면 이론적인 부분에서 이해를 했기때문에 큰 걱정은없다

외부여백 ,내부여백

이제부터 아주 중요해진다. 근데 어렵진않다 걱정은 하지 않아도된다.
margin 요소의 외부 여백을 정하는 속성 (음수 사용가능)
기본값:0(외부여백x) auto:브라우저가 여백계산(가운데정렬) 단위로 지정
margin 값은 부라우저가 외부의 여백을 주는건데 
쉽게 얘기하자면 외부를 밀어낸다?의 개념 외부에 보이지않는 공간이 생겨 그만큼 밀리는 느낌이다.
그리고 이건 내가 글로 설명하기 힘들어 사진 한장 띄운다.
margin 값을 하나주면 전체 두개주면 상하,좌우
마진값을 세개주면 상,중,하 마진값을 네개주면 위,오른쪽,아래,왼쪽
그리고 마진의 한방향만 주는 속성들이있다.
margin-top , margin-bottom ,margin-left ,margin-right

padding 요소의 내부여백을 정하는 속성
기본값:0(내부여백x) 단위로 지정
근데 여기서 의문 내부여백이 뭔데 하면 쉽게 설명해주겠다.
내부여백 즉 content-box라는게 핵심 내용이고 그 윗부분인데
다시한번 쉽게 얘기하자면 그냥 안에다가 크기를 줘서 크기가 커진다 생각하면된다.
내가 padding을 사용할때는 주로 부모 요소에 패딩을 먹여서
자식요소의 위치를 배치 시킬때 사용했다.
padding도 마찬가지로 위에 사진과 같은 느낌이다
top bottom right left 다있고 똑같다.
근데 여기서 하나 기억해야할것이있다.
내가 아직 실력이 부족해서 그런지 모르겠지만 
나는 큰 틀은 flex 먹여서 위치 지정하고 나머지는 
다 margin padding으로 배치했다.
즉 내가 이해한 개념으로는 margin padding는 배치!!!!! 
요소 배치!!!! 
근데 내가 더 잘해져서 상위개념을 배우면 그때 글 고치겠다.

테두리

border 요소의 테두리선을 지정하는 속성
border: 선두께(width),선종류(sytle),선색상(color);
        기본값:medium  기본값:none   기본값: black
thin,thick근데 사용x단위로지정 solid으뜸(실선)   색상지정
이렇게 세개를 한번에 적용할수있는데 각각 개별 속성으로도 사용 가능하다.
border-width  border-style  border-color  
그리고 이 개별 속성에 또 margin padding처럼 top bottom right left만 따로 먹여줄수있다.
위의 개념을 충분히 이해한다면 사실 그렇게 어렵지 않다.
border도 요소의 테두리선이기때문에 두께가 두꺼워 질수록 크기가 커진다.

border-radius 테두리 둥글게 만드는 속성
기본값:0(둥글게 없음)   단위 지정
테두리를 둥글게 깎아버린다. 우리가 자주보는 인스타그램 로고가 대표적이다
네모난 상자에다가 border-radius: 20px; 뭐 이렇게 값을 먹여서 깎은것이다. 크게 어려울건없다. 다만 하나 기억할껀
이것도 값을 따로 먹일수있는데
border-radius: 0 10px 0 0;
순서대로 왼쪽꼭지점 오른쪽 오른쪽아래  왼쪽아래
이렇게 가는것만 기억하자 시계방향

크기계산 border box

오늘의 으뜸 주제다.
위에것을 다 배워도 이걸 모르면 진짜 바지에 오줌싸버리는거랑 똑같다. 라고 볼수있다.
내가 그린그림보다 오히려 이게 훨씬 이해하기 좋을꺼같아서 이미지 따왔다.
내가 위에서 설명한 모든 개념 이 들어가있다.
content를 padding 이감싸고 그위에 border 그위에 margin
근데 여기서 하나 배워가야 할 중요한 개념하나

box-sizing 요소의 크기 계산 기준 지정
기본값 content-box 요소의 내용으로 크기계산
전체 크기=content-box +border+ padding+ margin
컨텐츠 크기=content-box
대략 이렇게 생각하면 편하다
border-box 요소의 크기가 지정한 크기로 딱 유지됨
크기를 계산하려면 내가 어떤 값을 얼만큼 줬는지 양쪽에 더하고 이것참;;
그럴땐 border-box 를 먹여버리면
내가 정한 width hieght크기로 유지되면서 내가 준효과까지 한방에!!
그래서 크기조절이 편해서 난 아주 많이 애용한다.

원래 속성이 참많고 오늘 다 정리 할려고했는데
너무 졸려서 도저히 못하겠다.
생각보다 javascript가 정말 양이 말도 안되게 많고 너무 어려워서
하루종일 공부해도 참 쉽지가 않았다.
참 세상 야속하다.
부트캠프라는곳에 왔는데 뭔 공부를 다들 그렇게 하고왔는지
나도 하고왔어야하는데 사정이 그러질 못해서 남들 반이라도 쫓아갈려고
진짜 노력하는데 참 마음은 급하고 이해는 잘안가고 진도는 못나가고 ㅋㅋㅋㅋㅋ
내생각엔 css 속성은 아마 3~4일 정도 에 나눠서 정리할꺼같다.
매일 자기전 한시간은 복습한다 생각하고 블로그에 복습겸 개념정리하고 자면 참 기분이가 좋다.
글로 정리를하다보니까 내가 모르는 부분도 다시 찾아보게되고 정리하고 공부하고 좋다.
이제 인스타 사진찍고 올리는거보다 벨로그 글쓰고 일기쓰는게 더 재밌다.
이번주를 무리했는지 오늘 면허 시험도 못보러갔다.
하루 시작이 아주 그냥 좆같았다
면허는 30에 따는걸로 잠시 미뤄둬야지
html css는 진짜 딱 2일 공부하고 3일째 정리 싹하고 외울꺼외우고 가능했는데
와 javascript 이거는 외우는개념이아니라 진짜 시간을 많이 써야겠더라
평생 공부 한번 안하고 술먹고 그러다가 뇌 다 망가져서 굳어버린상태로 공부할려니까 쪼금 버겁다.
근데 나름 재밌기도하다 막히다가 딱 풀어버리거나 내가 모르는개념들을 어느순간 갑자기 그냥 부처님스타일로 깨달음이 띠용하고 와버릴때 기분이가 좋다.
그 이번에 유튜브로 유행하는 게임 벰파이어 서바이벌 파이썬으로 만들었다는데
그 양반 그거 돈 쓸어담았겠지 하면서 나도 미래에는 자바스크립트도 마스터하고 타입스크립트도 마스터하고 리액트 뷰 마스터하고 프론트엔드의 신이 되면 파이썬 장고도 하고 그러면 좋겠다.
오늘도 알차게 열심히 공부 잘했고 내일도 빠이팅하자
한남동 가는 그날까지 공부일기는 계속된다.