🎨 [UIUX] 1128 CSS Coding, 코딩 기초 2

✏️ 2024. 11월 28일 / CSS 언어, 코딩 기초 2

✨ CSS 언어 기초 - css box model
✖️

block 속성을 가진 태그들은 넓이와 높이를 가질 수 있습니다.
이렇게 박스의 넓이와 높이가 생겼을 때 컨텐츠를 배치하고 레이아웃을 설정할때 css box model을 사용합니다.
css box model에서는 컨텐츠를 여유롭게 보여주는 padding 영역과
border(테두리)영영과 컨텐츠와 컨텐츠 사이에 여백을 넣어주는 margin영역이 있습니다.

☁️ padding : 안쪽 여백
✖️
컨텐츠의 바깥부분에 생기는 여백으로 박스의 안쪽으로 빈 공간을 넣어 컨텐츠를여유롭게 보여주는 역할을 한다.
padding에 값을 1개만 적을 경우 박스의 상하좌우에 동일한 px만큼 여백이 설정된다.
👻[기본형]
padding-left : 왼쪽에만 지정된 값만큼 안쪽 여백을 적용합니다.
padding-right : 오른쪽에만 지정된 값만큼 안쪽 여백을 적용합니다.
padding-top : 위쪽에만 지정된 값만큼 안쪽 여백을 적용합니다.
padding-bottom : 아래쪽에만 지정된 값만큼 안쪽 여백을 적용한다.
만약 상하좌우에 값을 각각 한 번에 적용하고 싶다면 아래와 같이 씁니다.
값을 한 번에 4개를 써서 선언할때에는 공백으로 구분하고 값1(top의 자리)부터 시작하여 시계 방향으로 적용됩니다.
값을 한 번에 2개를 써서 선언할때에도 공백으로 구분하고 값1은 상하, 값2는 좌우의 자리가 됩니다.
👻[기본형]
padding : 값1 값2 값3 값4;
=> top right bottom left;
padding : 값1 값2;
=> top/bottom left/right;

☁️ 박스의 단위
✖️
넓이 또는 높이를 적용할 때 기본적으로 px단위를 이용하지만 %를 이용하기도 합니다.
- px : 고정단위 / 브라우저의 넓이나 높이가 달라지더라도 늘 고정된 사이즈를 보여줍니다.
- % : 상대단위 / 브라우저의 넓이나 높이 또는 부모박스 크기가 달라지면 안에 있는 박스도 같이 줄어들거나 늘어납니다.
- auto : 박스 형태의 넓이와 높이 값을 컨텐츠 양에 따라 자동으로 결정되며 기본값입니다.

☁️ 테두리 속성
✖️
테두리에 관련된 속성은 block 속성을 가진 모든 태그에 사용할 수 있습니다.
테두리 속성은 테두리 두께(border-width),테두리 스타일(border-style),테두리 색상(border-color)을 테두리 속성이라고 하며
이중 하나라도 없으면 브라우저에 테두리가 나타나지 않습니다.
테두리 스타일
1. none ★ : 테두리가 나타나지 않습니다. 기본값.
2. hidden : 테두리를 나타내지 않습니다.boder-collapse가 collapse로 설정되어 있을 경우
다른 테두리도 표시하지 않습니다.
3. dashed △ : 테두리를 직선 형태의 점선으로 표시합니다.
4. dotted △ : 테두리를 도트 형태의 점선으로 표시합니다.
5. double : 이중 실선으로 테두리를 나타냅니다.
6. groove : 테두리를 입체적으로 보여줍니다. (입체)
7. inset : 테두리를 안쪽으로 들어간 액자처럼 보여줍니다. (입체)
8. outset : inset의 반대 모양으로 나타냅니다. (입체)
9. ridge : 테두리를 창에서 튀어나오는 것처럼 보여줍니다. groove의 반대모양. (입체)
10. solid ★ : 테두리를 실선으로 나타냅니다.
👻[기본형]
1. border : 두께 스타일 색상;
-> 박스 사방에 동일한 테두리를 적용합니다.
2. border-top : 두께 스타일 색상;
-> 박스의 위쪽에 테두리를 적용합니다.
3. border-bottom : 두께 스타일 색상;
-> 박스의 아래쪽에 테두리를 적용합니다.
4. border-right : 두께 스타일 색상;
-> 박스의 오른쪽에 테두리를 적용합니다.
5. border-left : 두께 스타일 색상;
-> 박스의 왼쪽에 테두리를 적용합니다.

☁️ border-radius : 박스를 둥글게 만드는 속성
✖️
UI요소를 디자인 할 때 박스의 모서리를 둥글게 디자인 하는 경우가 있습니다
이때 border-radius속성을 이용하면 박스를 둥글게 만들 수 있습니다.
👻[기본형]
border-radius : 숫자px 또는 %;
border-radius를 각 모서리마다 다른 값을 주고 싶을 때 값을 4개로 나눠 적용합니다.
⛄
첫번째 값은 왼쪽 상단 모서리(top-left)를 시작으로 시계방향으로 적용됩니다.
👻[기본형]
border-radius : 값1 값2 값3 값4;
⛄
border-radius의 값을 두개로 나눠 적을 경우 앞에 있는 자리는 왼쪽 상단-오른쪽 하단의 자리이고
두번째 자리는 오른쪽 상단 - 왼쪽 하단의 자리로, 대각선으로 둥글기가 적용됩니다.
👻[기본형]
border-radius : 값1 값2;

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)