본문 바로가기

Study

 (97)
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 속성을 사용하면 여러개 선택이 가능하다. ..
이미지맵(imagemap) 실습 - img 태그를 이용하여 이미지를 불러오고 usemap 속성을 사용하여 이미지의 원하는 위치에 링크를 건다. - map name을 usemap과 일치시킨다. - shape 속성에서 circle은 원으로 coords 속성값은 (중앙의 가로 위치, 중앙의 세로위치, 반지름)을 입력하며, rect은 직사각형으로 coords 속성값에 (좌상단 가로 위치, 좌상단 세로 위치, 우하단 가로 위치, 우하단 세로 위치)를 입력한다. - target 속성에 "_blink" 값은 새창으로 링크를 열고 싶을 때 입력한다.
HTML (2) , 태그 - ol(ordered list): 순서가 있는 목록 태그 - ul(unordered list): 순서가 없는 목록 태그 - 태그 사용시 태그로 작성 해야한다. - ex) 목록 1 목록 2 태그 - tr: 표의 행 - th: 표의 행 내부의 제목 셀 - td: 표의 행 내부의 일반 셀 - colspan(열이 서로 다른셀 병합), rowspan(행이 서로 다른셀 병합) 사용하여 셀 병합이 가능하다. - table 태그 사용 시 브라우저에서 자동으로 하단에 tbody태그가 생성된다. - border값을 주지 않으면 선이 표시가 되지 않는다. 태그 - 웹문서가 서로 상호작용 할 수 있도록 하는 역할을 한다. - button, checkbox, password, radio, submit, text, f..
layout 실습 1. margin을 이용해 div 요소들을 화면 중앙에 정렬 시킨다 2. padding값을 주게 되면 width값에 padding값을 더한게 div 좌우 사이즈가 되기 때문에 box-sizing: border-box를 사용해서 width값을 고정시킨다. /* .box02의 margin-bottom값이 30px이고 .box03의 margin-top값이 100px이지만 .box02의 margin값이 적용되지 않아서 아래 그림처럼 .box03의 top쪽 여백이 130px이 아니라 100px만 적용된다. */

티스토리툴바