윤정이네 집에 오신 것을 환영합니다

소리 엄청 크니까 줄여주세요

html

• html5 기본문서형식
• 문서의 정보를 알려주는 meta 태그
• 상대경로, 절대경로
• 210712:과제01
  1. Entity 코드
  2. sub : 아래첨자 태그
  3. ul, li, ol : 리스트 태그
  4. dl, dt, dd : 정의 목록 태그
  5. strong : bold 스타일 강조 태그
  6. mark : 형광펜 태그
• 210712:과제02
  1. html5 : 시맨틱 태그란?
  2. html5 : 시맨틱 태그 종류
     • header : 머리말
     • nav : 네비게이션(메뉴)
     • section : 본문
     • article : 컨텐츠
     • aside : 광고 및 사이드 컨텐츠
     • footer : 꼬리말
     • figure : 컨텐츠
     • figcaption : 컨텐츠 설명
     • details : 요약글
     • summary : 요약글 제목
     • time : 시간, 날짜
     • progress : 진행율
     • meter : 범위, 수치
     • ruby · rt : 외국어, 발음표기
• 이미지와 수평선 삽입하기
  1. hr : 수평선 태그
  2. img : alt - 이미지 설명 속성
  3. title : 설명 속성
• 이미지 캡션 달기
  1. figure, figcaption : 컨텐츠와 컨텐츠 설명 태그
• 사운드 및 영상 삽입(+자막, 썸네일)
  1. audio : 사운드 삽입 태그
  2. video : 동영상 삽입 태그
  3. source : 알맹이 태그
• 하이퍼링크 요소 다루기
  1. a : 하이퍼링크 태그
  2. a : target 속성(_blank)
  3. a : href 속성 - 전화, 문자, 메일 보내기
• 네임앵커 이용하기
  1. a : href 속성 - 지정 위치로 스크롤 이동
• 이미지 맵
  1. map, area : 이미지 영역 링크 생성 태그
  2. area : shape - 영역 모양 속성
  3. area : coords - 영역 좌표값 지정 속성
  4. img : usemap 속성
• 인라인 프레임 삽입 및 하이퍼링크 연결
  1. iframe : 인라인 프레임 태그
• 테이블 삽입하고, 속성을 이용해 편집하기
  1. table, tr, td, th : 표 작성 태그
  2. td : rowsapn, colspan - 셀 병합 속성
• 210721:과제01
• 210721:과제02 오디오 자동재생 주의
• 렌터카 요금표
  1. thead, tbody, tfoot : 표 컨텐츠 영역을 나누는 태그
  2. th : scop - 표 접근성 속성
  3. th, td : headers - 표 접근성 속성2
  4. caption : 표 제목 태그
  5. colgroup : 행 그룹화 태그
• 210726:과제01
• 예약문의
  1. form : 폼 작성 태그
  2. input : 폼 요소 태그
  3. label : input의 접근성 태그
• input 타입 총정리
  1. input : type 종류
     • text : 짧은 텍스트 작성
     • password : 비밀번호 전용
     • radio : 단일 선택
     • checkbox : 복수 선택
     • email : 이메일 전용
     • tel : 전화번호 전용
     • date : 년/월/일 선택 달력
     • datetime-local : 년/월/일 시 분 선택 달력
     • month : 년/월 선택 달력
     • week : 년/주 선택 달력
     • time : 시/분 선택
     • number : 숫자 선택 콤보박스
     • color : 컬러 팔레트
     • search : 검색어 작성
     • file : 파일 업로드 속성
     • submit : 제출 버튼
     • reset : 초기화 버튼
     • button : 사용자 지정 버튼
  2. botton : 버튼 작성 태그
  3. textarea : 줄글 작성 태그
  4. select, option : 선택 박스 태그
• 210729:과제01

css

• 프롤로그
  1. 블록 요소
  2. 인라인 요소
  3. span : 태그로 특정 글자 꾸미기
  4. Vendor prefix란?
  5. box-shadow : 요소에 그림자 넣기
  6. border-radius : 모서리 둥글게 하기
• 20210803:과제01
  1. css 적용 방법
     • 인라인 방식
     • link 방식
     • @import 방식
• 문서 전체의 배경 색상, 글자 색상 적용하기
  1. background-color : 배경색
  2. color : 폰트 색
• 20210803:과제02
• 태그 선택자 사용하기
  1. tag selector : 특정 태그를 선택
• 클래스, 아이디 선택자 사용하기
  1. class selector : 이름을 만들어 규칙적인 스타일 적용
  2. id selector : 이름을 만들어 그룹화 하기
• 속성 선택자 사용하기
  1. attr selector : 태그에 적용된 속성 이름 선택
  2. attr selector : 적용된 속성의 값을 선택
• 자식, 형제 선택자 사용하기
  1. > selector : 내 바로 밑에 있는 요소
  2. + selector : 내 옆에 있는 요소
• 가상 클래스 선택자
  1. 링크 관련 클래스
     • :link : 요소에 링크가 걸려있는 상태
     • :visited : 방문한 링크
     • :active : 요소를 클릭 후 떼기까지의 상태
  2. 동적 가상 클래스
     • :hover : 요소 위에 커서를 올린 상태
     • :focus : 요소 안에 커서가 존재하는 상태
