자바 웹 개발자가 될거야/WEB (20) 썸네일형 리스트형 [CSS] 패딩(Padding) 속성 안쪽 여백은 패딩, 바깥쪽 여백은 마진을 의미한다. ① 패딩 방향별 적용법 - 위쪽, 오른쪽, 아래쪽, 왼쪽을 방향별로 여백을 줄 수 있다. - 보통 좌우여백을 %로 두고 상하는 고정해둠 .pt{padding-top: 10px;} .pr{ text-align:right; padding-right:2em; } .pb{padding-bottom:20px; } .pl{padding-left:7% } - 오른쪽 패딩값을 확인하기 위해 글자 정렬을 오른쪽으로 한거임 ② 패딩 값 갯수별 적용법 - 여러 단위 따로따로 적용가능하다 .pn01{padding:30px;} .pn02{padding:30px 10%; width:300px;} .pn03{padding:10px 25% 4em;} .pn04.. [CSS] text 속성 - 글자가 있는 영역을 꾸며줌 - 종류로는 align, decoration, indent, transform, shadow 속성이 있음 ① align - 수평 정렬 - tag영역 자체가 움직이지 않음(영역 내에서 글자의 위치가 변동) .tal01 {text-align: left;} .tal01 {text-align: center;} .tal01 {text-align: right;} .tal01 {text-align: justify;} - left : 왼쪽 정렬 - center : 중앙 정렬 - right : 오른쪽 정렬 - justify : 양끝 정렬 - 글이 있는 영역(block)에 대한 정렬이 일어난다 - 테이블에도 적용가능하다 ② decoration - 글자에 줄 칠 수 있는 .. [CSS] font 속성 - 글자 꾸며주는 속성 ① font-size - 글자 크기 지정 - 일반적으로 16px이 기본값 .fs-01 {font-size: 16px;} .fs-02 {font-size: 12px;} .fs-03 {font-size: 20px;} .fs-04 {font-size: 1em;} .fs-05 {font-size: 0.75em;} .fs-06 {font-size: 1.25em;} .fs-07 {font-size: 1rem;} .fs-08 {font-size: 0.75rem;} .fs-09 {font-size: 1.25rem;} - em : 배수 단위 · 1em = 16px · 2em = 32px · 상위요소가 기준이 되기 때문에 항상 1em이 16px인건 아니다 - rem : 배수 단위 ·.. [CSS] css 구문 / css 선택자 / css 적용방식 - Cascading Style Sheets의 약자 - html 문서에 스타일을 지정하는데 사용하는 언어 ① css 구문 선택자{ 속성 : 속성값; } p{ color : blue; } ② css 선택자 중 대표 3가지 - tag 선택자 tag 그대로의 형태를 선택자 활용 같은 tag들은 모두 같은 스타일로 바뀌므로 자동, 강제 적용됨 - id 선택자 tag에 id를 지정하고 id값을 불러와 #id값 형태로 선택자 활용 중복적용 불가 구조적인 목적으로 주로 사용 - class 선택자 tag에 class를 지정하고 class값을 불러와 .class 형태로 선택자 활용 중복적용 가능 디자인적인 목적으로 주로 사용 여러 class들 조합 가능 ( 쉼표없이 그냥 띄어쓰기해서 클래스명 나열 ) @C.. [Html] select optgroup / input 타입 / textarea / iframe - select 그룹화하여 나타냄 팀 회의 희망 시간은? 1교시 2교시 3교시 4교시 5교시 6교시 7교시 8교시 - label 태그에는 for와 input 태그에는 id로 동일하게 지정하여 연결 생년월일 ① range ② color ③ search - 검색용 상자 - 겉보기엔 input의 text 타입처럼 보이지만 X 버튼이 등장한다 ④ file - 파일을 직접 올리는 것이 가능 - 파일 전송용 ① maxlength / minlength - 최대치 / 최소치 지정 ID ② autofocus - 해당 요소에 자동 포커싱 ③ autocomplete - on : 자동완성 .. [Html] 내부링크 / 버튼태그 / select 태그 / Html5 새로운 input type / 이클립스 web 설정 - 페이지의 특정한 곳을 찾아서 이동하는 링크 - id값을 활용할 때는 그 앞에 #기호를 붙여줌 - id값은 페이지내에서 중복 적용 불가능 웹에 보여질 문구 - type 생략 시 : 화면 넘어감 - type="reset" : 입력창 정보 지워줌 - type="button" : 아무처리도 없음 OK NO Button - b태그나 i태그와 css를 결합하여 버튼안의 아이콘 작업 가능 - 버튼안에 아이콘 추가 smile - 드롭박스 구현 opt01 opt02 opt03 opt04 opt05 opt06 ① selected - 맨 위에 보여줌 opt01 opt02 opt03 opt04 opt05 opt06 ② size="n" - select에 한 번에 .. [Html] 이미지링크 / 썸네일 이미지 / 이메일링크 / # 최상단 이동 / id - 웹브라우저에 보여지는 텍스트 위치에 사진을 삽입하면 됨 - title 속성 (tool-tip) · 추가로 필요한 설명을 작성 · 마우스 On 됐을 때 표시됨 - target 속성 · 링크 열어주는 방식 지정 · "_self" : 현재 위치에서 열림 기본으로 설정되어있으므로 생략함 · "_blank" : 링크 클릭시 새창으로 열림 · "_top" : 프레임구조에서 전체 열기 (옛날에 쓴방식) · "_parent" : 상위에 열기 (옛날에 쓴방식) - 링크의 썸네일 이미지 · 작은 이미지로 미리 보여주고 링크 클릭시 크게 or 원본으로 보기 - 클릭하면 이메일 프로그램을 실행 이메일링크 class@gmail.com - 웹에 보여지는 텍스트 말고 이미지, 메일주소.. [Html] img 태그 / gif, jpg, png 차이 / picture 태그 / a 링크 걸기 / target 속성 / - 이전 1 2 3 다음
