전체 글
-
[CSS] background, font, button, gradiantVScode/CSS 2022. 9. 8. 16:29
배경 속성 -특정 태그의 배경 이미지 또는 색상을 지정하는 스타일 속성 -종류 1) background-image 속성 -배경에 넣을 그림을 지정하는 스타일 속성 -속성에는 URL 단위 또는 그레이디언트를 입력 2) background-size 속성 -그림 크기를 조절할 때 사용하는 스타일 속성이며 CSS3에 추가된 기능 -키워드: contain/cover -contain: 너비를 100%로 지정한 것과 같은 효과 -cover: 높이를 100%로 지정한 것과 같은 효과 3) background-repeat 속성 -repeat: 이미지가 패턴을 이룸 -키워드: no-repeat/repear/repeat-x/repeat-y/round/space -repeat-x: x축 방향으로 이미지가 반복 -repeat-..
-
[CSS] pseudoclassVScode/CSS 2022. 9. 8. 16:25
일반 구조 선택자 -CSS3부터 지원하는 선택자 -일반적으로 자손선택자와 병행해서 많이 사용 -같은 이름의 태그를 또는 클래스 이름들을 대상으로 하는 선택자 -종류 1) first-child: 첫번째 위치하는 자손을 선택 2) second-child: 마지막에 위치하는 자손을 선택 3) nth-chlid: n번째 위치하는 자손을 선택 회사소개사업조직도 게시판고객지원사이트맵 위의 코드와 결과는 같지만 좀 더 간결하게 표현할 경우 아래와 같다 회사소개사업조직도 게시판고객지원사이트맵 href PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss PsuedoClasss Psuedo..
-
[CSS] border, checked, box model, listVScode/CSS 2022. 9. 8. 16:04
border(테두리)속성 1. border-width 속성 -테두리의 너비를 지정하는 스타일 속성 -크기 단위: border-left[top/right/bottom]-width -키워드: medium/thick/thin... 2. border-style 속성 -테두리의 형태를 지정하는 스타일 속성 -border-left[top/right/bottom]-style 3. border-color 속성 -border-left[top/right/bottom]-color 4. border-radius 속성 -CSS3에서 추가된 속성 -테두리가 둥근 사각형 또는 원을 만들 수 있음 -요소 하나만 쓰면 네개의 모서리에 동시 적용, 네개 나눠쓰면 각각 지정된 위치에 적용 -적용 순서: 왼쪽 위-오른쪽 위-오른쪽 아래-왼..
-
[CSS] selectorVScode/CSS 2022. 9. 8. 14:43
-특정한 HTML 태그 또는 ID 또는 CLASS를 선택할 때 사용하는 기능 -선택된 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있음 CSS Selector Basic 간세네 관련 포스팅: 한글 Lorem Ipsum 생성기 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다. 대통령은 조약을 체결·비준하고, 외교사절을 신임·접수 또는 파견하며, 선전포고와 강화를 한다. *각 포털 사이트 로그 다음 네이버 1. Universal 한글 Lorem Ipsum 형사피해자는 법률이 정하는 바에 의하여 당해 사건의 재판절차에서 진술할 수 있다. 2. ID -태그에 지정된 아이디에 '#'을 붙여서 CSS를 지정함 -태그의 id는 다른 태그들과 구분하기 위해 사용될 목적으로 만들어진 거라서 각 태..
-
[HTML] div, span, 특수기호VScode/HTML 2022. 9. 8. 13:43
div 태그 . block 형식으로 공간을 분할. 차곡차곡 쌓아 내려가는 형식. . css를 사용해 원하는 레이아웃을 구성할 수 있기 때문에 많이 사용됩니다 - block 형식 1) div 태그 2) h1~h6 태그 3) p 태그 4) 목록태그(ol, ul, li) 5) 테이블 태그 6) form 태그 *block 형식의 태그는 별도의 이 없어도 줄바꿈 형식이 포함되어져 사용됨 yellow pink span 태그 -span : inline 형식으로 공간을 분할. 한 줄 안에 차례차례 위치하는 형식. -inline 형식으로 사용되어지는 태그: span태그 / a 태그 / input 태그 / 글자형식태그. -inline 형식의 의미s: 줄바꿈 속성이 없어서 한줄어 이어서 나열되는 태그들 yellow skyb..
-
[HTML] Form카테고리 없음 2022. 9. 8. 13:38
input type tag -사용자로부터 각 정보를 입력 받을 수 있는 입력란 태그들을 지칭 -흔히 회원가입 시 볼 수 있는 아이디 입력란, 패스워드 입력란, 성별 선택란 등 이 있으며 한 그룹으로 묶어서 다루어 짐. 그 한 그룹은 form 태크에 의해 구분됨. form 태그 -하나의 주제를 갖고 입력하는 다수의 사항을 하나의 그룹으로 묶어주는 태그 아이디 : PASSWORD : 첫째 둘째 셋째 남자 여자 남자 여자 김밥 떡볶이 튀김 순대 파일 : 가나다라마바사 주소 : 아이디 PASSWORD 전화번호 선택 010 02 031 032 - - 성별 남자 여자 알게된 경로 신문 TV 지인소개 기타 직업 학생 회사원 공무원 기타 생년월일 년 123 456 789 101112 월 12 3 45 6 7 8 9..