분류 전체보기
-
(45)CSS_박스사이징HTML, CSS 2023. 3. 30. 17:37
CSS 박스사이징 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> 박스사이징 div{ width: 300px; height: 150px; margin: 10px; padding: 30px; border: 3px solid red; } #boxsizing1{box-sizing: content-box;} #boxsizing2{bo..
-
(44)CSS_마진HTML, CSS 2023. 3. 30. 17:32
CSS 마진 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> 마진 body{padding:0; margin: 0;} div{ float: left; width: 200px; height: 100px; background-color: deepskyblue; } #margin1{margin: 30px 50px 30px 50px;}..
-
(43)CSS_테두리HTML, CSS 2023. 3. 30. 17:26
CSS 테두리 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> 테두리 div{ width: 200px; height: 100px; margin: 15px; border-width: 5px; color: black; } #border1{border-style: solid;} #border2{border-style: dotted;..
-
(42)CSS_패딩HTML, CSS 2023. 3. 30. 17:25
CSS 패딩 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> 패딩 div{ width: 200px; height: auto; background-color: deepskyblue; margin: 20px; color: white; } #padding1{ padding: 10px 30px 20px 40px; } #padding2..
-
(41)CSS_배경5HTML, CSS 2023. 3. 30. 17:20
CSS 배경 5번째 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> css 배경5 html{ background: url(image/apple.jpg) no-repeat center fixed; background-size: cover; } css 배경5
-
(40)CSS_배경4HTML, CSS 2023. 3. 30. 17:19
CSS 배경 4번째 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> CSS 배경4 div{ background-image: url(image/bus.png); background-repeat: no-repeat; width: 150px; height: 150px; border: 2px solid red; margin-botto..
-
(39)CSS_배경3HTML, CSS 2023. 3. 30. 17:15
CSS 배경 3번째 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> css 배경3 body{ background-image: url(/image/bus.png); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixe..
-
(38)CSS_배경2HTML, CSS 2023. 3. 30. 17:10
CSS 배경 2번째 예제 아래 링크를 통해 태그 설명을 볼 수 있다. https://jm-rograming.tistory.com/74 (35)CSS_태그 설명 font-size 텍스트 크기를 설정 px, %, em, rem font-family 텍스트의 글꼴을 설정 ✔ 글꼴을 선택하는 방법 누구나 설치되어 있는 기본 글꼴을 사용 이미지로 처리 클라리언트에 글꼴을 다운로드 시켜 사 jm-rograming.tistory.com DOCTYPE html> css 배경2 body{ background-image: url(./image/bus.png); /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ background-repeat: no-rep..