CSS12

• 

  [CSS] scroll-behavior로 부드러운 스크롤 구현하는 법 1. scroll-behavior: smooth – 단 1줄로 부드러운 스크롤 완성하기사용자 경험을 높이기 위해 많이 사용되는 효과 중 하나가 부드러운 스크롤(smooth scroll)입니다.과거에는 JavaScript나 jQuery를 통해 구현해야 했지만, 이제는 CSS 한 줄만으로도 가능합니다.2. 기본 문법html { scroll-behavior: smooth;} 이 속성 하나만으로 같은 페이지 내의 앵커(anchor) 링크 클릭 시 부드럽게 이동하게 됩니다.3. 예제: 내비게이션에서 섹션으로 스크롤3-1. HTML 코드섹션 2로 이동 여기가 섹션 2입니다3-2. CSS 코드html { scroll-behavior: smooth;}이제 를 클릭하면, 페이지가 자연스럽게 section2로 스르륵.. CSS 2025. 5. 19.

• 

  [CSS] aspect-ratio 속성으로 반응형 박스 비율 고정하는 법 반응형 웹페이지를 만들다 보면, 정해진 가로세로 비율을 유지한 채 박스나 이미지 크기를 자동 조절해야 하는 경우가 많습니다. 과거에는 padding-top 트릭이나 position: absolute를 이용해 우회적으로 해결했지만, CSS의 aspect-ratio 속성을 사용하면 이 과정을 훨씬 더 간단하게 만들 수 있습니다. 기본 사용법.box { width: 100%; aspect-ratio: 16 / 9; background-color: #3498db;} 이렇게 작성하면, .box는 항상 가로 16: 세로 9의 비율을 유지합니다. width가 늘어나면 height도 자동 조정됩니다. 모바일에서도 완벽하게 작동하게 됩니다. 다양한 예제1. 정사각형 만들기.square { width: 100px.. CSS 2025. 5. 18.

• 

  dl, dt 마지막 요소 선택 방법? dl (description list) 내의 dt와 dd에 border-bottom 스타일을 적용하고 싶을 때가 있습니다. 하지만, 마지막 dt와 dd에 접근하여 스타일을 주는 방법입니다.1.  html 구조간단하게 HTML 태그를 만들어봅시다. dl은 HTML에서 설명 목록을 만들 때 사용하는 요소로, dt는 항목의 제목을, dd는 그에 대한 설명을 나타냅니다. 다음과 같은 구조로 구성됩니다. Title 1 Description 1 Title 2 Description 22. border-bottom 스타일 적용 방법먼저, dt와 dd에 border-bottom을 적용하는 방법을 살펴보겠습니다./* 모든 dt와 dd에 border-bottom 적용 */dl dt, dl dd { border-.. CSS 2024. 9. 30.

• 

  input checkbox를 클래스와 함께 선택하는 방법 HTML에서 checkbox는 다양한 방식으로 사용되며, 이를 CSS로 스타일링할 때 특정한 클래스나 상태에 맞게 세밀하게 적용할 수 있습니다. 이 글에서는 CSS에서 input 태그 중 checkbox 타입을 선택하고, 클래스나 특정 상태에 따라 스타일을 적용하는 다양한 방법을 살펴보겠습니다. 1. 직접 선택자 사용input 태그와 checkbox 타입, 그리고 클래스 이름을 지정하여 간단하게 선택할 수 있습니다.input[type="checkbox"].my-checkbox { /* 스타일 적용 */}input[type="checkbox"]: input 태그 중 type 속성이 "checkbox"인 요소만 선택합니다..my-checkbox: 클래스 이름이 "my-checkbox"인 요소를 선택합니다... CSS 2024. 9. 9.

• 

  [CSS] 그리드 Grid를 익혀보자 (일단 기초편 #1) 제가 최근에 사용했던 CSS 레이아웃 스킬은 조금은 챙피하지만 display: flex; 이게 전부였습니다. 하지만 최근 Grid로 간단하게 레이아웃을 짤 수 있고, 이 방법이 유용하다는 것을 배우면서 확실히 쉽고 직관적으로 할 수 있다고 생각하여 최근에는 자주 애용하고 있습니다. ※ CSS grid는 IE, 즉 인터넷 익스플로러에서는 지원하지 않습니다. IE를 대응을 해야되는 분들에게는 display:grid가 아닌 다른 방법으로 레이아웃을 짜는 것을 권장드립니다. 1. HTML 코드 일단 그리드를 그릴 수 있는 HTML 코드를 작성합니다. 2. CSS 코드 .grid-container{ display:grid; grid-template-columns: 100px 100px 100px; grid-tem.. CSS 2022. 11. 7.

• 

  [CSS] 배경이미지를 넣어보자! background 추가 속성들! 기존에 img 태그를 통해서 이미지를 삽입하는 방법도 있지만, HTML 요소 뒤에 배경 이미지를 넣는 방법이 있습니다. 바로 CSS의 background-image 속성입니다. 전체 페이지부터 부분적으로 배경이미지를 설정할 수 있습니다. 1. background-image .box1 { background-image: url("이미지 경로") } background-image 속성에 url (" ") 괄호 안에 경로를 넣으면 배경 이미지가 삽입됩니다. 이미지 경로만 넣어둔다면 딱 맞는 사이즈라면 모르겠지만, 사이즈가 다른 이미지라면 바둑판 모양처럼 반복이 됩니다. background-repeat의 repeat는 기본값입니다. 반복이 되지 않으려면 아래의 코드와 같이 기재를 하면 됩니다. 2. backgr.. CSS 2021. 12. 28.

• 

  [CSS] box-sizing, 테두리까지 포함 시키는 방법! 여러 요소를 배치하려면 각 요소들의 너비 값을 기준으로 해야합니다. width, height 속성 값이 컨텐츠 영역의 너비와 높이만 나타내게 되는데, 여기에서 padding이나 border를 설정했다면 설정된 값만큼 빼서 width와 height를 계산해야합니다. 이렇게 매번 계산하게 되면, 너무 비효율적입니다. 이러한 방법을 CSS 속성인 box-sizing을 이용하면 padding과 border값을 포함시켜서 사용할 수 있게 설정이 가능합니다. .box1{width:300px;height:300px;padding:20px;border:5px solid #ccc;} .box2{width:300px;height:300px;padding:20px;border:5px solid #ccc; box-sizing.. CSS 2021. 12. 27.

• 

  [CSS] box-shadow, 그림자를 넣어보자! box-shadow는 그림자 속성입니다. 이미지부터 감싸는 div 등 전체를 지정하는 것에 따라 넣을 수 있습니다. box-shadow의 속성 값에 따라 그림자의 위치부터 흐림, 번짐, 심지어 색상까지 조절할 수 있습니다. box-shadow를 사용하면 수평, 수직 거리는 필수적으로 지정을 해야하고, 나머지 값들은 옵션으로 설정이 가능합니다. (기본값은 none 입니다.) .box1{ box-shadow: 10px 10px 5px red; } 앞에서 부터 수평, 수직, 번짐, 그림자 색상으로 속성을 기재하였습니다. - 수평 거리: 양수로 설정하면 오른쪽, 음수로 설정하면 왼쪽 이동 - 수직 거리: 양수로 설정하면 아래로, 음수로 설정하면 위로 이동 - 흐림: 양수 값으로 설정하면 점점 흐려집니다. 기본값.. CSS 2021. 12. 26.

• 

  [CSS] 모서리를 둥글게! border-radius 일반적으로 box-model을 만들고, 테두리 값을 넣게 되면 딱딱하게 라인이 생기게 됩니다. 조금 더 부드럽고, 둥글게 할 수 있는 border-radius 입니다. 간단하면서도 정말 많이 사용되고 있는 CSS입니다. border-radius는 CSS3 에서 정의되었고, IE9 부터 지원하게 됩니다. border-radius의 값을 설정하는 방법은 아래와 같습니다. border-radius: 10px 20px 10px 10px; 위의 값은 네 방향을 설정하게 됩니다. 제일 좌측에 있는 코드로부터 좌측 위 / 우측 위 / 우측 아래 / 좌측 아래 이렇게 설정이 됩니다. 좌측 위: 10px 우측 위: 20px 우측 아래: 10px 좌측 아래: 10px 이런식으로 설정이 가능하기 때문에 개별적으로 값을 줄 .. CSS 2021. 12. 23.

• 

  [CSS] 삼각형을 조금 더 쉽게, 만들어보자! (css 트라이앵글 제네레이터) 웹 사이트를 보다보면 셀렉트박스나 콤보 박스 등에서 ▲ 이런 모양의 삼각형이 가끔 나오는데, 이미지 파일로도 쉽게 가능하지만, CSS로도 충분히 표현이 가능한데 이번에 소개하려고 하는 사이트는 삼각형 모양을 쉽게 만들 수 있는 제네레이터 사이트입니다. Direction은 삼각형의 방향입니다. Top으로 하면 ▲ 이런 모양으로 나오게 되고, Top 방향부터 총 8방향으로 설정이 가능합니다. Type에서 Equilateral(정삼각형), Isosceles(이등변), Scalene(부등변 삼각형)을 선택할 수 있습니다. 이 타입을 선택할 때 사이즈를 조절하는 기능이 활성화가 되기 때문에 필요한 타입으로 선택을 해서 커스터마이징을 하면 됩니다. Color에서 색상을 선택하는데, RGB, HSB도 지원합니다. 다.. CSS 2021. 7. 20.

• 

  [CSS] 여전히 헷갈린 Float 해제 방법을 정리! 요즘에는 레이아웃을 잡는 방법이 display: flex를 이용하여 다양한 방법으로 하지만, 그래도 아직까지는 IE를 대응해야하기 때문에 float을 사용하는 방법을 그래도 알고 있어야 합니다. (뼈저리게 느끼고 있습...) 일단 float을 사용해서 레이아웃을 잡는 경우는 바로 가로로 배치하려고 하는 부분에서 사용이 됩니다. 하지만 float을 많이 사용하지 않는 이유는 해제하는 방법이 까다로워서 그런 것이 아닐까? 그리고 flex나 다른 방법으로 가로 배치하는 방법도 많은데 궂이? 라고 생각하시겠지만 꼭! 알아두시는 것이 좋습니다. left 요소를 왼쪽에 배치 right 요소를 오른쪽에 배치 ※ HTML 코드 안녕하세요 저는 Lorem ipsum dolor, sit amet consectetur ad.. CSS 2021. 6. 28.

• 

  CSS 선택자의 점수가 있다! (점수 환산표) CSS 작업을 하다가 요소를 선택하는데, 적용이 되지 않았던 적이 몇 번 있었습니다. 그런데 그런 부분이 CSS 선택자에 대한 부분이란 걸 알았고, CSS 선택자에도 점수가 존재한다는 것을 알게 되면서 조금 찾아보고, 저와 같은 실수를 하지않았음에 정리를 해봤습니다. * CSS 선택자 점수는? !important : 10,000점 Inline Style: 1,000점 ID 선택자: 100점 Class 선택자: 10점 Tag 선택자: 1점 위의 점수로 봤을 때는 그럼 !important 사용하면 되는거 아냐? 인라인 스타일 작성하면 되는 거 아냐? 라고 하지만, 막상 개인적인 작업이나 업무를 통했을 때 이렇게 작성을 하게 되면 수정(=유지보수)을 하는 부분에서 굉장히 어려움을 느낄 수 있습니다. 인라인 스.. CSS 2021. 5. 21.