CODING/WEB14 [CSS] 그라데이션 효과 🔎 그라데이션 - 크기가 없는 배경이미지 - backgroud-image나 background속성에서 사용 - 속성은 표준화 됨 - 구형 모던 브라우저 ( 사파리 5.1 ~ 6.0 & 파이어폭스 3.6 ~ 15 & 오페라 11.1 ~ 12.0 )은 각각 맞게 브라우저 접두사를 붙여야 동작함 브라우저 버젼 접두사 📌사파리 5.1 ~ 6.0 -webkit- 📌파이어폭스 3.6 ~ 15 -moz- 📌오페라 11.1 ~ 12.0 -o- 🔎 선형 그라데이션 - 수직 or 수평 or 대각선 방향으로 색상이 변하는 것 - 방향과 색상이 필요 [ 방향 ] ver. 표준 구문 ex ) backgroud: linear-gradient( to 도착 방향, 출발 색, 도착 색) 더보기 background: blue; back.. 2020. 11. 9. [CSS] 글꼴 & 텍스트 스타일 font-family 속성 웹문서에서 사용할 글꼴 지정 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 사용 웹문서에서 글꼴을 지정할 때는 한가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두번째, 세번째 글꼴까지 지정함. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 font-family 속성은 상속되기 때문에 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨. 부모 요소와 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용해 해당 요소에서 다른 글꼴을 정의한다. @font-face 속성 웹 폰트(web-font) : - 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 .. 2020. 10. 27. [HTML] 데이터 목록 & 다양한 form 요소들 📌 태그 - 여러 항목을 그룹으로 묶을 때 사용 - label 속성을 사용해 그룹 제목을 붙임 - [ ➡️ ➡️ ] 순으로 목록 만들면 됨 더보기 건축공학과 기계공학과 산업공학과 전기전자공학과 컴퓨터공학과 화학공학과 사학과 어문학과 철학과 📌 태그 - 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨 - 데이터 목록 id를 이용해 이름을 붙이고, 태그 list 속성에 id 값을 넣어줌 더보기 📌 태그 - 텍스트 영역 - 여러줄의 텍스트 입력 ex) 게시판의 게시물 입력창 더보기 안녕하세요 뭐라고 써야할지 모르겠어요 📌 태그 - 다양한 형태의 버튼 삽입 - 화면 낭독기에서 버튼임을 정확히 전달할 수 있음 - css를 이용해 원하는 형태로 꾸밀 수 있음 더보기 전송하기 안 안에.. 2020. 10. 17. [HTML] < input > 태그의 속성 & type의 속성값 [ 태그] - 사용자가 입력하는 부분은 거의 태그를 이용해 처리 - 입력하는 내용의 종류는 태그의 type 속성을 통해 지정 태그의 [ id 속성 ] - 여러 번 사용된 폼 요소를 구분하기 위해 사용 ➡️ id 값은 중복될 수 없음 - 태그를 이용해 캡션을 붙일 수 있음 - css를 이용해 각 요소마다 다른 형태로 꾸밀 수 있음 태그의 type 속성에 들어갈 수 있는 [ 속성 값 ] 📌 type = "hidden" - 화면 상의 폼에는 보이지 않음 - 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰을 서버에 보낼 때 사용됨 ex ) 📌 type = "password" - 비밀번호를 입력받을 때 - 사용자가 입력하는 내용이 " * " or "•"로 표시됨 비밀번호 : 📌 type = "text" - .. 2020. 10. 10. [HTML] 링크 만들기 & 폼 만들기 📌 링크만들기 🔎 하이퍼 링크 - 다른문서 or 다른 사이트로 연결해 주는 기능 - 메뉴 뿐만 아니라 원하는 곳에 링크를 만들 수 있음 [ 태그 ] 기본 : 텍스트 or ✔️ 반드시 href 속성을 사용해서 링크할 주소를 알려줘야 함 태그의 속성 📌 href - 링크할 문서나 사이트 주소 입력 - 링크를 만들 텍스트 / 이미지를 와 사이에 넣어줌 📌target - 다른 사이트로 연결하거나 현지 페이지에서 다른 페이지를 어떻게 열지 결정 _self : 링크를 클릭한 해당 창에서 연다. _blank : 링크를 새창으로 연다. _parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리) _top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 .. 2020. 10. 1. [HTML] 표 만드는 태그& 이미지 🔶 표를 만드는 태그 / - border를 설정해주지 않으면 선이 나타나지 않음 / - 행 row - 위의 사진에서는 초록 박스 셀 제목 ( row / col 상관없이 ) - 위의 사진에서는 [ "이름" , "주소" , "연락처", "자기소개" ] - 셀 ( cell ) - 위의 사진에서는 모든 빈칸 [ th , td 속성 - colspan/rowspan ] ✔️사용 방법 예시 : 구분 - column 합칠 때 사용 - row 합칠 때 사용 - 표 제목으로 [ 위쪽 중앙 ]에 표시 - 아래의 그림처럼 나옴 , - 표 제목으로 figcaption의 위치에 따라 위나 아래에 제목 표시 [ 표 구조 정의 ] , , - 시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해 가능 - 표의 내용이 길어질 경우 .. 2020. 9. 24. 이전 1 2 3 다음
