기록 저장소

webservice.html 코딩 전문 서비스의 FlexCoding ~웹 표준에 준거한 고품질 핸드 코딩을 제공합니다!~ TEL:000-1234-5678 영업시간:평일 10:00 ~ 19:00 주소 : 서울시 강남구 논현동 홈 FlexCoding에 대하여 코딩대행 세미나. 레슨 흔히 하는 뻔한 질문 문의 홈 코딩대행 서비스의 특징 1. 종래의 전용 사이트는 물론 반응형 웹디자인에도 대응 PC나 스마트폰 전용 사이트 코딩은 물론, 반응형 웹디자인 코딩에도 대응합니다. 반응형 웹 디자인의 경우, 대응 브라우저는 IE9이상을 표준으로 하고 있으나 원한다면 IE8대응 코딩도 가능합니다. 타깃 브라우저나 사용하는 언어 규격등 고객의 희망에 맞춰 유연하게 대응할 수 있습니다. 상담해주세요. 제작기법 코딩 업무에 특..

2차원 변형(transform) . 텍스트나 이미지 박스를 - 회전 - 확대, 축소 - 이동 - 찌그러뜨리기 등 다양한 기하학적 모양으로 출력할 수 있다. . 마우스를 올릴때 순간적으로 이러한 변화를 일으킬 수 있다. 종류 transform: translate(20px, -30px) : 20만큼 우측, 30만큼 위로 이동 transform: rotate(30deg) : 30도 회전 transform: scale (1.3, 0.7) : 가로 130% 확대, 세로 70% 축소 transform: skew(30deg, 20deg): 가로 30도, 세로 20도로 찌그러뜨리기 . 위치이동 translate(x,y) translateX(n) translateY(n) . 확대/축소 scale(w,h) scaleX(n..

레이아웃 선택시 고려사항 . 정보량에 따라 단과수, 가변 또는 고정, 그리드인가 프리인가를 결정해야 한다 . 다단 레이아웃 float으로 처리 . 프리스타일 경우 position을 이용 단 레이아웃 . 단의 수에 따라 1단, 2단, 3단... 구분되는 레이아웃이다 . PC용은 거의 1단이 대다수며, 2단, 3단 정도가 일반적이다 1단 레이아웃 - 위에서 아래로 정보를 배치하는 레이아웃 - 하나의 주제에 깊이있게 다룰 때 주로 사용 - 판촉사이트, 모바일의 가로폭이 좁은 경우에 주로 사용 2단/3단 레이아웃 - 화면영역이 넓고 정보량이 많은 사이트에서 활용 - 사용자의 편리성을 위해서 내비게이션을 설계하는 것이 좋다 레이아웃 1단 레이아웃 2단 레이아웃 3단 레이아웃 그리드 레이아웃 . 글자와 이미지, 단..

header ------------------------------- nav ------------------------------- ------- ------------- ------- nav article aside ------- ------------- ------- ------------------------------- footer ------------------------------- . float 방식 . position 방식 . float + position 방식 문서 구조화 네비게이션 고정형입니다 - 콘텐츠의 특정 가로폭을 고정한 레이아웃이다 - 가로폭은 px로 설계한다 - 많은 사이트에서 활용되고 있다 - 가장 간편하다 볼 수 있다 - 대형화된 디스플레이에서는 가로폭이 좁고 답답하게 ..

동물병원 동물병원 24시 밥 먹이는 시간 지킬 것 길고양이 주사 맞히기 눈 아픈 동물 목에 깔때기 씌우기 매일 목욕 시킬 것 이름없는 애들 이름 짓지 말기 더보기 정적배치 고정배치 상대배치 박스 floating box . 마치 공중에 떠있는 것처럼 배치시키는 것 . 주요속성 float: left : 플로팅박스를 왼쪽으로 배치 right : 플로팅박스를 오른쪽으로 배치 none (기본값) : 지정안함 clear: left : left로 지정된 플로팅박스를 해제 right : right로 지정된 플로팅박스 해제 both : 둘다 한번에 지정 해제 헤더 content1 content2 content3 푸터 My Home Page Nav Article Aside Footer 상대배치, relative 상대배치,..

1. 배치 : HTML태그가 출력되는 위치를 지정하는 것 2. 배치관련속성 . display : inline, block, inline-block, list-item, table, flex 등 . position: static, absolute, relative, fixed . float . z-index . visibility . overflow 3. 블록박스, 인라인박스 블록태그 : p, h, div, ul - 항상 새로운 라인에서 시작된다 - width와 height를 줄수있다 - text-align을 줄수있다. - margin, padding을 줄 수 있다. 인라인태그: span, a, img - 없다 >> 대표적인 박스유형 3가지 - 블록박스 : display:block - 인라인박스: disp..

이미지 border . 방법 : border-image: url("") 간격 옵션; - round : edge 이미지 반복배치 - repeat: - stretch: . 이미지 준비 size : 30x30 이미지 테두리 만들기 다음은 원본 이미지 입니다 round 스타일 이미지 테두리 round 스타일 이미지 테두리 round 스타일 이미지 테두리 Overflow ; 내용이 영역안에 모두 들어가지 않을 경우의 표기지정 . visible : 넘치는 내용을 보이게 설정 . hidden : 넘치는 내용을 안보이게 설정 . scroll : 스크롤되게 설정 . auto : 브라우저의 기본값으로 설정 white-space ; 공백을 어떻게 처리할 것인지의 속성. 공백-탭문자, 띄어쓰기, 줄바꿈문자 . normal :..

box4 DIV/DIV/DIV border-width: 전체 굵기 border-left : 왼쪽 border-right: 오른쪽 border-top : 위쪽 border-bottom: 아래쪽 속담풀이 말 한마디에 천 냥 빚진다 생각해보지 않고 나오는 대로 말하다가는 실수하면 상대의 마음에 아픔을 남기게 된다. 웃는 얼굴에 침 못 뱉는다 호의적인 의사소통 방법은 자기 말만 하는 것 보단 들어주는 것이 좋은 결과로 이어진다. 테두리(border)속성 . border-width : 선 굵기 1px 2px 3px 4px (상 우 하 좌) 1px 2px 3px (상 좌우 하) 1px 2px (상하 좌우) 1px (전체) . border-style : 선 스타일 (점선, 실선..) . border-color : 선..

다단편집 . CSS3에서 float, position을 이용하지 않고 다단 편집을 할 수 있다 . 속성 - column-count : 3; >> 박스의 내용을 3단으로 나눈다 - column-gap : 20px >> 각 단의 간격을 20px로 한다 - column-rule: 2px dotted brown; 구분선의 두께를 2px, 점선, 브라운색으로 지정 할머니 이야기 우리 동네에는 말이죠. 두 눈이 멀어버린 할머니가 한 분 살고 계세요. 아니, 정확하게 말하자면 그 할머니가 우리 동네에 사는 건 확실하지 않지만 우리 동네의 어느 집에 사는지는 잘 몰라요. 한 번도 그 할머니의 집을 가 본 적이 없으니까요. 그리고 아무도 그 할머니의 집을 궁금해 하지 않았으니까요. 우리는 그 할머니를 '옛날이야기 할머니..

title>Insert title heretitle>style type="text/css">    header,footer,section,article,hgroup,   figure,ficaption,nav,menu{      display: block;   }       body{      margin:0px;      padding:30px;      background:#f6f6f6;      color:#454545   }   h1{      margin: 0 0 10px 0;     상 우 하 좌       padding:5px 10px;       상 하  좌 우      background: #ccc;      color:#666;      font-size:120%;      text-sh..