: ) Web41 [JS] onclick 대신 이벤트리스너 사용하기 ▶ addEventListener() ▸ ▶콜백함수 : 파라미터 자리에 들어가는 함수 순차적으로 실행하고 싶을 때 2024. 1. 5. [JS] [실습] function 문법 | alert 박스 만들기 [HTML] 아이디를 입력하세요. 닫기 버튼1 버튼2 [css] .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 2024. 1. 5. [JS] [이론] function 문법 ▶ function 문법 ▸긴 코드를 짧은 단어로 축약 ⌨️ ▸ function문법 작명 규칙 1. 소문자 시작 2. camelCase 📌 주의 사항 조작할 HTML 하단에 코드를 짜야 잘된다. 셀렉터 오타 주의 (id찾을 때 주의) 그냥 기본 문법 오타 → 크롬디버깅 이용 🔎 알림창 닫기 버튼 funtion문법으로 축약하기 [HTML] Alert! 닫기 버튼 ▶ function의 파라미터 ▸파라미터 예시 1. ⌨️ [HTML] Alert! 닫기 버튼 ▸파라미터 예시 2. ▸파라미터는 여러개 가능하다. 📌 id로 찾기 ⌨️ getElementById(’id’) 📌 class로 찾기 ⌨️ getElementByClassName(’class name’)[0] - [0]은 찾은 것 중에 몇번째 요소를 고를건지.. 2024. 1. 5. [JS] Alert 박스 만들기 ▶ 버튼 클릭 시 alert박스가 뜨고 닫기 버튼 클릭시 다시 alert박스가 사라진다. [핵심 코드] Alert! 닫기 버튼 [HTML] Alert! 닫기 버튼 [CSS] .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } 2024. 1. 4. [HTML, CSS] [실습] CSS Grid로 레이아웃 만들기 (grid-column, grid-row이용) [결과 화면] [HTML] [CSS] .grid-container2 { display: grid; grid-gap: 5px; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } .grid-container2 div { border: 1px solid black; } .grid-container2 img { width: 100%; height: 100%; } .grid-big { grid-column: 1 / 3; grid-row: 1 / 3; } 2023. 12. 15. [HTML, CSS] CSS Grid 레이아웃 만들기 ⭐ display: grid; grid를 쓰면 색칠하듯이 자유롭게 박스 배치 가능 직관적 [방법1] 내부박스 크기 조절을 통해 레이아웃 만들기 [HTML] [CSS] .grid-container { display: grid; /* 세로칸 개수, 사이즈 */ grid-template-columns: 100px 100px 100px 100px; /* 가로칸 개수, 사이즈 */ grid-template-rows: 100px 100px 100px; } .grid-container div { border: 1px solid black; } .grid-nav { /* 세로선 1-5까지 차지해주세요 */ grid-column: 1 / 5; } .grid-sidebar { grid-row: 2 / 4; } .grid-.. 2023. 12. 15. 이전 1 2 3 4 ··· 7 다음
