ㅇ 색 이름으로 표현 p { color: black;} ㅇ 10진수 코드와 RGB()로 표현 p { background-color: rgb(255, 0, 0); /* red */} ㅇ 16진수 코드로 색 표현 p { background-color: #1A2B3C;}
기타/HTML and CSS
ㅇ 마우스 :hover 마우스를 오버했을 때 :active 마우스를 클릭했을 때 ㅇ 폼 요소 :focus 포커스 되었을 때 (input 태그 등) ㅇ 링크 :link 방문한 적이 없는 링크 :visited 방문한 적이 있는 링크 ㅇ 블록 :first-letter 요소의 첫번째 문자를 선택 :first-line 요소의 첫번째 줄을 선택 ㅇ 구조 :nth-child(odd) 홀수 요소 :nth-child(even) 짝수 요소 :nth-child(1) 목록 중 1번째에
p { /* 셀렉터 */ /* 프로퍼티, 값 */ color: blue; /* 프로퍼티, 값 */ font-size: 20px; }css의 기본 스타일 시트 형식 중에서, 셀렉터이다. ㅇ 개념 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능 ㅇ 종류 태그 이름 셀렉터 태그 이름이 셀렉터로 사용됨. class 셀렉터 셀렉터 이름 앞에 점(.)을 붙인 후 HTML 태그의 class 속성으로 지정함. id 셀렉터 셀렉터 이름 앞에 "#"을 붙이고, HTML 태그의 id 속성으로 지정함. 자식 셀렉터 부모 자식 관계를 > 기호로 조합함. 자신의 바로 밑 자식에게만 적용됨. 자손 셀렉터 자손 관계인 두 개 이상의 태그를 나열함. 자손 모두에게 적용됨. 전체 셀렉터 와일드카드문자(*)를 사용하여 웹페이지의..
ㅇ 부모 태그로부터 상속 CSS3 스타일은 부모 태그로부터 상속된다. > HTML 코드 DOCTYPE html> 부모 태그로부터 상속 부모로부터 상속받음!! p 태그에는 style이 없지만, p 태그의 부모 태그인 body의 style의 영향을 받아서 초록 글씨로 출력된다. > 결과 ㅇ 스타일 합치기(cascading)와 오버라이딩(overriding) 만약 이런 코드가 있다고 하자. DOCTYPE html> 우선순위는?? p { color: blue; font-size: 12px; } 안녕하세요 /* tistoryTest.css 파일 */p { background: yellow;} 이 코드에서 안녕하세요 라는 글씨는 어떤 style의 속성을 받았을까? 4종류의 스타일 시트가 존재한다. 우선순위가 낮은 ..
ㅇ CCS3 스타일 시트 형식 p { color: blue; font-size: 20px;} 위의 코드는 안에 있는 글의 색을 파랑색으로 하고, 폰트 크기는 20px로 설정하는 코드이다. p { /* 셀렉터 */ /* 프로퍼티, 값 */ color: blue; /* 프로퍼티, 값 */ font-size: 20px;} p : 셀렉터 CSS3 스타일 시트의 이름이나 규칙, 셀렉터와 같은 이름의 모든 HTML 태그에 스타일 시트를 적용한다. { } : 스타일 시트 블록 CSS3 스타일 시트는 중괄호 {} 를 이용하여 작성한다. color font-size : 프로퍼티 blue 20px : 값 각 CSS3 스타일은 프로퍼티: 값의 쌍으로 표현된다. 특징) - 각각의 프로퍼티는 ; (세미콜론)으로 구분하며, 마지..
css를 적용시키는 방법에는 총 3가지가 있다. Inline style sheetInternal style sheetLinking style sheet ㅇ Inline style sheet html 태그 style 속성에 css 코드 삽입 DOCTYPE html> 티스토리 테스트 Inline style sheet ㅇ Internal style sheet html 문서 내 내에 css 코드 삽입 DOCTYPE html> p { color: blue; } 티스토리 테스트 Internal style sheet ㅇ Linking style sheet 별도의 css 파일을 만들고 html 문서와 연결 DOCTYPE html> 티스토리 테스트 Linking style sheet /* tistoryTest.css 파..
리스트ol > ordered list (순서 있는 리스트)ul > unordered list (순서 없는 리스트)dl > definition list (정의 리스트) 내용li > list item ㅇ 순서 있는 리스트 태그 > 사용법 순서 있는 리스트 하나순서 있는 리스트 둘순서 있는 리스트 셋 > 결과 ol의 type을 다르게 주어서 바꿀 수도 있다. (defalut 값) ㅇ 순서 없는 리스트 태그 > 사용법 순서 없는 리스트 하나 순서 없는 리스트 둘 순서 없는 리스트 셋 > 결과 ul의 type을 다르게 주어서 바꿀 수도 있다. (defalut 값) ㅇ 정의 리스트 태그 > 사용법 용어의 제목 용어 설명, 자동 들여쓰기 > 결과
ㅇ 태그 이미지를 삽입하는 태그이다.
