본문 바로가기

HTML&CSS

(3)
[CSS] 목록 관련 속성 :: list-style-type, list-style-image, list-style-position, list-style 목록 관련 속성 속성 속성값 설명 list-style-type none, disc, circle, decimal, lower-alpha, ... 목록 마커의 형태를 도형, 숫자, 문자로 지정 list-style-image none, url('이미지 경로') 목록 마커의 형태를 이미지로 지정 list-style-position outside, inside 목록 마커의 위치를 지정 list-style ... 목록 관련 속성 일괄 지정 list-style-type HTML 문서에서 목록은 태그 혹은 태그를 통해 만들 수 있다. 이때 목록 앞에 붙는 도형이나 문자를 목록 마커라고 하는데, CSS에서 list-style-type 속성을 통해 목록 마커의 형태를 지정할 수 있다. 순서가 없는 목록 즉 태그의 경우 ..
[CSS] 선택자 CSS 선택자 종류 1. 태그 선택자 2. id 선택자 3. class 선택자 태그 선택자 해당 태그에 스타일을 적용한다. 태그이름{ 속성1: 값1; 속성2: 값2; } 오늘의 날씨 구름이 많고 오후에 비가 내린다. id 선택자 해당 id 속성 값을 갖는 태그에 스타일을 적용한다. 원칙적으로 하나의 객체에만 스타일을 적용할 수 있다. #id값{ 속성1: 값1; 속성2: 값2; } box 클래스 box_m 아이디 class 선택자 해당 class 속성 값을 갖는 태그에 스타일을 적용한다. 여러 객체에 스타일을 적용할 수 있다. .class값{ 속성1: 값1; 속성2: 값2; } box 클래스 box 클래스
[CSS] HTML에 CSS를 적용하는 방법 CSS 표현식 selector{attribute: value;} selector (선택자) : 스타일 효과를 적용하는 대상 attribute (속성) : 해당 선택자에 적용할 스타일 효과 이름 value (값) : 해당 선택자에 적용할 스타일 효과 값 CSS 적용 방법 1. 인라인 스타일 2. 내부 스타일시트 3. 외부 스타일시트 1. 인라인 스타일 : HTML 태그에 기술 HTML 태그의 style 속성을 이용한다. this is red text. 2. 내부 스타일시트 : HTML 문서 내부에 기술 HTML 문서 I like CSS. this is red blue 3. 외부 스타일시트 : HTML 문서 외부로 연결 HTML 문서 외부로 .css 파일로 분리하여 이를 HTML 문서에 연결한다. HTML ..