문제해결 시나리오 2문제
서술형 5문제 가량
프론트엔드는 다 시험 HTML CSS JQuery JS
부트스트랩이 시험에 나온다면 메뉴얼사이트 접속 허락
자바스크립트
변수
클로저
안배운것 -
서술형 용어에 대한 이해
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 버튼 5개의 값들을 콘솔에 출력하시오-->
<button class="button">Btn1</button>
<button class="button">Btn2</button>
<button class="button">Btn3</button>
<button class="button">Btn4</button>
<button class="button">Btn5</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<!-- 버튼 5개의 값들을 콘솔에 출력하시오-->
<button class="btn">Btn1</button>
<button class="btn">Btn2</button>
<button class="btn">Btn3</button>
<button class="btn">Btn4</button>
<button class="btn">Btn5</button>
<script>
for(var i =0; i<$(".btn").length;i++){
// console.log($(".btn")[i]).html());
console.log($($(".btn")[i]).html());
}
</script>
</body>
</html>다른방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<!-- 버튼 5개의 값들을 콘솔에 출력하시오-->
<button class="btn">Btn1</button>
<button class="btn">Btn2</button>
<button class="btn">Btn3</button>
<button class="btn">Btn4</button>
<button class="btn">Btn5</button>
<script>
// for(var i =0; i<$(".btn").length;i++){
// //console.log($(".btn")[i]).html());
// console.log($($(".btn")[i]).html());
// }
$(".btn").each(function(index,item){
console.log(index +" : "+item.innerHTML);
})
</script>
</body>
</html>서술형
1. 웹표준이란?
- 웹에서 표준적으로 사용되느 기술이나 규칙을 의미하며, 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다.
웹개발자들과 브라우저를 만드는 밴더들 간의 약속
스타일시트의 한 기능에 브라우저별로 지정 , css호환성 - 퍼블리셔 작업
2. 자바스크립트는 과거에 라이브스크립트라는 이름이었다. 그 이전에는 ECMA 스크립트
(ES7, ES6....) -> 자바스크립트 버전
3. 웹 접근성이란?
- 웹접근성은 신체적 차이나 장애 여부와 상관없이 누구나 원활하게 웹페이지를 이용할 수 있어야 한다는 것을 의미한다 예를 들어, 시각장애인의 경우 화면늘 눈으로 볼수 없기 때문에 별도의 소프트웨어를 사용하는데 그렇기 때문에 되도록이면 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장되며 이미지를 사용할 경우 이미지에 대한 설명을 추가해야 한다.
HTML5에 대두된 개념
계획대로라면 html4까지만 div로 레이아웃을 잡고
그 이후에는 Semantic Tag쓰자는 권고안이 나옴
Semantic Tag : 장애를 가진 사용자들의 접근성을 높이기 위해
id값을 주는 방식은 개발자에게 자유를 줘서 아이디가 조금씩 달라질 수 있음
Semantic Tag로 쓰면 구글검색엔진이 검색하기 유리
4. Semantic Tag의 각 요소의 의미를 확인해두세요.
| <article> | 내용을 정의한다. |
| <aside> |
페이지 콘텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등. |
| <details> | 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다. |
| <figcaption> |
<figure> 요소에 대한 캡션을 정의한다. |
| <figure> | 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다. |
| <footer> |
문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 <header>, <section>, <article> 등 다른 레이아웃 사용가능. |
| <header> |
문서나 섹션의 머릿글을 지정한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다. |
| <main> | 문서의 주요 내용을 지정한다. |
| <mark> |
강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다. |
| <nav> |
네비게이션 링크를 정의한다. |
| <section> |
<header>, <footer>와 함께 문서의 구역을 정의한다. |
| <summary> |
<details> 요소를 위한 눈에 보이는 제목을 정의한다. |
| <time> | 날짜/시간을 정의한다. |
5. 웹프론트엔드 설계문서
- 첫번째 : 스케치
- Wireframe
- Mock up (와이어프레임 위에 폰트등 디자인 리소스 등 올려짐)
- 핵심적인 기능(jquery, js, 애니메이션, 핵심 기능) 추가 : ProtoType
- 지속적프로토타입(계속 사용) / 실험적프로토타입(버려짐)
기획안에는 Wireframe 까지
5. CSS 적용 3가지 방식
- external : link태그를 사용하여 별도의 css 파일을 연결하는 방식
- internal : style 태그 내부에 기입하는 방식
- inline 방식 : 해당 태그의 style 속성에 넣는 방식
서술형
static : 노멀플로우에서 원래 자리잡는 위치
문제해결 시나리오
selectedIndex = $(this).index();
this를 변수에 담고 index말고 item과 비교
selectedIndex 에 if문으로 숫자 지정
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] 프로필 사진 원형 (0) | 2020.06.19 |
|---|---|
| [화면 구현] (0) | 2020.05.11 |
| [CSS] 과제 - 비반응형 웹페이지 (0) | 2020.04.08 |
| [CSS] animated css (0) | 2020.04.07 |
| [CSS] 예제 - 팝업 리스트 만들기 (0) | 2020.04.07 |