CSS13

• 

  [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.

• 

  [웹 퍼블리셔 189일차] 결함과의 싸움! 정말 오랜만에 글을 쓰게 되었습니다. 거의 두 달 만에 글을 쓰게 되면서 그간 있었던 것 중에 가장 많이 했던 제 실수부터 잘 놓치는 부분을 크게 3개를 써봤습니다. 계속해서 프로젝트를 진행할 때 참고하고, 또 참고하고 신경쓰기 위해서 작성 하였습니다. 1. 크로스브라우징에 신경쓰자 제가 가지고 있는 휴대폰은 갤럭시노트10으로 디바이스 화면도 크다고 생각하지 못했습니다. 제가 생각했던 크로스 브라우징이라는 것은 크롬, 사파리, IE 환경에서 레이아웃이 달라지지 않아야 한다는 것! 바로 그 뿐이라고 생각했습니다. 하지만, 어플리케이션에서 브라우저 환경을 보는 것이 아닌, 디바이스별로 화면에서 레이아웃이 깨지는지 확인하는지 이번 프로젝트를 통해서 알게 되었습니다. 참 다양한 환경에서 레이아웃이 틀어지는 부분.. 웹 퍼블리셔 일기 2021. 10. 10.

• 

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

• 

  [웹 퍼블리셔 104일차] 여전히 어렵고, 어렵고, 어렵다 무더운 여름이 왔지만, 그런 것을 느끼지 못할 정도로 엄청나게 바쁘게 100일하고도 4일이 더 지났습니다. 이 중간에 자바스크립트 책도 구매하고, 공부를 정말 나노(?)만큼 공부를 하고 있지만 티끌모아 태산이라고 생각하면서 꾸준하게 공부하고 있습니다. 여전히 jQuery를 사용하는 프로젝트도 있고, Vue.js를 사용하는 프로젝트도 앞으로 잡혀있기 때문에 공부를 게을리 할 수 없게 되었습니다. (React 겁나 공부했는...) 현재는 금융권 프로젝트를 진행하고 있는데, 이전에 했던 하드코딩이 아닌 프레임워크를 이용한 페이지 작업을 하고 있습니다. 금융권 프로젝트에서 제일 어렵고, 어렵고, 어려운점은 바로 외부망이 접속이 되지 않는 부분이었습니다. 당연히 금융권 프로젝트를 진행하게 되면 민감한 정보들이 노.. 웹 퍼블리셔 일기 2021. 7. 17.