어제 오늘 내일

와 의 차이  div와 span은 HTML에서 내용을 묶거나 스타일을 적용하기 위해 사용하는 태그입니다.하지만 두 태그의 역할과 사용 방법이 다릅니다. 1. 기본 차이점  역할블록 요소 (Block-level Element)인라인 요소 (Inline Element)사용 용도주로 레이아웃 구성 및 큰 덩어리 묶음텍스트 내부 또는 작은 부분 스타일 적용디스플레이 특성한 줄 전체를 차지하며 줄 바꿈 발생줄 바꿈 없이 콘텐츠 주변에만 적용CSS 적용width, height, margin, padding 등 적용 가능width, height 적용 불가, margin, padding 일부 제한 2. div 태그블록(Block-level) 요소로 한 줄 전체를 차지합니다.자동으로 줄 바꿈이 되어 다음 요소는 아래쪽에..

CSS로 와 사이 간격 조정하기  div와 div 사이의 간격을 조정하는 방법은 여러 가지가 있습니다.주로 CSS의 margin, gap(flexbox, grid) 속성을 사용합니다.  1. margin 사용하기가장 일반적인 방법으로, margin을 사용하여 두 div 사이의 간격을 조정할 수 있습니다. 첫 번째 박스두 번째 박스.box { background-color: lightblue; padding: 20px; margin-bottom: 20px; /* 아래쪽에 20px 간격 */}   margin-bottom: 20px;  아래쪽 간격을 조정합니다.margin-top, margin-left, margin-right 등을 사용해 각각의 방향에 간격을 줄 수 있습니다. 2. fl..

HTML에 외부 CSS 파일 불러와서 적용하기 HTML에서 외부 CSS 파일을 불러오려면 태그를 사용합니다.이 태그는 보통 외부 CSS 불러오기 예제   href 속성에 외부 CSS 파일의 경로를 작성합니다.여기서는 style.css가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.rel="stylesheet"이 속성은 링크된 파일이 스타일시트임을 나타냅니다. 3. 결과 브라우저에서 index.html을 열면,가운데 정렬되고, 글자색이 빨간색인 글자가 표시됩니다.

div에 대각선 그리기 (linear-gradient) 먼저, linear-gradient에 대한 자세한 설명은 지난 포스팅을 참고하세요.2025.02.24 - [IT/CSS] - [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과 [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과linear-gradientlinear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합hianna.tistory.com  대각선 그리기 예제.diagonal-line { width: 300px; height: 300px; bor..

1. inline-block .parent { border: 1px solid black; margin: 1px; padding: 10px; text-align: center; } .child { display: inline-block; width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; } 는 기본적으로 'block' 요소입니다. block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다. 따라서, 요소는 항상 수직으로 배치되어 쌓이게 됩니다. display: inline-block; 를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다. inline-block은 inline과 b..

CSS로 스크롤바를 항상 보이게 표시하려면 'overflow' 속성을 사용합니다. overflow, overflow-x, overflow-y 다음은 영역에 강제로 스크롤바를 생성한 예제입니다. 전체 scroll 가로 scroll 세로 scroll .mydiv1 { overflow: scroll; } .mydiv2 { overflow-x: scroll; } .mydiv3 { overflow-y: scroll; } div { width: 200px; height: 100px; background-color: skyblue; margin: 10px; border: 1px solid black; text-align: center; } overflow: scroll; 요소의 크기에 상관없이, 가로 세로 방향 스크..

이번에는 버튼을 왼쪽, 오른쪽, 가운데 정렬하는 방법을 정리해 보았습니다. 1. text-align 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } 버튼을 감싸고 있는 div 영역에 text-align 속성을 적용하여 그 안의 버튼을 정렬하였습니다. 2. flex 왼쪽 정렬 가운데 정렬 오른쪽 정렬 .container { display: flex; } .left { justify-content: flex-start; } .center { justify-content: center; } .right { justify-content: flex-end; } 버튼을..

:nth-child() nth-child() 는 파라미터로 입력 된 패턴의 순서에 따라 요소를 선택하는 선택자입니다. 이 선택자를 이용하여, 테이블의 짝수 또는 홀수 행에만 스타일을 적용할 수 있습니다. 파라미터로는 함수 또는 지정된 키워드를 입력할 수 있습니다. 함수 예제 2n+1 : 홀수 번째 요소를 선택합니다. 2n : 짝수 번째 요소를 선택합니다. 5 : 5번째 요소를 선택합니다. 5n : 5의 배수 번째가 되는 요소를 선택합니다. 이런 식으로 원하는 함수를 입력할 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 테이블의 홀수 행에만 스타일 적용하기 이름 나이 Anna 20 Tina 30 David 33 table, td, th { bord..

CSS의 요소 중 홀수 번째, 또는 짝수 번째 요소를 선택하는 방법입니다. :nth-child() 형제 요소들 중 파라미터로 입력된 패턴에 따라, 요소를 선택합니다. 파라미터에는 다음과 같은 값들을 넣을 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 함수 예제 2n+1 : odd와 같습니다. 홀수 번째 요소를 선택하게 됩니다. 2n : even과 같습니다. 짝수 번째 요소를 선택하게 됩니다. 5n : 5의 배수 번째 요소를 선택합니다. 7 : 7번째 요소를 선택합니다. n : 모든 요소를 선택합니다. 이 외에도 자유롭게 필요한 함수를 입력하여 원하는 요소를 선택할 수 있습니다. 홀수, 짝수 선택자(odd, even) 홀수 짝수 홀수 짝수 홀수 짝..

테이블의 행(row)에 마우스를 올릴 경우, 해당 행의 배경색을 변경하는 방법입니다. :hover css의 pseudo-class(의사 클래스)인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. 이 :hover를 사용하여, 마우스가 테이블의 특정 row에 올라갔을 때, 행 전체의 배경색을 변경할 수 있습니다. 마우스오버 시, 행(row) 배경색 변경 이름 나이 Anna 20 Tina 30 David 33 table, td, th { border: 1px solid black; border-collapse: collapse; } table tr:hover { background-color: GreenYellow; } table tr:hover { background-color: Gree..