본문 바로가기
728x90

전체 글112

2. CSS 기본 선택자 전체 선택자태그 선택자id 선택자클래스 선택자그룹 선택자 전체 선택자스타일을 문서의 모든 요소에 적용* {속성: 값; ...}  태그 선택자특정 태그를 사용한 모든 요소에 스타일 적용태그명 {스타일 규칙}  id 선택자고유한 식별자인 id 를 사용하여 요소 선택.id 선택자는 문서에서 한 번만 적용할 수 있으며, 다른 선택자보다 우선순위가 높다.#아이디명 {스타일 규칙}  클래스 선택자HTML 요소에 임의의 클래스를 지정하여 해당 클래스를 가진 모든 요소를 선택..클래스명 {스타일 규칙}  그룹 선택자여러 선택자에서 같은 스타일 규칙을 사용하여 적용선택자1, 선택자2 {스타일 규칙}  스타일 우선순위일반적으로 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.!important > 인라인 스타일 > .. 2024. 7. 4.
1. CSS 스타일 시트 인라인 스타일내부 스타일 시트외부 스타일 시트인라인 스타일스타일 시트를 사용하지 않고, style 속성을 사용하여 스타일을 적용할 대상에 직접 표시인라인 스타일 내부 스타일 시트head 태그 안에 내부 스타일 시트 외부 스타일 시트별도의 css 파일을 만들고, 태그 안에 css 파일을 삽입해서 사용 2024. 7. 4.
11. 시맨틱 태그 (Semantic Tag) 시맨틱 태그란 의미있는 태그를 뜻한다.div, span과 같이 의미 없는 태그와 달리, 태그 이름만으로도 내용을 알 수 있는 태그이다. 시맨틱 태그를 사용하면 검색엔진 최적화, 쉬운 소스코드 구조화, 코드의 가독성 향상 등의 장점이 있다. 주요 구조header: 페이지의 제목, 로고, 검색 양식 등nav: 메뉴, 목차 등main: 지배적인 콘텐츠 영역aside: 사이드바, 콜아웃 상자 등section: 문서의 섹션article: 독립적이고 자체 내용이 포함된 콘텐츠 (게시물, 신문 기사 등)footer: 섹션의 작성자에 대한 정보, 저작권 데이터 등활용 코드헤더 정보, 헤더 이미지 메뉴1 메뉴2 메뉴3 메뉴4 섹션1 .. 2024. 7. 4.
10. 이미지맵 <map> 이미지맵은 하나의 이미지 내에서 좌표를 설정하여 링크를 거는 태그이다. 주로 지도와 같은 복잡한 이미지에서 사용한다. 기본형usemap="#이미지맵 사용명칭" 과 map name="이미지맵 사용명칭"을 동일하게 지정shape: 영역의 모양 (rect: 직사각형, circle: 원형, poly: 다각형, dafault: 전체 영역)coords: 이미지 좌표 (시작점x, 시작점y, 끝점x, 끝점y)링크가 없을 경우, nohref로 정의  좌표 설정www.image-map.net/ 사이트를 통해 이미지에서의 좌표를 설정할 수 있다. 활용 코드  실행 결과-> cherry, raspberry, bread 이미지를 클릭하면 해당 링크로 이동한다. .. 2024. 7. 3.
728x90

티스토리툴바