본문 바로가기

WebDev32

[기초]CSS 디스플레이와 포지션 속성(display, position) display와 position 속성은 요소의 배치와 레이아웃에 중요한 역할을 합니다. 각각의 속성들은 요소의 보이는 방식과 위치를 조정할 수 있게 해줍니다. display 속성display 속성은 요소가 웹 페이지에서 어떻게 표시되고 배치되는지를 결정합니다. 주요 값으로는 block, inline, inline-block, none, flex, grid 등이 있습니다.  주요 값 1. block: 요소를 블록 레벨 요소로 표시합니다.특징:항상 새로운 줄에서 시작합니다.전체 너비를 차지합니다.블록 레벨 요소의 예: , , , div { display: block;}  2. inline: 요소를 인라인 레벨 요소로 표시합니다.특징:같은 줄에 다른 요소들과 함께 배치됩니다.width와 height를 설정할.. 2024. 8. 18.
[기초]CSS 박스 모델과 박스 사이징(Box Model, Box Sizing) 박스 모델 (Box Model)CSS 박스 모델은 HTML 요소를 렌더링 할 때 각 요소의 크기와 여백을 계산하는 데 사용되는 개념입니다. 박스 모델은 요소를 네 개의 주요 부분으로 나누어 설명합니다: 콘텐츠, 패딩, 테두리, 여백. 각 부분은 요소의 전체 크기와 레이아웃에 영향을 미칩니다. 구성 요소콘텐츠 영역 (Content Area): 요소의 텍스트나 이미지 등 실제 콘텐츠가 들어가는 영역입니다. width와 height 속성으로 크기를 지정할 수 있습니다.패딩 (Padding): 콘텐츠 영역과 테두리 사이의 내부 간격입니다. 패딩은 콘텐츠 영역을 둘러싸며, 배경색이나 배경 이미지가 패딩 영역까지 확장됩니다.속성: padding-top, padding-right, padding-bottom, pad.. 2024. 8. 16.
[기초]CSS 여백, 패딩, 테두리 스타일(margin, padding, border) CSS에서 여백, 패딩, 테두리는 요소와 그 주변 요소들 간의 공간을 관리하는 중요한 속성들입니다. 이 속성들을 사용하면 웹 페이지의 레이아웃과 시각적 스타일을 세밀하게 조정할 수 있습니다. 여백 (Margin)여백은 요소의 경계와 그 주변 요소 사이의 외부 공간을 의미합니다. margin 속성을 사용하여 설정하며, 단일 속성이나 개별 속성으로 지정할 수 있습니다.  1. 기본 속성margin: 모든 방향의 여백을 한 번에 설정할 수 있는 단축 속성입니다.(값이 4개일 경우 순서대로 시계방향으로 적용)div { margin: 20px; /* 모든 방향에 20px 여백 */}div { margin: 10px 20px; /* 상하 10px, 좌우 20px */}div { margin: 10px 20px.. 2024. 8. 15.
[기초]CSS 배경 스타일(background) CSS에서 배경 스타일을 설정하는 속성들은 요소의 배경을 이미지나 색상으로 꾸미고, 이를 다양한 방식으로 조정하는 데 사용됩니다. 배경 스타일 속성1. 배경 색상 (background-color)요소의 배경 색상을 지정합니다.div { background-color: #f0f0f0; /* HEX 색상 */ background-color: rgb(240, 240, 240); /* RGB 색상 */ background-color: rgba(240, 240, 240, 0.8); /* RGBa 색상 */ background-color: hsl(0, 0%, 94%); /* HSL 색상 */}  2. 배경 이미지 (background-image)요소의 배경 이미지를 지정합니다.div { background.. 2024. 8. 14.
[기초]CSS 링크와 리스트 스타일(link, list) CSS에서 링크 스타일에 대한 정의링크 스타일은 웹 페이지에서 하이퍼링크( 태그)를 다양한 상태에 맞춰 시각적으로 다르게 표시하는 방법을 정의합니다. 링크는 보통 다음과 같은 상태로 구분됩니다.일반 상태 (a:link): 사용자가 방문하지 않은 링크의 스타일을 지정합니다.방문 상태 (a:visited): 사용자가 방문한 링크의 스타일을 지정합니다.호버 상태 (a:hover): 사용자가 마우스를 링크 위에 올렸을 때의 스타일을 지정합니다.활성 상태 (a:active): 사용자가 클릭하여 활성화된 링크의 스타일을 지정합니다.포커스 상태 (a:focus): 키보드로 선택되었을 때 링크의 스타일을 지정합니다.이러한 상태에 따라 색상, 텍스트 장식, 그림자 등을 변경하여 사용자가 링크와 상호작용할 때 시각적인 피.. 2024. 8. 14.
[기초]CSS 텍스트와 폰트 스타일(text, font) CSS에서 텍스트와 폰트 스타일을 설정하는 속성들은 웹 페이지의 텍스트를 시각적으로 더 매력적이고 가독성 있게 만드는 데 사용됩니다. 텍스트 스타일 속성에는 color, text-align, text-decoration, text-transform, text-indent, letter-spacing, line-height, word-spacing, text-shadow 등이 있습니다. 폰트 스타일 속성에는 font-family, font-size, font-weight, font-style, font-variant, font-stretch, font 등이 있습니다. 텍스트 스타일 속성1. color텍스트 색상을 설정합니다.p { color: #333333; /* 색상 코드 */ color: rgb(5.. 2024. 8. 13.

티스토리툴바