웹개발8 8. [HTML/CSS] HTML 리스트 태그 (ul, ol, li) HTML 리스트 태그 (ul, ol, li)1. 순서가 없는 리스트 (ul - Unordered List)ul 태그는 순서가 없는 목록을 만들 때 사용합니다. 각 항목 앞에 불릿(bullet) 기호가 표시됩니다. 항목 1 항목 2 항목 32. 순서가 있는 리스트 (ol - Ordered List)ol 태그는 순서가 있는 목록을 만들 때 사용합니다. 각 항목 앞에 숫자가 자동으로 표시됩니다. 첫 번째 항목 두 번째 항목 세 번째 항목3. 리스트 항목 (li - List Item)li 태그는 ul이나 ol 태그 내부에서 각각의 목록 항목을 정의할 때 사용합니다.주요 특징li 태그는 반드시 ul 또는 ol 태그 안에서만 사용해야 합니다.중첩된 리스트를 만들 수 있습니다 (리스트.. 2024. 12. 12. 7. [HTML/CSS] a 태그는 HTML에서 하이퍼링크를 생성하는데 사용되는 태그입니다. a 태그는 HTML에서 하이퍼링크를 생성하는데 사용되는 태그입니다.기본 문법링크 텍스트주요 속성href: 링크의 목적지 URL을 지정합니다.target: 링크가 열리는 방식을 지정합니다._self: 현재 창에서 열기 (기본값)_blank: 새 창이나 탭에서 열기_parent: 부모 프레임에서 열기_top: 전체 창에서 열기rel: 현재 문서와 링크된 문서 사이의 관계를 정의합니다.download: 링크를 클릭했을 때 파일을 다운로드하도록 지정합니다.사용 예시웹사이트 방문하기새 탭에서 열기PDF 다운로드이메일 보내기전화하기주의사항외부 링크를 새 탭에서 열 때는 보안을 위해 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.링크 텍스트는 명확하고 설명적이어야 하며, "여기를 클릭하.. 2024. 12. 12. 6. [HTML/CSS] HTML 전역 속성 (Global Attributes) HTML 전역 속성 (Global Attributes)전역 속성은 모든 HTML 요소에서 공통적으로 사용할 수 있는 속성입니다.1. id 속성HTML 문서 내에서 요소를 고유하게 식별하는 식별자문서 내에서 중복된 id 값을 사용할 수 없음헤더2. class 속성요소를 분류하거나 CSS 스타일을 적용하기 위한 속성여러 요소에 같은 class 값을 사용할 수 있음하나의 요소에 여러 class를 공백으로 구분하여 지정 가능내용3. style 속성요소에 직접 CSS 스타일을 적용하기 위한 속성인라인 스타일로 적용되며, 가장 높은 우선순위를 가짐파란색 텍스트4. title 속성요소에 대한 추가 정보를 제공하는 속성마우스를 요소 위에 올리면 툴팁으로 표시됨도움말이 필요한 텍스트이러한 전역 속성들은 HTML 문서의 .. 2024. 12. 12. 5. [HTML/CSS] div와 span 차이 (블록 레벨요소,인라인요소) div와 span의 차이점div 태그블록(block) 레벨 요소새로운 줄에서 시작하며, 전체 너비를 차지주로 레이아웃을 나누거나 콘텐츠를 그룹화할 때 사용 이것은 div 태그입니다. 한 줄 전체를 차지합니다.span 태그인라인(inline) 레벨 요소텍스트 흐름 내에서 필요한 만큼의 공간만 차지주로 텍스트의 일부분에 스타일을 적용할 때 사용이것은 빨간색 텍스트입니다.주요 차이점특성 div span표시 방식블록 레벨인라인 레벨줄바꿈자동 줄바꿈줄바꿈 없음사용 목적레이아웃 구분텍스트 일부 스타일링이러한 차이점을 이해하고 적절한 상황에서 각각의 태그를 사용하는 것이 중요합니다. 2024. 12. 12. 4. [HTML/CSS] img 태그,크기 관련 속성 img 태그이미지를 웹 페이지에 삽입할 때 사용하는 태그입니다.기본 사용법img 태그는 닫는 태그가 없는 빈 요소(empty element)입니다.주요 속성필수 속성src: 이미지 파일의 경로를 지정합니다.alt: 이미지를 표시할 수 없을 때 나타나는 대체 텍스트입니다.크기 관련 속성width: 이미지의 너비를 지정합니다.- 픽셀(px) 단위로 지정- 예: width="300"height: 이미지의 높이를 지정합니다.- 픽셀(px) 단위로 지정- 예: height="200"예시 코드주의사항width와 height 속성은 이미지의 원본 비율을 고려하여 설정하는 것이 좋습니다.반응형 웹 디자인을 위해서는 CSS를 사용하여 크기를 조절하는 것을 권장합니다.이미지가 로드되지 않을 경우를 대비해 항상 alt 속성.. 2024. 12. 12. 3. [HTML/CSS] HTML 텍스트 태그 HTML 텍스트 태그mark 태그: 형광펜으로 강조한 것처럼 배경색으로 텍스트를 강조할 때 사용형광펜으로 강조된 텍스트strong 태그: 텍스트를 굵게 표시하며, 중요한 내용임을 의미할 때 사용중요한 내용입니다em 태그: 텍스트를 이탤릭체로 표시하며, 강조하고 싶은 내용에 사용강조된 텍스트입니다q 태그: 짧은 인용문을 표시할 때 사용 (자동으로 큰따옴표가 추가됨)인용된 텍스트입니다s 태그: 취소선이 그어진 텍스트를 표시할 때 사용 2024. 12. 12. 이전 1 2 다음
