💡css박스모델

📌Box model

• border-style: 테두리 스타일 지정
-value: solid dashed dotted double groove inset outset
• border-width: 테두리 두께 지정(주로 px로 넣음)
-value: px % thin medium thick
• border-color: 테두리 색상 지정
value: color
-한번에 여러 테두리 속성을 할당할 때는 다음과 같은 식으로 작성한다. 각 속성을 쓰는 순서는 상관이 없다.

 border: 2px solid blue;

-border 의 디폴트 상태는 none이다. 따라서 border-bottom 이나 border-top을 사용하면 해당 부분에만 border가 생기게 된다. 그냥 border만을 작성하면 상하좌우 모든 부분에 경계가 생긴다.

-border-bottom: none; 을 사용하면 border-bottom이 border를 덮어써서 border-bottome만 border가 사라지게 된다.

• border-radius: 엘리먼트 코너 둥글게 하기
value: px % (%도 꽤 자주 씀)
코너를 개별적으로 둥글게 하는 방법:


border-top-left-radius: px %;
border-top-left-radius: px %;
border-top-left-radius: px %;
border-top-left-radius: px %;

다른 방법:

border-radius: - - - -;

-4가지 값: 좌상->우상->우하->좌하 방향.
-1가지 값: 모든 모서리에 적용
-float-left: box들을 가로배치할 때 사용한다.

📌Margin, padding 속성의 크기 지정

1. 크기 값을 사용하는 경우: 양쪽에 동일한 크기 값이 적용
2. 두 개의 크기 값을 사용하는 경우: 위쪽 및 아래쪽, 왼쪽 및 오른쪽
3. 크기 값 4개: 상, 우, 하, 좌 순서(top, right, left, bottom)

padding, border를 적용함에 따라 너비가 늘어나는 것을 방지하고 싶은 경우:

box-sizing: border-box;

📌그림자 효과

• 속성: box-shadow: inset [offset-x offset-y blur color]
-4가지 요소를 모두 써야함(필수)
-그림자 효과 예시


box-shadow: 5px 5px 20px black;
box-shadow: 0px 0px 20px red;
box-shadow: 10px 10px 0 blue;
box-shadow: inset 0px 0px 100px black;

-inset 값을 주면 shadow가 안쪽으로 퍼진다.
▶️offset-x: 수평 그림자의 offset값(+값이 증가할수록 왼->오 이동하는 것)
▶️offset-y: 수직 그림자의 offset값(+값이 증가할수록 위->아래 이동하는 것)
▶️blur: 그림자 가장자리를 부드럽게 처리하는 정도(기본값 o)
▶️color: 색상 지정
▶️inset: 안쪽 그림자

• 속성: text-shadow: [offset-x offset-y blur-radius color]
▶️text-shadow는 감싸고 있는 박스가 있더라도 텍스트 자체에 shadow를 준다.
▶️offset-x: 그림자의 수평 거리를 정합니다.(필수)
▶️offset-y: 그림자의 수직 거리를 정합니다.(필수)
▶️blur-radius: 흐림 정도를 정합니다. (선택: 값을 정하지 않으면 o)
▶️color: 색상을 정합니다. (t선택: 값을 정하지 않으면 텍스트 색상)
▶️하나의 텍스트에 여러 개의 text shadow를 넣을 수 있다. 단, 두개의 크기가 같으면 중첩되어 보이지 않으니 주의한다.


text-shadow: 5px 5px 0 dodgerblue, 10px 10px 0 red;

▶️text shadow는 inset을 쓸 수 없다.

💡HTML의 인라인요소, 블록요소, 인라인블록 (중요!!)

📌인라인 요소: 텍스트 서식을 만드는 대부분의 요소

• 한 줄에 여러개 배치
• 기본 너비값은 컨텐츠의 너비값
• 크기값을 가질 수 없음
• 상하 마진은 가질 수 없음
• span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio

▶️크기값을 가질 수 없어서 width와 height값을 임의로 설정해도 작동하지 않는다.

📌블록 요소: 레이아웃을 잡는 요소

• 한 줄에 한개만 배치
• 기본 너비값은 100%
• 크기값을 가질 수 있음
• 상하좌우 마진을 가질 수 있음
• div, table, figure, figcaption, header, nav, footer, section, article, aside, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6

▶️기본 너비값이 100%이므로 width: 100%는 따로 넣어줄 필요가 없다.
▶️한 줄에 하나만 배치 가능!!! 두 개가 한 줄에 배치될 수 없다.

📌인라인 블록 요소: 인라인요소와 블록요소의 특징을 둘 다 가짐.

• 한 줄에 여러개 배치
• 기본 너비값은 컨텐츠의 너비값
• 크기값을 가질 수 있음
• 상하 마진은 가질 수 있음
• img, input태그들, button, fontawesome

📌태생과 다른 요소로 변환: display 속성 사용

• display 속성에 주로 사용하는 값: block, inline-block, inline, none, flex
• inline인 a tag를 block 속성으로 강제로 바꿀 수 있음:

  a{
  	color: red;
  	text-decoration: none;
  	border: 1px solid red;
  	display: block;
  	width: 300px;
  	margin:5px;
  	text-align: center;
  	border-radius: 5px;
  	padding: 5px;
  }

  ▶️a tag를 block요소로 바뀌었기 때문에 이제부터는 width와 margin을 얼마든지 넣을 수 있다.
  ▶️버튼을 만들었는데 세 개를 나란히 배치하고 싶다면? : 여기서 display를 inline-block;으로 바꾼다.

💡CSS로 가로 배치하기(float)

📌float 속성

• float속성은 inline/block/inline-block에 모두 적용된다.
• margin-auto는 block요소에만 적용된다. (inline 및 inline-block에는 적용되지 않음)
• css 레이아웃을 하는 경우 부모요소에는 높이값을 주지 않는다. 자식요소에만 주고 자식이 늘어나면 자연스럽게 부모도 늘어난다.
(사진2)
• Float: none; 이더라도 왼쪽으로 배치되었지만 float:left;는 아니다.
• html요소는 기본적으로 위치를 조정하지 않으면 왼쪽에 붙는다.
• 자식요소에 float값을 주면 부모요소가 늘어나지 않는 이유: 자식요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단해 높이값을 잃는다. 높이값을 찾아주려면
  1)부모의 height값을 자식 크기에 맞게 주거나
  2)overflow: hidden; 을 사용한다.
  전자는 자식요소 크기가 바뀔떄마다 바꿔줘야 한다는 단점이 있다.
• span에도 float-left; 등이 적용된다.