• 둘러보기
    • 대문
    • 전체 문서
    • 최근 바뀜
    • 임의의 문서로
    • 기여 점수
    • 우남위키 문법
  • 문서도구
    • 여기를 가리키는 문서
    • 가리키는 글의 최근 바뀜
    • 특수 문서 목록
    • 인쇄용 판
    • 고유 링크
    • 문서 정보
  • 게시판
    • 자유게시판
    • 계정 만들기
    • 계정 찾기
    • 로그인
    • 틀
    • 토론
    • 읽기
    • 원본 보기
    • 역사 보기
    틀:Span
    최근 수정 : 2022년 7월 16일 (토) 16:08
    분류:
    • 위키문법
    • 문서편집 틀
    • 글장식 틀
    • 속성 틀
    • 태그 틀

    보기 • 편집

    span 태그의 역할을 하며, 일반 글자 스타일을 지정하는 틀이다. 틀 {{sp}}로 사용해도 동일하게 작동한다.


    목차

    • 1 사용용도
    • 2 사용방법
    • 3 사용예
      • 3.1 내용만 입력한 예
      • 3.2 s=, r= 변수 사용 예
      • 3.3 b=, c= 변수 사용 예
      • 3.4 c=, a= 변수 사용 예
      • 3.5 r= 변수 사용 예
      • 3.6 w= 변수 사용 예
      • 3.7 i= 변수 사용 예
      • 3.8 h= 변수 사용 예
      • 3.9 id="id name"
    • 4 추가적인 설정 예
    • 5 함께보기

    사용용도

    특히 모바일에서 스타일을 지정하는데 유용한 틀인데, 스타일 지정시 오타등을 줄일 수 있다.

    사용방법

    문법
    {{sp |내용 |a= |b= |c= |s= |r= |i= |w= |h= |id="id name" }}
    • 내용
    1번째 인자, 스타일을 적용할 내용이다.
    "="이 없는 변수(인자)들은 순서가 바뀌면 않된다. "="이 있는 변수들은 순서와 관련 없으며, 1번째 인자의 앞에 지정해도 1번째 인자의 순서에 관련 없다.
    • text-align
    left, right, center로 정렬을 할 수 있다. 이 옵션은 display:block, width:100%도 같이 설정이 된다.
    • background-color
    배경색을 설정한다, 기본 yellow이다.
    • color
    글자 색을 변경한다, 기본은 black이다. red/gray/silver/royalblue ...
    • font-size
    글자 크기를 변경한다, 기본은 10pt(=100%). 8pt/ 9pt/ 85%/ 120% ...
    • font-weight
    글자를 강조할지를 설정한다, 기본은 normal. normal/ bold.


    • border
    테두리 설정, 1px dashed red; 형식으로 설정한다. 2px dashed blue/ ...
    • height
    글자의 높이를 설정한다. 이 옵션은 display:block, width:100%도 같이 설정이 된다.
    • line-height
    글씨가 쓰여진 줄의 높이를 설정한다. 기본140%. 100%/ 120%/ 160% ...
    • |id=
    id name을 지정하여 앵커기능으로 사용할 수 있다.
    검색 아이콘.png 이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.


    • 다음 틀은 비슷한 기능을 가진 다른 틀이며 참조하기 바란다.
    틀:st 문서를 참고하십시오.
    틀:코드 문서를 참고하십시오.


    사용예

    내용만 입력한 예

    아무 옵션 없이 적용할 경우, 기본색상이 출력되다.

    입력 결과
    텍스트
     
    텍스트


    s=, r= 변수 사용 예

    1번인자 매시지의 위치는 맨앞쪽을 추천한다. 결과는 같다.

    입력 결과
    {{sp|s=9pt |c=red |메시지}}
    {{sp|메시지|s=9pt |c=red}}
     

    메시지

    메시지

    이것은 다음의 html 태그와 같은 효과다.

    <span style ="color:red; font-size:9pt;">메시지</span>


    b=, c= 변수 사용 예

    입력 결과
    {{sp|애국가 |b=royalblue |c=white}}
     
    애국가


    이것은 다음의 html 태그와 같은 효과다.

    <span style ="background-color:royalblue; color:white;">애국가</span>
    


    c=, a= 변수 사용 예

    입력 결과
    {{span|범례 |c=red|a=right}}
     
    범례


    이것은 다음의 html 태그와 같은 효과다.

    <span style ="display:block; width:100%; color:red; text-align:right;">범례</span>
    다른예
    입력 결과
    {{span|주요작품|b=#ddddff|a=center}}
     
    주요작품


    r= 변수 사용 예

    border의 여러 옵션을 사용한 경우이다.

    입력 결과
    {{Span|점선|r=1px dotted red}}
    {{Span|점선2|r=1px dashed red}}
    {{Span|솔리드|r=3px solid green}}
    {{Span|두줄|r=3px double royalblue}}
    {{Span|두줄|r=3px groove red}}
     

    점선

    점선2

    솔리드

    두줄

    두줄


    w= 변수 사용 예

    글자의 굵기(강조)를 사용한 경우이다.

    입력 결과
    
    {{Sp|강조한 글자 |w=bold }}
    {{Sp|일반 글자 |w=normal }}
     

    강조한 글자

    일반 글자



    i= 변수 사용 예

    입력 결과
    
    * 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다. 
    * {{sp|줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.|i=70%}}
    * {{sp|줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=90%}}
    * {{sp|줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=110%}}
    * {{sp|줄간격 160% - 이 줄은 글자의 줄간격이 160%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다. |i=160%}}
    * 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다. 
     
    • 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기까지는 일반적인 글자의 줄 간격을 나타내고 있습니다.
    • 줄간격 70% - 이 줄은 글자의 줄간격이 70%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
    • 줄간격 90% - 이 줄은 글자의 줄간격이 90%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
    • 줄간격 110% - 이 줄은 글자의 줄간격이 110%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
    • 줄간격 160% - 이 줄은 글자의 줄간격이 160%로 설정되었있으며, 일반적인 글자의 간격보다 간격이 좁게 설정되어 있음을 볼 수 있습니다.
    • 지금 보고 있는 예제는 글자의 줄 높이를 보여주고 있습니다. 그리고 여기서부터는 일반적인 글자의 줄 간격을 나타내고 있습니다.

    h= 변수 사용 예

    텍스트를 150px 설정한 경우

    보여지는 결과와 같이 높이를 지정한 경우이다. 그러나 텍스트의 위치는 테이블에서 설정하는 것과는 다르게 윈쪽에 위치한다.

    입력 결과
    {{Span|텍스트 |b=gold |h=50px }}
     
    텍스트


    텍스트를 높이 50px의 블럭 중앙에 배치한 경우

    gold색으로 높이 50px의 블럭을 설정한 다음에 텍스트의 위치를 padding 옵션을 이용하여 위쪽에서 15px에 위치에 설정한다.

    입력 결과
    {{Span|텍스트  |b=gold |a=center |h=50px; padding:15px 0 0 0 }}
     
    텍스트


    id="id name"

    id name을 지정하여 앵커기능으로 사용할 수 있다.
    검색 아이콘.png 이 주제에 대한 자세한 내용은 틀:앵커 문서를 봐 주세요.


    추가적인 설정 예

    틀 span에서 정의되지 않은 속성 값을 설정할 수 있는데 위의 매개변수 값 설정 후 구분자 기호  ;  입력 후에 style설정하듯이 설정하면 된다.

    입력 결과
    {{span|영화|b=green|c=white; border-radius: 7px}}
     
    영화


    함께보기

    • 틀:st
    • 틀:코드
    • 틀:테두리
    위키문법 · 색목록 · 컬러/픽커 · 특수문자/ㅇ
    보기 • 편집
    인물정보 입력 틀
    연예
    연예인 · 걸그룹 · 보이그룹 · 음악그룹 · 음악가 · 작가(만화가)
    옛 인물
    성인 · 역사인물 · 왕족
    지도자
    일반인 · 정치인 · 공직자 · 총리 · 국가원수/대통령 · 군주
    운동선수
    야구선수 · 축구선수 · 운동선수 · 격투기선수
    전문직
    성직자 · 과학자 · 과학자(노벨상) · 군인
    기타
    인물정보
    틀 분류 목록

    글장식 | 문자 | 수치 | 인용 | 동음/동명이인 | 표관련 | 이미지 | 아이콘

    목차 | 제목 | 링크

    둘러보기 |  ? 

    틀 설명문서 | *모든 틀| *모든 분류

    인물정보 | 정보상자
    보기 • 편집
    관련 정보 입력 틀
    국가/정치
    나라 / 표나라명 · 옛나라 · 도시 · 역사 · 정당(/정당명 틀 목록/정당색 ) · 행정부
    지리 관련
    산 · 섬 · 강 · 호수 · 반도 · 사막
    도로 · 철도노선
    문화
    영화 · 방송 · 인터넷방송 · 유튜브 · 웹사이트 · 신문 ·
    세계유산
    기관 / 단체
    공공기관 · 정부기관 / (정부기관 틀) · 행정부

    고등학교 정보 · 대학 정보/대학교(별도틀) · 회사(기업) · 방송국 · 성당/교회

    노동 조합 · 시민사회단체
    인용 틀
    {{서적 인용}} . {{웹 인용}} . {{영상 인용}} . {{뉴스 인용}} . {{저널 인용}}
    기타 정보
    스포츠 · 원소 · 자동차 · 항공기 · 종교
    언어
    {{언어 정보}} · {{언어분류}}
    분류:언어에 관한 틀 · 분류:언어 틀
    기타
    질병 / 틀:분지군/계통도
    행정구역 / 역사
    분류:행정구역 틀 • 분류:역사 틀
    필요한 문서 목록
    특수:필요한문서 • 특수:짧은문서 • 특수:분류안된문서 • 특수:분류안된분류 • @분류 목록 보기
    미등록 분야의 문서들 틀:해부학 • 틀:수학 분야 • 분류:노벨상 수상자
    동음이의.png 여기를 가르키는 문서 목록입니다.
    최근 바뀜
    자유게시판
    Powered by MediaWiki
    • 개인정보처리방침
    • 우남위키 소개
    • 면책 조항
    기본