본문 바로가기

etc20

인터넷 프로그래밍 #8-2 CSS3 - 변형과 애니메이션 인터넷 프로그래밍8-2 CSS3 - 변형과 애니메이션 단원 목표1. 변형함수를 나열하고 각각의 사용법 설명하기 2. 트랜지션의 속성을 나열하고 각각에 대해 설명하기 3. 애니메이션의 사용법에 대해 설명하기  변형함수(transform)   트랜지션(transition)  속성  트랜지션의 실행형태*ease가 default 애니메이션(Animation)  속성   애니메이션 속성 한꺼번에 표시하기 ***w3schools.com animation 연습문제 6개 풀어보기 *** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 간단정리 *** ***  *** ***  *** ***  *** ***  ***.. 2024. 5. 4.
인터넷 프로그래밍 #8-1 CSS3 - 다양한 선택자 인터넷 프로그래밍8-1 CSS3 - 다양한 선택자 단원 목표1.연결선택자의 개념을 설명하고, 그 예 나열해보기2.속성선택자의 개념을 설명하고, 그 예 나열해보기3.가상클래스 선택자의 개념을 설명하고, 그 예를 나열하기4.가상요소 선택자의 개념을 설명하고, 그 예 나열해보기 단순선택자 -이름, ID, 클래스를 기반으로 한 선택자 연결선택자(Combinator Selectors) -특정관계에 따른 선택자 -자손선택자 Descendant Selector (공백): element element ex) div p -div 밑의 모든 p요소를 선택 -자식선택자 Child Selecrtor (>) : element > element ex) div > p -div의 자녀들인 p요소를 선택 -인접한 형제 선택자.. 2024. 5. 3.
인터넷 프로그래밍 #7-2 토론 (선호하는 코드 에디터) 인터넷 프로그래밍7-2 토론 과제  대표적인 코드 에디터(code editor) 중 어느 에디터를 선호하는지와 그 이유에 대해서 의견을 작성하고 토론해보세요. (비주얼 스튜디오 코드, 서브라임 텍스트, 아톰, 브래킷, 드림 위버)   비주얼 스튜디오 코드(Visual Studio Code):장점: 사용자 친화적인 UI, 강력한 확장성과 커뮤니티 지원, 풍부한 기능과 플러그인, 디버깅 기능이 강력하다.단점: 가끔 무거워지는 경향이 있고, 일부 플러그인은 성능에 영향을 줄 수 있다.서브라임 텍스트(Sublime Text):장점: 가벼운 속도와 뛰어난 성능, 풍부한 플러그인과 다양한 설정 옵션.단점: 최신 기능에 대한 업데이트가 느리며, 공식적인 지원이 부족할 수 있다.아톰.. 2024. 5. 2.
인터넷 프로그래밍 #7-1 중간고사 (문제 정답 및 오답 정리) 인터넷 프로그래밍 1. 다음중 문서정보에 대한 태그가 아닌것은? 1.meta 2.title 3.link 4.style o 2. 다음 중 html5의 시맨틱 태그가 아닌 것은? 1.head o 2.nav 3.aside 4.footer 3. External style sheet를 바르게 표현한 것은? 1. o2. 4. 마우스 포인터가 올라갔을때 하이라이트 되도록 하기 위한 css코드는? 1.mousein w.mouseout 3.mouseover 4.hover o5. Index.htl이 있는 디렉토리의 하위 디렉토리로 images와 css디렉토리가 있다. Images안에 bg1.jpg라는 이미지가 있고, css 안에 style.css가 있다. Style.css에서 bg1.jpg 이미지를 표현할.. 2024. 5. 1.
소프트웨어공학 #7-1 중간고사 문제 정답/오답 확인 및 정리 소프트웨어 공학 1. 형상관리 절차의 순서로 올바른 것은?  1. 형상통제 → 형상식별 → 형상감사 → 혈상기록 2. 형상식별 → 형상감사 → 형상통제 → 형상기록  3. 형상식별 → 형상통제 → 형상감사 → 형상기록  ㅇ 4. 형상식별 → 형상기록 → 형상통제 → 형상감사 2. 다음 중 형상관리 절차요소와 거리가 먼 것은?  1. 형상식별  2. 형상통제  3. 형상기록  4. 형상변경 o 3. 다음 중 소프트웨어 개조시 품질요인과 거리가 먼 것은?  1. 유지보수성  2. 유연성  3. 기밀성 o 4. 검사용이성 4. 다음 중 중대한 시스템의 하나로 모든 시스템의 걸쳐있는 절단 관심사의 시스템은 무엇인가?  1. 안전이 중대한 시스템 o 2. 임무가 중대한 시스템  3. 업무가 중요한 시스템  4. .. 2024. 4. 30.
인터넷프로그래밍 #6-2 CSS3 박스모델 인터넷 프로그래밍6-2 CSS3 - 박스모델 단원 목표1. 블록, 인라인, 인라인블록의 차이점을 설명할 수 있다.2. 박스모델의 주요 개념을 나열하고 각각에 대해 설명할 수 있다.3. 포지션의 주요 요소들을 나열하고 각각에 대해 설명할 수 있다. HTML 태그의 세 가지 유형 1. 인라인(inline) 요소  - 가로 크기 : 콘텐츠의 크기 - 한 줄에 여러 개 배치 - 크기 값을 지정할 수 없음 - 상하마진을 지정할 수 없음 span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio 2. 블록(block) 요소 - 가로크기 : 100% - 한 줄에 하나 배치 - 가로, 세로 크기 지정 가능 - 상하마진 지정 가능 .. 2024. 4. 29.
인터넷 프로그래밍 #5-2 CSS3 - 문자와 글꼴 인터넷 프로그래밍5-2 CSS3 - 문자와 글꼴 단원 목표1. 문자(Texts) 스타일을 나열하고 각각에 대해 설명할 수 있다.2. 글꼴(Fonts) 스타일을 나열하고 각각에 대해 설명할 수 있다.3. 문자와 글꼴을 활욯나 페이지를 구성할 수 있다.문자(Texts) 스타일 문자색상(Color) H1{color:blue;} 색이름 #ff0000 문자 정렬(Alignment) H1{text-align:center;} center, left, right, justify 문자장식(Decoration) a{text-decoration:none;} 문자변환(Transformation) a{text-transform:uppercase;} lowercase, capitalize 문자간격(Spacing) letter-s.. 2024. 4. 28.
인터넷 프로그래밍 #4-2 HTML5 - 메타태그와 웹 폰트 인터넷 프로그래밍4-2 HTML5 - 메타태그와 웹 폰트 단원 목표1. 메타태그와 CSS, JS 링크 방법을 설명할 수 있다.2. 폰트어썸(Font Awesome)의 활용법에 대해 설명할 수 있다.3. 구글 폰트(Google Fonts) 의 활용법에 대해 설명할 수 있다. 메타태그 -HTML 문서에 대한 메타 데이터(데이터에 대한 데이터/정보) 정의 -태그는 항상  요소 내부에 지정 -메타데이터는 페이지에 표시되지 않지만 시스템에서 구문을 분석함 -메타 데이터는 브라우저(콘텐츠를 표시하거나 페이지를 다시 로드하는 방법), 검색 엔진(키워드) 및 기타 웹 서비스에서 사용 -웹 디자이너가  태그를 통해 뷰포트(브라우저를 연 사용자측에서 사용하는 기기의 크기)를 제어할 수 있도록 하는 방법 -한글이 제대로 나.. 2024. 4. 27.
인터넷 프로그래밍 #6-1 CSS3 목록, 표, 배경 인터넷 프로그래밍 6-1 CSS3 - 목록, 표, 배경 단원 목표 1. 목록(Lists) 스타일을 나열하고 각각에 대해 설명하기 2. 표(Table) 속성을 나열하고 각각에 대해 설명하기 3. 배경(Backgrounds) 스타일을 나열하고 각각에 대해 설명하기 목록(Lists) HTML 목록 순서 없는 목록 순서 있는 목록 설명 목록 CSS 목록 1. 순서 없는 목록에 다양한 불릿(마커) 설정 2. 순서 있는 목록에 다른 숫자 형식 설정 3. 이미지 목록의 불릿(마커)으로 설정 4. 목록 및 목록 항목에 배경색 추가 ex) .a {list-style-type: Value} disc(default), circle, square, none decimal, decimal-leading-zero, lower-r.. 2024. 4. 22.
인터넷 프로그래밍 #4-1 입력양식 태그 인터넷 프로그래밍 4-1 입력양식 태그 단원 목표 1. 폼(Form)의 개념과 작동방식에 대해 설명하기.. 2. 입력(Input) 태그 사용법에 대해 설명하기. 3. 네이버 회원가입 양식을 만들 수 있다. 폼(Form) 2024. 4. 19.
인터넷 프로그래밍 #3-2 멀티미디어 태그 인터넷 프로그래밍 3-2 멀티미디어 태그 단원 목표 1. 오디오 태그 사용법에 대해 설명하기 2. 비디오 태그 사용법에 대해 설명하기 3. HTML에서의 Color 사용법에 대해 설명하기 오디오태그 기본형 오디오파일형식 1. mp3 - MPEG-1, 오디오 Layer-3, 압축파일 2. wav - MS와 IBM 이 개발한 비압축 파일 3. ogg - mp3 대안으로 개발한 스트리밍 방식 파일 오디오 태그 속성과 속성값 autoplay - 오디오 파일 자동 실행 controls - 오디오 재생도구 표시 loop - 오디오 재생이 끝나면 다시 재생(반복 재생) src - 오디오 파일의 위치(URL) muted - 오디오 소리 제거 preload - 오디오 재생 전 오디오 로드 여부 설정 ex) 음악 자동 재.. 2024. 4. 18.
인터넷 프로그래밍 3-1 테이블태그 인터넷 프로그래밍 3-1 테이블태그 단원 목표 1. 표의 기본 태그를 나열하고 설명하기 2. 표의 테두리와 크기를 조절할 수 있다. 3. 행과 열을 합치는 방법을 설명할 수 있다. 표(Table)의 기본 구조 표를 정의 표 제목 (Table Head) 행 (Table Row) 셀 항목 (Table Data) Table Header Table Footer * 기본값으로 굵게, 가운데 정렬 표의 테두리(Border) 태그로 지정할 수 있음 ex) table, th, td{ border: 1px solid black; 두께 1px, 실선, 검정색 } border-collapse: collapse; - 합치기. 표의 테두리들 사이의 간격을 없앤 경우 border-radius: 10px; - 모양 둥글게 변경 b.. 2024. 4. 12.