AND_END

* CSS 스타일 시트 * CSS를 삽입하는 3가지 방법 - 외부 스타일 시트- 내부 스타일 시트- 인라인 스타일 * 외부 스타일 시트 *: 외부 스타일 시트를 사용하면 하나의 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다. 각 페이지는 요소 안에 외부 스타일 시트 파일에 대한 참조를 포함해야 합니다. 요소는 섹션 안에 있습니다. 외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다. 파일에 html 태그가 없어야 합니다. 스타일 시트 파일은 .css 확장자로 저장해야 합니다. * 내부 스타일 시트 *: 한 페이지에 고유 스타일이 있는 경우 내부 스타일 시트가 사용될 수 있습니다. 내부 스타일은 요소 내에서 HTML 페이지의 섹션 내에 정의됩니다. body { background-colo..

* HTML id 속성 *: id 속성은 HTML 요소의 고유 ID를 지정합니다. id 값은 CSS 및 JavaScript에서 지정된 id 값을 갖는 요소에 대한 특정 작업을 수행하는 데 사용할 수 있습니다. CSS에서 특정 id를 가진 요소를 선택하려면 요소의 id 다음에 '#' 문자를 씁니다. id 값은 적어도 하나 이상의 문자를 포함해야 하며 공백 ( 공백, 탭 등) 을 포함해서는 안됩니다. EX) #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } My Header 실행 결과 * 클래스(class) 와 id의 차이점 *: HTML 요소는 단일 요소에 속한 하나의 고유 ID만 가질 수 있..

* HTML class * : HTML class 속성은 동일한 클래스 이름을 가진 요소에 대해 동일한 스타일을 정의하는데 사용됩니다. 따라서 동일한 class 속성을 가진 모든 HTML 요소는 동일한 형식 및 스타일을 갖습니다. EX) .cities { background-color: black; //배경 색 : black color: white; //글자 색 : white margin: 20px; //상하 좌우 모두 20px의 간격 (바깥쪽 여백) padding: 20px; //상하 좌우 모두 20px의 간격 (안쪽 여백) } // cities의 이름을 가진 클래스 사용 런던 London is the capital of England. // cities의 이름을 가진 클래스 사용 파리 Paris is..

* HTML 블록 및 인라인 요소 * * 블록 Element *: 항상 새 줄에서 시작하여 사용할 수 있는 전체 너비를 사용합니다. EX) Hello World The DIV element is a block element, and will start on a new line. 실행 결과 - HTML 블록 요소 : - * 인라인 요소 *: 인라인 요소는 새 줄에서 시작하지 않고 필요한 만큼만 너비를 차지합니다. EX) Hello World The DIV element is a block element, and will start on a new line. 실행 결과 - HTML 인라인 요소 : * 요소 *: 요소는 종종 다른 HTML 요소에 대한 컨테이너로 사용됩니다. 요소에 속성이 필요 없지만, sty..

* HTML 목록 (List) * * 순서가 정해져 있지 않은 목록: 태그로 시작하고, 각 목록의 항목은 태그를 사용합니다. 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다. EX) 순서가 정해져 있지 않은 목록 Coffee Tea Milk 실행 결과 - 목록 항목 마커 : disc - Sets the lists item marker to a bullet. circle - Sets the llists item marker to a circle. square - Sets the lists item marker to a square. none - The list items will not be marked. 1. disk Coffee Tea Milk 실행 결과 2. circle Cof..

* HTML 테이블 : HTML 에서 테이블은 태그를 사용하여 만들 수 있습니다. 각 테이블의 행은 태그를 사용합니다. 테이블의 헤더 부분은 로 정의됩니다. 셀은 태그로 정의됩니다. 그럼 예제를 살펴보도록 합시다. - 기본적인 표는 테두리가 없이 정의됩니다. 이름 전화번호 나이 이** 010- 20 김** 010- 30 박** 010- 40 실행 결과 - 표에 테두리를 추가하는 예제 table, th, td { border: 1px solid black; } 이름 전화번호 나이 이** 010- 20 김** 010- 30 박** 010- 40 실행 결과 table, th, td { border: 1px solid black; border-collapse: collapse; } border-collapse:..

- HTML 이미지 구문: HTML에서는 이미지가 태그로 정의됩니다. 태그는 닫는 태그가 없습니다. src 속성은 이미지의 URL(웹 주소)를 지정합니다. - alt 속성: alt 속성은 어떤 이유로 사용자가 볼 수 없는 경우에 속성은 이미지에 대한 대체 텍스트를 제공한다. alt 속성의 값은 이미지를 설명한다. 실행 결과 또한,브라우저에서 이미지를 찾을 수 없다면 alt 속성 값이 표시됩니다. If a browser cannot find the image, it will display the alternate text: 실행 결과 - 이미지 크기 (너비와 높이): style 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다. EX 1) EX 2) --> width 및 height 속성은 픽셀 ..

: HTML의 하이퍼 링크를 클릭하면 다른 문서로 이동을 할 수 있습니다. - HTML에서 링크는 태그로 정의됩니다. EX) HTML LinksROMANTIC 실행 결과 - 지역 링크: 위에 예제에서는 절대URL(웹 주소)를 사용했습니다. 지역 링크는 상대URL로 지정됩니다. EX) HTML LinksHTML LinkRomantic 실행 결과 - HTML 링크 색상기본적으로 링크는 다음과 같이 표시됩니다. ● 방문하지 않은 링크에는 밑줄이 그어져 파란색으로 표시됩니다. ● 방문한 링크에 밑줄이 그어지고 자주색입니다. ● 활성 링크에는 밑줄이 그러지고 빨간색으로 표시됩니다. --> CSS를 사용하여 기본 색상을 변경할 수 있습니다. EX) a:link { color: green; background-col..