개발자연습노트

1. 갑자기 CSS 가 적용 되지않는다.  콘솔에서도 오류가 나오지않음2. 인터넷 캐쉬 삭제3. CSS 경로 확인 // 검사 - 네트워크 - CSS 파일이 있는지 확인 (O)4. 스크립트가 작동하는지 확인 console.log('Button clicked'); 5. CSS 에서!important 를 붙여줌 해결됨.( CSS가 겹치는 상황이 나와서 그런것같음) 해결!

버튼1 누르면 '아이디입력하세요' 라는 alert 박스가 떠야함버튼2 누르면 '비번입력하세요' 라는 alert 박스가 떠야함  구현방법은 2개가 있겠군요1. 미리 html로 alert 박스를 2개 만들어놓고 버튼1 누르면 박스1 띄우기~버튼2 누르면 박스2 띄우기~ 이렇게 짜도 되겠지만 이러면 나중에 alert 박스가 100종 필요하면 어떻게 되겠습니까. 끔찍하군요 2. 기존에 있던 alert 박스를 재사용하는겁니다.버튼1 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 버튼2 누르면 alert 박스 안의 제목을 "아이디입력하세요"로 바꾸고 alert 박스 띄우기 이러면 효율적일듯요 자바스크립트가 가장 잘하는게 html 변경이니까 제목 바꾸는건 일도 아님     H..

function에 사용가능한 파라미터 문법  파라미터라고 하면 어려우니까 구멍이라고 합시다.함수내에 구멍을 뚫어줄 수 있습니다.  function 알림창열기(구멍){ document.getElementById('alert').style.display = 구멍;}지금 함수 내에 구멍을 뚫었습니다.구멍을 뚫는 법은1. () 소괄호 내에 아무 글자나 적고2. {} 중괄호 내에도 같은 글자 아무데나 적으면 됩니다.    구멍을 왜 뚫냐고요?-> 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있습니다.  구멍이 뚫려있으면 이제 함수를 쓸 때 그냥 쓰는게 아니라소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용가능합니다.    설명하다 function 알림창열기(구멍){ document.getElementById(..

function (일명 함수) 라는 문법이 있는데 이 문법 쓰는 이유부터 알고 지나가봅시다. 함수는 길고 더러운 코드 한 단어로 축약하고 싶을 때 쓰는 문법입니다.간지나는 개발자말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법 인데어려우니 그냥 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 외우면 됩니다.  function 자유롭게작명(){ 축약하고 싶은 긴 코드}1. function 키워드 쓰고 소괄호, 중괄호 붙이면 됩니다.2. 그리고 소괄호 왼쪽에 작명하고3. 긴 코드를 중괄호 안에 담으면 코드 축약 끝입니다.그럼 이제 자유롭게작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행됩니다.진짜임 실험해보셈       Alert 여는 코드 function으로 축약해보기 버튼의 o..

자바스크립트는 HTML 조작을 위해 사용합니다.   자바스크립트는 html 파일 안에 몰래 집어넣는 따까리 언어입니다.html 파일 안에 몰래 숨어서 "html 조작과 변경" 을 담당하는 언어입니다. 그래서 자바스크립트 코드를 잘 짜시면 html을 원하는대로 마구마구 조작이 가능합니다.   왜 조작을 하냐고요?- 탭, 모달 등 웹페이지 UI 만들 수 있음- 유저가 입력한 데이터를 검사할 수도 있음- 유저가 버튼누르면 서버로 데이터 요청할 수도 있음 이런 기능들을 개발할 수 있습니다.   html 조작, 변경하려면  설명하다 안녕하세요 일단 html 파일 안에 이런 html을 작성하고 이걸 맘대로 조작해봅시다.자바스크립트 코드를 짜고 싶으면 태그 안에 적으면 됩니다. 그리고 위처럼 그대로 한 줄 작성하..

뼈대 를 만들고 시작할것!!기능 구현 x디테일은 살리지 못했음. doctype html>html lang="en">  head>    meta charset="utf-8">    meta name="viewport" content="width=device-width, initial-scale=1">    title>Bootstrap demotitle>    link href="css\bootstrap2.css" rel="stylesheet" >    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRp..

CSS 덮어쓰기가 매우 중요합니다.  왜냐면 여러분 업무의 절반 이상은 이미 작성된 CSS 수정이니까요. 내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야하는데 이 방법을 배워보도록 합시다.    1. 같은 클래스명이나 스타일을 하단에 작성 하나의 CSS 파일일 경우, 설명하다 .box { background : red;}.box { background : blue;}같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용합니다.     CSS파일이 여러개 첨부되어있을 때도 유효합니다.를 하단에 사용할 수록 하단에 작성한 것과 똑같은 효과이기 때문에main.css와 main2.css에 같은 class 명이 있더라도main2.css에 있는 클래스 명을 우선적..

실은 버튼복붙보다는 col, row 이런게 매우 간편해서 Bootstrap을 사용합니다.큰 회사에서 뭐 만들 때도 페이지가 많다면Bootstrap을 안써도 직접 col, row 같은걸 만들어서 사용하는 경우가 많습니다.그래서 Bootstrap 쓰든 안쓰든 col, row 같은 class 사용법은 잘 익혀두는게 중요합니다.       숙제1 : 위 사진처럼 보이는 반응형 레이아웃을 만들어보세요(조건) PC사이즈에서는 사진처럼 4열, 태블릿 사이즈에서는 2열, 모바일에서는 1열로 정렬되게 만들어야합니다. 저는 어떻게 했냐면 각각 다른 사이즈(md,lg,sm) 에서 차지할 column 갯수를 따로따로 설정할 수 있습니다.  설명하다  안녕 안녕 안녕 안녕 간단하게 클래스 두개를 이어붙이면 ..

Boostrap은 프론트엔드 Component Library라고 하여웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등 필수 요소들을 모아놓은 일종의 CSS 파일입니다.이걸 우리 HTML 파일에 설치하시면 보다  빠른 복붙식 HTML CSS개발이 가능합니다.    ▲ 버전 선택은 상단 Docs 메뉴 선택 뒤에 우측 위 버튼 누르시면 됩니다.5.X 버전으로 맞추고 합시다.  Bootstrap 3, 4버전도 사용가능한데 각각 세부 디자인이 다릅니다.디자인은 다르지만 다들 사용법은 동일해서 5버전으로 합시다.  IE 호환성은3버전은 IE9+4버전은 IE11+5버전은 IE12+ (Edge 브라우저)에서 이용가능합니다.      간단 설치방법  https://getbootstrap.com/docs/5.1/get..

1. 위와 같은 반응형 랜딩페이지를 만들어오십시오 (필요한 이미지는 첨부파일에 있습니다.)    2. 휴대폰 사진은 모바일로 축소시 사진처럼 글자 밑에 위치해야합니다. 3. 휴대폰 사진 뒤의 파란 배경은 색상 gradient가 적용되었습니다.위는 파란색, 밑은 보라색 색상을 단계적으로 적용했는데 어떻게 해야할까요?당연히 안배운건 구글 찾아봐야합니다.   3. 나머지 다른 영역의 모바일 레이아웃은 알아서 자의적으로 만들어옵시다.4. 아이콘은 Font Awesome 등을 활용합시다.5. 버튼에 마우스를 올렸을 때 색상이 바뀐다든지 하는 간단한 디자인을 입혀봅시다.      5. 이 사진엔 간단한 애니메이션을 넣어봅니다. 마우스를 올릴시 하얀색 테두리가 슬그머니 생겨야합니다.포인트는 애니메이션 동작시 이미지 ..