배운 내용
- 시맨틱 마크업
- link
- 내부 스타일 시트
- 선택자 요소
- Font속성
- 테이블&테두리 속성
- 박스모델
1. 시맨틱 마크업
시맨틱 마크업은?
기존HTML보다 확장된 문서구조 태그를 지원한다.
검색엔진에 노출이 잘 될 수 있도록 해준다.
시맨틱 마크업 태그 예시 1
시맨틱 마크업 태그 예시 2
- section : 제목과 단락으로 구별할 수 있다.
- article : 새로운 문서에서 사용하더라도 전혀 이상하지 않다.
- header : 페이지의 타이틀, 로고를 표시한다.
- aside : 사이드에 연관된 부분을 표시한다.
- footer : 홈페이지 밑에 나타나는 부분을 표시한다.
시맨틱 마크업 예시 3
- 홈페이지의 제목인 ‘제주 올래'를 header로 선언한다.
- 제목, 단락으로 구별할 수 있는 제주올래 7코스 및 설명을 section으로 선언한다.
- 새로운 문서에도 사용 가능한 부분을 article로 선언한다.
- 홈페이지 밑에 첨가할 footer를 선언한다.
2. link
link는?
외부 스타일 시트를 참조하여 CSS를 적용할 수 있다.
- link는 <head>안에 작성하며 rel, type, herf 속성을 사용한다.
link 예시 1
- @charset “UTF-8”; 을 선언한 외부 스타일 시트에서 스타일 선언을 한다.
- <head>태그 내에 <link>태그를 선언한다.
- 외부 스타일 시트에의하여 result값으로 변한다.
link 예시 2
- @import url() 을 사용하여 외부 스타일 시트를 불러들일 수 있다.
3. 내부 스타일 시트
내부 스타일 시트는?
내부 스타일 시트에 바로 스타일을 적용하여 출력하는 것을 말한다.
- <style>태그를 사용하여 작성한다.
- <head>태그 내부에 작성한다.
내부 스타일 시트 예시
- <style>태그 내에 type을 선언한다.
- 각 태그에 맞는 스타일을 선언한다.
4. 선택자 요소
선택자 요소는?
HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재한다.
선택자 요소 예시
- 클래스, ID, 하위, 자식 선택자는 무조건 알아둘 것(활용도가 높음)
클래스 선택자
- class 선택자는 .클래스명{} 으로 선언한다.
- 해당 클래스에 해당되는 스타일을 선언한다.
ID 선택자 예시
- ID 선택자는 #클래스명{} 으로 선언한다.
- 해당 클래스에 해당되는 스타일을 선언한다.
하위, 자식 선택자 예시
- 하위 선택자는 두 요소를 나열{} 선언한다.
- 자식 선택자는 부모 > 자식 {} 선언한다.
5. Font속성
Font속성은?
Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일 등을 지정한다.
font속성 예시 1
6. 테이블&테두리 속성
테이블&테두리 속성은?
요소의 속성에 대해사 테이블의 너비나 높이를 지정, 테두리 속성을 지정한다.
테이블&테두리 속성 예시
7. 박스모델
박스모델은?
컨텐츠, 패딩, 테두리, 마진으로 구분한다.
박스모델 예시 1
박스모델 예시 2
'KOSTA' 카테고리의 다른 글
| KOSTA 교육(내장객체, Array, String, Date, 정규표현식, 이벤트) (0) | 2021.03.19 |
|---|---|
| KOSTA 교육 (JavaScript, 문법, 변수, 함수, 객체, Prototype) (0) | 2021.03.19 |
| KOSTA 교육(HTML, Tag, div, ol, ul, li, head, meta, body, form, h, input, type) (0) | 2021.03.16 |
| KOSTA 교육 (데이터 모델링, 엔티티 타입, 정규화) (0) | 2021.03.15 |
| KOSTA 교육 (PL/SQL, 제어문, 반복문, EXCEPTION, CURSOR, PROCEDURE) (0) | 2021.03.12 |
