웹

01. 조건문 저번에 한 다크모드를 조건문을 이용하여 하나로 합친 코드는 다음과 같다. (여기서 조건문 비교연산을 할 때는 '==='으로 3개 쓴다!! 2개 아님!!) onclick 했을 때 if else문으로 현재 상황을 우선 판별한다. 문서에서 #dark 선택자의 값이 night이면, 클릭했을 때 다크 모드를 원한다는 뜻이니까 문서에서 body 선택자의 색상 값들을 바꿔준다. #dark의 값도 day로 이름을 바꿔준다. else에서는 이미 다크모드인 상태에서 day모드를 원한다는 뜻이므로, 다시 원 상태의 값들로 바꿔주도록 쓴다. 02. this c++에서도 클래스를 사용할 때 'this'를 자주 쓰곤 했었다. 자기 자신을 간단하게 가리킬 수 있는 포인터인데, 자바스크립트에서도 이를 사용할 수 있다...

01. script 태그, 콘솔 html상에서 JavaScript를 쓰고 싶을 때는 태그를 이용하면 사용할 수 있다. 해당 태그 안에 쓰는 언어는 자동으로 자바스크립트 언어로 인식된다. 사이트 안에서 쓰고 싶을 때는 페이지 우클릭 -> 검사로 들어가서 Elements탭에서 esc를 누르면 아래에 console창이 뜬다. 해당 창에 자바스크립트 코드를 작성하여 바로 실행시킬 수 있다. 02. 이벤트로 텍스트, 버튼 추가 위와 같은 코드에서 on~ 속성들을 '이벤트'라 한다. 여기서는 버튼을 누르거나 텍스트를 입력할 시 동작을 하게 하였다. alert는 경고창이 띄워지는 것을 말한다. 아래 코드로 이제 체크리스트에 쓰일 텍스트 입력 칸과 버튼을 만들 수 있다. (아직 동작은 하지 않음) .button{ di..

01. 반응형: 미디어 쿼리 @media (max-width:800px) { #grid{ display: block; } #list{ /*목록*/ border-right: none; } } 위 코드처럼, @midia ()하고 크기를 지정해 주면, 해당 크기부터는 어떠한 형식이 되도록 지정해 줄 수 있다. max로 할 경우엔 최대 지정 px 만큼까지 해당 내용이 실행된다는 뜻이고, min으로 할 경우엔 최소 지정 px을 넘어가는 순간부터 해당 내용이 실행된다고 보면 된다. 이 코드에서는 800px까지는 웹 페이지가 작으니 목록을 위로 올리게끔 그리드 display를 block타입으로 하여 한 페이지 전체를 차지하도록 하였으며, 그에 따른 목록 선도 none으로 안 보이게 하였다. 800px 이상 부터는 화..

1. 제목 속성 추가: align 제목은 h1태그로 밖에 안 썼으니, 이를 CSS로 style태그 안에 h1 선택자를 열어서 사이즈, 정렬을 할 수 있다. font-size로 크기를 더 크게 하고, text-align을 통해 center에 정렬시킬 수 있다. h1{ font-size: 60px; text-align: center; } 이러한 속성 정보들은 필요할 때마다 구글에 property로 서치하여 찾을 수 있기 때문에, 따로 암기할 필요는 없다. (심지어 조금만 쳐도 알아서 자동완성 추천기능이 있기 때문에 더더욱... 그래도 어떤 기능을 사용할 수 있는지 정도는 알아 두자!!) 2. ID, Class, 태그 선택자와 우선 순위 ★우선 순위 -같은 선택자일 때는 하위 라인에 있는 것이 더 우선 된다...

1. 댓글 기능 추가: DisQus DisQus 사이트에 로그인한 다음 get start로 새로운 사이트를 설치하는 버튼을 누른다. 무료버전을 선택한 후 이름을 설정하고 넘어가면, 무언가 코드가 나온다. 그걸 그대로 복사해서 댓글을 넣을 페이지 html 코드의 태그 바로 위에 넣는다. 그리고 여기서 중요!! 이렇게 해도 기존 파일로 웹사이트를 열면 처리할 수 없다고 뜬다. 직접 로컬호스트(자기 자신 컴퓨터)로 해야 된다. 이는 어제 공부 기록에서 웹 서버 직접 열기와 관련이 있다. 확장프로그램을 설치한 후 Go Live를 통해 페이지를 열면... 성공적으로 댓글 기능이 생긴 것을 볼 수 있다!! ★이때 자동으로 열린 웹 사이트의 주소를 보면, 다음과 같다. http://127.0.0.1:5500/inde..

1. 웹 브라우저 & 웹 서버 Web Browser (client) Web Server (server) request -> pages로 들어가서 Branch의 None을 main으로 바꾼 뒤 오른쪽 save를 누른다. 그럼 잠시 뒤 페이지가 생성된다. (작업상황은 Actions 탭에서 볼 수 있음) 3) 작업이 완료되고 나면 상단에 사이트 주소가 나타난다. 클릭해 보면 기존에 만들었던 웹이, 인터넷이 연결된 컴퓨터라면 어디서든지 접속할 수 있는 웹 사이트로 바뀌어서 뜬다!! 주소는 깃허브 이름.github.io/레파지토리 이름/ 으로 되는 것 같다. 2-2. 파일을 수정할 경우 1) 만약 코드를 수정하여서 다시 웹 사이트에 반영하고 싶은 경우, 해당 레파토리지에 들어가서 +버튼으로 Upload files..

★vs code 폴더 선택(이미지 등 추가 시 이 폴더에 다 있어야 됨) -> .html 파일 생성 -> html로 웹의 틀을 짜고 css로 꾸밀 수 있음 + js로 동작 추가 본격적으로 내가 하고 싶은 웹 만들기를 시작하기 위해서, 여러 강의를 찾아보다가 '생활 코딩'을 알게 되었다. -> https://opentutorials.org/course/1 어제 자기 전에 영상으로 계속 봤는데 되게 자세하게 알려주셔서 지금 vs code키고 따라 해 보는 중~.~ 아직 기초 단계지만 학교에서 맨날 c++ 베릴로그 어셈블리만 하다가 눈에 바로 보이고 꾸밀 수 있는 거 하니까 짱 신기하고 은근 재밌다 (물론 얘도 과제가 되면 싫어질 거 같긴 함) 암튼 이번 2-2 겨울 방학 때는 강의들 보면서 기초 문법 익히고..