분류 전체보기 (646) 썸네일형 리스트형 [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.. [2023 신입부원 기초 스터디] 정찬우 3주차 - css 너 정말... CSS Float float 속성 값 none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 inherit - 부모 요소로부터 상속함 initial - 기본값으로 설정함 clear 속성 값 clear: none; - 기봇값 clear: left; - 왼쪽을 취소 clear: right; - 오른쪽을 취소 clear: both; - 왼쪽 오른쪽 둘다 취소 CSS Position position 속성 static(기본 값) - relative -요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다. absolute - absolute는 position: static속성을 가지고 있지 않은 부모를 기준으.. [2023 신입부원 기초 스터디] 박민규 #3주차 - 기초부터 화악시일히이잉 float 속성 - none : 기본값으로 요소를 띄우지 않음 - left : 웹페이지의 왼쪽에 띄움 [2023 신입부원 기초 스터디] 최종은 #3주차 - CSS 딥-하게 학습하기 float 속성 HTML 요소에서 이미지를 어떻게 텍스트와 함께 배치할 것인가에 대한 속성 none left right inherit initial 요소를 띄우지 않음 왼쪽에 띄움 오른쪽에 띄움 부모 요소로부터 상속함 기본값으로 설정 clear 속성 clear:none; clear:left; clear:right; clear:both; 기본값 왼쯕 취소 오른쪽 취소 좌우 취소 position 속성 HTML요소 배치 방법을 지정 static relative absolute fixed sticky 기본 배치상태 기본 배치상태이지만 top,right,bottom,left와 같은 속성을 자신 기준으로 적용 어려웡.. 다시 공부하겠습니다 움직이더라도 요소가 특정 위치에 고정되어있음 움직이다가 특정 위치에 도착하면.. 이전 1 ··· 56 57 58 59 60 61 62 ··· 81 다음
