21.Oct.04 CSS // 레이아웃 및 박스, 한 줄에 여러 div 올리기-float

1. 네모박스를 넣고 싶으면

  <div> 태그

padding: 값 박스 안의 크기 혹은 여백 설정.

border:값 +(solid/dotted) 색상

  -> solid는 테두리 실선, dotted는 점선.

border-radius : 박스 동그랗게 만들기

background-color: 색상

🌟단순히 div태그만 선언하면 박스가 생성 안된다. width, length, color등을 동시에 선언해주거나, 아니면 글자를 입력해야 박스가 나타난다.

🌟<div>,<p>,<h> 태그 특징 : display:block 이 기본으로 되어있음.

display block이란? 가로 행을 전부 차지하도록 해줘라.(한글 또는 워드에서 그림을 붙여넣을때, display block 이 없으면

그림 옆에 글이 한 줄에 같이 존재 가능. display block이 있을 경우 그 라인에는 그림만 차지함.)

이게 바로 display block 이라고 생각하면 됨 출처: 코딩애플 강좌

inherit(상속) 특정 속성에 대해서 부모 태그가 선언된 속성들이 자식 태그에도 영향을 준다.: e.g. font-size, font-family, color 등

 

박스에 쉐도우 주기!

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

e.g : box-shadow : 2px 2px 2px 1px rgba(0, 0, 0, 0, 2);

<offset-x><offset-y> : 그림자가 생기는 좌표. 값이 커질수록 x는 왼쪽에서 오른쪽으로. y는 아래에서 위로 그림자가 생김.

<blur-radius> : 그림자의 흐린 정도. 값이 커지면 그림자의 범위가 커지고 색이 흐려짐.

<spread-radius> : 그림자의 크기가 커짐. 0이면 원래 요소랑 그림자 크기가 똑같고, 값이 커지면 요소보다 그림자 넓이가 커진다.

<color>: 그림자 컬러 지정

🌟그림자를 복수로 지정할 수도 있다. 

출처 : 코딩 애플 강좌

box-shadow

그림자를 복수로 지정할 수도 있습니다. 

box-shadow: 2px 1px 10px 1px rgba(0,0,255,0.5), -5px -10px 10px 1px olive;

-> 그림자 복수 지정 자료 출처: https://nicecarrot2.tistory.com/130

[html/css] box-shadow로 그림자 넣기.

 

레이아웃 만들기 (1)

Float을 이용하여 container box를 만들어 layout 설정하기

 

*최대 width를 미리 설정해주면 좋긴함.

*width: 100%라고 할시 부모 태그 width의 100%이다. 라고 말하는 것과 똑같음.

 

 

*div 태그의 경우 display: block 이 기본 속성이라 라인 선상에 1개의 Div밖에 오지 못한다. 이런 경우 float 함수를 사용하여 동시에 2개 올 수 있도록 조정 가능함.

float: 해당 div를 붕 띄어서 원하는 위치에 정렬함.

 

display: block 기본 속성으로 div가 한 라인에 두개 동시 들어가지 못하는 상황. 출처: 코딩 애플 강좌

 

float left를 사용하여 div이 같은 선상에 2개 올 수 있도록 조정한 상황 출처: 코딩 애플 강좌

 

가로 선상에 올려야하는 모든 div에 대해 float-left를 선언해줘야 한다.

 

❓그럼 float-right 또는 다른 것들은 속성이 뭘까? float-left와 다른 것들의 차이는?

-> float-right: 오른쪽 정렬. 근데 크게 차이가 없는듯.

 

🌟 float를 쓰게 되면 위에 붕 떠있는 것과 같다. 파워포인트에서 그림을 맨 앞에 배치 하는 것과 같음.

그러면 그 그림 아래에는 글 또는 다른 그림들이 숨어있을수 있잖아?

즉, 해당 코딩 아래 추가로 더 작성하게 될 경우 float 아래 숨겨져 있을 수 있다

❗️해결방법:

float 다음에 오는 요소에게 주면 float로 발생하는 이상한 현상 해결 가능. clear: both

즉, float쓰고나서 다음에 오는 요소는 clear 필수적으로 해주는 것이 좋다!