Web publishing

4개

css 속성

2017.08.05 19:36

Font Tag

폰트는 브라우저 마다 다르기때문에 강제 해야 한다.

제목 : h1 ~ h6 숫자가 높을수록 글씨크기가 작아진다.

내용 : p 단락 br 개행 hr 수평줄

앵커 태그(a) : 웹표준에 따르면 href 값이 있어야 하기때문에 빈값은 # 로 채운다.

href 값에 특정 태그가 가지고 있는 id 값을 입력해주면 해당 태그로 이동하는 역할도 한다.

글자 형태 : b 굵은 i 기울어진 small 작은 sub 아래에붙는 sup ins 위에붙는 del 가운데줄

List Tag

기본목록 : ul 순서가 없는 ol 순서가 있는 li 목록 요소

정의목록 : dl 정의목록 dt 정의용어 dd 정의설명

Input Tag

<form action="" method="" enctype="">
    <input type="button" name="">
    <input type="checkbox" name="">
    <input type="file" name="">
    <input type="hidden" name="">
    <input type="image" name="">
    <input type="password" name="">
    <input type="radio" name="">
    <input type="reset" name="">
    <input type="submit" name="">
    <input type="text" name="">
    <!--html 5 태그-->
    <input type="color" name="">
    <input type="date" name="">
    <input type="datetime" name="">
    <input type="datetime-local" name="">
    <input type="email" name="">
    <input type="tel" name="">
    <input type="time" name="">
    <input type="url" name="">
    <input type="month" name="">
    <input type="number" name="">
    <input type="range" name="">
    <input type="search" name="">
    <input type="week" name="">
</form>

ETC Tag

table 태그 내부에 넣을수 있는 태그

caption 캡션 colgroup > col 열옵션 설정 thead, tbody, tfoot 3분할

img 태그

alt 이미지가 없을때 나오는 글자 지정

label 태그

input 태그를 설명하는데 사용한다. for 속성을 이용하고 id값을 이용해 접근한다.

textarea 태그

cols 태그의 너비 rows 태그의 높이

select 태그

select > option 단일 선택(기본)

selectmultiple="multiple" 속성을 추가하면 다중선택

select > optgroup > option 옵션 그룹이 있는 선택

fieldset, legend 태그

form > fieldset > legend table 폼에 태두리가 생긴다.

Space Division Tag

div : block 형식으로 공간 분할

span : inline 형식으로 공간 분할

block 형식 : div, h1~h6, p, ul(li), table, form

inline 형식 : span, a, input, 글자형식

Semantic Tag

Structure : header, nav, aside, section, article, footer

CSS Selector

문자열 속성 선택자

  • 선택자[속성~=값] : 특정 값을 단어로 포함하는 태그
  • 선택자[속성|=값] : 특정 값을 단어로 포함하는 태그
  • 선택자[속성^=값] : 특정 값으로 시작하는
  • 선택자[속성$=값] : 특정 값으로 끝나는 태그
  • 선택자[속성*=값] : 속성안에 값이 특정 값을 포함하는 태그

동위 선택자

동적 레이아웃 구성시 많이 사용됨

  • 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B 를 선택한다. (단일)
  • 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B 를 선택한다. (다중)

반응과 상태 선택자

  • :active
  • :hover
  • :checked
  • :focus
  • :enabled
  • :disabled

구조 선택자

nth로 시작하는 태그는 인덱스가 시작하는 0 부터 계산해서 수식을 넣을수 있다.

예를들어 2n + 1 넣게 되면 1,3,5,7,9 번째 자식 요소를 선택한다.

일반 구조

  • :first-child
  • :last-child
  • :nth-child(수열)
  • :nth-last-child(수열)

형태 구조

  • :first-of-type
  • :last-of-type
  • :nth-of-type(수열)
  • :nth-last-of-type(수열)

문자 선택자

시작 문자

  • ::first-letter
  • ::first-line

전후 문자

  • ::after
  • ::before

반응문자

  • ::selection 사용자가 드래그했을때

링크 선택자

  • :link
  • :visited

부정선택자

  • :not

CSS3 Style Attribute Basic

크기

%em은 상대적인 크기를 지정하고 px 는 절대적인 크기를 지정한다.

  • % : 기본값 100%
  • em : 배수를 나타내는 단위 즉 1em = 100%
  • px : 절대적으로 크기 지정

전체 폰트 크기에 절대값을 지정하고 각각의 태그에 상대 크기를

지정하는 방법은 많이 사용되는 태크닉 이다.

*  { font-size: 12px  }
h1 { font-size: 3.0em }
h2 { font-size: 1.5em }

크기 단위를 0 으로 입력하는 경우 단위를 입력하지 않아도 된다.

색상

  • HEX코드 : #000000
  • RGB : rgb(r,g,b)
  • RGBA : rgba(r,g,b,a) a는 알파값으로 0.0~1.0 값을가짐 투명도 설정
  • HSL : (hue,saturation,lightness) 두번째와 세번째 변수는 %를 이용해야함

