달밤에 코딩하기/HTML CSS 공부하기 (27) 썸네일형 리스트형 #18 - CSS 기초 - 폰트 폰트 속성 설명 폰트 단축 입력 방법 /* 기울기 두께 크기 / 줄높이 서체 */ /* 크기와 서체는 필수 입력 해야 하며, 그 외는 생략 가능하다. */ .class{ font : italic 2px 14px / 1.5 "Arial",sans-serif; } 속성 설명 속성 개별 속성 의미 값 font - 서체와 관련된 속성을 지정한다. 사용 방법은 상단 태그 참고 font-style 글자 기울기 normal, italic, oblique font-weight 글자 굵기. bolder와 lighter는 부모요소를 기준으로 굵게 / 얇게를 설정 숫자 별 굵기 100 : thin 300 : light 400 : normal 500 : medium 700 : bold 900 : black normal, bo.. #17 - CSS 기초 - 단위 / 속성 기본 단위 단위 적용 예시 /*-------------px %-------------*/ .class{ width : 50px; height : 50%; } /*-------------em-------------*/ /*--자식 요소의 가로값은 절반이 됨--*/ .parent{ width : 60em; font-size : 10px; } .child{ width : 30em; } /*-------------rem-------------*/ .html{ width : 60em; font-size : 10px; } .child{ width : 30em; } /*-------------vw vh-------------*/ .class{ width : 50vw; height : 5vh; } /*------------.. #16 - CSS 기초 - 상속 / 우선순위 / Reset CSS CSS 상속 부모 요소에 스타일을 적용하면, 자식 요소에 같은 요소가 부여 되는 것을 말함 /* 폰트 관련 속성은 기본적으로 자식요소에 상속 됨*/ .class{ color : white; font-size : 14px; } /* 부모의 속성을 강제로 상속 받는 inherit*/ .class{ position : inherit; } CSS 우선 순위 한 요소에 여러 스타일을 적용했을 경우, 가장 높은 점수를 가진 스타일이 적용됨 /* 가장 최우선 순위 important */ .class{ color : white !important; } /* HTML에서 CSS를 부여하는 인라인 방식 1000점 */ /* ID 선택자 100점 */ #id{ color : white; } /* class 선택자 10점 *.. #15 - CSS 기초 - 선택자 CSS 선택자 CSS 스타일을 입히려면 태그를 선택해야 하며, 그 방법에는 여러 가지가 있다. 태그 선택자 원하는 태그를 입력하여 선택 태그이름{ 속성자 : 속성 값; } 클래스 선택자 원하는 클래스 이름을 입력하여 선택 .클래스이름{ 속성자 : 속성 값; } 아이디 선택자 원하는 아이디 이름을 입력하여 선택 #아이디이름{ 속성자 : 속성 값; } 전체 선택자 선택한 요소(.class) 내부의 모든 요소(*) 선택 .class *{ 속성자 : 속성 값; } 혼합 선택 조건에 맞는 요소를 선택자를 혼합하여 선택 /* 특정 클래스를 가진 태그를 선택 */ 태그.클래스{ 속성 : 속성값 ; } /* 부모 요소의 직계 자식 요소를 선택 */ 부모태그 > .자식클래스{ 속성 : 속성값 ; } /* 부모 요소의 모.. #14 - CSS 기초 - 불러오기 CSS 불러오기 인라인 방식 태그 내에 CSS를 직접 입력 내장 방식 HTML head 부분에 CSS를 입력 링크 방식 HTML에서 외부 CSS 파일을 불러들임. 병렬 방식 ( 한번에 불러들임 )이며, 순서 상관 없이 빠르게 불러올 때 사용 @Import 방식 CSS에서 외부 CSS 파일을 불러들임. 직렬 방식 ( 순차적으로 불러들임)이며, 순서가 중요할 때 사용. 시간이 오래걸릴 수 있음 #13 - 속성 / 특수기호 속성 아래 속성은 모든 태그에 전역으로 사용할 수 있습니다. 속성 예시 Text Text 텍스트 텍스트 텍스트 속성 설명 속성 의미 값 class 태그에 이름을 부여할 수 있는 속성. 같은 class명을 반복 사용 가능 id 태그에 이름을 부여할 수 있는 속성. 같은 id명을 반복 사용 불가능 style 태그에 css를 입힐 수 있는 속성. title 태그에 설명을 부여할 수 있는 속성. 툴팁처럼 설명이 노출. lang 태그에 언어를 지정하는 속성. 언어 코드 data-[이름] 사용자가 정의한 데이터 속성을 지정할 수 속성. 자바스크립트 관련 데이터를 HTML을 저장하는 용도 속성 예시 텍스트 draggable drag&drop 여부를 지정하는 속성. 기본값은 auto true, false h.. #12 - HTML 태그 - form form 태그 아래 태그는 body내 위치합니다. 태그 예시 이메일 비밀번호 초기화 직업 디자이너 프론트엔드 백엔드 1년차 2년차 4~6년차 7~9년차 10년차 11년차 Apple Orange Banana Mango Fineapple 회원가입 태그 설명 태그 속성 의미 값 form 정보를 제출하기 위한 양식 범위. form 안에 form이 존재할 수 없음. action 사용자에게 입력받은 정보를 처리한 웹의 URL URL autocomplete 자동 완성 기능 사용 여부 on : 기본 값. 자동 완성 사용 off : 자동 완성 사용 안함 on, off method 서버로 전송할 HTTP 방식 GET : 기본 값. 입력한 값이 주소에 그대로 남음 POST : 입력한 값이 주소에 남지 않음. 보안 문제로 p.. #11 - HTML 태그 - 표 표 태그 아래 태그는 body내 위치합니다. 태그 예시 과일과 색 설명 과일과 색 과일 색 1 바나나 노랑 2 사과 빨강 태그 설명 태그 속성 의미 값 table 테이블을 만들기위해 영역을 묶어주는 태그. tr, th, td태그를 사용하여 완전한 테이블을 만들 수 있다. 테이블 예시 보기 thead 머리글 명시. 레이아웃에는 지장이 없음 tr table row의 약자. 표의 가로 한 줄을 의미 th table header의 약자. 테이블 헤더를 지칭 abbr 열에 대한 설명 headers th가 여러 row로 이루어져 있으며,1:1 매칭이 안되는 경우 id를 이용하여 헤더를 연결 id 이름 colspan 합치려고 하는 컬럼의 수 숫자 rowspan 합치려고 하는 row의 수 숫자 scope 어떤 열의 헤.. 이전 1 2 3 4 다음
