본문 바로가기

✒️ GURU39

[HTML5] 15. CSS3의 규칙 + 스타일 상속 + <p> 태그와 <em> 태그 + 스타일 합치기와 오버라이딩 + 셀렉터 15. CSS3의 규칙 + 스타일 상속 + 태그와 태그 + 스타일 합치기와 오버라이딩 + 셀렉터 # CSS3 규칙 - 스타일 상속 : CSS3 스타일은 부모 태그로부터 상속된다. - 부모 태그(부모 요소) : 자신을 둘러싸는 태그 ex) 태그의 출력 : 글자 크기는 25px, 글자 색은 부모 태그를 상속받아 green 안녕하세요 자식입니다 - 태그는 의 부모 태그이다. # CSS3 규칙 - 스타일 합치기와 오버라이딩 : 태그에 적용되는 모든 스타일이 합쳐지고 동일한 스타일의 경우 순위가 더 높은 스타일이 우선적으로 적용된다는 규칙 - 태그에 적용 가능한 스타일 a. 브라우저의 디폴트 스타일 b. 스타일 시트 파일에 선언된 스타일 c. 태그에 선언된 스타일 d. style 속성에 선언된 스타일 # 여러 스.. 2022. 7. 18.

[HTML5] 14. CSS3 스타일 시트 + <style> 태그 + style 속성 + <link> 태그와 @import 14. CSS3 스타일 시트 + 태그에 스타일 시트 작성 - 전형적인 모양 - 태그는 태그 내에서만 사용한다. - 태그는 여러 번 작성할 수 있다. : 스타일 시트들이 합쳐 사용 - 태그에 작성된 스타일 시트는 웹 페이지 전체에 적용된다. - text - align : 정렬 (왼, 오, 가운데 정렬) - margin : 여백 ex) B) 방법 2 : HTML 태그의 style 속성에 CSS3 스타일 시트 작성 -> 해당 태그에만 스타일이 적용된다. ex) + 여기서 '김치부침개를 좋아하고'의 색이 파란색인 이유는? : 글자의 색, 크기 등의 속성은 그 글자와 가장 가까이 위치한 속성값을 따르기 때문! 따라서 라인 7의 color: red 는 무시되고, 라인 15의 color : blue 가 적용된다. C.. 2022. 7. 18.

[HTML5] 13. HTML에서의 색 표현 + 색 코드 + 컬러다이얼로그 + 시간 정보 입력 폼 요소 + 생일 날짜 입력 받기 + 스핀버튼과 슬라이드 + 입력할 정보의 힌트 보여주기와 placeholder + 폼 요소의 그룹핑 13. HTML에서의 색 표현 + 색 코드 + 컬러다이얼로그 + 시간 정보 입력 폼 요소 + 생일 날짜 입력 받기 + 스핀버튼과 슬라이드 + 입력할 정보의 힌트 보여주기와 placeholder + 폼 요소의 그룹핑 # 색 코드 - rr은 빨간색, gg는 초록색, bb는 파란색 농도 - 색 이름과 색 코드의 샘플 # 색 입력 폼 : 컬러 다이얼로그 출력 -> 사용자로부터 색 선택 ex) 라인 11 해석 : 현재 보고 있는 페이지의 body에 style 속성의 color 부분에 = 왼쪽에 있는 this.value 값을 대입하여라 # 시간 정보 입력 폼 요소 - : 시간 정보만 입력 가능한 폼 요소임 ex) - 달 입력 : - 주 입력 : # 시간 정보 입력 폼 요소의 활용 # 생일 날짜 입력 받기 # 스핀버.. 2022. 7. 18.

[HTML5] 12. 선택형 입력과 콤보 박스 + <select> + <label> 태그 + 폼 요소와 캡션 12. 선택형 입력과 콤보 박스 + + 태그 + 폼 요소와 캡션 # 선택형 입력 : 콤보 박스 - : 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식 -> 태그로 항목 하나 표현 - size : 콤보박스 창의 크기 (보일 수 있는 최대 개수의 항목)로, 디폴트 값은 1이다. - multiple : 이 속성이 있다면 다수의 항목을 선택할 수 있다. - value : 이 항목이 선택되었을 때 웹 서버에 전송되는 값 - selected : 이 속성이 있다면 초기에 선택된 상태로 출력된다. # 로 폼 요소의 캡션 만들기 - 캡션과 폼 요소 - 태그로 캡션과 폼 요소를 한 단위로 묶으면 캡션 텍스트를 명료하게 하는 장점이 있다. 방법 1 방법 2 사용자 ID : 사용자 ID : # 태그로 로그인 폼 만들.. 2022. 7. 18.

[HTML5] 11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 11. 웹 폼 + , , 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기 #웹 폼 : 웹 페이지에서 사용자 입력을 받는 폼으로 로그인이나 등록, 예약, 검색, 쇼핑 등에 사용된다. - 폼 요소 : , , 등의 태그를 사용한다. # 정보 검색 과정 및 방식과 폼 전송 과정 이해 + 1은 프론트 엔드, 2~5는 서버(백엔드)의 역할 1. 네이버 사이트에 접속 2. 입력 창에 'Elvis' 입력-> '검색' 버튼 누르면 브라우저는 태그의 action="https://search.naver.com/search.naver"을 참고하여 search.naver.com 서버에 접속 후 search.naver.. 2022. 7. 18.

[HTML5] 10. 여러 가지 시맨틱 태그들 + <figure>, <summary>, <details> 태그의 활용 + 시맨틱 인라인 태그 10. 여러 가지 시맨틱 태그들 + , , 태그의 활용 + 시맨틱 인라인 태그 # 문서 구조화 시 권장 사항 - 웹 페이지 전체를 구조화 후 시맨틱 태그로 분할 - 웹 페이지 전체 제목과 소개는 태그로 작성 - 본문은 으로 묶고, 본문 내 각 절이나 영역은 로 작성 - 링크나 메뉴들은 태그로 작성 - , , , 등에는 헤딩 태그( ~ ) 를 이용하여 제목 붙이기 - 배경 음악을 연주하는 태그는 영역에 삽입하기 - 문서의 모양( , , , 의 배치 )는 CSS3 스타일 시트로 꾸미기 # 여러 가지 시맨틱 태그들 시맨틱 블록 태그 시맨틱 인라인 태그 - : 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화나 소스 코드 등을 통상적으로 '그림'으로 표현한다. - : 상세 정보를 담는 태그 - : 로 구성되.. 2022. 7. 17.

이전 1 2 3 4 5 6 7 다음

티스토리툴바