본문 바로가기
반응형

IT/Web106

CSS3 - 반응형 웹 만들기 @media 규칙 @media media 환경에 따라서 상황에 따른 CSS를 적용할 수 있다. link 태그에 media 속성을 이용한다. 미디어 종류 all 모든 미디어 타입 aural 음성 합성 장치 braille 점자 표시 장치 handheld 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도 print 인쇄 용도 projection 프로텍터 표현 용도 screen 컴퓨터 스크린을 위한 용도 tv 음성과 영상이 동시 출력되는 TV와 같은 장치 embossed 페이지에 인쇄된 점자 표지 장치 NOTICE Nye 의 IT 세상 2019. 07. 18 write by Nye media="screen" 로 선언된 content_pc.css 파일 내용 #wrap .content { background-color:.. IT/Web 2019. 7. 18.
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.
반응형

티스토리툴바