goodthings4me.tistory.com
■ 하나의 단락(문단)에 적용되는 스타일
O text-indent 속성
- 문단위 첫 글자를 얼마나 들여 쓸지 지정
- 형식
text-indent: <크기> | <백분율>
- <크기> : 단위와 함께 지정, 음수도 가능
- <백분율> : 부모 요소의 너비를 기준으로 상대적 크기 지정
<head>
<style>
.indent1 {
background-color: cyan;
text-indent: 15px; /* 15px만큼 들여쓰기 */
}
.indent2 {
background-color: cyan;
text-indent: 5%;
}
</style>
</head>
<body>
<div class="indent1">Office 2010보다 2013에서 더 많은 동영상 코덱이 기본 지원됩니다.<br>
따라서 2013에서만 제공되는 코덱으로 만들어진 동영상 파일이라면,<br>
하위 버전에서 실행되지 않을 수 있습니다.
</div>
<br>
<div class="indent2">Office 2010보다 2013에서 더 많은 동영상 코덱이 기본 지원됩니다.<br>
따라서 2013에서만 제공되는 코덱으로 만들어진 동영상 파일이라면,<br>
하위 버전에서 실행되지 않을 수 있습니다.
</div>
</body>
O list-style-type 속성
- 순서 없는 목록의 블릿이나 순서 목록의 숫자를 바꾸는 속성
- 형식
list-style-type: none | <순서 없는 목록의 블릿> | <순서 목록의 번호>
- 순서 없는 목록의 블릿 : disc, circle, square, none
- 순서 목록의 번호
decimal : 1, 2, 3, ...
decimal-leading-zero : 01, 02, 03, ...
lower-roman : i, ii, iii iv, ...
upper-roman : I, II, III, IV, ...
lower-alpha : a, b, c, ...
upper-alpha : A, B, C, ...
<head>
<style>
.lstyle1 {
list-style-type: circle;
}
.lstyle2 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<div>
<ul class="lstyle1">
<li>사과</li>
<li>딸기</li>
<li>복숭아</li>
</ul>
<ul class="lstyle2">
<li>사과</li>
<li>딸기</li>
<li>복숭아</li>
</ul>
</div>
</body>
O 그레이디언트(그라데이션 효과로 배경 꾸미기)
- 2가지 이상의 색상이 잘 섞여서 표현되며, 이미지 없이도 원하는 효과를 원하는 요소에 적용 가능
- 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용
- 구형 브라우저 버전에서는 브러우저 접두사를 붙여야 동작함
* 접두사 -webkit-, -moz-, -o- 등
<head>
<style>
.grad {
background: blue; /* 그라데이션 지원않는 브라우저용 */
background: linear-gradient(to right bottom, blue, white); /* 표준 구문 */
}
</style>
</head>
<body>
<div class="grad">Office 2010보다 2013에서 더 많은 동영상 코덱이 기본 지원됩니다.
따라서 2013에서만 제공되는 코덱으로 만들어진 동영상 파일이라면, 하위 버전에서 실행되지 않을 수 있습니다.
</div>
</body>
# 참고자료
Do it HTML5 + CSS3 웹 표준의 정석 2016
모던 웹 디자인을 위한 HTML5+CSS3 입문 2015
블로그 인기글
Windows 10 탐색기 느려지는 증상과 해결하는 방법
잘 작동하던 Windows 10 탐색기가 갑자기 느려지는 증상이 발생했을 때 어떻게 조치를 하는지 구글에서 찾아보니 많은 해결책들이 있었으나 어떤 것이 정확한 해결책인지는 알 수가 없었다. 그래서 해결방법이라고 제시한 것들을 정리해 보았다. 윈도우 탐색기가 느려지는 증상 해결 방법 어느 순간부터 응용프로그램(VS Code 등)에서 폴더 열기나 파일 불러오기를 했을 때 검색 팝업창이 안 뜨거나 열리는 시간이 엄청 느려지는 증상과, 더불어서 탐색기도 실행이 많이 느려지는 증상이 있었다. 기존에 사용하던 VS Code에 openpyxl 설치 후 실행이 느려지는 증상이 발생하더니 윈도우10 탐색기도 느려져서 사용할 수가 없었다. 노트북에 OS(Windows10)를 설치한지 1년이 다 되어가긴 했지만, 1개월 전..
goodthings4me.tistory.com
[엑셀] 근무연수 및 근무 개월수 계산하는 함수
직장을 다니다 보면 몇 년 몇 개월 또는 전체 며칠을 다니고 있는지 궁금할 때가 있다. 아니면, 총무나 인사 일을 할 때 직원들의 근속연수 또는 근속개월수 등을 계산하고 싶을 때도 있다. 이런 경우 엑셀 함수를 활용하면 어떨까!! 근무연수 및 근무 개월수 계산 함수 알아보기 엑셀에서 근무연수 또는 근무 개월수 계산하는 것은 datedif() 함수를 사용하면 간단하게 해결할 수 있다. 아래 이미지를 보면서 설명하면, 셀 E1에 기준일자를 입력하고, 근무연수를 구할 때는 =datedif(B3,$E$1,"Y")&"년" 을 입력한다. 근무개월수는 =datedif(B3,$E$1,"M")&"개월" 처럼 입력한다. 일수까지 파악할 때문 별로 없지만, 심심풀이로 구해보고 싶을 때 =datedif(B3,$E$1,"D")..
goodthings4me.tistory.com
유튜브 영상 등의 URL 주소를 QR코드로 만들기
네이버 QR코드, makeQR, MUST QRcode, 무료 온라인 QRCode 생성기 등의 웹사이트에서 유튜브 영상 등의 URL을 입력하여 QR코드를 만들 수 있다. QR코드를 생성할 수 있는 사이트와 프로그램 URL 주소를 붙여넣기 한 후 "QR 코드 생성" 버튼을 클릭하면 큐알코드가 이미지로 생성되고, 다운로드도 할 수 있는 사이트 https://truedoum.com/useful/qrcode/ # 유튜브에서 동영상 URL을 복사하는 방법 유튜브에서 QR코드를 만들 동영상을 검색한다. 해당 동영상을 클릭한다. 동영상 위에서 마우스 우클릭 후 나오는 팝업창에서 “동영상 URL 복사”를 클릭하거나 영상 하단의 “공유”를 클릭하여 나온 창에서 URL를 복사한다. 아래의 웹사이트 중 하나를 선택한 후 복사..
goodthings4me.tistory.com
'IT(Tip)' 카테고리의 다른 글
| Windows 10 관련 주요 실행 명령어 (0) | 2020.10.12 |
|---|---|
| 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #10(grid system) (0) | 2020.10.06 |
| 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #8(table style) (0) | 2020.10.05 |
| 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #7(float, shadow) (0) | 2020.09.29 |
| 웹 페이지 꾸미기 - CSS3 스타일 속성 정리 #6(위치 속성 - position, z-index, overflow) (0) | 2020.09.28 |
댓글