파일용량을 미세하게 줄일수 있기때문에 HEX 코드를 많이 사용한다.

가시 속성

display, visibility, opacity

태그가 화면에 보이는 방식을 지정하는 속성이다.

display

모든속성을 브라우저가 전부 지원하진 않는다.

none, block, inline, inline-block을 사용할수 있다.

inline 블럭은 width, height 지정할수없고 margin 속성은 left 와 right만 지정

가능한 반면 inline-block 은 inline 에서 되지않는 모든것이 가능하다.

visibility

대상을 보이거나 보이지않게 한다.

hidden, visible, collapse(테이블 숨김)을 사용할수 있다.

display 는 태그가 화면에서 제거되지만 visibility 는 보이지만 않을뿐 영역이 그대로 살아있다.

opacity

0.0 ~ 1.0 사이에 값으로 태그의 투명도를 지정해준다.

박스 속성

border, margin, padding

box-sizing

content-box 와 border-box 를 값으로 지정할수 있는데 차이점이 매우 중요하다.

content-box : 지정한 폭과 너비에서 마진 패딩 보더값을 모두 더한값을 영역으로 한다.

100px x 100px div 태그일때 padding 10px margin 10px border 5px 일 경우 div 영역은 130px x 130px 최종영역은 150px x 150px 가 된다.

border-box : 지정한 폭과 너비에 패딩 보더값이 모두 포함되어 있다.

100px x 100px div 태그일때 padding 10px margin 10px border 5px 일 경우 div 영역은 100px x 100px 최종영역은 120px x 120px 가 된다.

border

border-width:thick;
border-style:dashed;
border-color:black;

한줄 입력 : border : 높이 스타일 컬러

border-left border-top 이런 방식으로 부분 스타일도 지정할수 있다.

border-radius

테두리를 둥글게 만든다.

border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래

백그라운드 속성

background-size

contain 은 너비를 100% 한것과 같은 효과

cover 는 높이를 100% 으로 지정한 것과 같은 효과

background-repeat

이미지 반복 속성 으로 x 또는 y축으로 반복할지 지정 가능

기본값은 repeat 으로 반복을 원치않으면 no-repeat 지정 가능

background-attachment

배경이미지를 어떤방식으로 화면에 붙일 것인지 지정하는 속성 이다

scroll 이 기본 속성이고 스크롤이 내려가면 사라진다.

fixed 는 스크롤이 내려가도 이미지가 항상 고정되있다.

background-position

이미지의 위치를 지정할수 있다.

폰트 속성

font-family

사용자의 컴퓨터에 깔린 폰트를 사용한다.

폰트가 없을수도 있기때문에 ,로 구분해서 여러개를 지정한다.

보통 마지막에는 serif(명조체) 또는 sans-serif(고딕체) 를 지정한다.

line-height

글자의 높이를 지정한다.

글자를 수직 수평 정렬할때 사용한다.

text-align

텍스트를 정렬한다.

inline 속성은 너비가 없기때문에 정렬이 안된다.

 

태그는 정렬되지만 태그는 정렬이 안된다.

text-decoration

앵커태그의 및줄을 제거하는 역할을 한다.

위치 속성

절대좌표는 고정된 크기를 만들때 사용하고 상대좌표는 이와 반대 개념 이다.

position

  • static : 태그가 위에서 아래로 순서대로 배치된다
  • relative : 초기 위치 상태에서 상하좌우로 위치를 이동한다
  • absolute : 절대적 위치 좌표 설정
  • fixed : 화면을 기준으로 절대적 위치 좌표를 설정
  • z-index : 앞에 올지 뒤에올지 우선순위 숫자가 클수록 앞에 위치한다.

position 속성을 absolute로 주면 부모 태그가 영역을 차지하지 않는다.

이러한 문제 때문에 사용해야 하는 공식이 있다.

자손의 포지션 속성을 absolute로 적용하면 부모의 포지션을 relative로 적용 해야한다.

position 과 함께 쓰이는 속성은 left, right, top, bottom 이 있다.

overflow

내부요소가 부모의 범위를 벗어날때 어떻게 처리할지 결정한다

  • hidden : 영역을 숨긴다.
  • scroll : 스크롤을 만든다 overflow-x or y 등으로 방향지정가능

float

leftright 속성이 있다.

부유하는 대상을 만들때 사용하는 스타일 속성이다.

자손에 float 적용하려면 overflow 속성을 hidden으로 적용한다.

이와 대체되는 방법으로 Footer 속성에 clear : both 를 사용하기도 한다

이방식을 one true layout 방식이라 한다

그림자 속성

  • text-shadow : 오른쪽 아래 흐림도 색상
  • box-shadow: 오른쪽 아래 흐림도 색상

그림자 속성은 , 구분해서 중첩 사용이 가능하다.

css3generator에서 만들어서 사용 하도록 한다.

filter 속성은 ie8 이하에서 그림자 만들수있게해주는 속성이다.

