Category : CSS CSS / aspect-ratio / 요소의 가로 세로 비율 정하는 속성 목차1 개요2 문법3 예제 - 고유 가로 세로 비율이 없는 요소4 예제 - 고유 가로 세로 비율이 있는 요소 개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성이다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있다. 문법 aspect-ratio: auto | number / number […] CSS / accent-color / input, progress에서 강조할 색을 지정하는 속성 목차1 개요2 문법3 예제 - input checkbox4 예제 - input radio5 예제 - input range6 예제 - progress7 예제 - input range와 progress의 색 개요 accent-color는 강조할 색을 지정하는 속성이다. 아래 요소에 적용할 수 있다. <input type="checkbox"> <input type="radio"> <input type="range"> <progress> 문법 accent-color: auto | color | initial | […] CSS / border-width / 테두리 두께 정하는 속성 목차1 개요2 문법3 예제 개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정한다. 기본값은 medium이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 […] CSS / 도형 만들기 / 원, 타원 CSS의 border-radius 속성으로 원을 만들 수 있다. 목차1 원 만들기2 타원 만들기3 테두리만 있는 원 만들기 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { margin: 30px auto; […] CSS / 유튜브 동영상 반응형으로 삽입하는 방법 유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용한다. 코드는 유튜브 영상 공유에서 [퍼가기]를 클릭하여 구할 수 있다. 아래와 같은 코드인데, 고정폭이다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정하다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, […] CSS / 마우스 오버 시 텍스트 나오게 하는 방법 CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제이다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능하다. 목차1 마우스 올렸을 때 모양 만들기2 display 속성 이용하여 만들기3 다른 요소 위에 나오게 […] CSS / 구분선 만들기 글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 한다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제이다. 목차1 예제 문서2 border로 구분선 만들기3 짧은 구분선 만들기4 중간에 강조점 만들기 예제 문서 <div class="jb-division-line"></div>를 […] CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기 엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table#jb-table […] CSS / 양쪽 배분(균등 분할) 정렬 방법 문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html […] CSS / 순서 있는 목록에서 숫자 또는 내용만 굵게 만드는 방법 순서 있는 목록은 ol 태그로 만듭니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-size: 40px; } </style> </head> <body> <ol> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol> </body> </html> li에 font-weight 속성을 추가하여 글자를 굵게 만들면 숫자와 내용에 모두 적용됩니다. li { font-weight: bold; } […] CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기 마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 목차1 위쪽 가로 방향으로 선 그리기2 아래쪽 가로 방향으로 선 그리기 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; } .jb { width: 400px; height: 400px; margin: 40px auto; border: […] CSS / 도형 만들기 / 마름모 마름모는 삼각형을 두 개 붙여서 만든다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣는다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만든다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것이다. .rhombus { width: 0px; height: 0px; border-right: 200px solid #666666; border-top: 100px solid transparent; border-bottom: […] CSS / 도형 만들기 / 삼각형 CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다. 목차1 삼각형 만들기1.1 기본1.2 정삼각형1.3 직각삼각형2 삼각형 회전하기2.1 방법 12.2 방법 2 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만든다. 아래쪽, 왼쪽, 오른쪽에 […] CSS / 선택자(Selector) 목차1 전체 선택자(Universal Selector)2 타입 선택자(Type Selector)3 속성 선택자(Attribute Selector)3.1 [attributename]3.2 [attributename="value"]3.3 [attributename~="value"]3.4 [attributename|="value"]3.5 [attributename^="value"]3.6 [attributename$="value"]3.7 [attributename*="value"]4 아이디 선택자(ID Selector)5 클래스 선택자(Class Selector)5.1 클래스 선택자5.2 클래스 선택자 앞에 아무 것도 없으면5.3 클래스 선택자 앞에 무언가 있으면5.4 클래스 속성의 값이 여러 개이면6 하위 선택자(Descendant Selector)7 자식 선택자(Child Selector)8 형제 선택자(Sibling Selector)9 […] CSS / position의 값이 fixed일 때 가운데 정렬하는 방법 position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> […] CSS / 마우스 오버 효과 / 다른 이미지 보여주기 이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 목차1 display 속성 이용하기2 opacity 속성 이용하기 display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } h1 { text-align: center; } […] CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성 CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. 목차1 transform / rotate1.1 문법1.2 예제2 transform / translate2.1 문법2.2 예제3 transform / scale3.1 문법3.2 예제4 transform / skew4.1 문법4.2 예제 transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 […] CSS / Flex / IE에서 flex-basis 오류 해결하는 방법 Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; } .container { […] CSS / 마우스 오버 효과 / 이미지 확대 이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } h1 { text-align: center; } img { max-width: 100%; } .a { width: 400px; margin: 0px […] CSS / Grid / order order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } .jb-container { display: grid; grid-template-columns: 1fr […]