css기본문법(너비,높이,글자)

• reset : css를 초기화해주는 문법이다. 다양한 브라우저의 경우 style이 다르게 출력되기 때문에 동일하게 스타일을 만들기 위하여 초기화하고 작성을 해야한다. 일일히 margin:0; padding:0;으로 설정해주기보단 기존의 style을 초기화해주는 것이 좋은데, reset MDN을 검색해서 reset.min.css의 압출파일 경로를 Visual studio code에 입력시 main.css를 연결하는 link보다 위쪽에 입력하여 모두 reset이 되도록 설정해준다.
• codepan에서도 적용 가능한데, css좌측에 톱니바퀴에 설정을 해준다
• emmet문법 = tab키를 이용하여 바로바로 작성이 되도록 설정해준다. 감싸는 방법도 가능하며, 복잡한 문서를 손쉽게 입력가능하다. emmet plug in은 대부분 내장 되어 있기 때문에 코드로 요긴하게 사용가능하다. 

 

단위

• 해상도에 따라서 다르다. px의 단위로 고정시킬 수 있고, %는 부모사이즈의 width에 영향을 받는다.
• em = 자기자신의 font사이즈에 영향을 받는다. 부모요소로 인하여, font-sized이 어려울때 사용을 한다. 
• rem=최고 조상요소인 html의 font-size에 영향을 받게 적용
• vw =뷰포트의 넓이 : 화면전체가 뷰포트 이고 100 단위로 설정가능하다. width:100vw;입력50%로 설정가능
• vh=viewport의 높이 : height:50vh;
• vmin = 뷰포트의 최소넓이: 화면전체의 현재의 더 짧은 것에 대해서 정의함
• vmax=뷰포트의 최대넓이 : 화면전체의 현재의 더넓은 것에 대해서 정의함 
• vmin, vmax =가로 or 세로 2줄을 비교하여  더넓거나 좁은부분을 늘려줌, 백분율 계산으로 그때그때 다름

가로너비와 세로너비의 정의

• width= 가로너비 :속성값은 auto로 기본값이 설정되어 있음, 브라우저의 너비를 계산함, px,em, cm,%,rgn의 단위를 사용함
• height=세로너비 : 속성값은 width와 마찬가지로 auto로 설정되어있음 둘의 요소는 배경색이 없고, 시작 전 항상 reset해준다. 
• block의 경우 div는 height:100%로 설정할 경우 그대로 출력이 가능하나 inline의 요소의 경우 0px로 auto설정이 되어있기 때문에 가로세로의 값을 가질수는 없지만 text의 를 다루는 데 특화가 되어 있어 text에 맞춰서 크기가 달라지기 때문에 auto의 값은 종류에 따라서 달라진다. 
• max-height = 최대 세로 너비를 지정 
• min-height = 최소 세로 너비를 지정
• max-width = 최대 가로 너비를 지정
• min-width = 최소 가로 너비를 지정
• auto로 설정이 가능하며, 요소의 제한선을 둬서 레이아웃 설정이 가능하다. 기본값은 none으로 없다. 

margin =요소의 '외부'를 지칭하는 부분으로 개별과 단축의 사용이 가능하다. 

• auto(브라우저의 넓이)와 %(부모요소의 너비에 맞춰서 )사용이 가능하며, 음수로도 사용가능하다. 
• 4개의 단축의 사용이 가능하다. 
• 4개사용시 margin:위, 우측, 아래, 좌측시계방향으로 작성하면 된다. 
• 3개사용시 margin: 위, (좌우), 아래3단계로 나눠서 입력이 가능하다. 
• 2개 사용이 margin: (위아래) , (좌우) 로 입력이 가능하다. 
• 1개 사용시 margin:20px으로 전체적인 설정이 가능하다. 
• 개별적으로 사용이 가능한데 margin-top ,-bottom ,-right ,-left 작성중 1개나 2개를 적을 때 개별로 입력이 가능하다. 
• 특징:margin중복 (병합) 마진의 특정값들이 중복되어 합쳐지는 현상을 의미한다. 1. 형제요소들의 margin-top과 margin-bottom이 만났을 때 2.부모요소의 top과 top이 만나거나 bottom과 bottom이 만났을 경우 ->bug가 아닌 활용하여 우회하는 방법이 가능하다. 
• ex) margin 2개를 20px을 설정한 경우 가로로 쌓을 경우 값이 더해지기 때문에 40px의 공간이 남게 된다.
• ex) 자식요소의 margin-top은 만나게 되면 부모요소의 margin-top으로 사용하게 된다. 아래의 bottom도 마찬가지이다. 1.margin이 양수로 30px과 10px이 만나게 된다면 더 큰 값으로 중복이 된다. 2. 음수-30px와 음수 -10px이 만나게 되면 적은 값으로 중복이 된다. 3.각각 양수와 음수의 경우 -30px 와 10px의 경우 둘의 값을 더해버려 -20px으로 된다. 

• 

  
  
  

padding = 요소의 '내부'을 설정하는 부분으로 margin과 동일하게 단독, 개별값이 있다. 기본값은 0으로 부모요소의 너비로 비율인 %가 결정된다. 