• 가상 클래스 선택자2
  1. 순서 관련 클래스
     • :first-child : 맨앞 요소
     • :last-child : 마지막 요소
     • :nth-child(n) : 1~n번째 요소
     • :nth-child(even) : 짝수번째 요소
     • :nth-child(odd) : 홀수번째 요소
     • ::first-letter : 요소의 첫번째 글자
     • ::first-line : 요소의 첫번째 줄
  2. 내용 추가 관련 클래스
     • ::before : 요소의 앞
     • ::after : 요소의 뒤
• 소속을 정하는 트리 구조의 하위 자손 선택자
  1. descendant selector : 자손 선택자
• 속성 값의 상속 관계 알아보기
  1. 상속이란?
  2. 상속이 되는 대표적인 속성
     • font-size : 텍스트 크기
     • font-weight : 텍스트 굵기
     • text-ailgn : 인라인 요소 정렬
     • color : 폰트 색
• css 우선 순위
  1. 우선 순위란?
  2. 중요도
     • 인라인 스타일
     • <style> css
     • <style> css @import
     • <link> css
     • <link> css @import
     • 브라우저 디폴트 stylesheet
  3. 명시도
     • !important
     • 인라인 스타일
     • id
     • 속성 선택자
     • 가상 클래스
     • class
     • 태그 선택자
     • 전체 선택자
  4. 선언 순서
• 20210805:과제01
• 20210805:과제02
• 글자와 관련된 속성 알아보기
  1. font : 축약 속성
  2. font-style : 폰트 기울기 속성
  3. font-variant : 소문자를 대문자로 바꾸는 속성
  4. font-family : 글꼴 속성
• 문단의 흐름 방향, 공백 처리
  1. direction : 글쓰기 방향 지정
  2. white-space : 공백 문자 처리
• 인용부호와 콘텐츠 생성
  1. content : 컨텐츠 및 문자열 추가
  2. quotes : 좌우 문자열 추가
  3. counter-increment : 번호 매기기
• 목록 문단에 이미지, 위치, 스타일 제어
  1. list-style : 축약 속성
  2. list-style-position : 리스트 기호 위치
  3. list-style-image : 리스트 이미지 기호
  4. list-style-type : 리스트 기호 스타일 변경
• 요소의 크기 지정 및 여백 처리
  1. margin : 바깥여백
  2. padding : 안쪽여백
• 다양한 속성으로 테두리 표시하기
  1. border : 축약 속성
  2. outline : 요소의 테두리의 테두리
• 요소의 배경 처리하기
  1. background-image : 배경 이미지
  2. background-repeat : 배경 이미지 반복 여부와 방향
  3. background-position : 배경 이미지 위치
  4. background-attachment : 배경 이미지 스크롤 고정 여부
• 다중 배경 이미지 처리하기
  1. background-size : 배경 이미지 사이즈
  2. background-origin : 배경 이미지 시작 위치
• 이미지, 색상, 글자 투명도 조정
  1. hsla : 색조, 채도, 밝기, 불투명도
  2. rgba : 빨강, 초록, 블루, 불투명도
• 20210806:과제01
• 20210806:과제02
• 이미지 요소 정렬 및 단 구성하고 float 해제하기
  1. float : 이미지 정렬
  2. clear : 속성 해제
• 절대 좌표, 상대 좌표, 고정 좌표
  1. position : 요소의 좌표값 지정
     • absolute : 절대 좌표
     • relative : 상대 좌표
     • fixed : 고정 좌표
  2. 예제 모아보기
     • absolute 예제
     • fixed 예제
• 이미지 요소를 세로로 배치하기
• 20210810:과제01
• 20210810:과제02
• 20210810:과제03
• 20210812:과제01
• 20210819:과제01
• 20210819:과제02
• 글꼴 내 서버에 적용하기

javascript

• 프롤로그
  1. 표현식과 문장
  2. 식별자
  3. console.log() : 콘솔창에서 미리보기
  4. document.write() : 화면에 출력
  5. alert() : 확인창
• 자료형과 연산자
  1. 자료형이란?
  2. string : 문자열
     • `\n` : 띄어쓰기
     • \n : 줄바꿈
  3. number : 숫자
     • + : 더하기
     • - : 빼기
     • / : 나누기
     • * : 곱하기
     • % : 나머지
  4. boolean : 논리 (참, 거짓)
     • ==, === : 같다
     • !=, !== : 다르다
     • >, <, >=, <= : 크기비교
• 문자열 선택과 길이 구하기
  1. .length : 문자열의 길이
  2. [] : 문자열 중 특정 순번의 글자를 선택해 가져오기
• 불 표현식
  1. && : 논리곱
  2. || : 논리합
  3. new Date() : 현재 날짜 정보 가져오기
  4. .getHours() : 현재 시간 중 시간만 가져오기
  5. if else : 조건문
• 특정 나이, 성별 조사
• 변수와 복합대입 연산자
  1. var , let : 변수
  2. const : 상수
  3. += : 복합대입 연산자
• 변수의 증감 연산자
  1. 후위연산
     • 변수++ : 증가
     • 변수-- : 감소
  2. 전위연산
     • ++변수 : 증가
     • --변수 : 감소
• 자료형의 확인과 변환
  1. typeof() : 자료형 확인
  2. Number() : 숫자형으로 변환
  3. String() : 문자형으로 변환
• 20211010:과제01

따라하기

• PHPSCHOOL 상단 메뉴