일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- css그라데이션 #css
- float의문제점
- css선택자 #css #선택자 #selector
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사3회 #웹디자인기능사합격 #웹디자인기능사후기 #웹디자인기능사실기후기 #웹디자인기능사실기합격 #디자인자격증 #국가자격증
- 연봉
- vertical-align #css표스타일
- css배경 #css백그라운드
- 유튜브핀마이크 #핀마이크 #스마트폰마이크 #핀마이크추천 #PM100 #가성비핀마이크
- 포트폴리오사이트 #포트폴리오 #웹디자인포트폴리오
- 어도비XD #프로토타입 #햄버거메뉴 #슬라이딩메뉴
- 내컴퓨터아이피 #내컴퓨터아이피확인 #아이피확인 #컴퓨터아이피 #아이피주소확인
- 폰트어썸 #fontawesome #폰트어썸사용법 #폰트어썸사용하기
- 취업성공패키지 #취업성공패키지웹디자인 #취업성공패키지웹퍼블리셔 #웹퍼블리셔 #웹디자인 #국비지원웹디자인 #국비지원웹퍼블리셔
- 인터넷익스플로러버전확인 #인터넷버전확인#인터넷버전검색#인터넷익스버전검색
- 프리미어 #프리미어자동으로늘어나는글자 #프리미어글자 #프리미어자막 #프리미어자동자막 #프리미어자막넣기
- css속성 #display속성
- overflow속성
- 무선마우스 #앤커무선마우스 #A7852
- 미디어커리 #뷰포트
- css속성 #float속성 #clear속성
- 웹디자인기능사 #웹디자인기능사공부#웹디자인기능사실기
- 웹디자인기능사#웹디자인기능사실기#웹디자인기능사실기공부
- css텍스트스타일 #text-transform
- 앤커마우스 #버티컬마우스 #앤커버티컬마우스
- 소개팅어플
- 직장인애환
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사실기공부
- 크롬마우스우클릭 #크롬마우스우클릭해제 #마우스우클릭해제 #마우스우클릭확장프로그램 #크롬확장프로그램 #마우스우클릭허용 #크롬사진퍼가기
- 웹디자인기능사 #웹디자인기능사실기 #웹디자인기능사실기후기 #웹디자인기능사공부 #웹디자인기능사실기공부
- css포지션 #포지션속성 #cssposition
- Today
- Total
목록전체 글 (92)
블로그
200x200크기의 컬러 박스를 화면의 정가운데 배치하기 1. calc이용 HTML 1 2 3 4 5 6 7 8 빨간색입니다. 녹색입니다. Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 body{background-color:#f0f0f0;} .color{width:200px; height:200px; background-color:#ff0; position:absolute; left:calc(50% - 100px); top:calc(50% - 100px);} /* 중앙으로 보내려면 위,왼쪽 -100씩(color의 크기가 200이니까) */ Colored by Color Scripter cs 2. 위치값에서 -하기 1 2 3 4 5 6 .color{color:#f00..
text-transform 속성 - 텍스트 대·소문자 변환하기 속성 값 설명 none 변환하지 않습니다. capitalize 시작하는 첫 번째 글자를 대문자로 변환합니다. uppercase 모든 글자를 대문자로 변환합니다. lowercase 모든 글자를 소문자로 변환합니다. full-width 가능한 모든 문자를 전각 문자로 변환합니다. ▶ '전각 문자'란 고정 폭 영문자 너비의 두 배 정도 너비의 문자이며 전각 문자 너비의 절반 정도 너비인 문자를 '반각 문자'라고 부릅니다.
블록 레벨 요소 -> 인라인요소 인라인 레벨 요소 -> 블록레벨요소 속성 값 풀이 block 박스를 블록 요소로 만들어 줌. (줄 바꿈이 일어남) inline 박스를 인라인 요소로 만들어 줌. (줄 바꿈이 일어나지 않음), 크기 못줌 inline-block 박스를 인라인 요소로 두어 줄 바꿈은 일어나지 않게 하면서 블록에 쓸 수 있는 속성을 쓸 수 있음, 크기가능 none 박스를 보이지 않게 숨겨줌. ※ 블록에 쓸 수 있는 속성이란? - width, height, padding, text-align...등
float속성 - 왼쪽이나 오른쪽으로 배치하기 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 필요. float한 박스에 가로 사이즈를 함께 주어야 모든 구형 브라우저에서까지도 크로스 브라우징 됩니다. 속성 값 설명 left 해당 요소를 문서의 왼쪽으로 배치합니다. right 해당 요소를 문서의 오른쪽으로 배치합니다. ※ h1 블록이나 인라인 요소들은 가로 사이즈 없이 float 해도 크기가 자동으로 잡힌다. float를 사용하면 너비를 지정하지 않으면 너비가 없다. 단 텍스트일 경우 을 사용하지 않으면 줄이 바뀌지 않고 옆으로 계속 진행되서 꽉차게 된다. 좌우 레이아웃일 경우 반드시 너비를 지정해야 한다. = float은 좌우가 같이 늘어나지 않는것이 최대 단점 clear float된 ..
- 이미지나 폼 요소를 위,가운데,아래 등으로 세로 정렬시켜 줍니다. - 쓸 수 있는 값들 : top(위쪽 정렬), middle(중앙 정렬), bottom(아래쪽 정렬) - img, input, select, 테이블의 th, td등에 사용합니다. 속성 값 설명 baseline 인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다. sub 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다. super 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다. top 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다. middle 인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춥니다. bottom 인라인 요소의 아랫부..
선택자란 CSS로 UI 디자인을 할 때 '어디를 꾸며 줄까?' 하는 고민의 대상이 되는 부분을 말합니다.그중에서 타입 선택자, id 선택자, class 선택자가 가장 중요합니다. 1. 타입 선택자태그 이름을 그대로 갖다 쓰는 선택자입니다.p { color : blue; } - p태그 안의 글자들을 파란색으로 처리함. 2. id 선택자id로 붙인 이름을 가져다 쓰는 선택자 입니다. - '#'를 붙여 표기함.#ctxt { color : blue; } -- id명이 ctxt인 요소의 글자들을 파란색으로 처리함. 3. class선택자 class로 붙인 이름을 가져다 쓰는 선택자입니다..ctxt { color : blue } -- id명이 ctxt인 요소의 글자들을 파란색으로 처리함. 4.전체 선택자페이지의 모든..
position 속성 - 배치 방법 지정하기 블록을 박스의 위치기준으로 배치하는 기술로서, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 디자인상의 순서가 다를 경우의 표현에 매우 유용합니다. 쓸 수 있는 값 풀이 static 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하며 positon을 생략하면 그게 바로 static. reltative relative로 지정된 요소는 left와 top 속성으로 이동을 할 수 있으며, absolute로 지정된 요소의 부모 요소 역할을 할 수도 있다. = 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다 absolute absolute로 지정된 요소는 다른 요소와 겹칠 수 있고 left와 top 속성을 이용하여 부모 박스를 기준으로 위치를..
배경에 관한 속성은 배경색, 배경 이미지, 배경 반복 여부 ,배경위치, 배경 고정 여부 등이 있으며 이 모든 속성을 한 줄로 표기할 수도 있어야 한다. 속성 풀이 background-color 배경의 색상을 지정한다. transparent - 투명 (생략하면 기본값으로 취급됨) #ff0000 - 배경을 빨간색으로. background-image 배경으로 쓸 이미지를 지정한다. 예)url("images/bg.png") background-repeat 배경 이미지를 어떻게 반복시킬지 정한다. repeat - 가로 세로로 반복.(생략하면 기본값으로 취급됨) no-repeat - 한번만 나옴. repeat-x - 가로로 반복함. repeat-y - 세로로 반복함. background-position 배경 이미지..