밴더 프리픽스

공급업체 접두사를 가르킨다.

마소, 모질라, 구글, 애플, 오페라에서 제공하는 실험적인 기능을

사용할때 사용한다.

prefix-free플러그인 을 사용 한다.

그레디언트

UCGG에서 만들어서 사용하자.

0개의 댓글이 있습니다.

파일첨부 button에 style주기/ input type file에서 파일명만 나오게

2017.05.23 15:09

파일첨부 button에 style주기/ input type file에서 파일명만 나오게




기본적인 파일첨부하기 input button은  

 

이렇게 스타일이 안예쁘죠~

 


 



원하는 디자인으로 예쁘게 파일첨부하기 버튼을 바꾸고

첨부파일이 파일경로가 다 표시되는것이 아닌 파일명만 나오게 하는 html 소스입니다.






 


<style>

.file_input_textbox{float:left}

.file_input_div{position:relative;width:100px;height:23px;overflow:hidden;}

.file_input_button{width:100px;position:absolute; top:0px; background-color:#aaa; color:#fff; border-style:solid;}

.file_input_hidden{font-size:45px; position:absolute; right:0px; top:0px; opacity:0; 

filter:alpha(opacity=0); 

-ms-filter:"alpha(opacity=0)"; 

-khtml-opacity:0; 

-moz-opacity:0;}

</style>


<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">

    <input type="button" value="파일선택" class="file_input_button">

   <input type="fileclass="file_input_hiddenonchange="javascript:document.getElementById('fileName').value = this.value.split('\\')[this.value.split('\\').length-1]">

</div>

 

 

 

 

input CSS, input type file, 파일첨부 스타일

0개의 댓글이 있습니다.

HTML 이미지맵 좌표잡기, 한이미지에 여러개 링크걸기

2017.05.11 14:14

HTML 이미지맵 좌표잡기, 한이미지에 여러개 링크걸기



하나의 이미지에 여러개의 링크를 거는법으로

이미지맵(image map)을 사용하는데요.

프로그램 다운로드 없이 쉽게 이미지맵 좌표잡아서 링크거는 법이 있답니다.



이미지맵 좌표 잡아주는 사이트

http://maschek.hu/imagemap/imgmap/



이미지맵 html소스

<img src="이미지경로" usemap="#이미지맵이름">

<map name="이미지맵이름">

    <area shape="rect" coords="이미지좌표" href="이동할 링크주소" target="_blank">

</map>


shape="rect"  (rect : 사각형좌표, circle : 원형좌표, poly : 다각형좌표)

coords="이미지좌표"  (시작점x,시작점y,끝점x,끝점y)

target="_blank"   (_self : 현재창, _blank : 새창에서)



그럼 따라해볼까요~~

cat.jpg 하나의 이미지에 naver부분과 daum부분 두군데에 링크를 걸어줄꺼예요.


1. 파일선택 버튼 클릭 cat.jpg파일 저장

2. Upload 버튼 클릭 파일업로드

3. 옆에 accept 클릭





그럼 중간에 cat이미지가 보여집니다.

4. NAVER 부분을 마우스로 긁어주면 0번에 좌표가 만들어집니다. 

5. DAUM 부분을 마우스로 긁어주면 1번에 좌표가 만들어집니다.

6. HTML 버튼(파란색) 클릭하면 아래에 html소스가 나와요.





html소스 복사해서 붙여넣기

<img src="/이미지들어있는폴더/cat.jpg" usemap="#imgmap01">

<map id="imgmap01" name="imgmap01">

    <area shape="rect" alt="네이버" title="" coords="8,15,152,59" href="http://naver.com" target="_blank">

    <area shape="rect" alt="다음" title="" coords="171,15,277,58" href="http://daum.net" target="_blank">

</map>



부분 수정해주면 간단하게 이미지맵 좌표잡아서 링크걸기 끝!





html소스, imagemap, 이미지맵, 이미지맵 좌표

0개의 댓글이 있습니다.

폰트어썸 아이콘 웹폰트로 사용하기

2017.05.02 14:54

폰트어썸 아이콘 웹폰트로 사용하기

폰트어썸 사용하는 방법을 안내해드립니다.

폰트어썸은 현제 4.6버전으로 630여가지의 아이콘을 폰트형태로 제공하고 있습니다.

폰트어썸 페이지 바로가기    http://fontawesome.io/icons/









사용방법

1. 원하는 아이콘을 서치한후 클릭.
2. 선택한 아이콘 페이지로 이동.
3. 해당 아이콘의 클래스명을 복사. <i class="fa fa-question-circle" aria-hidden="true"></i>

4. 복사한 아이콘의 클래스명을 바꾸고자 하는 태그 안에 붙여넣기.






fontawesome, 폰트어썸

0개의 댓글이 있습니다.

1

총 2,976,205명이 방문했어요.

오늘 131명 | 어제 187명

Blogger is 세미짱 & Simplify v1.1 made by OPNay