본문 바로가기

HTML, CSS, javascript

(36)
CSS (4) 배경 삽입 배경 : 이미지, 색 등을 삽입할 수 있다. - 배경의 크기는 background-size를 사용하며, auto, contain, cover, 가로값 세로값, %를 입력하여 조절한다. auto: 기본값으로 원래 이미지의 사이즈로 삽입된다. contain: 요소 안에 배경 이미지가 들어오도록 이미지를 확대한다. cover: 이미지가 요소를 모두 덮도록 너비, 높이 모두 확대 또는 축소해서 이미지를 맞춘다. 가로값 세로값: 값을 입력하여 이미지의 크기를 조절한다. %: 백분율은 요소의 사이즈에 맞게 이미지의 크기를 구해 이미지를 확대하거나 축소한다. - 배경 이미지는 background-image를 사용하여 웹페이지에 이미지를 삽입할 수 있다. - 위의 이미지에서 2번째 줄을 보면 배경 색이 입력..
CSS (3) CSS 스타일 속성 상속 - 상속은 상위(부모) 요소에 적용된 속성을 하위(자식) 요소도 똑같이 적용받는 것을 의미하며, 폰트 속성은 상속되는 특징이 있다. ​ 폰트 - 글꼴(font-family) : 하나의 글꼴만 설정할 수 있고 여러개의 글꼴을 같이 설정할 수도 있다. 단, 여러개를 설정할 시 첫번째부터 적용되며 표시할 수 없을 시 다음 글꼴이 적용되는 방식이다. ​ font-family: "폰트명", 폰트명 ​ - 굵기(font-weight) : 텍스트 굵기를 조절할때 사용한다. 범위는 0~900 이며 일반적으로는 400, bold는 700을 의미한다. font-weight: 숫자 or bold ​​ - 크기(font-size) : font의 기본 웹페이지 표시 크기는 16px이다. ​ * 절대적 ..
사과 주문 웹페이지 만들기 - accent클래스에 hover를 붙여 마우스를 오버할 시 글자 크기와 색이 변경되게 설정했다. - text-align:center을 사용하여 글자가 중앙에 올 수 있게 설정했다. - box-sizing: border-box를 사용하여 padding값을 주어도 가로너비 650px을 유지하게 설정했다.
CSS (2) 반응 선택자 - 사용자의 반응으로 생성되는 상태를 선택하는 선택자 - 선택자:hover > 사용자가 마우스를 오버한 태그를 선택 - 선택자:active > 사용자가 마우스로 클릭한 태그를 선택 상태 선택자 - 입력 양식의 상태를 선택하는 선택자 - 선택자:checked > 체크상태의 input 태그를 선택 - 선택자:focus > 초점이 맞춰진 input 태그를 선택 - 선택자:enabled > 사용 가능한 input 태그를 선택 - 선택자:disabled > 사용 불가능한 input 태그를 선택 구조 선택자 - 선택자:first-child > 형제 관계 중에서 첫 번째에 위치하는 태그를 선택 - 선택자:last-child > 형제 관계 중에서 마지막에 위치하는 태그를 선택 - 선택자:nth-child(..
속성 선택자 실습 - input 태그를 사용할 때 type 속성에 따라 웹페이지에 표시되는것이 다르기 때문에 속성 선택자를 이용해서 스타일을 정해준다. - text와 password 속성을 선택해서 스타일을 제어할 때 border를 0을 주어 외부 테두리를 없앴고, submit 속성에서 border-radius값을 5px 주어 테두리에 곡선을 주었다.
CSS (1) CSS 선택자 - html 내부의 특정 요소를 선택하는 방법이며, 선택한 태그에 원하는 스타일, 기능을 적용할 수 있다. ex) h1 {color: red;} > h1: 선택자, color: 스타일 속성, red: 스타일 값 전체 선택자 - *, html 문서 내부의 모든 태그를 선택하며, html태그와 body태그에도 적용된다. 태그 선택자 - html 문서 내부의 특정한 태그를 선택할 때 사용하며, 여러개의 선택자를 한번에 선택할 때는 쉼표를 사용한다. ex) h1, p, div 등 아이디 선택자 - #, 특정한 하나의 태그를 선택할 때 사용되며, 주로 문서의 레이아웃과 관련된 스타일 등에 사용한다. 클래스 선택자 - . , 가장 많이 사용하는 선택자이며, 공백으로 여러개의 클래스를 사용할 수 있다...
position 실습 - 조건 : product 블록들을 웹페이지에 가운데 정렬시킨다. - 화면 크기를 줄이더라도 제품1 박스 3개는 계속 가운데 정렬 된 상태이다. - 가운데 정렬을 주기 위해서 Position 클래스에 margin: 0 auto; 값으로 입력했다. - Position 클래스에 position: relative; 값을 주어 product 클래스들이 Position 클래스를 기준으로 absolute 될 수 있게 했다.
HTML (3) 태그 - 여러개의 폼 태그를 그룹화하여 좀 더 구조적으로 만들때 fieldset태그를 사용한다. - legend 태그로 fieldset의 컨트롤들이 어떠한 성격의 콘텐츠인지 제목 형식으로 알려 줄 수 있다. 단, fieldset 태그 바로 뒤에 한 번만 작성할 수 있다. 태그 - 사용자 인터페이스 요소의 라벨을 정의할 때 사용한다. - 명시적 label(id와 for속성 연결) - 암묵적 label(label 요소에 폼 컨트롤 포함) 태그 - 다양한 선택지 중에서 선택을 하는 드롭박스를 만들 때 사용한다. - option 태그(옵션을 생성)와 optgroup 태그(옵션을 그룹화)를 같이 사용한다. - optgroup 태그는 선택이 불가능하다. - multiple 속성을 사용하면 여러개 선택이 가능하다. ..