css_study_d2

블록 레벨 요소 사용하기 |

블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킵니다.
해당 요소의 너비가 100%라는 뜻으로 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
블록 레벨 요소를 만드는 대표적인 태그로 <h1>, <div>, <p> 등이 있습니다.

인라인 레벨 요소 |

인라인 레벨 요소는 한 줄을 차지하지 않습니다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.
인라인 레벨 요소를 만드는 태그로 <span>, <img>, <strong> 등이 있습니다.

박스 모델의 기본 구성 |

박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다.

박스 모델 너비 지정하기 |

콘텐츠 영역의 크기를 지정하는 width, height 속성

박스 모델에서 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용합니다.
width와 height의 속성값
| 종류 | 설명 |

| ——– | ——– |
| <크기> | 너비나 높이의 값을 px이나 em 단위로 지정합니다. |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정합니다. |
| auto | 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다. |

박스 모델의 크기를 계산하는 box-sizing 속성 |

box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에서 선택할 수 있습니다.
box-sizing의 속성값
| 종류 | 설명 |

박스 모델에 그림자 효과 주기 |

박스 모델에 그림자 효과를 주는 box-shadow 속성

box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
Copy

box-shadow의 속성값
| 종류 | 설명 |

박스 모델의 테두리 스타일 지정하기 |

테두리 스타일을 지정하는 border-style 속성

border-style의 속성값
| 종류 | 설명 |

박스 모델의 테두리 두께 지정하기 |

테두리 두께를 지정하는 border-width 속성

border-width: <크기> | thin | medium | thick
Copy

만일 테두리 두께를 4개 방향 모두 다르게 지정하고 싶다면 border-top-width, border-right-width…처럼 border와 width 사이에 상하좌우 방향을 넣고 하이픈(-)으로 연결합니다.

박스 모델의 테두리 색상 지정하기 |

테두리 색상을 지정하는 border-color 속성

border-color 속성을 사용해서 4개 방향의 테두리 색상을 한꺼번에 지정할 수도 있고, border-top-color처럼 border와 color 사이에 테두리 방향을 넣어 주면 색상을 하나씩 지정할 수도 있습니다.

테두리 스타일 묶어서 지정하기 |

테두리 스타일 묶어 지정하는 border 속성

4개 방향의 테두리 스타일을 다르게 지정하고 싶다면 border-top이나 border-right처럼 속성 이름에 방향을 함께 써서 따로 지정하면 됩니다.
4개 방향의 테두리 스타일이 같다면 간단히 border 속성만 사용하면 됩니다.
이때 테두리의 두께와 색상, 스타일의 속성값 순서는 상관없습니다.

이미지의 꼭짓점을 둥글게 표시하기 |

둥근 테두리를 만드는 border-radius 속성

border-radius: <크기> | <백분율>
Copy

border-radius 속성을 사용하면 박스 모델 꼭짓점 부분에 원이 있다고 가정해서 둥글게 처리합니다.
border-radius 속성값
| 종류 | 설명 |

| ——– | ——– |
| <크기> | 반지름 크기를 px, em의 단위와 함께 수치로 표시합니다 |
| <백분율> | 현재 요소의 크기를 기준으로 비율(%)로 지정합니다. |

이미지를 원형으로 표시하기 |

이미지 요소의 너비와 높이를 똑같이 만든 후 border-radius의 반지름값을 너비나 높이의 50%로 지정하면 이미지를 원 형태로 만들 수 있습니다.

원하는 꼭짓점만 둥글게 처리하기 |

꼭짓점마다 따로 둥글게 처리하기

박스 모델에서 꼭짓점 4개를 모두 다르게 지정하고 싶다면 border와 radius 사이에 위치를 나타내는 예약어를 넣어 사용합니다.

margin 속성으로 여백 설정하기 |

요소 주변의 여백을 설정하는 margin 속성

margin: <크기> | <백분율> | auto
Copy

4개 방향에 한 번에 똑같이 지정할 수도 있고, margin 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있습니다.
margin 속성에 값이 여러 개라면 top, right, bottom, left 순으로 값이 적용됩니다.
margin 속성값
| 종류 | 설명 |

| ——– | ——– |
| <크기> | 너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정합니다. |
| <백분율> | 박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정합니다. |
| auto | display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다. |

웹 문서 전체를 웹 브라우저 화면 중앙에 배치하기

마진 속성을 사용하여 웹 문서를 가운데 정렬하기

우선적으로 배치할 요소의 너빗값이 정해져 있어야 합니다.
margin-left와 margin-right의 속성값을 auto로 지정합니다.
CSS는 웹 브라우저 화면의 너비에서 요소 너빗값을 뺀 나머지 영역을 좌우 마진으로 자동 계산합니다.

마진 중첩 이해하기 |

마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는데, 이 현상을 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 합니다.

다양하게 패딩 지정하기 |

콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.
padding 속성으로 4개 방향의 마진을 한꺼번에 지정할 수도 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어 top, right, bottom, left를 사용해서 특정 방향에만 지정할 수도 있습니다.

수평 내비게이션 만들기 |

배치 방법 결정하는 display 속성

display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있습니다.
display 속성값
| 종류 | 설명 |

텍스트 왼쪽에 이미지 배치하기 |

왼쪽이나 오른쪽으로 배치하는 float 속성

float 속성값
| 종류 | 설명 |

플로팅 해제하기 |

float 속성을 해제하는 clear 속성

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달됩니다.
clear 속성으로 float 속성을 해제할 수 있습니다.
clear 속성값
| 종류 | 설명 |

텍스트 요소 자유롭게 배치하기 | p.280

웹 요소의 위치를 정하는 left, right, top, bottom 속성

종류설명

left	기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정합니다.
right	기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정합니다
top	기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정합니다.
bottom	기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정합니다.

position 속성으로 요소 위치 지정하기 |

배치 방법을 지정하는 position 속성

position 속성은 웹 문서 안의 요소를 자유자재로 배치해줍니다.
position 속성값
| 종류 | 설명 |

배경색과 배경 범위 지정하기 |

배경색을 지정하는 background-color 속성

16진수나 rgb값 또는 색상 이름을 사용해서 지정합니다.

배경색의 적용 범위를 조절하는 background-clip 속성

background-clip의 속성값
| 종류 | 설명 |

배경 이미지 지정하기 (1) |

웹 요소에 배경 이미지를 넣는 background-image 속성

background-image: url('이미지 파일 경로')
Copy

파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고 http://로 시작하는 절대 경로를 사용할 수도 있습니다.

배경 이미지 지정하기 (2) |

배경 이미지의 반복 방법을 지정하는 background-repeat 속성

background-repeat의 속성값

종류설명

repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복합니다. 기본값입니다.
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복합니다.
repeat-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복합니다.
no-repeat	한 번만 표시하고 반복하지 않습니다.
배경 이미지의 위치를 조절하는 background-position 속성

background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
Copy

배경 이미지 지정하기 (3) |

배경 이미지의 적용 범위를 조절하는 background-origin 속성

background-origin의 속성값
| 종류 | 설명 |

배경 이미지를 고정하는 background-attachment 속성

background- attachment의 속성값
| 종류 | 설명 |

배경 이미지 지정하기 (4) |

background 속성 하나로 배경 이미지 제어하기

앞에서 설명한 배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할 수 있습니다.

배경 이미지 크기를 조절하는 background-size 속성

background- size의 속성값
| 종류 | 설명 |

방향을 사용해 선형 그러데이션 만들기 |

선형 그러데이션

linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ......]);
Copy

그러데이션 방향을 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용합니다.
to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있습니다.

각도를 사용해 선형 그러데이션 만들기

각도는 선형 그러데이션에서 색상이 바뀌는 방향을 알려 주는 방법입니다.
각도는 그러데이션이 끝나는 부분이고 값은 deg로 표기합니다.

선형 그러데이션의 색상 중지점 지정하기 |

2가지 색 이상의 선형 그러데이션을 만들려면 색상이 바뀌는 부분에 색상 중지점을 지정해 주어야 합니다.

원형 그러데이션의 모양 지정하기 |

원형 그러데이션

radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ......])
Copy

원형 그러데이션은 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다.
원형 그러데이션에서 만들어지는 모양은 **원형(circle)**과 **타원형(ellipse)**입니다.
모양을 따로 지정하지 않으면 타원형으로 인식합니다.

위치 키워드를 사용해 원형 그러데이션 만들기 |

at 키워드와 함께 지정하면 그러데이션이 시작하는 원의 중심을 다르게 나타낼 수 있습니다.
위치 속성값은 키워드(left, center, right 중 하나 또는 top, center, bottom 중 하나) 또는 백분율을 사용합니다.

원형 그러데이션의 색상 중지점 지정하기 |

원형 그러데이션에서 색상이 바뀌는 부분을 색상 중지점이라고 합니다.

그러데이션 반복하기 |

그러데이션을 사용한 패턴 만들기

선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하고, 원형 그러데이션을 반복할 때는 repeating-radial-gradient를 사용합니다.

그러데이션을 사용해 패턴 만들기 |

그러데이션을 반복해서 패턴을 만들 때는 각 색상 중지점의 위치를 적절하게 조절해야 합니다.

<출처 & 공부한 사이트>

https://academy.elice.io/courses/7739/info

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스

한 권으로 끝내는 웹 기본 교과서

academy.elice.io

'학부생나부랭이 > _web_programing' 카테고리의 다른 글

css_study_d4_정리 (0)	2022.01.18
css_study_d3_정리 (0)	2022.01.14
css_study_d1_정리 (0)	2022.01.04
혼자 끄적여 본 html (0)	2022.01.03
html_study_d2_정리 (0)	2022.01.03

css_study_d2_정리