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; }
(시각 + 의미) strong태그 - 중요한 텍스트를 나타낼 때 사용 ex. 중요: 기계적 결함. em태그 - 텍스트를 강조하고 싶을 때 사용 (텍스트를 기울임꼴로 출력) ex. 이 놀이기구는 임산부, 어린이, 노약자는 탑승할 수 없습니다. strong태그와 em태그는 중첩해서 사용 가능 (서로, 같은) → 같은 태그를 여러번 중첩할 경우 시각적으론 같지만, 의미적으로 좀 더 중요(강조)한 것 으로 처리됨 (시각) b태그 - 단순하게 텍스트를 굵게 해줌 (시각적으로만) i태그 - 단순하게 텍스트를 기울여줌 (시각적으로만)
- image (이미지) img 태그는 빈태그이다. 내부 리소스 이미지 방법 src 속성 이용 → 이미지 파일의 경로 ./ → 현재 폴더 (html이 실행되고 있는 현재폴더 기준) ../ → 상위 폴더 (중첩 사용 가능) ../../ → 상위 폴더의 상위 폴더 alt 속성을 사용해 이미지가 올바르게 표현되지 않았을 때, 글로 설명 가능 외부 리소스 이미지 방법 이미지 태그를 a태그로 감싸는 경우 ex. → 이미지를 클릭하면 해당 링크로 이동함 (이미지 링크) + target="_blank"를 사용하면 새 창으로 띄움
p태그 - paragraph(단락) : 독자들이 이해하기 쉽도록 내용상으로 매듭을 짓는 단위 - p태그는 웹 브라우저의 가로 한줄을 사용하는 태그 - 공백은 웹 브라우저에서 최대 한 칸 → 로 확장가능 br태그 - 줄바꿈 a태그 - anchor(링크) - a태그는 내부 링크 방법과 외부 링크 방법이 있음 - 목차에 많이 사용함 내부링크 ex. one로 이동 외부링크 ex. 구글로 이동 ex. 구글로이동 → 새로운 탭에서 열리도록 함 blockquote태그 - 인용문을 나타낼 때 사용하는 태그 cite속성 사용 가능 (url 주소 등) q태그 - 짧은 인용문을 나타낼 때 사용하는 태그 cite속성 사용 가능 ins태그 - 어떠한 내용을 새롭게 삽입할 때 사용하는 태그 del태그 - 어떠한 내용을 삭제할 때..