프론트엔드16 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. 15. CSS / 속성 - 띄움(정렬), 위치 float ( 요소를 좌우 방량으로 띄우는 속성 (수평정렬)) - none, left, right 3개의 값이 있다. float : right; float을 설정하였으면 해제가 필요하다. float은 자리를 차지하고 있지 않다.(clear: both) left right 둘다 해제 하는 기능 필수!! 1. 해제하려면 다음 요소에 clear 함수를 사용해야됨 (다음요소가 필요) 그래서 번거럽다. 2. 부모요소에 overflow 따로 구역을 만들어 구역을 나눈다. 3. 가상요소 ::after -> 끝나는 부분에 가상요소를 추가하는 기능 float - display 수정 ( float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 수정된다.) position ( 요소의 위치 지정 방법의.. 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. 이전 1 2 다음
