1. Head 요소
-문서의 메타데이터 집합
Head 내 포함되는 요소 :
1) title : 문서의 제목 (브라우저 창 제목 / 탭에 표시되는 이름)
2) meta : 형식은 <meta 속성=속성값>와 같다.
3) link&style : CSS파일 연결 시 link사용
<link rel="stylesheet href="style.css" type="text/css" />2. Google fonts 사용
구글에서 제공하는 Embed 각각 html과 css에 입력하여 글꼴 적용 가능
3. 링크 연결
이미지/텍스트에 링크 연결
<a href="페이지주소"><img src="이미지주소"></a> <a href="페이지주소"><p>텍스트</p></a>
4. CSS문법
적용 형식 : selector{Declaration(Attribute:Value);Declaration;}
1) Selector : 스타일 적용 대상
2) Attribute(Property) : 속성
3) Value(Property-Value) : 값
적용 방법:
1) 각 요소에 직접 적용 시 : 관리가 어려움
2) style요소 활용 : 양이 많을 시 관리 어려움
3) css내용을 외부 파일로 연결
5. CSS단위
1) em 단위 : em 단위가 쓰여진 곳(부모)의 폰트 사이즈 배수
Pixel작업 시 양이 많아지면 일일이 수정할 수 없기 때문에
em 단위를 사용하면 최초의 font-size만 수정하면 같은 비율로 변경 가능
구조 : <body><p><span></span></p></body>
* em 단위 css 적용 시
body{font-size: 16px}
p{font-size: 2em} : p의 폰트 사이즈는 16*2 = 32
span{font-size: 2em} : span폰트 사이즈는 32*2 = 64 2) rem 단위 : 문서의 기본값 (16px)의 배수
3) % 단위 : 부모요소가 만들어준 공간 안에서 너비 비율
4) vh / vw : 화면(viewport) 기준의 너비 비율
6. display:inline-block;
1) display:inline;
☛ 너비와 높이를 설정할 수 없음
=내용이 차지하는 너비와 높이 외 다른 부분을 변경할 수 없음
☛ 줄바꿈 기능이 없음2) display:block;
☛ 너비와 높이를 설정할 수 있음
☛ 줄바꿈 기능이 있음3) display:inline-block;
☛ 너비와 높이를 설정할 수 있음
☛ 줄바꿈 기능이 있음(요소 옆에 다른 요소 추가할 수 있음)7. position:relative/absolute/fixed;
1) position:relative; 페이지의 default position에 비례하는 위치
2) position:absolute; 부모요소의 position과 관련
3) position:fixed; 페이지의 특정 부분에 scroll과 무관하게 고정됨
개발자 지망생 서하입니당