📚HTML, CSS/이론 정리 16

CSS 배경 속성, 전환 효과, 미디어 쿼리

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 32 33 Document /* background의 크기를 결정하는 태그를 조절 */ html, body{ margin: 0; height: 100%; } body{ /* 이미지 저장 */ background-image: url('./flower.webp'); /* 이미지 출력횟수 제한. x축 반복, y축 반복, 단순 반복 사용가능 */ background-repeat: no-repeat; /* background 크기 조절 cover나 contain(비율조절) 사용 */ background-size: cover ; /* center center 처럼 x..

CSS 특성들(font와 box 제어)

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 32 Document h1 { /* 글꼴 설정, 한글로된 글꼴은 ""으로 감싸줌 font-style과 유사*/ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* 글자 크기, 16px이 기본 */ font-size: 16px; /* 글가 굵기 */ font-weight: normal; /* 글자 색깔 color 혹은 rgb(,,,) 사용 */ color: rgb(0, 0, 255); /* 글 위치 정하기 */ text-align: left; /* 글자와 글자 사이의 길이를 합한 길이, 줄끼리의 ..

CSS 속성, 선택자 , 특정 요소 선택하기

CSS는 속성을 적용할 대상인 선택자와, 선택자에 적용할 선언부로 구성된 문법 형태를 가짐. 내부 스타일 시트 - (주로 사용) 외부 스타일 시트 - 외부에 css코드를 작성하여 html문서와 연결 인라인 스타일 - 태그에 직접 css코드 작성 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 1.전체 선택자 : * {} 2.태그 선택자 : 태그명{} 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 32 33 Document p { color: green; } section{ border: 1px solid black; } 예약 안내 & 방법 빨리빨리 신청하자 아직 신청 안했으면 방 1개당 100000원 ..

html (멀티미디어 태그, 시멘틱 태그, 글로벌 속성)

: 오디오 출력, 제어가능서 : 비디오 출력, 제어가능서식 지원하지 않는 브라우저 입니다. 이런식으로 audio 태그 안에 source태그로 지원하는 파일형식을 보여주고 지원하지 않을 때는 저렇게 글자가 나타나도록 할 수 있다. : 헤더 영역 ( 로그인, 메뉴들 같은 웹의 최상단 부분을 나타내줌) : 내부의 다른 영역, 외부의 다른 영역과 연결되는 부분을 나타내줌 : 웹 페이지에서 논리적 부분, 영역을 표시할 때 사용 ( 태크를 한 개 이상 사용 권장) : 웹페이지에서 독립적으로 구분할 것들에 사용 : 웹페이지의 사이드 영역에서 정보를 나타낼 때 사용(광고 베너, 로그인 등 우측의 다양한 부분) : 웹페이지 마지막 부분들 : header와 footer 사이의 중요한 부분들을 나타낼 때 사용 : 이미지 그..

html [표 태그들]

: 표의 틀만 생성 + [border="굵기숫자"(행과 열에 태두리가 표시됨)] 표 제목 표의 제목나타냄 : style을 통해 css 요소 사용 가능. 표 제목 다음에 바로오는 태그로서 열을 묶어 효과부여 : 몇개의 열에 동시 적용할 것인지 정해서 적용가능. 행 생성 열 생성 : 제목 행에서 주로 사용 + [scope="row/col/colgroup" 속성][ 애매한 경계를 지닌, 셀들의 범위가 가로인지 세로인지 정해줌.][colgroup, rowgroup은 두개 이상의 행이나 열에, 제목이 영향을 미침을 보여줌] 열 생성 : 일반적 데이터에 사용 [rowspan속성="갯수" ]: 열 병합을 당할 다른 칸이 비워져있어야 오류발생 안하고 열 병합. [colspan속성="갯수"] : 행 병합 ㅡㅡㅡㅡㅡㅡㅡㅡ..

HTML 기본(form 관련 태그)

나 정말 시간없고, 별로 안쓸내용들인거 아는데... 이런것들부터 차근차근 채워나가야 나중에 도움이 될거고. 최대한 자세하게 배우는게 내 공부 스타일라서.. 이렇게 안배우면 내가 다음에 배우는 것들 귀에 안들어오고 붕 떠버림.ㅠ : 1부터 큰 제목을 표시함. 1은 가장 중요한 것을 한번만 쓰는 대표제목임. h1, h2 같은 것들 안쓰면 h3, h4같은 하위 도 못쓰니 순서대로 사용해서 내려오자. : 문단 : 줄바꿈 긴 문장 인용 작은 문장 인용 새롭게 삽입되는 밑줄쳐진 인용문장 기준의 어떤 내용 삭제할때 사용 : 크든, 작든 요소들을 분류하여 그룹화 하는데 사용 작은 글자들 간 따로 분류해서 그룹화 할 사용 순서없는 list 생성 순서있는 list 생성 다른 문서 또는 내부의 다른 영역과 연결할 때 사용...

1 2