색상 변경 → 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태그 - 어떠한 내용을 삭제할 때..
h(n) 태그 (헤딩태그) - , , , , , 총 6개의 태그 주로 콘텐츠의 대제목, 중제목, 소제목과 같은 곳에 사용되기 때문 태그가 가장 중요한 의미를 가지는 태그 태그가 가장 덜 중요한 의미를 가지는 태그 h1 ~ h3태그를 자주 사용함 사용할 때 신경써야할 부분이 있음 h(n)태그에서 신경써야 할 2가지 (검색 엔진 최적화를 위해) 1. 태그는 한 번만 사용하기 (가장 중요도가 높은 태그) - 검색엔진에서 주요 콘텐츠를 파악할 때 모호해지기 때문 2. h(n)태그는 h1 태그부터 순차적으로 사용해야 함 - ex. h2 태그를 건너뛰고 h1, h3, h4, h5, h6 태그만 사용 (X) - ex. h2, h3, h4 태그만 사용 (X) 검색엔진이 html 문서를 해석할 때 수집하는 h(n)태그들..