반응형 IT/Web105 CSS3 - 웹 폰트, 구글 폰트, font 적용 font 적용 기본 브라우저에서 제공하는 font 가 아닌 구글 폰트를 활용한 font 적용 방법 인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록 고안된 폰트가 웹폰트 이다. 웹사이트를 방문하는 순간, 해당 폰트가 없다면 웹폰트를 다운 받아 웹사이트를 볼 수 있다. 구글 폰트는 무료로 제공된다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트 접속 후 마음에 드는 폰트를 확인하고 를 눌러 추가한다. 여러 개를 추가해도 된다. 추가하면 왼쪽 하단에 Families Selecte 가 생기는.. IT/Web 2019. 7. 16. 더보기 ›› CSS3 - CSS 드롭다운 가로 메뉴 만들기 가로 메뉴 만들기 예시) 핵심적인 부분만 언급하겠습니다 CSS3에서 어디를 선택하고 어떤 것을 정의해야 하는지를 중점으로 확인해야 한다. ① li 태그 안에 ul 태그 선 ul li 태그로 메뉴들을 정의할 때 메뉴1 아래 서브메뉴가 존재한다면, 아래 사진과 같이 li 태그 안에 ul 태그를 선언하여 서브메뉴를 추가해야 한다. ② 가로 정렬 기본적으로 ul li 태그는 block 방식이라 가로 정렬을 위해 float: left; 선언을 해주어야 한다 가로 정렬은 메뉴1, 메뉴2, 메뉴3, 메뉴4, 메뉴5 가 정의 되어 있는 태그에 해줘야 한다 ③ display: none; 처리 서브메뉴들은 평소에는 보이면 안되니깐 display:none; 처리 한다 서브메뉴가 보이지 않아야 하기 때문에 태그에 해줘야 한다.. IT/Web 2019. 7. 16. 더보기 ›› HTML5 - 웹페이지 구조 만들기 웹페이지 전체 틀 만들기 아래 사진과 같은 전체적인 웹 페이지 구조를 만들겠습니다 HEADER NAVIGATION menu1 menu2 menu3 menu4 menu5 CONTENT BANNER FOOTER IT/Web 2019. 7. 12. 더보기 ›› CSS3 - CSS float 속성 float 요소의 위치를 설정하기 위한 속성 사용법 float: left | right left: 왼쪽 정렬 right: 오른쪽 정렬 ※ float 속성을 적용하기 위해선 감싸고 있는 상위 태그에 overflow:hidden; 속성을 적용해야 한다 first second first second 태그는 block 형식의 태그이지만 float:left; 속성을 적용하면서 왼쪽 또는 오른쪽 정렬되었다. 만약, 감싸고 있는 상위 태그에 overflow:hidden; 속성을 적용 안하게 된다면 아래와 같다 위와 같이 다른 모양이 된다. IT/Web 2019. 7. 12. 더보기 ›› CSS3 - CSS position 속성 static, fixed, absolute, relative 정리 position 개요 객체를 위치시킬 때 사용하는 속성 상속되지 않음 사용법 position: absolute | fixed | static(default) | relative ■ absolute : 절대값; 해당 태그를 감싸는 상단 태그가 기준, 스크롤하면 움직임 ■ fixed : 화면상에 고정, 스크롤해도 움직이지 않음 ■ static : default ■ relative : 원래 내가 있어야 할 자리에서 이동 예제) 전체 코드 더보기 설명 전에 위 그림과 영상을 보고 생각해 보세요 (영상 파란색과 초록색이 바뀐 이유는... 색 조정을 다시하고 영상을 만들었기 때문입니다..) 그럼 간략히.. fixed 현재 화면을 기준으로 고정된 값입니다. 브라우저 왼쪽 상단 모서리가 기준입니다. 스크롤을 내려도 고.. IT/Web 2019. 7. 11. 더보기 ›› 반응형 이전 1 ··· 15 16 17 18 19 20 21 다음
