분류 전체보기

[CSS 기초] CSS 선택자(Selector), CSS 적용 우선순위

CSS 선택자(Selector)는 무엇인가? 말 그대로 요소를 선택하게 만들어주는 것. CSS는 HTML 요소들의 스타일을 정의한다. 스타일을 정의하기 위해서는 스타일을 정의할 요소를 선택해야하는데 이 때 사용되는 것이 선택자(Selector)이다. 위의 이미지에서 h1이 선택자고 괄호 안의 속성(property 혹은 attribute)과 값들로 h1의 스타일을 꾸며주게 된다. 이러한 선택자에는 여러 종류가 있다. CSS 선택자(Selector) 종류 1. 기본선택자 전체 선택자, 태그 선택자, id 선택자, 클래스 선택자 1-1. 전체 선택자 (Universal Selector) 패턴 설명 예시 * HTML 문서 안의 모든 요소들을 선택한다. * { color: red; } 사과종류 홍옥 홍로 아오리 ..

[HTML 기초] 테이블 만들기

테이블을 만드는 기본 태그 태그 역할 테이블 구성요소 테이블을 만드는 태그 테이블의 헤드를 만드는 태그 태이블의 행(가로)을 만드는 태그 테이블의 열(세로)을 만드는 태그 테이블의 제목을 만드는 태그 부가세(VAT) 포함된 실제 지불금액입니다. 상품명 제공혜택 지상파 무제한 즐기기 지상파 3사의 드라마, 예능 프로그램을 가장 빠르게 가장 경제적 서비스 CJ ENM 무제한 즐기기 모든 드라마, 예능 프로그램을 무제한 볼 수 있는 인기 월정액 서비스 JTBC 무제한 즐기기 JTBC의 드라마, 예능 프로그램을 무제한으로 즐길 수 있는 인기 월정액 서비스 가장 바깥쪽을 table 태그로 감싸주고 가로줄(행) 수 만큼 tr 태그를 만든 후, tr 안에 td로 세로 줄(열)을 만든다. 위의 결과로 이런 형태의 테이..

[HTML 기초] 이미지맵 / 하나의 이미지 안에 여러 개의 링크 걸기

이미지맵은 하나의 이미지에 여러 개의 링크를 걸어야 할 때, 이미지의 특정한 영역에 링크를 걸어야할 때 사용한다. 이미지맵은 사각형 이미지맵, 원형 이미지맵, 다각형 이미지맵 세가지 유형이 있다. 다각형 이미지맵은 효율이 떨어져서 잘 사용하지 않으니 이미지맵 제너레이터를 사용하자. https://www.image-map.net/ > 이미지맵 제너레이터 주소 사각형 이미지맵 링크 만들기 태그의 usemap 속성과 태그의 name 속성을 일치시켜줘야한다. (usemap 속성에는 #을 붙여줄 것.) 사각형 이미지 맵이기 때문에 area shape="rect" coords 속성은 좌표. coords = "왼쪽 상단 x, y 좌표값, 오른쪽 상단 x, y 좌표값" 원형 이미지맵 링크 만들기 사각형 이미지맵과 마찬..