CSS9 16. CSS / 속성 - 배경 background ( 요소의 배경을 설정 단축속성 ) background-color 값으로 색상(rgb, 색상, #xxxxxx )을 입력하고 투명색인 transparent 도 사용이 가능하다. background-image 기본값은 none(이미지 없음)이 있고 이미지를 넣으여면 url("경로")를 넣어준다. 주의사항 -> 이미지를 다수 추가할 경우 나중에 삽입한 이미지가 뒤에 쌓인다(순서가 반대) ( 첫 요소의 이미지가 맨위 에서 보임). -> 백그라운드이미지의 반복여부는 기본값으로 반복으로 되어있다.해제 -> background-repeat : no-repeat; background-repeat background-position background-attachment 2021. 2. 18. 14. CSS / 속성 - 글꼴, 문자 CSS 속성 (글꼴, 문자) font ( 글자 관련 속성들을 지정 ) - 개별 속성 -단축 속성 ( font : 기울기 두께 크기 / 줄높이 글꼴; ) 크기와 글꼴은 필수로 입력해야된다. font-style ( 기본값 normal ) font-weight ( 글자의 두깨를 지정 ) font-size ( 글자의 크기를 지정 ) 기본적으로 - px,em,cm 사용 하며 기본값으로 16px로 지정이되어 있다. - % ( 부모 (상위) 요소의 비율로 지정 ) line-height ( 줄 높이를 지정 ) font-family ( 글꼴 지정 ) 색상표현법 color 속성 ( 문자의 색상을 지정 ) 기본값 rgv(0, 0, 0) text-align ( 문자 정렬 방식을 지정 ) text-decoration ( 문자의.. 2021. 2. 16. 13. CSS / 속성 - 박스 모델 CSS 의 속성 width - 요소의 가로 너비를 지정 속성값 값 auto, px, em, cm 기본값으로 auto 블럭요소는 (width)가로 100% (height)세로 0 으로 초기값이 되어있다. 인라인요소는 (width)가로크기 (height)세로크기가 0 에서 출발한다. 하지만 이 크기의 값을 설정을 해도 적용이 안되는데 그 이유는 인라인 요소는 text만을 위한 요소이기때문에 text가 없으면 크기를 가지지 않는다. max-width ( 요소의 최대 가로 너비를 지정 ) min-width ( 요소의 최소 가로 너비를 지정 ) max-height ( 요소의 최대 세로 너비를 지정 ) min-height ( 요소의 최소 세로 너비를 지정 ) margin - 요소의 '외부 여백'을 지정 (단축,개별.. 2021. 2. 16. 12 . CSS / 단위 01. px , % % ( 부모요소의 영향을 받는다) 02. em, rem em ( 자기 자신의 폰트사이즈에 영향을 받는다.) em = 중간 중간 계속 단위가 상속이 되다 보니 중간에 따로 건드리기가 어려움 -> rem rem = html(root)에 지정된 폰트사이즈 만 받음( 루트에 폰트사이즈만으로만 설정하겠다는 의미 상송안받음) 03. vw, vh vw ( 뷰포트의 가로사이즈, 100단위 ) 뷰포트 : 화면전체 vh ( 뷰포트의 세로사이즈, 100단위 ) 늘어나고 줄어들면 너비가 변경됨 04. vmin, vmax vmin ( 뷰포트의 최소 너비 ) 짧은 쪽의 너비를 백분율로 계산하여 설정 vmax ( 뷰포트의 최대 너비 ) 긴 쪽의 너비를 백분율로 계산하여 설정 2021. 2. 8. 11. CSS / 개요, 선택자, 상속 기본 선택자와 복합 선택자 기본선택자(4가지) 1. 전체 선택자 -> * {} 2. 태그선택자 -> 태그이름으로 선택 3. 클래스 선택자 4. ID 선택자 복합선택자 1.일치 선택자 span.orange ( 오렌지 클래스인데 span에 있는 오렌지 클래스 ) 2.자식 선택자 ul>.orange ( ul의 자식중 클래스가 orange인 태그 ) 3.후손 선택자 , 자식, 자손 다 포함(띄어 쓰기가 선택자의 기호로 사용된다. ) div .orange 4. 인접 형제 선택자 ( ex) orange 클래스의 바로 하나의 다음(다음 형제) 태그를 선택 ) .orange + li orange 태그의 다음 li 를 선택 5. 일반 형제 선택자 ( orange 클래스의 모든 다음 형제 태그를 선택 ) .orange ~.. 2021. 2. 6. 09. HTML / 전역 속성, 기타 전역 속성과 기타 class 와 id ( 별명 별칭을 지정 하는 기능 ) - css 혹은 JavaScript의 요소 선택기를 통해서 요소를 선택하거나 접근 -class는 문서에서 고유하지 않아 여러개 설정가능 (중복 가능) -> .(점) 으로 접근 가능 class="avc" .avc {} -id는 문서에서 고유한 식별자 ( 오직 한개 ) -> # 으로 접근 가능 id="avc" #avc{} style 속성 ( 요소에 적용할 css를 선언 ) -ex) title 속성 ( 요소의 설명을 지정 ) -ex) 제목 -> 제목에 마우스 커서를 대면 title이 표시된다. lang 속성 ( 요소의 언어를 지정 ) data-* 속성 ( 사용자 정의 데이터 속성을 지정 ) JavaScript에서 이용할 수 있는 데이터(.. 2021. 2. 4. 08. HTML / 요소 - 양식 양식 form 태그 ( 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 ) -form태그 예시 input 태그 ( 사용자의 입력 받을 데이터 양식 ) radio 타입 label 태그 ( 라벨 가능 요소의 제목 ) button 태그 ( 선택 가능한 버튼을 지정 ) - input과 다르게 좀더 특화된 버튼 textarea 태그 ( 여러 줄의 일반 텍스트 양식 (한줄은 input 태그 ) ) 속성은 input 태그와 비슷 다른 속성은 rows 라는 속성인데 화면에 보이는 양식의 줄 수를 설정 할 수 있다. fieldset, legend 태그 ( 같은 목적의 양식을 그룹화(fieldset) 하여 제목(legend)을 지정 select, datalist, optgroup, option 태그 -select 태그 .. 2021. 2. 3. 08. HTML / 요소 - 표 콘텐츠 표 콘텐츠 08. HTML / 요소 - 양식 table 태그 ( 테이블 표를 만들 때 사용 ) -> display : table (블럭 요소와 동일) - tr 태그 ( 행 , 줄 만들 때 ) ex) 3줄을 만든다 -> 3개 만든다. - td , th 태그 ( 칸, 셀 만들 때 ) ex) 2칸을 만든다 태그 안에 2개 입력 border 설정후 table 의 css 를 설정 table { border-collapse : collapse; } th 태그 ('머리글 칸' 을 지정) -colspan 사용 ( 열 병합 ) -rowspan 사용 ( 행 병합 ) td 태그 ('일반 칸'을 지정) caption 태그 ( 표의 제목을 설정 ) - 열리는 table 태그 바로 다음에 작성해야 된다. - 당 하나의 만 가능 .. 2021. 2. 3. 07. HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트 멀티미디어 img 태그 (이미지를 삽입 , 빈태그) - 필수 속성으로는 src 속성과 alt 속성은 필수 srcset, size 속성 - (반응형 웹사이트 제작할 시 사용) -srcset (2장 이상 사용할때 사용) 은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 1장이면 src 사용하면 된다. -sizes 는 미디어 조건과 그 조건에 해당하는 미이지의 '최적화 출력 크기'를 지정 width 속성 audio 태그 ( 소리 콘턴츠 (mp3) 를 삽입 ) video 태그 - autoplay가 지정된 경우, preload는 무시됨. figure태그, figcaption 태그 내장 콘텐츠 iframe 태그 ( 다른 HTML 페이지를 현재 페이지에 삽입 ) canvas 태그 ( Ca.. 2021. 2. 2. 이전 1 다음
