푸으름

✏️ 박스 모델 속성종류설명width       박스 모델의 너비를 지정height박스 모델의 높이를 지정box-sizing 박스 모델의 크기를 계산하는 기준을 지정box-shadow박스 모델에 그림자 효과를 추가✏️ 테두리 속성속성설명border-style상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정border-위치-style상하좌우 중 특정한 위치의 테두리 스타일만 지정border-width상하좌우 4개 방향의 테두리 두께 한꺼번에 지정border-위치-width상하좌우 중 특정한 위치의 테두리 두께만 지정border-color상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정border-위치-color상하좌우 중 특정한 위치의 테두리 색상만 지정border-radius상하좌우 4개 방향 꼭짓점을..

✏️ 웹 요소의 위치를 정하는 left, right, top, bottom 속성position 속성보다 먼저 알아 두어야 할 속성들이라고 할 수 있고, position 속성으로 기준 위치를 정한 뒤 요소의 위치를left, right, top, bottom 속성을 이용하여 지정하기종류설명left기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정right기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정top기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정bottom기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정✏️ 배치 방법을 지정하는 position 속성종류설명static문서의 흐름에 맞게 배치, 기본값relative위칫값을 지정할 수 있다는 것을 빼면 sta..

✏️ 배치 방법 결정하는 display 속성display 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능하고웹 문서의 네비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치 가능종류설명block인라인 레벨 요소를 블록 레벨 요소로 변경inline블록 레벨 요소를 인라인 레벨 요소로 변경inline-block인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정 가능none해당 요소를 화면에서 표시하지 않음 ✏️ 왼쪽이나 오른쪽으로 배치하는 float 속성웹 문서를 만들다 보면 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 하는 경우가 발생그러나 요소는 블록 레벨 요소여서 이미지와 나란히 한 줄에 ..

✏️ 요소 주변의 여백을 조절하는 margin 속성마진은 요소 주변의 여백을 의미함, 마진을 이용하여 요소와 요소 사이의 간격을 조절할 수 있음 박스 모델의 4가지 방향에 모두 적용할 수 있고 각 방향 1가지마다 적용할 수도 있음, 이것도 마찬가지로 시계방향기본형 : margin 크기> | 백분율> | auto 종류설명크기>너빗값이나 높잇값을 px나 em같은 단위와 함께 숫자로 표현백분율>박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트로 적용display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 적용✏️ margin 속성으로 웹 문서를 가운데 정렬하기텍스트 요소를 중앙으로 배치할 때는 text-align : center를 사용하는 것처럼 웹 문서 전체를 화면 중앙에 배치하기 위..