본문 바로가기

✒️ GURU/HTML523

[HTML5] 17. CSS3에서의 색 표현법 + 색 관련 CSS3 프로퍼티들 + 텍스트 꾸미는 CSS3 스타일 시트 + CSS3의 표준 단위 + 단축 프로퍼티 font + 구글 폰트 불러오기 17. CSS3에서의 색 표현법 + 색 관련 CSS3 프로퍼티들 + 텍스트 꾸미는 CSS3 스타일 시트 + CSS3의 표준 단위 + 단축 프로퍼티 font + 구글 폰트 불러오기 # CSS3에서의 색 표현법 - 16진수 코드로 표현 # 8A 2B E2 --> blueviolet - 10진수 코드와 RGB()로 표현 rgb( 138, 43, 226 ) --> blueviolet - 색 이름으로 표현 : CSS3표준에서는 140개의 색 이름이 존재 #색 관련 CSS3 프로퍼티들 - HTML 태그의 텍스트 글자 색 color : 색 - HTML 태그의 배경 색 background - color : 색 - HTML 태그의 테두리 색 border - color : 색 ex 1) ex 2) #텍스트 꾸미는 CSS3.. 2022. 7. 19.

[HTML5] 16. 셀렉터 조합 + 자식 셀렉터 + 자손 셀렉터 + 전체 셀렉터와 속성 셀랙터 + 가상 클래스 셀렉터(pseudo-class) 16. 셀렉터 조합 + 자식 셀렉터 + 자손 셀렉터 + 전체 셀렉터와 속성 셀랙터 + 가상 클래스 셀렉터(pseudo-class) # 셀렉터 조합하기 - 2개 이상의 셀렉터 조합 : 조합에 적합한 HTML 태그에만 적용 - 자식 셀렉터 (child selector) : 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합 ex) 의 직계 자식인 에 적용되는 스타일 시트 div > strong { color : dodgerblue ; } - 자손 셀렉터 (descendent selector) : 자손 관계인 2개 이상의 태그를 나열 ex 1) 의 자손 에 적용되는 스타일 시트 ul strong { color : dodgerblue ; } ex 2) # 전체 셀렉터 : 와일드 문자(*)를 사용하여 모든 태그에 .. 2022. 7. 19.

[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.

이전 1 2 3 4 다음

티스토리툴바