front-end

[수업-CSS] 05. 애니메이션

2차원 변형 함수 종류 설명 translate(x, y) 일정 좌표로 이동하기 지정한 크기만큼 x축, y축으로 이동 translateX(x) 지정한 크기만큼 x축으로 이동 translateY(y) 지정한 크기만큼 y축으로 이동 scale(x, y) 일정 페이지만큼 확대/축소 지정한 크기만큼 x,y 축으로 확대/축소 scaleX(x) 지정한 크기만큼 x축 방향으로 확대/축소 scaleY(y) 지정한 크기만큼 y축 방향으로 확대/축소 retate(각도) 지정 각도만큼 회전 지정한 각도만큼 비틀기 지정한 각도만큼 회전 skew(x, y) 지정한 각도만큼 x,y축으로 요소 변형 skewX(x) 지정한 각도만큼 x 축으로 요소 변형 skewY(y) 지정한 각도만큼 y축으로 요소 변형 3차원 변형 함수 종류 설명 ..

[수업-CSS] 04. 레이아웃 스타일

기본 스타일 종류 설명 기타 height 길이 상대 크기 설정 시 창 크기에 따라 크기가 변화하지만 고정 크기 설정 시에는 창 크기에 관계없이 크기가 고정적이다. width 높이 block 한 줄 전체를 차지하는 요소로 박스 모델이라고도 한다. div, p, hn, ul, ol, blockquote, form, hr, table, fieldset, address 등 inline 작성한 내용만큼만의 영역을 차지하는 요소 img, object, br, sub, sup, span, input, textarea, label, button 등 display 화면 배치 방법 변경 속성 none : 화면에 표현되지 않고 공간 차지 x block : block 요소로 변경 inline : inline 요소로 변경 in..

[수업-CSS] 03. 색상 스타일

CSS의 색상 표현 방법 ① 영문명 ex. red, black, skyblue ② 16진수 rgb값을 기준으로 16 진수 작성 ex. #ff0000 (빨간색) ③ rgb/rgba rgb값을 0~255로 입력, rgba의 경우엔 투명도까지 설정 가능 (투명도는 1=불투명/0=투명) ④ hsl/hsla 색상, 채도, 밝기로 색을 입력하기 ex.hsla(색상 값, 채도 값(%), 명도 값(%), 투명도) 배경 관련 스타일 종류 설명 예시 background-color 배경색을 지정하는 속성 선택자{background-color: 색상표현;} background-clip border-box 박스 모델의 가장 외곽인 테두리까지 적용 선택자{background-clip: 속성 값;} padding-box 테두리 제..

[수업-CSS] 02.텍스트 스타일

1. 글꼴 속성 종류 설명 예시 font-family 폰트의 글꼴 설정 * 시스템 내 저장된 글꼴 이름 입력 선택자{font-family: 글꼴;} font-size 글자의 크기 조절 선택자{font-size: 10px;} font-weight normal 기본 선택자{font-wight: bold;} bold 굵게 bolder 기본보다 더 굵게 lighter 기본보다 더 가늘게 100~900 400이 normal / 700이 bold font-variant 영어 모두 작은 대문자로 선택자{font-variant: normal} / 선택자{font-variant:small-caps;} font-size italic 처음부터 기울어진 글자 선택자{font-style: ltalic;} oblique 기본 글..

[수업-HTML] 03. HTML 영역/시멘틱 태그

영역 관련 태그 종류 설명 블록요소 인라인 요소 속성 집어 넣기(css) 시멘틱 태그 HTML5로 넘어오면서 div이지만 의미까지 포함된 시멘틱 태그를 사용하게 되었다. 종류 설명 웹 문서에서 머리말 영역을 나타낼 때 사용 제목, 제목 설명 등을 나타내는 요소 표함 body안에서 여러 번 사용가능 웹 문서에서 다른 웹 문서나 문서 내 다른 부분으로 이동하는 부분을 나타내고자할 때 사용 웹 문서의 광고같이 부가적인 정보를 구분하기 위해 사용 비슷한 그룹이나 문서를 묶기 위해 사용 - 웹 문서에서 주요 내용을 가진 본문을 나타낼 때 사용 - 실제로 나타내고자하는 내용을 갖고 있으므로 중요한 부분으로 인식되어 처리 - 여러개 article사용 가능 웹 문서의 저자 정보, 저작권 정보, 이용 조건 등을 나타내기..

[수업-CSS] 01. 선택자

1. CSS 적용 스타일 내부에 스타일 정보 저장 태그를 이용하여 css파일을 읽어와서 적용 인라인 스타일 시트 : 태그 내부에 스타일 정보 지정 2. css선택자 (1) 모든 선택자 : HTML문서 안의 모든 태그를 선택할 때 전체 선택자 사용 (2) 태그 선택자 : HTML문서 내 같은 태그를 모두 선택할 때 사용 #태그명{설정 값;} (3) 아이디 선택자 : HTML 문서 내 해당하는 아이디 속성 값을 가진 태그만 선택할 때 사용 #id명{설정 값;} (4) 클래스 선택자 : HTML문서 내 여러 개의 태그를 동일한 클래스 명으로 지정하여 선택할 때 사용 .클래스명{설정 값;} (5) 속성 선택자 : 기본 선택자 뒤에 []를 사용하여 속성과 속성 값 사용 선택자[속성=속성값]{설정 값;} (6) 자..

[수업-HTML] 02. HTML (영역관련~폼태그관련)

1. 영역 관련 태그 : block형식의 공간을 수직으로 분한 : inline 형식의 공간을 수평으로 분할 style : 속성 넣기 / 주로 CSS에서 사용 (background, width, height 등 ) 2. 시멘틱 태그 이전에는 div에 id를 집어넣어 div를 구분했지만 실질적인 의미를 갖지 못했으나 HTML5로 넘어오면서 div이지만 거기에 의미까지 포함된 시맨틱 태그가 등장했다. 컴퓨터는 단순 문장이나 위치, 모양만으로는 내용을 이해하기 힘드므로 컴퓨터가 각 문장에 대한 의미를 이해할 수 있도록 요소를 명확하게 나타내기 위함이다. : 웹문서에서 머리말 영역을 나타낼 때 사용 (주로 검색어 form, 메뉴 nav가 들어간다) : 웹 문서에서 다른 웹문서나 문서 내 다른 부분으로 이동하고자 ..

[수업/HTML] 01. HTML (글자태그~시멘틱태그)

기본 구조 : 현재 문서파일이 어떤 타입인지 알려주는 것 : 머리, 문서 정보, 문서 자체에 대한 설명 (style, script,meta...) : 속성 태그를 구체화함 Insert title here : 문서에 대한 제목 작성 : 몸통, 화면에 출력해 보여줄 내용 시작태그 종료태그 글자 관련 태그 종류 설명 . . . 제목 태그 숫자가 커질수록 글자가 작아짐 자동굵게 자동줄바꿈 블록요소 구분 줄 줄바꿈 글씨를 굵게 만들어주면서 강조의 의미를 담는다. 글씨 굵게만들기 형관펜(노란색) 효과 밑줄 취소선 글자를 기울이면서 강조의 의미를 담는다. 글자 기울이기 글자 작게하기 인용문구 나타내기 : 한 블록 띄어 나오며 블록요소 인용문구 나타내기 : " " 로 감싸져나오고 인라인요소 아래 첨자 윗 첨자 블록요소..