본문 바로가기

Frontend/CSS

(14)
CSS 선택자 ( 자식 / 자손 / 구조 ) 자식 / 자손 선택자 (상속 선택자) 자식 선택자 : > 부호 사용 선택자 > 자식 선택자 선택자A > 선택자B 자손(후손) 선택자 : 띄어 쓰기 (스페이스) 선택자 자손선택자 선택자A 선택자B #header h1 #pageNav ul li a:hover 후손 선택자 예제 Header navigation Section paragraph....paragraph...paragraph...paragraph...paragraph... 자손 선택자 예제 Header navigation Section paragraph....paragraph...paragraph...paragraph...paragraph... 구조 선택자 first-child 선택자 형제 관계에서 첫 번째로 등장하는 태그 선택 : .wrap div..
CSS 외부 문서 연결 방법 (1) ~.css 파일 작성 @charset "UTF-8"; div.menu { width:300px; height:300px; background-color:white; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.3); margin-bottom:15px; } div.item { text-align:center; padding:5px 5px; } (2) 사이에 아래 코드 삽입 (link 이용)
CSS 속성 텍스트 속성 font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */ font-size : 40px; color : blue; /* 글자색 */ font-style : italic; font-weight : bold; /* 굵게 */ text-decoration : underline; letter-spacing : 3px; /* 글자 사이 간격 */ word-spacing : 5px; /” 단어 사이 간격 */ line-height:10px; /* 줄 간격 */ text-align : center; text-shadow : 2px 2px 2px black; /*(가로 세로 크기 색상) */ 배경 색 background-color : #00ff00; background-colo..
CSS 선택자 (태그 / 아이디 / 클래스 / 속성 / 상태) 선택자 유형 태그 선택자 아이디 선택자 클래스 선택자 속성 선택자 상태 선택자 태그 선택자 태그명 사용 요소 (element) 선택자라고도 함 HTML 문서에 있는 같은 모든 태그에 동일하게 적용 태그명 { 속성명:값; } h3 { background-color:#000; color:#fff; width:50%; margin-left:20px; } li {color:red;} 아이디 선택자 # 사용 문서에서 특정 부분에만 필요한 스타일 적용할 때 사용 필요한 부분에 유일한 아이디를 지정하고 CSS 적용 식별 선택자라고도 함 태그에 반드시 id로 지정 되어 있어야 함 #idName {속성명: 값;} #menu { border:3px solid #000; width:500px; padding:10px; ma..
스타일 시트 (CSS) 스타일 시트 (CSS) Cascading Style Sheets : 계단형 스타일 시트 단계적으로 스타일 적용 여러 스타일이 겹치면 맨 마지막 스타일 적용 HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 가능한 작업 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 정렬 방식, 그림자, 동적인 기능 다양한 효과 스타일 시트 장점 자유롭게 웹 문서 편집 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 통일감 있는 문서 작성 한 번만 정의하여 문서에 일관되게 적용 가능 편리한 문서 관리 외부스타일 스타일 시트 파일을 사용하여 여러 ..