글

라벨이 #Blogger인 게시물 표시

[CSS] 박스모델(Box Model)구조

작성자:
이미지
[CSS] 박스모델(Box Model)구조  박스 모델의 구조 일반 텍스트 문장이나 이미지 등으로 홈페이지를 만들 때는, 아래 그림과 같이 기본 하나의 박스는 4개의 영역으로 구성되어 있음 내용을 표시하는 영역 텍스트와 이미지 등의 컨텐츠 내용이 표시되는 영역 폭(width) 과 높이(height)로 크기를 지정할 수 있음 예) <!doctype html> <html lang="ko">   <head>     <meta charset="utf-8">     <title>CSS</title>     <style>       h5 {         margin: 10px;         border: 10px solid #dddddd;         padding: 10px;       }     </style>   </head>   <body>     <h5>Box Model</h5>   </body> </html> Box Model 출처 : https://www.codingfactory.net/10556 출처 : https://www.tabmode.com/homepage/boxmodel.html
댓글 쓰기
자세한 내용 보기

[HTML] table만드는 방법

작성자:
[HTML] table만드는 방법 < style type = "text/css" > .tg { border-collapse : collapse ; /*셀들간의 공백을 가질지 안 가질지를 결정*/ border-spacing : 0 ; /*separate 일때문 유효함*/ } .tg td { font-family : Arial , sans-serif ; /*Arial글꼴을 먼저 찾고 없으면 웹브라우저에서 설정한 명조 계열 글꼴을 찾음 영어는 Arial이 있고 한글은 없으면 한글은 웹브라우저에서 설정한 명조 계열 글꼴*/ font-size : 14px ; /*글자 크기를 지정 14px이처럼 구체적지정말고 smaller larger등등도 가능*/ padding : 10px 5px ; /*테이블 내의 여백*/ border-style : solid ; /*말그대로 테이블 외각 border style*/ border-width : 1px ; /*선 두께*/ overflow : hidden ; /*내용이 요소의 크기를 넘어갔을 때 어떻게 처리 할 것인지?*/ word-break : normal ; /*띄어쓰기가 없는 긴 단어를 어떻게 처리 할 것인지?*/ border-color : black ; } .tg th { font-family : Arial , sans-serif ; font-size : 14px ; font-weight : normal ; padding : 10px 5px ; border-style : solid ; border-width : 1px ; overflow : hidden ; word-break : normal ; border-color : black ; } .tg .tg-baqh { text-align : center ; vertical-align : top } .tg ....
댓글 쓰기
자세한 내용 보기

[Blogger] Blogger에서 소스코드 삽입 방법

작성자:
이미지
[Blogger] Blogger에서 소스코드 삽입 방법 여러가지 툴 중에서 Highlight.js라는 툴을 사용 Highlight.js  다양한 언어와 설정파일을 제공하지만.. 줄 번호는 제공하지 않음 1. 테마 -> HTML 편집   2. </head>바로 위에 아래의 소스 코드 삽입 < link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" > </ link > < script src = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" > </ script > < script > hljs.initHighlightingOnLoad(); </ script > 3. 저장 후 소스코드가 제대로 삽입 되었는지 다시 확인 4. 글을 작성 할 때 알맞은 pre 와 code태그를 쓰기 highlight.js는 자동으로 언어를 잘 인식하지만 가끔 인식을 못 하므로 class를 사용하는걸 추천 <pre><code class="Java"> public static void printOne() { System.out.println("Hello World"); } sdsdsd </code></pre> <pre> : 입력한 문장 형태 그대로 브라우저에 표현(엔터, 탭, 스페이스바도 인식) <code> : 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할때 사용(이쁘게 색입히기) 5. 결과 확인하기 public ...
댓글 3개
자세한 내용 보기