자기 계발/CSS와 JAVA, HTML 썸네일형 리스트형 CSS 속성 2 display - 각 요소의 박스 타입을 지정 div {display: inline;} ① Property Value : 속성값 inline : 박스 타입을 인라인 요소로 지정block : 박스 타입을 블록 요소로 지정inline-block : 박스 타입을 인라인 블록 요소로 지정, 컨텐츠는 블록 요소로 지정하고 요소 자체는 인라인 요소로 지정, width / height 속성 사용 가능 none : 요소를 전혀 표시하지 않음 background - 요소의 배경을 설정 background: color(색상) image(이미지 경로) position(위치) repeat(반복유무); div {background: #00ff00 url(.."img/image.jpg") no-repeat center top;}.. 더보기 FLOAT 플로트, POSITION 포지션 Float 블록 요소를 인라인 요소 처럼 사용하기 위해 사용 레이아웃 상의 오류 상속 해제해야함 div {float :left;} property value : 속성값 left : 좌측으로 float 1 2 3 4right : 우측으로 float 4 3 2 1none : 속성없음 상단부터 하단으로 정렬 Float 속성 해제 clear:both;overflow:hidden;clearfix - 가장 편안하게 플로트를 해지하는 방법으로 플로트가 들거간 속성의 부모요소에 적용 더보기 폰트속성 font:style(폰트스타일) weight(굵기) size(크기)/line-height(행간) family p { font:itally bold 16px/3 "open Sans", san-serif;} - font-style:normal:기본 Italic:이탤릭 - font-weight : 폰트 굵기 normal : 기본 bold : 두껍게 - line-height : 행간 normal number px % - font family : 글꼴 serif : 명조체, san-serif : 고딕체, monospace : 행간이 같은 서체, script : 캘리서체 font-color 폰트색상 - text-align : 텍스트 정렬방식 left : 좌측 정렬 right : 우측 정렬 center : 중앙정렬 .. 더보기 box model margin top right botton left (시계방향)div{margin:20px 40px 20px 40px;} padding- 안쪽 여백 컨텐츠 사이즈에 영향을 줌. 경계 영역에 사이즈가 증가함. padding 10px 20px 30px 40px padding top-bottomdiv{padding:20px 40px;} 위, 아래 좌,우 paddingBODER도 컨텐츠의 하나다. 마진 값도 보더 이후 잡는다. border borde r :1px solid #000000 (두께 종류 색상) border - 방향div { border-top : 1px solid #00000000; } border - 속성div { border-width:1px;border-style:solid;border-col.. 더보기 선택자 조합 1. 하위 선택자 선택자와 선택자 (공백문자로 구분)부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용하는 방법 .note p {color:"orange"} 2. 자식 선택자 선택자 > 선택자 (왼쪽 부등호로 구분)부모 요소 바로 뒤의 자식요소 (자식 요소 이하를 포함하지 않는다)를 대상으로 스타일을 적용하는 방법 .swag > p {border : 1px solid red;} 3. 인접형제 선택자 선택자 + 선택자 (플러스 기호로 구분)문서 트리 구조상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 먼저 등록한 요소를 형 요소, 나중에 등록한 요소를 동생 요소라고 하는데 이때 나중에 등록한 동생요소에 스타일을 적용하는 방법 h1 + h2 {color : gray ;backgroundc.. 더보기 CSS 선택자 CSS 선택자 1. 전체 선택자 (Universal Selector) *{color:red;} 2. 태그 선택자 li{color:red;} 3. 아이디 선택자 - 요소의 id를 속성값으로 선택 #id{color:red;} #dog{color:red;} * id는 고유의 값으로 한번밖에 못쓴다. 4. 클래스 선택자 .textt{color:blue;} * class는 다수로 사용 가능하다. - id 와 class 의 성격은 같다. - 헷갈린다면 class로 써도 무관함. id : header, footer, nav, article 선택자 조합 1. 태그+클래스 li.class{color:red;} 동해 백두산 div.test{color:red;} 2. 아이디+클래스 div.#test.test (아이디+클래스.. 더보기 퍼블리싱 주석 인라인요소 순수한 인라인요소 span 인라인 블록요소 인라인 요소에서 불가능한 width, height, margin, padding, bording 지정 가능 용어란? 블록요소 사용불가 용어에 대한 설명 - 블록 요소 및 인라인 요소 포함 input -type-text 하나만 있어도 사이트가 되는 컨텐츠, 구분이 명확하여 별도로 분리가 되어도 문제 없는 영역 독립적으로 쓰이기에는 좀 애매할 때 이미지와 이미지 아래 코멘트가 달린 형태 아무것도 의미가 없을 때 사용, 활용도 높음 절대경로와 상대경로 절대경로 : 특정 소스의 바뀌지 않는 고유의 경로 상대경로 1. 호출 문서를 기준으로 특정 소스의 경로를 인식 index.html → img 폴더 → minion02.jpg ; img 폴더 안에 mini.. 더보기 웹표준 퍼블리싱 이론 수업 첫째날 # 웹표준이란 - W3C 표준안을 지켜 웹사이트를 제작하는 것. # 웹 접근성 - 장애가 있는 사용자든 어떤 웹 환경을 가지고 있는 사용자든 모두 접근이 가능하도록 하는 것 # 크로스 브라우징 : 인터넷 익스플로러, 크롬, 파이워 웍스 등 모든 브라우저에 동일하게 표현이 되도록 설정을 해주는 것. # 버전 호환성 고려 : 하위 호환성 - 인터넷 익스플로러 # 엣지 브라우저 : 윈 10 부터 마이크로소프트사에서 인터넷 익스플로러의 기존 취약했던 호환성에 대한 단점을 극복하고자 만들어진 새로운 브라우저 # IE 기본 세팅 해야할 버전 : IE 8.0 , IE 9.0 , IE 10 # 인터넷 창을 열고 [도구] 창에서 F12 눌러 하단 Edge 에서 버전별 보기를 보면 어떤 버전에서 어떻게 나타나는지 알 수 .. 더보기 Flash 플래쉬 소개 Flash 플래쉬 소개 인터랙티브한 컨텐츠 제작도구 (사용자가 마우스를 갖다놓으면 반응이 일어나는 컨텐츠) PC, 모바일, 디바이스 등 각종 기기의 화면에 매력적인 컨텐츠를 일관성 있게 전달 - 네비게이션 제작 (웹에서 메뉴)- 배너(Banner) 제작- 게임/애니메이션 제작- 비디오 컨텐츠 제작 : *flv 형식의 파일로 변환- 각종 어플리케이션 제작 : 모바일 제품 및 웹 어플리케이션 (프로그램 제작) CS5의 새로운 주요기능 * 텍스트 엔진 : 새로운 Text Layout Framework 를 통해 인쇄 품질의 타이포그래피를 사용하여 텍스트를 제어*CODE Smippets: 프로젝프에 미리 작성된 코드를 삽입함으로써 ActionScrip 3.0 학습에 대한 부담을 덜 수 있으며보다 창의적인 컨텐츠 .. 더보기 링크 지정 스타일 시트 링크 지정 스타일 시트 1. 링크관련 속성 의사 선택자 (psudo selector)를 이용하여 태그에 대해 여러가지 링크 관련 스타일을 지정 형식 : 항목명 (통상적으로 A 태그) : 태그 {속성:값} CSS 태그 기능 LINK 링크 설정시 필요 ACTIVE 설정된 영역을 마우스로 클릭했을 때 링크 설정 VISITED 방문했었던 링크를 설정 HOVER 마우스 커서가 현재 설정된 링크에 위치했을 때 설정 FOCUS 현재 설정된 영역에 포커스가 존재할 때 설정 예) A:VISIT {COLOR:VIOLET} 방문했던 곳의 링크 색상을 보라색으로 설정 A:HOVER {COLOR:YELLOW; TEXT_DECORATION:NONE} 현재 링크된 곳에 마우스 위치할 때 글꼴 색상은 노랑, 밑줄 보이지 않게 설정 .. 더보기 목록과 문단 스타일 시트 목록과 문단 스타일 시트 목록(list) STYLE HTML 관련 태그 - 순서 없는 목록 , 순서지정 목록 태그에 대한 다양한 서식 지정 가능 주요속성 속성 기능 예 List-style :값 목록과 관련한 모든 설정을 할 수 있음 List-style :inside circle List-style-image : url(주소) 목록의 값을 이미지로 표시 List-style-image : url(allow.gif) List-style-position : 값 목록에서 다음 줄로 이동시 시작 위치 설정 List-style-position : inside List-style-type : 목록유형 목록에서 사용할 머리표 유형 설정 List-style-type : circle 당분에 의한 와인의 분류 dry wine.. 더보기 FONT 스타일 시트 FONT 스타일 시트 FONT STYLE >>> HTML 에서 태그와 태그를 이용하여 글꼴 크기와 색상을 지정하였으나 다양한 효과를 주지는 못함 속성 기능 예 FONT-FAMILY:글꼴명; 글꼴 종류 지정 FONT-FAMILY:돋움체; COLOR:색상명 혹은 색상값 모든 태그에서 글꼴 색상 지정 COLOR : RED; 혹은 COLORl#FF0000; FONT-SIZE:글꼴크기 글꼴크기 지정 FONT-SIZE:9pt; 혹은 FONT-SIZE:20px FONT-WEIGHT:굵기 지정 글꼴의 굵기를 지정 FONT-WEIGHT : BOLD, 혹은 FONT-WEIGHT:700; FONT-STYLE:ITALIC혹은NORMAL 글꼴 기울임 지정 FONT-STYLE:ITALIC 선택자 (selector) 종류와 css.. 더보기 CSS (Cascading Style Sheet) 개요 CSS (Cascading Style Sheet) 개요 1996년 W3C 에서 HTML의 제한된 기능을 추가적으로 처리하기 위해 개발 HTML - 웹페이지의 구조를 작성 (마네킹) CSS 기존의 태그 위에 추가적인 스타일을 설정하여 보다 다양한 웹페이지 구현을 가능하게함 장점 - 홈페이지의 유지보수와 관리가 용이. 홈페이지에 통일성을 줌. 표 - 웹페이지마다 조금씩 다른 테두리 색을 지정 글꼴 - 다양한 글꼴 크기, 색상 지정 1. HTML 내에서 직접 작성 사이에 기술 embed 형 CSS 문법 형식 형식 선택자 {속성:값} 또는 선택자 {속성:값;속성:값;,.....속성:값} 에디터 사용 메모장 EDITPLUS 또는 나모, 드림위버 등의 편집기 탭을 눌러서 사용해도 무방 더보기 이전 1 다음
