과제 두가지를 받았다.
우선 이젠 이해는 가는 css를 먼저 해보았다.
<Day9. CSS 효과>
div태그를 하나 만들고 아래와 같은 CSS 효과를 적용해보기
1. 처음 빨간색으로 배경화면 채우기 100px * 100px
2. 애니메이션 시작시점 노란색 적용
3. 50%시점에서 초록색 가로로 길이가 증가 가로 300px
4. 100%시점 파랑색에 세로 길이도 300px로 증가
<div class="sample2">sample2</div>
<style>
.sample2 {
background-color: red;
width: 100px;
height: 100px;
/* animation-name: changeColor;
animation-duration: 10s;
animation-fill-mode: forwards; */
animation: changeColor 10s forwards;
}
@keyframes changeColor {
0% {
background-color: yellow;
}
50% {
background-color: green;
width: 300px;
}
100% {
background-color: dodgerblue;
width: 300px;
height: 300px;
}
}
</style>
주석 처리된 부분으로 짰는데 챗GPT를 이용해보니 단축 속성을 이용할 수 있는 답안도 받아 추가해 보았다.
나머지 기능들도 연습해 봐야지!
두번째 자바스크립트
<Day8. 객체와 DOM>
1. <script> 태그 내에 객체를3개 배열로 생성하기.
2. <body> 아래에 버튼 1개 Div 1개를 생성.
3. <script> 내부에서 1번에서 만들었던 객체 3개를 foreach 문으로 순화하면서,
div의 내부에 해당 프로퍼티들이 나오도록 만들어보기.
단, 화면에도 보여져야하고, data-*속성에도 표기가 되도록 해보기.
프로퍼티들이 들어갈 요소는 creatElement API를 통해 생성하고,
스타일링은 옵션으로넣어보기.(font의 사이즈 등)
솔직히 자바는 지금 변수랑 기초 함수, 조건문, 반복문에서 못벗어 나고 있어서 뭘 만들어내질 못하겠다...ㅜ
이것도 챗GPT의 도움으로 코드를 얻어 보았다.
<title>Day8_과제</title>
<style>
.property-item{
font-size: 14px;
margin: 5px 0;
}
</style>
</head>
<body>
<button id="displayButton">클릭</button>
<div id="propertyContainer">homework</div>
<script>
// 1. 객체 3개를 배열로 생성
const objectsArray = [
{name; 'Object1', value:'Value1', description:'Description1'},
{name: 'Object2', value: 'Value2', description: 'Description2'},
{name: 'Object3', value: 'Value3', description: 'Description3'}
];
// 2. 요소 선택
const displayButton = document.getElementById('displayButton');
const propertyContainer = document.getElementById('propertyContainer');
// 3. 버튼 클릭 이벤트 설정
displayButton.addEventListener('click', () => {
// div 초기화
propertyContainer.innerHTML = '';
// 4. 객체 배열을 순회하면서 div 내부에 프로퍼티 표시
objectsArray.forEach(obj => {
// 각 객체의 프로퍼티를 div에 추가
for (const prop in obj) {
const propElement = document.createElement('div');
propElement.classList.add('property-item');
propElement.textContent = `${prop}: ${obj[prop]}`;
propElement.dataset[prop] = obj[prop];
propertyContainer.appendChild(propElement);
}
});
});
</script>
각 문단에 대한 설명도 보았는데
하나하나 보면 알겠는데 전체를 보고 바로 알거나 내가 만들지는 못하겠다...
다시 차근차근 공부해보아야 겠다.
내일 수업시간에 리뷰 집중해야지
오... 여러가지 빠지고 눈에 잘보이는 flex, gird과정 + 포폴 만들기에 겹쳐 이상한데로도 빠지고 자바스크립트가 많이 어려워서그런지 따라잡고 있다는 느낌이 든다.
진짜 다들 잘따라오는 느낌이 드는데 나만 자꾸 놓치고 못알아먹고 하는 것 같다ㅜ
벌써 한달이 돼가는데 몸은 적응을 하고 있는 거 같은데,
머리가 안따라 가주는 것 같다.
학교는 어떻게 다녔던 거지?ㅋㅋㅋ