WINK-(Web & App)/HTML & CSS & JS 스터디 (128) 썸네일형 리스트형 [2023 신입부원 심화 스터디] 이정욱 #4주차 - 예제 만들기(연습 문제) 1. modal창 만들기 const openButton = document.querySelector(".open"); //open 버튼 불러오기 const container = document.querySelector(".container"); // close 버튼을 담은 container const closeButton = document.querySelector(".close"); // close 버튼 openButton.addEventListener("click", () => { //openButton 에서 click 이벤트 발생하면 container.style.display = "flex"; //container를 보여주고 openButton.style.display = "none"; //open.. [2023 신입부원 심화 스터디] 황현진 #4주차 - 예제 만들기(연습 문제) 1️⃣ 모달 만들기🔘 const openButton = document.querySelector(".open"); const container = document.querySelector(".container"); const closeButton = document.querySelector(".close"); openButton.addEventListener("click", () => { // open 버튼을 눌렀을 경우 container.style.display = "flex"; openButton.style.display = "none"; // open 버튼을 없애주는 기능 }); closeButton.addEventListener("click", () => { // close 버튼을 눌렀을 경우 c.. [2023 신입부원 심화 스터티] 박지민 #4주차 Part. 6 예제 만들기 (연습문제) 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 1. 모달 만들기 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼 누르면 👉 Click 버튼만 보이기 - index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close - style.css ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: none; // 기본 container 클래스의 display는 none 속성 -> 첫 화면에 보임 X flex-directi.. [2023 신입부원 심화 스터디] 신진욱 #4주차 - Part 6 그동안 강의를 통해 배운 js를 이용하여 예제 만들기 실습 1. 모달 만들기 - 모달 만들기는 👉 Click 버튼을 누르면 모달 내용만 보이고 Close 버튼을 누르면 👉 Click 버튼만 보이게 하기 index.html 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close style.css - 기본 container class의 display는 none 속성이기에 모달 내용이 첫 화면에 보이지 않는다. ... .container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; di.. [2023 신입부원 심화 스터디] 조현상 4주차 - Part 6 그동안 배운 js를 가지고 연습 문제들 만들어보기 1.모달 만들기 2.할 일 앱 만들기 3.디지털 시계 만들기 4.가위바위보 게임 만들기 5.업그레이드 된 할 일 앱 만들기 1.모달 만들기 모달 만들기는 버튼을 통해서 내용이 보이고 안 보이는 기능을 만들어주는 예제였다. 👉 Click Lorem, ipsum dolor. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, excepturi? Close 우리는 open 클래스에 버튼을 통해서 container 클래스 속 내용들이 보여주고 안 보여주는 기능을 만들 것이다. .container { position: absolute; top: 0; left: 0; width: 100vw; .. [2023 신입부원 심화 스터디] 김윤희 #3주차 - Part 4, Part 5 11강 문자열 메소드 1. 대소문자 변환 const str = ‘Hello World!’; console.log(str.toUpperCase()); → 대문자로 바꾸어주기 console.log(str.toLowerCase()); → 소문자로 바꾸어주기 2. 문자열 공백 제거 const str = ‘ haha ’; console.log(str.trim()); → 공백을 제거해줌 (haha가 출력) console.log(str.trimStart()); → 앞쪽 공백 제거 console.log(str.trimEnd()); → 뒤쪽 공백 제거 3. 새로운 문자열 생성 const str = ‘Hello’; console.log(str.repeat(3)); → str을 세 번 반복함. 하지만 원본 객체는 변함x c.. [2023 신입부원 기초 스터디] 도승준 3주차 기리보이의 flexbox 세션 6 Float : 이미지가 둥둥 떠다니며 인접한 텍스트 혹은 인라인 요소가 이미지를 감싸게 해줌 float 속성 none : 기본값. 요소를 띄우지 않음 left : 왼쪽에 띄움 right : 오른쪽에 띄움 inherit : 부모 요소로부터 상속받은 값을 사용함 initial : 기본값으로 설정한다. clear 속성 none : 기본값. left : float: left 값을 취소 right : float: right 값을 취소 both: 둘 다 취소 Position : HTML 요소가 어느 한쪽에 고정되어 있거나 위치를 변경하는 것 속성 start - 일반적인 배치. relative - static 위치에서 top/right/left/bottom 에 의한 상대적인 위치 absolute - stat.. [2023 신입부원 기초 스터디] 한승훈 3주차 - CSS 0.인사말 안녕하세요. 모두 즐거운 한 주 보내고 계신가요. 오늘은 안좋은 소식을 하나 전하드리게 되어 진지한 모습으로 찾아뵙게 되었습니다. 이미 아시는 분들은 알고 계시겠지만, ... 1.CSS Float, Clear float 속성 float 의 사전적인 의미는 '뜨다"라는 뜻입니다. 만약 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다. 그리하여 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 합니다. 자주 사용하는 float 속성 값은 아래와 같습니다. none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 inherit - 부모 요소로부터 상속함 initial - 기본값으로 설정함 c.. 이전 1 ··· 8 9 10 11 12 13 14 ··· 16 다음
