728x90 반응형 KDT/HTML | CSS24 CSS의 색상(Color) 1. 색상 이름으로 표현 red, yellow, blue, salmon, ... 2. RGB 색상값으로 표현 rgb(0~255, 0~255, 0~255) -> rgb(0, 0, 255) RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ALPHA 3. 16진수 색상값으로 표현 #0000FF -> 파랑 00 00 FF -> #00F R G B 2023. 3. 28. 선택자의 종류 2 6. 자식 선택자 부모의 요소 하위의 자식요소의 스타일을 적용 body > p { color: deepskyblue;} 7. 자손 선택자 조상요소 하위의 모든 요소의 스타일을 적용 자손은 자식을 포함 body p {color: deepskyblue;} 예제 코드 자식, 자손 선택자 네이버 구글 다음 네이트 8. 인접 형제 선택자 동일한 부모의 요소를 갖는 자식 요소들의 관계 연속된 동생 요소의 스타일을 적용 h2 + p {color: deepskyblue;} 9. 일반 형제 선택자 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용 h2 ~ p {color: deeppink;} 예제 코드 형제 선택자 첫째 둘째 셋째 넷째 다섯째 여섯째 10. 속성 선택자 HTML 요소에서 .. 2023. 3. 28. 선택자의 종류 1 1. 전체 선택자 스타일을 모든 요소에 적용 '*' 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 { 속성명1: 속성값; 속성명2: 속성값 ...} ✔ 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선! 예제 코드 전체 선택자 스타일을 모든 요소에 적용 '*' 기호를 사용해서 표현 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음 2. 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용 예제 코드 요소 선택자 특정 요소가 쓰인 모든 요소에 스타일을 적용함 span 요소 strong 요소 ins 요소 mark 요소 3. 상속 선택자 부모 요소의 속성값이 자식 요소에게 전달되는 것 https://.. 2023. 3. 28. CSS란? CSS(Cascading Style Sheet) * 웹 페이지의 특정 요소 또는 요소 그룹에 적응할 스타일 그룹을 지정하는 규칙을 정의하는 언어 참고 * MDN : https://developer.mozilla.org/ko/ CSS 문법 HTML 문서 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 2. 내부 스타일 HTML 문서의 사이에 요소를 사용하여 적용하는 방법 예제 코드 CSS를 적용하는 방법 인라인 스타일 내부 스타일 외부 스타일 3. 외부 스타일 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 예제 코드 CSS /* css.css 작성일: 2023-03-28 내용: 외부 스타일 적용 방법 */ h2 { font-size: 50px; } .. 2023. 3. 28. HTML의 디스플레이 1. inline content 크기 만큼만 자리를 차지하는 요소 텍스트, img, span 텍스트의 특징을 가지고 있음 2. block 라인을 모두 차지하는 요소 p, h, ul, li, div, ... 명의 특징을 가지고 있음 span 태그 줄 단위로 영역이 설정 inline 특징을 가지고 있음 div 태그 면 단위로 영역이 설정 block 특징을 가지고 있음 시맨틱 태그(Sementic) Sementic: 의미론적인 의미가 있는 태그를 사용 시맨틱 태그의 장점 검색 엔진 최적화 스크린 리더를 사용하여 페이지를 탐색할 때 도움 div>div>div>div>div>... 끝없는 div를 탐색하는 것보다 효율적 개발자에게 명확한 의미를 전달 디스플레이 1. span 태그 영역입니다. div 태그 영역 2023. 3. 27. 폼 태그 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 form 태그 안에 form 요소를 통해 데이터를 서버로 전달 전송방법(method) get: URL에 데이터를 포함하여 전달 post: body에 데이터를 포함하여 전달 input 태그: 입력 상자 type 속성 text: 문자를 입력받는 글상자 아이디: password: 비밀번호를 입력받는 글상자 비밀번호: radio: 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼 ㄴ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함 성별: 남자 여자 checkbox: 여러개의 옵션을 선택할 수 있도록 하는 버튼 ㄴ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야.. 2023. 3. 24. 이전 1 2 3 4 다음 728x90 반응형
