##능력단위평가시험
시험일시 : 2024. 09. 12(목)
시험시간 : 16:50~18:50(2시간)
시험 예상 문제 : 자바스크립트 64강_69강
시험 점수 70점 이상이어야 함
#수업페이지_URL
- 64강~68강: 필수
- 69강: 선택
#HTML 주소 불러오기_URL
- cdnjs 검색 후 홈페이지 클릭
- 검색 창에 font-awesome 검색
- 첫 번째 뜨는 거 선택
- 가장 최근 버전인 것을 선택(폰트어썸 6버전)
- 테일위드는 외워라<script src="https://cdn.tailwindcss.com"></script>
#64강_연습
1단계_코드펜
1단계_영상(참고)
방법 1) HTML
- <header>태그를 사용하여 top-bar와 mobiletop-bar를 만들어 줌
- top-bar에 visible-on-md-up 지정
- mobilr-top-bar에 visible-on-sm-down 지정
방법 2) CSS
- 992px
/* 992px 이상 에서만 보임 */
@media( max-width: 991px ) {
.visible-on-md-up {
display: none;
}
}
- /* 991px 이하 에서만 보임 */
@media( min-width: 992px ) {
.visible-on-sm-down {
display: none;
}
}
방법 3) JS
- bootstrap 참고용 링크_url
2단계_코드펜
2단계_영상(참고)
방법 1) HTML
- top-bar의 visible-on-md-up를 hidden md:block로 수정
- mobile-top-bar의 visible-on-sm-down를 md:hidden로 수정
- tailwind css sheet_참고용 링크
ㄴhidden / none / block 검색 후 md sm lg xl 사이즈에 맞는 수식어 선택해서 사용
#65강_연습(반응형 모바일 메뉴 1구현, 탑바&모바일 탑바 구현)
1단계_코드펜
1단계_영상(참고)
2단계_코드펜
2단계_영상(참고)
방법1) 1. logo-box
- header에 배경색 그레이로 주고
- 글씨색은 화이트로
- 탑바 header 사이에 div태그 이용하여 container생성
- container에 mx-auto 적용(margin, padding left, right 모두 0)
- div태그 안에 <a>태그 생성하여 top-bar__logo 로고 박스 생성
- 폰트어썸 들어가서 로고 찾고 <span>태그 생성 후 복붙 / ex) lemon / <i class="far fa-lemon"></i>
- <span> 하나 더 생성 후 로고 이름 지정 ex) DESIGN LEMON
- top-bar에 높이 h-10지정
- container에 h-full, flex 지정
- logo-box 아래 <div> 태그 만들어서 flex-grow 생성
- tap-bar__logo에 선색깔&굵기 지정 / border-red-500 border-2
- tap-bar__logo에 flex items-center 지정
- container 안에 태그를 이용하여 mx-2(margin-left, margin-right)를 지정
방법 1) 2. menu-box-1
- <nav>태그에 top-bar__menu-box-1 생성
- top-bar__menu-box-1 안에 ul.flex>li*4>a[href="#"]>span*2+div 생성
- 각 <span>태그에 menu 이름 지정
- top-bar에 높이 h-10지정
- container에 h-full, flex 지정
- logo-box 아래 <div> 태그 만들어서 flex-grow 생성
- top-bar <a>태그에 선색깔&굵기 지정 / border-red-500 border-2
- top-bar <a>태그에 flex items-center 지정
- container 안에 <div>태그를 이용하여 mx-2(margin-left, margin-right)를 지정
- <ul>태그에 선색깔&굵기 지정 / border-red-500 border-2
- <a>태그에 h-full, flex items-center px-2 지정
- 폰트어썸에서 각각의 아이콘 찾아서 <span>태그에 입력 및   입력
참고용 링크 1)
- tailwind css sheet_참고용 링크
ㄴDocumentation 클릭 -> 우측 Resources 클릭 -> Componets클릭 -> Ctrl+F_검색창 키에 color 검색
(Customoizing Colors_필요한 컬러 복붙)
참고용 링크 2)
-  _참고용 링크
-  (Non-breaking Space)
: “Non-breaking Space”를 의미하는 HTML entity 한국말로 번역을 해보자면 “줄바꿈이 일으키지 않는 공백”
ㄴ 를 사용하면 띄어쓰기는 되지만 자동으로 줄바꿈은 되지 않는다는 점
ㄴex) 웹에서는 텍스트가 너무 길어서 요소 내에 주어진 가로 폭을 넘어갈 때는 자동으로 줄바꿈이 일어남
2단계_코드펜
2단계_영상(참고용)https://www.youtube.com/watch?v=poQNnKNjidg
방법 2) 1. menu-1
- <header>태그 밑인 <div>태그 부터 </div> 태그까지 복붙한 후
- 모바일 탑바 글씨 지우고 붙여넣기
- <nav>태그 부터 </nav>까지 드래그 해서 삭제
- container 밑에 <div>태그 생성 후 flex-1값 주기
- 로고 태그 밑에 <div>태그 생성 후 flex-1값 주기 / flex justify-end줘서 아이콘 오른쪽 끝으로 정렬 /
flex items-center 줘서 아이콘 가운데 배치 / mr-3(오른쪽 여백 값 주기)
- 폰트어썸에서 아이콘 주소 복사
- <span>태그 생성 후 클래스 이름을 mobile-top-bar__btn-show-side-bar로 지정
- 만든 <span>태그 안에 폰트어썸에서 불러온 아이콘 주소 붙여넣기
- 모바일, 탑바 <header>태그에 fixed 값 지정
- 모바일, 탑바 <header>태그에 fixed inset-0 bottom: auto 지정
- 모바일 탑바 </header>태그 밑에 lorem입력한 후 Tab누름
- div태그에 h-12 이름 값을 지정
- <section>태그 생성 후 클래서ㅡ 이름을 h-12로 지정
-<div>태그 에 container max-auto 지정
방법 2) 2. css
- body태그 사용하여
```body {min-height: 500vh;}
- body태그 안에 background-image:linear-gradient(to bottom, #000, #787878, #afafaf)지정
*inset-0
ㄴ 상, 하, 좌, 우를 다 0으로 맞추는 것
#66강_연습(클릭시 모바일 사이드바 배경노출)
단계_코드펜
단계_영상(참고)
방법 1) HTML
- 지금 당장 필요없는 태그들 접기 / <style>, <header>, <a>태그들
- mobile-top-bar__btn-show-side-bar에 cursor-pointer지정
- <header>태그 둘 다 접고 그 밑에 <div>태그를 사용하여 mobile-side-bar 클래스 추가
- mobile-side-bar에 fixed(고정) inset-0 지정
- 테일윈드 차트 시트를 통해 z-50(z-index) / invisible / opacity-0 각각 지정
방법2) CSS
- body {
min-height:500vh;
background-image:linear-gradient(to bottom, #787878, #afafaf);
color:white;
}
html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
overflow:hidden;
}
.mobile-side-bar {
transition: visibility 0.3s, opacity 0.3s;
background-color:rgba(0,0,0,0.5);
}
.mobile-side-bar.active {
visibility:visible;
opacity:1;
}
방법3) JS
- function MobileTopBar__init
* init: 초기화
console.clear();
// 모바일 탑바 초기화
function MobileTopBar__init() {
$('.mobile-top-bar__btn-show-side-bar').click(function() {
MobileSideBar__show();
});
}
// 모바일 사이드바 초기화
function MobileSideBar__init() {
$('.mobile-side-bar').click(function() {
MobileSideBar__hide();
});
}
// 모바일 사이드바 노출
function MobileSideBar__show() {
$('.mobile-side-bar').addClass('active');
$('html').addClass('mobile-side-bar-actived');
}
// 모바일 사이드바 숨김
function MobileSideBar__hide() {
$('.mobile-side-bar').removeClass('active');
$('html').removeClass('mobile-side-bar-actived');
}
MobileTopBar__init();
MobileSideBar__init();
#67강_연습(클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴)
단계_코드펜
단계_영상(참고)
방법 1) HTML
- <div>태그에 mobile-side-bar__content클래스 이름 지정
- mobile-side-bar__content에 임시로 h-10(높이), w-10(너비), border-black(선), bg-white(배경색) 지정
- mobile-side-bar__content에 flex justify-end items-end 사용하여 오른쪽 끝 정렬
- mobile-side-bar__content에 높이 h-full 지정하고, 임시로 준 너비 값 삭제
- mobile-side-bar__content에 너비 width: 300px; 지정 / 임시로 지정한 border-black(선) 값을 삭제
- mobile-side-bar__content에 flex justify-end items-end 값 삭제 후 ml(margin left, margin right)값을 auto로 지정
방법 2) CSS
- .mobile-side-bar__content {
transform: translateX(100%);
transition: transform 0.3s;
}
- .mobile-side-bar .active .mobile-side-bar__content {
transform: translateX(0);
}
방법 3) JS
console.clear();
// 모바일 탑바 초기화
function MobileTopBar__init() {
$('.mobile-top-bar__btn-show-side-bar').click(function() {
MobileSideBar__show();
});
}
// 모바일 사이드바 초기화
function MobileSideBar__init() {
$('.mobile-side-bar').click(function() {
MobileSideBar__hide();
});
$('.mobile-side-bar__content').click(function() {
return false;
});
}
// 모바일 사이드바 노출
function MobileSideBar__show() {
$('.mobile-side-bar').addClass('active');
$('html').addClass('mobile-side-bar-actived');
}
// 모바일 사이드바 숨김
function MobileSideBar__hide() {
$('.mobile-side-bar').removeClass('active');
$('html').removeClass('mobile-side-bar-actived');
}
MobileTopBar__init();
MobileSideBar__init();
#68_연습(클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴)
단계_코드펜
단계_영상(참고)
방법 1) HTML
- <div>태그에 mobile-side-bar__head, mobile-side-bar__head 각각 따로 생성
- mobile-side-bar__head에 flex-shrink-0값 지정
- mobile-side-bar__head에 flex-grow 지정
- mobile-side-bar__head에 <div>태그 생성 후 mobile-side-bar__btn-close 클래스 지정
- mobile-side-bar__btn-close에 임시로 w-20(너비) h-20(높이) border-2(선 굵기), brder-black(선 색깔) 지정
- mobile-side-bar__btn-close에 relative지정
- mobile-side-bar__btn-close 안에 <div>태그 두 개 생성
- 첫 번째 <div>태그에 absolute bg-red-500 inset-x-0 h-1/5지정
- 첫 번째 <div>태그 복사해서 두 번째에 붙여넣기
- <div>태그 두 개 모두 bg-black로 수정
- X버튼을 우측으로 보내려면
- mobile-side-bar__btn-close에 ml-auto 값을 지정(margin: left, margin:right)
- X버튼 크기가 커서 mobile-side-bar__btn-close에 너비 높이 값들은 w-8, h-8로 줄여주고
- mobile-side-bar__btn-close의 border-black값 삭제
- mobile-side-bar__head에 px-3(padding_여백), cursor-pointer 지정
- mobile-side-bar에 md:hidden 지정
-
-
* flex-shrink: 공간이 부족할 때 작동
방법 2) CSS
- .mobile-side-bar__btn-close > div {
top:40%;
transform:rotate(-45deg);
}
- .mobile-side-bar__btn-close > div:last-child {
transform:rotate(45deg);
}
- @media (max-width: 767px) {
html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
overflow:hidden;
}
}
방법 3) JS
console.clear();
// 모바일 탑바 초기화
function MobileTopBar__init() {
$('.mobile-top-bar__btn-show-side-bar').click(function() {
MobileSideBar__show();
});
}
// 모바일 사이드바 초기화
function MobileSideBar__init() {
$('.mobile-side-bar, .mobile-side-bar__btn-close').click(function() {
MobileSideBar__hide();
});
$('.mobile-side-bar__content').click(function() {
return false;
});
}
// 모바일 사이드바 노출
function MobileSideBar__show() {
$('.mobile-side-bar').addClass('active');
$('html').addClass('mobile-side-bar-actived');
}
// 모바일 사이드바 숨김
function MobileSideBar__hide() {
$('.mobile-side-bar').removeClass('active');
$('html').removeClass('mobile-side-bar-actived');
}
MobileTopBar__init();
MobileSideBar__init();
(Non-breaking Space)
: “Non-breaking Space”를 의미하는 HTML entity 한국말로 번역을 해보자면 “줄바꿈이 일으키지 않는 공백”
ㄴ 를 사용하면 띄어쓰기는 되지만 자동으로 줄바꿈은 되지 않는다는 점
ㄴex) 웹에서는 텍스트가 너무 길어서 요소 내에 주어진 가로 폭을 넘어갈 때는 자동으로 줄바꿈이 일어남
줄바꿈이 일으키기 않는 공백
: 는 “Non-breaking Space”를 의미하는 HTML entity 인데요. 한국말로 번역을 해보자면
=> “줄바꿈이 일으키지 않는 공백”
ㄴ이 말은즉슨 를 사용하면 띄어쓰기는 되지만 자동으로 줄바꿈은 되지 않는다는 건데요.
ㄴ 즉, 줄바꿈을 일으키지 않으면서 공백을 넣고 싶을 때 를 사용합니다
-> 텍스트가 줄바꿈이 전혀 되지 않고 요소 밖으로 삐져나옴(사용하는 이유)
사실 CSS의white-space 속성을 nowrap으로 주면 굳이 많은 를 사용하지 않고도 좀 더 쉽게 줄바꿈을 방지할 수
있습니다. 이 부분에 대해서는별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.
언제 써야할까?
그러면 가 실질적으로 언제 웹 개발에 도움이 되는지 살펴볼까요?
아래 두 개의 텍스트를 비교해보면 첫 번째는 pm 앞에 일반 스페이스 문자를 사용하고, 두 번째는 를 사용하고 있습니다. 따라서 첫 번째 경우는 pm 앞에서 줄바꿈이 일어나고, 두 번째 경우에는 2:50 pm이 하나의 단어처럼 취급뒤어 그 앞에서 줄바꿈이 일어납니다.
-> 첫 번째 경우처럼 줄바꿈이 일어나면 한국인 입장에서는 큰 문제가 없어보이지만 영어 사용자 입장에서는 어색하게 느 껴질 수 있다고 합니다. 영미권에서는 숫자와 단위를 띄어쓰더라도 일반적으로 그 사이에서 줄바꿈을 하지 않는 것이
관례이기 때문입니다.
visibility : 가시성
: 앱을 만들다보면 사용자와의 상호 작용을 통해 어떤 View 를 숨기거나, 표시하고 싶을 때가 있다.
=> 우리는 visibility 속성을 이용하여 해결할 수 있다.
=>visibility 는 View 클래스에 정의되어 있으며 즉, 모든 View 를 대상으로 사용할 수 있다.
visibility 속성의 종류
다음과 같이 3가지로 분류한다.
· visible
해당 View 가 보이는(표시되는) 상태이다.
· invisible
해당 View 가 보이지 않는(숨겨진) 상태이다.
숨겨진 상태이지만, 해당하는 공간을 차지하고 있다.
· gone
해당 View 가 보이지 않는(숨겨진) 상태이다.
해당하는 공간도 같이 숨겨진다.