HTML & CSS
-
[CSS] 글자, 위치 속성HTML & CSS 2023. 9. 18. 16:24
글자속성 : 기본 사용법 font-size : 글자 크기 font-family : 글꼴 ( 두 단어 이상일때 큰 따옴표로 묶음 ) font-style : 기울기 등( italic ) font-weight : 글자 두께 text-align : 글자 정렬 ( left, center, right ),블록 형태만 가능 글자속성 : 특수 사용법 line-height :높이 - 글자 수직 중앙 정렬 ( 글짜를 감싸는 박스 높이와 같은 크기로 지정) text-decoration: none - 링크 밑줄 제거 위치 속성 웹 문서 안에 요소들을 배치하기 위한 속성 웹 브라우저 통일성을 위해 스타일속성(left,top,right,bottom) 같이 사용 순서 변경을 위해 z-index속성 사용 겹칠때 위에 올라오도록 우선..
-
[CSS] backgroundHTML & CSS 2023. 9. 18. 14:10
background 배경 속성 색상,이미지,원점,크기,반복등 여러 배경 스타일을 지정 속성 설명 background-image 배경 이미지 삽입 background-size 배경 이미지 크기 지정 background-repeat 배경 이미지의 반복 형태 지정 background-attachment 배경 이미지의 부착 형태 지정 background-position 배경 이미지의 위치 지정 background 한 번에 모든 배경 속성 입력 background-image 배경이미지 넣기 사용법 : background-image: url("이미지 경로") background-repeat background-reapeat:repeat; - 요소의 배경 영역을 채울 때까지 이미지 반복 반복이미지가 넘칠경우 잘라냄 ..
-
[CSS]박스 기본 속성HTML & CSS 2023. 9. 18. 10:48
선택자 설명 margin 바깥쪽 여백 영역, 테두리와 이웃하는 요소 사이의 간격 border 내용과 패딩 주변을 감싸는 테두리 padding 안쪽 여백 영역, 내용과 테두리 사이의 간격 width 글자를 감싸는 영역 가로 크기 height 글자를 감싸는 영역 세로 크기 전체 너비 = width + 2*(margin + border + padding) 전체 높이 = height + 2*(margin + border + padding) border 사용법 요소의 테두리 설정 border: 선두께 선스타일 선색깔 border-top : 위쪽 테두리 border-right : 오른쪽 테두리 border-bottom : 아래쪽 테두리 border-left : 왼쪽 테두리 table box 테이블 선사이 간격 붙이..
-
[CSS] displayHTML & CSS 2023. 9. 15. 14:46
display : inline 줄 바뀜 안됨, 너비 높이 속성 지정 안됨 margin,padding 속성은 왼쪽 오른쪽만 지정가능 #div1{ display: inline; } #div2{ display: inline; } #div3{ display: inline; } display Test 1 display Test 2 display Test 3 div는 한행을 차지하는 공간태그이지만 inline 속성으로 글자크기만큼 공간을 차지한다. display Test 1 display Test 2 display Test 3 display : none 공간을 없애고 보이지 않게함 #div1{ display: none; } #div2{ display: none; } #div3{ display: none; } dis..
-
[CSS] 상태 선택자HTML & CSS 2023. 9. 8. 16:50
선택자 형태 설명 상태 선택자 :checked 체크 상태의 input 태그 선택 :focus 포커스를 맞춘 input 태그 선택 :enabled 사용 가능한 input 태그 선택 :disabled 사용 불가능한 input 태그 선택 구조 선택자 :first-child 형제 관계에서 첫 번째로 등장하는 태그 선택 :last-child 현제 관계에서 마지막으로 등장하는 태그 선택 :nth-child(수열) 형제 관계에서 앞에서 수열(2n)에 해당하는 태그 선택 :nth-last-child(수열) 현제 관계에서 뒤에서 수열(2n)에 해당하는 태그 선택 상태 선택자 :checked checkbox,radio 타입의 input 버튼이나 선택된 option 태그를 선택하는 선택자 태그:checked + lable{..
-
[CSS] 특수(속성,후손,자손,반응) 선택자HTML & CSS 2023. 9. 8. 15:02
특수 선택자 선택자 형태 설명 속성 선택자 선택자[속성] 특정한 속성이 있는 태그 선택 선택자[속성=값] 특정한 속성 내부 값이 특정 값과 같은 태그 선택 후손 선택자 선택자A 선택자B 선택자A의 후손인 선택자B 선택 자손 선택자 선택자A > 선택자B 선택자A의 자손인 선택자B 선택 반응 선택자 :active 사용자가 마우스로 클릭한 태그 선택 :hover 사용자가 마우스 커서를 올린 태그 선택 속성 선택자 태그를 선택하고 속성 선택 태그와 속성이 모두 존재할 때 스타일 적용 태그 속성= 값은 태그와 속성이 모두 존재하고 속성 값이 html 태그와 모두 일치할 때 적용 // 태그와 속성이 모두 같을경우 태그[속성]{ 속성:값 } // 태그와 속성 그리고 속성 값 모두 같을경우 태그[속성 = 값]{ 속성:..
-
[CSS] 기본 선택자HTML & CSS 2023. 9. 8. 13:49
태그 형태 설명 전체 선택자 * HTML 페이지 내부의 태그를 모두 선택 태그 선택자 태그 HTML 페이지 내부의 특정 태그를 모두 선택 아이디 선택자 #아이디 특정 id 속성이 있는 태그 선택 클래스 선택자 .클래스 특정 클래스가 있는 태그 선택 전체 선택자 모든 하위 요소에 한꺼번에 스타일을 적용할때 사용 문서의 여백이나 글꼴,크기 등 기본 스타일을 초기화할때 사용 *{ 속성:값; } 태그 선택자 태그를 선택하면 웹페이지에 해당 태그에 해당하는 모든 요소들에 스타일이 적용 태그 { 속성: 값; } 아이디 선택자 id 속성 : 태그에 이름을 부여하는 속성(변수명) id는 속성명은 중복 하여 사용하지 않음 (관례) "#" 기호에 태그의 id를 뒤에 붙여서 사용 #id 선택지{ 속성:값; } 클래스 선택자..
-
[HTML] 구조화HTML & CSS 2023. 9. 8. 11:28
과거시스템 : 레가시 시스템(legecy system) div,span 태그를 사용해서 공간분리 태그가 많아질수록 코드 복잡도 증가 복잡도 증가로 인한 코드 재사용 어려움 머리말 메뉴 본문 꼬리말 현대 방식 :시멘틱 태그: header(머리말), nav(메뉴), section(본문), footer(꼬리말) 태그 설명 header 머리말(페이지 제목, 페이지 소개) nav 하이퍼링크들을 모아 둔 네비게이션 aside 본문 흐름에 벗어나는 노트나 팁 section 문서의 장이나 절에 해당하는 내용 article 본문과 독립적인 콘텐츠 영역 footer 꼬리말(저자나 저작권 정보) 검색에 노출 잘됨 의미를 알 수 있는 태그 사용으로 코드 분석 용이 검색 최적화에 의한 명확한 정보 제공에 용이 HTML5 기본 ..