margin영역 : 박스모델에서 가장 외곽에 있음, html요소의 외부 여백 담당 margin: 20px; → 상하좌우 다 적용 margin: 10px 20px; → 상하 10px, 좌우 20px margin영역 세분화 지정 가능 (상하좌우 특정 방향에만 값 적용 가능) (margin-left, margin-right, margin-top, margin-bottom) ※ margin 겹침 현상 주의 →겹쳤을 때 더 큰 쪽의 값으로 적용됨 (합산이 아님) ※ inline 요소에서는 margin영역에 top, bottom 지정 불가 border영역 : 테두리 영역 border: 굵기 굵기종류 굵기색깔 ex. border: 1px solid red; (→ 단축 속성 (축약 속성) 방식) border-width..
적용 우선순위와 개별성 개별성 : 선택자 지정 방법에 따른 점수표 선택자 예 점수 전체 선택자 * 0 태그 선택자 div, p, h1 1 클래스 선택자 .box, .title 10 가상 요소 선택자 ::before, ::after 1 가상 클래스 선택자 :hover, :visited, :link 10 아이디 선택자 #title, #main 100 인라인 스타일 style="color:red;" 1000 점수가 같을 때에는 나중에 작성된 CSS 코드가 적용됨 상속에 의해 부모 요소가 가지고 있는 CSS 속성을 자식이 물려받음
* { color:red; } → 전체 선택자 h1 { color:red; } → 태그 선택자 (h1, dt 등) #h1 { color:red; } h1 tag → id선택자 (단, id 속성은 unique해야 함) .red { color:red; } h1 tag → 클래스 선택자 (클래스 속성은 중복 가능) .red {color:red;} .blue{color:blue;} h1 tag과 같이 사용 가능 [class] { color:red; } → 속성 선택자, [class='red']도 가능 이외에도 다양한 문자열 속성 선택자가 있음 h1, p { color:blue;} → 그룹 선택자 div > h1 { color: red;} → 자식 선택자 (특정 자식에 해당하는 내용만 지정, div태그 자식에 있..
font-family : [글꼴], [글꼴유형]; 글꼴유형(generic-family) 종류 : serif, sans-serif, cursive, fantasy, monospace ex. font-family: dotum, "바탕", "Times New Roman", serif; 여러 글꼴이 주어진 경우 앞에서부터 적용 시도 글꼴 이름에 공백이 있을 때, 한글일 때 " "로 묶어줘야 함 글꼴 유형 설명 serif 삐침이 있는 명조 계열의 글꼴 sans-serif 삐침이 없고 굵기가 일정한 고딕 계열의 글꼴 monospace 텍스트 폭과 간격이 일정한 글꼴 fantasy 화려한 글꼴 cursive 손으로 쓴 것 같은 필기체 계열의 글꼴 font-weight : 텍스트 굵기 단위, 100 ~ 900 (100..
font-size (폰트 크기 변경) 텍스트, 글자 ex. h1{font-size:16px;} css 크기 단위 : px, rem, em, vw, vh - px : 웹페이지에서 가장 기본이되는 크기 단위 (해상도와 관련) 해상도에서 1개의 점이 1px임. - rem : html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 사용하는 단위 웹브라우저들의 기본 폰트 크기는 대부분 16px임. ex. font-size: 2rem; + html{ font-size:20px; 를 통해 html의 폰트사이즈 변경 가능 } - em : 부모 태그의 폰트 크기의 배수로 설정 html의 부모 자식 형제 내부의 태그 동시사용 → h1, p 태그는 서로 형제관계 → h1, p태그의 부모는 태그 → ..
색상 변경 → color 속성사용 색상 표현방법 1. 키워드 : 색상의 영문 이름을 값의 키워드로 사용하는 방법 2. RGB : rgb(R,G,B) 0~255까지의 숫자로 표현 → h1{color:rgb(255,0,0);} rgb대신 rgba를 사용해 a(알파값 = 투명도)도 부여할 수 있음. → 0부터 1까지의 값을 소수점 단위로 수치를 적을 수 있음. 3. HEX(16진수)값 : #RRGGBB 16진수에서는 f가 제일 큰 수치고 0이 제일 작은 수치임. #ff0000 → 빨간색 #00ff00 → 초록색 →h1{color:#ff0000} + 연속된 것은 한번만 적어도 됨 00, ff → 0, f
CSS : HTML 태그에 스타일을 지정할 때 사용하는 언어 1. 내부 스타일 시트 : HTML 문서 내부에 CSS를 직접 작성하는 방법 사용하여 내부에 css 코드 작성 2. 외부 스타일 시트 : CSS 파일 별도 생성하여 연결 사용 3. 인라인 스타일 : 태그의 스타일 속성으로 CSS 코드 작성 ~~~ CSS 기본문법 선택자{속성:속성값;} {속성:속성값;}부분을 선언부라고 부름 선택자는 스타일링하고 싶은 html태그를 선택하는 영역 선언부는 스타일링하고 싶은 속성과 값을 작성하는 영역 p{color:blue;} 속성과 속성값은 한 쌍이상도 사용 가능 ↓ p{ color:blue; font-size:16px; }