• 특징 : 요소 내부가 커져서 padding의 값이 커지며 크기가 증가 된다. width: 100px과 height: 100px인 경우 padding의 값을 20px으로 설정하면 크기는 140px의 정사각형의 모양을 갖게 된다. 1. 직접계산 방법과 2. 자동계산의 방법이 있다. 1. 직접계산 방법의 경우 크기가 커지지않도록 계산하여 px을 작성하는 방법이고, 2.자동계산의 경우 box-sizing:border-box 로 설정하여 크기가 커지지않게 content-box가 자동 조절 되도록 계산하는 방법이다. 

boder =요소의 '테두리 선'을 지정한다-> 외곽선, 단축속성이 있다.

border-width	두께 :기본값 (medium(중간))	실선,점선,두줄선 -thin(얇)-think(두껍게)-단위(정확도높음)
border-style	종류	none이 기본값 9가지가 있음
border-color	색상	기본값:black

border: 두께 실선 색상;으로 입력하면 됨.

border-style

1. none:기본값
2. hidden:숨김
3. solid:일반선,실선
4. dotted:점선 ......
5. dashed:파선----
6. groove:홈이파여있는 모양의 선
7. ridge:홈이 솟은 모양으로 groove와 반대의 선
8. inset:요소모양으로 들어간선
9. outset:요소모양으로 나온 선

border-color:선의 색상을 지정 기본값:black의 색상 특징: transparent(투명선)요소의 배경색만 보이고 두께만이 존재하게 설정이 가능함

주의 특징

• 요소의 외곽선이라 늘어나는 경향이 있음 width:100px; height:200px;의 경우 border을 10px;로 설정하였을 경우 총 width:120px; height:220px;로 길어지게됨. 1. 직접계산하여 조절하는 방법이 있고, 2. box-sizing:border-box;로 설정하는 방법이 있음

box-sizing:크기 계산 기준을 지정하는 방법

• content-box = 기본 값으로 너비만으로 요소 계산을 한다.=실제 사용 요소
• border-box = 너비 (width,height)의 안쪽여백(padding)과 테두리선(border)를 포함하여 요소의 크기를 계산한다. 
• padding-box= 브라우저와의 호환서이 떨어진다. =content+padding

display = 요소의 박스 타입(형태)를 설정함

• block의 주요 사용은 div
• inline의 주요 사용은 span
• inline-block의 주요 사용은 input
• inline-block은 base는 inline요소로 수평의 형태로 text성향을 가진다. 가로와 높이를 가질수 있고 , padding과 margin을 가질수 있다. 원래 inline의 요소는 크기나 넓이를 가질 수 없고, block은 수직으로 쌓이는 부분을 호환이 된다. 
• 기타로는 table,table-call,flex등 이있다. 
• display:none의 상태로 변경할 경우 , 화면에 보여주는 것은 없이 요소가 사라지게 설정이 가능하다. 

overflow=요소의 크기 이상으로 내용(자식요소)가 넘쳤을 때 내용이 보여지는 방법을 의미한다. 

• visible = 기본값으로 넘친부분을 자르지 않고 그대로 보여줌
• hidden = 잘라내고 보이지 않게 보여줌
• scroll = 잘라내고 스크롤바를 입력함, 입력은 가로 세로 전부 스크롤을 입력해줌 : 강제 
• auto = 잘라내고 필요한 부분만 스크롤을 입력함 : 자동 
• 입력은 부모에서 입력하여 조절한다. 

justify-content:center; 가로 정중앙에 위치 

align-item:center;세로에 있을 때 정중앙에 위치 두가지의 값을 합치면 글자가 정중앙으로 위치 할 수 있음

opacity = 요소의 투명도를 지정 : 범위는 0~1사이의 소수점으로 입력한다.(0.75 , .75 ,75%)로 입력

• 0은 투명도가 최고, 1은 불투명도가 최고 위치이다.
• 보이지않지만 존재는 있음. display의 경우는 아예 존재자체를 없애는 것
  
  

font =글자관련한 속성들을 지정함 : 개별속성이며, 단축이 있음

• font-style = 기울기
• font-weight=두께
• font-size=크기 
• line-height=줄높이간격
• font-family= 서체

font: 기울기 두께 크기 / 줄높이 글꼴; 순으로 입력한다. 크기와/와 줄높이의 경우 순서가 변경되어서는 안되며, 예의사항으로 작성에 유의하여야 한다. 크기*줄높이 로 표현이 된다

font:  italic bold 20px / 1.5 "arial"(글꼴설정) sans-serif;(없으면 나오는 글꼴)

font의 특징속성으로 나머지는 입력을 안하더라도 font-size와 font-family는 입력이 필수이다. 

font-style = 개별적으로 사용되며 normal이 기본값이다. oblique : 기울어진글자 italic : 이텔릭체

font-weight = 두께 

normal	기본값 숫자로 입력시 400값과 동일함.가중치 입력
bold	두껍게 : 700 값과 동일
bolder	부모요소보다 더 두껍게
lighter	부모요소보다 더 얇게