웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃 2019.04.02.
강의 자료 다운로드 http://www.letscoding.net
폰트 제어 CSS 폰트 패밀리, font-family 폰트 크기, font-size 폰트 스타일, font-style 폰트 굵기, font-weight font-size : 40px; /* 40픽셀 크기 */ font-size : medium; /* 중간 크기. 크기는 브라우저마다 다름 */ font-size : 1.6em; /* 현재 폰트의 1.6배 크기 */ font-style : italic; /* 이탤릭 스타일로 지정 */ font-weight : 300; /* 100~900의 범위에서, 300 정도 굵기 */ font-weight : bold; /* 굵게. 700 크기 */
구글웹폰트 적용 https://fonts.google.com
구글웹폰트 적용 원하는 폰트 + 로 추가
구글웹폰트 적용 선택 후 아래 검은 부분 클릭
구글웹폰트 적용 <head> <link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet"> <style> .webfont{ font-family: ‘Do Hyeon’, sans-serif; } </style> </head>
나만의 웹폰트 적용 https://noonnu.cc/index - 폰트 다운로드 및 저장(ttf, woff) - index.html파일 위치에 font 폴더 생성 후 저장
나만의 웹폰트 적용 <head> <style> @font-face{ font-family: 'TmonMonsori'; src:url(/font/TmonMonsori.ttf); } .tmon{ font-family:'TmonMonsori'; </style> </head>
Html 레이아웃
Html 레이아웃 display속성 - inline - block - grid - none
Html 레이아웃 display속성 <style> p{ display : inline; } span{ display : block; } </style>
Html 레이아웃 박스의 배치 : position - static : 디폴트값 - relative : 상대적 위치 - absolute : 절대적 위치 - fixed : 고정된 위치 - float : 유동적 배치
Html 레이아웃 position : relative; - ‘기본 위치’에서 left, top, bottom, right 값만큼 이동한 ‘상대위치’에 배치 right : 20px top : 20px 기본 위치 상대 위치 기본 위치 상대 위치 bottom : 20px left : 20px
Html 레이아웃 position : relative; - 실습 예제 - www.letscoding.net/relative.html
Html 레이아웃 position : absolute; - ‘부모 요소의 위치’에서 left, top 값만큼 이동한 ‘절대위치’에 배치 - 부모 요소가 없다면 화면 가장 왼쪽 위 모서리 가 기준
Html 레이아웃 position : absolute; - 실습 예제 - www.letscoding.net/absolute.html
Html 레이아웃 position : fixed; - 요소의 위치는 absolute와 똑같이 계산 - 지정한 위치에 고정 - www.letscoding.net/fixed.html
Html 레이아웃 float : left; float : right; - 웹 요소를 떠 있게 함 - 왼쪽 구석이나 오른쪽 구석에 배치 - www.letscoding.net/float.html
Html 레이아웃 clear:both; - float 속성 해제 - float 속성이 아래에 영향을 미칠 때 사용 - www.letscoding.net/clear.html
Html 레이아웃 z-index: 1; - 요소 위에 요소를 쌓는 순서 - www.letscoding.net/z-index.html
Html Grid 레이아웃 Grid Layout - 페이지를 여러 주요 영역으로 나눔 - 테이블과 같이 세로 열과 가로 행을 기준으로 요소를 정렬 가능 - 다양한 레이아웃을 쉽게 구형 가능
감사합니다. See you next week!!