HTML:head: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
 
19번째 줄: 19번째 줄:
<br />
<br />


== 반응형 페이지 만들기 ==
==반응형 페이지 만들기==
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0>
뷰포트 설정으로 기기 크기에 맞추어 창을 설정할 수 있다. 보통 style과 연동하여 width:45%; max-width:250px; 등의 조건을 주어 설정한다.
{| class="wikitable"
{| class="wikitable"
|+
|+
36번째 줄: 38번째 줄:
|}
|}


=== css ===
===css===
1240px보다 작아질 때 적용하는 방식이다. 틀의 위치, 형태 따위를 창 크기에 따라 조절할 수 있다.<syntaxhighlight lang="css">
1240px보다 작아질 때 적용하는 방식이다. 틀의 위치, 형태 따위를 창 크기에 따라 조절할 수 있다.<syntaxhighlight lang="css">
@media screen and (max-width:1240px){
@media screen and (max-width:1240px){

2021년 6월 18일 (금) 12:34 기준 최신판

틀:HTML HTML에 대한 문서들 모음집

  1. HTML:태그
  2. HTML:head
  3. HTML:리스트 만들기
  4. HTML:태그 속성
    1. HTML:링크
    2. HTML:앵커
  5. 컨텐츠 삽입
    1. HTML:이미지
    2. HTML:음악
  6. HTML:요소 꾸미기
    1. HTML:헤더, 네비게이터
    2. HTML:알림버튼 만들기

개요[편집 | 원본 편집]

페이지 전체를 아우르는 정보를 담아놓는 공간이다. 여기에 대한 것들을 다뤄본다.

페이지 이름[편집 | 원본 편집]

title 태그로 페이지의 이름을 지정할 수 있다.

<title>지나니네</title>

파비콘[편집 | 원본 편집]

페이지 이름 앞에 자그마하게 뜨는 아이콘. .ico 확장자를 담는다.

일반적으로 16x16크기가 표준이며, 이미지를 파비콘으로 변환해주는 사이트도 있다.(https://www.convertico.com/)

<link rel="shortcut icon" href="경로.ico">


반응형 페이지 만들기[편집 | 원본 편집]

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0>

뷰포트 설정으로 기기 크기에 맞추어 창을 설정할 수 있다. 보통 style과 연동하여 width:45%; max-width:250px; 등의 조건을 주어 설정한다.

옵션 설명
initial-scale=1.0 처음 크기
minimum-scale=1.0 최소 크기

css[편집 | 원본 편집]

1240px보다 작아질 때 적용하는 방식이다. 틀의 위치, 형태 따위를 창 크기에 따라 조절할 수 있다.

@media screen and (max-width:1240px){
    #선택자...
    display:none;
}