목차 CSS 색상 표현 1-1. 영문 색상 이름 1-2. RGB값 기준 16진수 1-3. RGB/RGBA 1-4. HSL/HSLA 배경 스타일 2-1. background-color 2-2. background-clip 2-3. background-image 2-4. background-repeat 2-5. background-size 2-6. background-position 2-7. background-origin 2-8. background-attachment 2-9. background 1. CSS 색상 표현 1-1. 영문 색상 이름 영문으로 정의된 색상 이름으로 표현한다. 표현 방법 : red, black, blue 등 1-2. RGB값 기준 16진수 RGB값 기준으로 생성된 16진수 헥스 코..
목차 list-style-type 1-1. 원 모양 불릿(기본) disc; 1-2. 빈 원 모양 불릿 circle; 1-3. 채운 사각형 모양 불릿 square; 1-4. 불릿 없애기 none; list-style-type 2-1. 숫자 1로 시작하는 10진수 decimal; 2-2. 앞에 0이 붙는 10진수 decimal-leading-zero; 2-3. 소문자 로마 숫자 lower-roman; 2-4. 대문자 로마 숫자 upper-roman; 2-5. 알파벳 소문자 lower-alpha; 2-6. 알파벳 대문자 upper-alpha; list-style-position 불릿/숫자 위치 지정 3-1. 목록 기호 들여쓰기 inside; 3-2. 목록 기호 내어쓰기 outside; list-style-im..
목차 글꼴 속성 1-1. font-family 1-2. font-size 1-3. font-weight 1-4. font-variant 1-5. font-style 1-6. font 텍스트 스타일 2-1. color 2-2. text-decoration 밑줄, 윗줄, 취소선 2-3. text-transform 영문자 대소문자 변환 2-4. text-shadow 텍스트 그림자 2-5. white-space, letter-spacing, word-spacing 공백 처리, 장평 조정, 자간 조정 문단 스타일 3-1. direction 출력 방향 3-2. text-align 텍스트 정렬 3-3. text-justify 양쪽 정렬 중 자간 조정 3-4. text-indent 문장 들여쓰기 3-5. text-ov..
목차 1-1. 외부 스타일시트 1-2. 웹 폰트 추가 CSS 단위 구성 2-1. 상대 크기 2-2. 절대 크기 1. 1-1. 외부 스타일시트 ❗ 앞서 개발을 완료한 시점에는 반드시 '외부 스타일시트'로 분리해야 함을 강조해왔다: [CSS3] 스타일 | 스타일시트 | CSS 개요 .html의 font style test #web-font { font-family : "Festive", cursive; } 웹폰트추가①. 사이트에서 제공하는 태그 그대로 가져와 .html 문서의 에 작성한다. 웹폰트추가②. .css 파일에 선택자 { font-family : 폰트이름; } 형식에 맞춰 스타일을 반영한다. font-family 속성은 { "폰트이름A", "폰트이름B", "폰트이름C"... } 연달아 작성할 수 있..
목차 선택자 1-1. 선택자 종류 1-2. 선택자 우선순위 모든 선택자(전체 선택자) 태그 선택자 아이디 선택자 클래스 선택자 속성 선택자 6-1. 속성값=특정값 일치 6-2. 속성값~=특정값 공백 전후 포함 6-3. 속성값|=특정값 - 이전 포함 6-4. 속성값^=특정값 시작 6-5. 속성값$=특정값 끝 6-6. 속성값*=특정값 어디든 포함 자손/후손 선택자 7-1. 자손 선택자 7-2. 후손 선택자 동위 선택자 8-1. 동위선택자A + 바로 뒤에 있는 선택자B 1개 8-2. 동위선택자A ~ 뒤따르는 선택자B 전부 반응 선택자 9-1. 선택자:active 클릭 9-2. 선택자:hover 마우스오버 9-3. cursor 속성 상태 선택자 10-1. input[속성:속성값]:checked 10-2. inp..
목차 CSS 1-1. 문서내용 + 디자인 = 웹페이지 style 2-1. style과 stylesheet 2-2. style 기본 형식 stylesheet 3-1. 인라인 스타일시트 3-2. 내부 스타일시트 3-3. 외부 스타일시트 1. CSS 1-1. 문서내용 + 디자인 = 웹페이지 HTML의 style 속성 또는 .html 파일 안에서 작성하는 내부 스타일시트 예시이다. HTML 문서 상단의 안에서 태그 통해 적용할 수 있다. 3-3. 외부 스타일시트 .css 별도의 CSS 파일을 읽어와 적용하는 방법을 외부 스타일시트라고 한다: 예) style.css 외부로부터 .css 파일을 읽어들일 때는 태그를 사용한다.
✅ 답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.10) [실습3]폼 관련 태그1. ✅ 답안에서는 에서 cols="20"을 굳이 작성하지 않은 모습이었다. 실제로 rows="3" 속성만으로 똑같이 출력되는 것을 확인했다. 또, 최상단에 '고객명'과 같은 텍스트들은 에 넣지 않고 그냥 바깥에 고객명 : 처럼 작성한 게 새로웠다. 내 문서에 굳이 바꿔적진 않았고, 이렇게도 작성이 가능하다는 것만 알아두고자 한다. 고객명 : 전화번호 : E-mail : 피자 선택 : 페퍼로니피자 하와이안피자 내인생피자 피자를 선택하세요 피자 사이즈 Small Medium Large 토핑 선택 베이컨 치즈 양파 버섯 희망 배송 시간 : 배송 시 요청사항 : [실습4]폼 관련 태그2. ✅ 중간에 ..
목차 1-1. 속성 action, method 1-2. method 속성의 get/post 3-1. ~~ 사용 예시 3-2. 속성 submit과 reset 3-3. 텍스트 관련 속성 3-4. 숫자 관련 속성 3-5. 날짜/시간 관련 속성 3-6. 속성 radio와 checkbox 3-7. 색상, 파일, 히든, 버튼 속성 과 5-1. 5-2. 와 6-1. 6-2. 6-3. ~ 사용 예시 1. 은 HTML에서 사용자가 입력할 양식을 제공하는 태그이다. 사용자 입력 양식이란 예를 들면 로그인 시 또는 회원가입 시에 id와 pwd를 입력하도록 하는 일종의 형식들을 말한다. form 태그 내의 input 태그들을 통해 사용자가 입력하는 정보를 서버로 넘기는 역할을 수행한다. 1-1. 속성 action, metho..
✅ 답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.09) [실습1]글자 목록 태그1. ✅ 불필요한 줄바꿈이나 들여쓰기는 자칫 코드를 더 복잡하게 보이게 만드는 것 같아 삼가야겠다. 특히 '프로그래밍 언어' 리스트들은 개행 없이 한 줄로 나눠쓰는 것이 알맞다. 리스트도 들여쓰기 없이 써도 된다. HTML5 정복 담당 강사 : 김햇살 이메일 : bettermyself@dream.or.kr 프로그래밍 언어 Java 데이터 베이스 Oracle 화면 구현 HTML5 CSS3 JavaScript JQuery 서버 개발 기술 JDBC Servlet JSP AJAX 소프트웨어 모델링 DB_Modeling UML 프레임워크 Spring My..
목차 하이퍼링크 태그 1-1. 하이퍼링크 기본 작성(문자) 1-2. 태그 이용해 링크 1-3. 한 페이지 내에서 점프 1. 하이퍼링크 태그 href 링크한 페이지의 id값이나 사이트 주소 지정 target(_blank or _self) 링크 페이지에 표시될 위치 지정(새 창 or 현재 창) download 링크한 페이지를 표시하지 않고 다운로드하도록 지정 rel 현재 페이지와의 관계 지정 hreflang 링크한 페이지의 언어를 지정 type 페이지의 파일유형 지정 는 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동시키는 태그이다. 외부 사이트에 연결하거나 문서 내부간 이동이 가능하다. 1-1. 하이퍼링크 기본 작성(문자) 글자태그 글자태그라는 텍스트 문구에 주소값이 지정된 형태로 출력되며, 클릭 시..
