생활코딩 HTML + CSS + 자바스크립트27 01 수업 소개 ~ 02 수업의 목적 _ 2 1. 야간 모드와 주간 모드를 버튼을 통해 바꾸는 방법을 알아보기. 1) 이라는 태그가 필요 하다. 2) button 이라는 속성이 필요 하다. 3) button 이라는 속성의 값을 의미하는 value 속성이 필요 하다. 4) onclick 이라는 속성이 필요 하다. >> onclick 이라는 속성은 다음과 같다. onclick 이라는 속성의 값으로는 자바스크립트가 와야 한다. 즉, onclick 이라는 속성의 값으로 자바스크립트 코드를 넣으면, 사용자가 onclick 의 속성이 위치하고 있는 버튼을 클릭했을 때, 자바스크립트 코드를 실행 하게 된다. 5) 자바스크립트 코드는 다음과 같다. 야간 모드시. document.querySelector('태그명').style.backgroundColor = 'b.. 2023. 7. 1. 01 수업 소개 ~ 02 수업의 목적 1. 웹이 처음 세상에 등장했을 때는, 단 하나의 기술만이 존재 했다. 바로 HTML 이다. 하지만, HTML은 정적인 태그 언어 이다. 이게 무슨 의미일까 ? 한번 화면에 출력되면 언제나 그 모습 그대로 라는 의미 이다. 2. 우리가 알고 있는 것중에, 동적인것들은 무엇이 있을까 ? 게임을 예로 들면, 사용자의 조작에 반응해서 프로그램이 움직인다. 3. 사람들은 웹 페이지도 게임 처럼 동적으로 사용자와 상호작용 하기를 원했는데, 그래서 태어난 기술이 자바스크립트 이다. 4. 자바스크립트 (JavaScript) 웹은 HTML을 이용해서 웹 페이지를 우선 만들고, 그렇게 만들어진 웹 페이지를 자바스크립트를 이용해서, 사용자와 상호작용 할 수 있게 기능을 추가 한다. 5. 즉, 자바스크립트 (JavaScri.. 2023. 7. 1. 08 박스 모델 1. 위와 같이 작성했을 때, 웹 브라우저 에서, 아래와 같이 보여지게 된다. 보면, CSS는 태그에 둘러쌓여 있는데, 태그는 화면 전체를 사용 하고 있다. 왜그럴까 ? 줄바꿈이 되어서 그렇다. 그런데, 태그에 둘러쌓여 있는 CSS는 줄바꿈이 되지 않고, 다른 컨텐츠와 함께 같은 라인에 위치 하고 있다. 같은 태그 언어인데 왜 이런 차이가 발생할까 ? 이유는, 태그의 사용 목적에 따른 이유 이다. 사용 목적에 따라서, 각각의 태그들은 기능이 다르게 태어났다. 태그는 제목 태그중 하나 이다. 제목 태그는 화면 전체를 사용하는 것이 더 편리하기 때문에 줄바꿈이 되는 것이다. 근데 태그는 링크 태그 이다. 링크 태그가 화면 전체를 사용한다면 어떨까 ? 불편하다. 링크 앞뒤로 컨텐츠가 줄바꿈이 되면 어색 하지 .. 2023. 7. 1. 07 CSS 선택자의 기본 1. CSS에서 중요한 2가지 개념이 있다. 1) 효과 2) 선택자 이다. 이전 게시글에서, 효과에 대해서 다뤘고, 이번 게시글에서는, 선택자 이다. 2. 모든 링크는 기본적으로 검은색으로 표현 하고, 사용자가 한번이라도 방문했으면, 각 글들의 링크 색은 회색으로 표현 하고, 현재 페이지의 링크는 빨간색으로 표현 하려고 한다. 지금 까지 배운 바로는 style 이라는 인라인 속성을 통해서 이를 처리 했다. 하지만, style = "color : gray;" 를 두번이나 반복했는데, 중복이 발생한 것이다. 3. 중복을 없애 보기. test 라는 속성값을 가지고 있는 class 속성을 사용해보자. 그리고, 선택자를 통해서 색 효과를 줘보자 ! 엥 ? 색이 변경되지 않은 모습 이다. 왜 그럴까 ? 이유는, 다.. 2023. 7. 1. 14 HTML 태그의 제왕 1. 1) 태그가 웹의 왕국이라면, 이 태그는 웹 왕국의 제왕 이다. 현대의 HTML은 150 가지의 태그로 구성되어 있지만, 이 모든 태그들이 이 태그 아래에 있다. 2) 검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해 했다. 수많은 웹 페이지들을 발견할 수 있었고, 이 태그 덕분에 최고의 검색 결과를 만들 수 있었다. 이 태그 가 없다면 검색 엔진은 존재 하지 않는다. 3) 이 태그 는 도시로 따지면, 도시의 길이며, 인체로 따지면, 인체의 혈관 이다. 이 태그 가 없다면, 전 세계의 모든 웹 페이지는 고립된다. 4) 이 태그 는 우리가 매일 백 번도 넘게 사용 하고 있었던 태그 이다. 5) HTML의 약자인, HyperText Markup Language의 첫 단어인 HyperText가 바로 이.. 2023. 7. 1. 13 문서의 구조와 슈퍼스타들 1. 정보가 많아지면, 정보를 잘 정리 정돈하기 위해서 무엇이 필요할까 ? >> 체계와 구조가 필요 하다. 2. 태그를 이용한 제목 설정 하기. 태그를 사용 하지 않으면, 위와 같이, 웹 페이지의 제목이 파일 이름으로 나오게 된다. 원하는 제목으로 변경 하고 싶으면, 태그를 사용 하자. 제목이 잘 변경된 것을 확인 할 수 있다. 3. 태그의 특징은 다음과 같다. 1) 사용자에게 웹 페이지의 제목을 명시적으로 알려줄 수 있다. 2) 검색 엔진과 같은 기계들이 바로 태그 이다. 책으로 치면, 책 표지의 제목과 같은 정보 로서 사용 된다. 3) 따라서, 웹 페이지를 만들 때, 태그를 사용 하지 않는것은 손해를 보는 것이다. 4. UTF-8 이란 ? 컴퓨터는 모든 정보를 0 아니면 1로 저장 한다. 0과 1을 .. 2023. 7. 1. 12 부모 자식과 목록 1. 다음과 같이 와 라는 두개의 태그가 있다고 가정 위 와 같이, 태그가 서로 포함 관계에 있을 때, 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다. HTML에 있는 여러 태그는 부모 자식 관계가 유동적으로 변동 된다. 그런데, 자식이 있는 곳에 항상 부모가 있고, 부모가 있는 곳에 항상 어떤 특정한 자식 태그가 있는 사이 좋은 태그가 몇가지 있다. 2. 앞에서 배웠듯이, 코드상에는 줄바꿈이 되어있지만, 실제 웹 페이지 에서는 1번라인 2번라인 3번라인은 줄바꿈이 되어 있지 않는 모습을 확인할 수 있다. 목차답게 줄바꿈이 되면 좋으니, 앞에서 배운 태그를 사용해보자. 그럴듯 하게 변경된 모습이다. 그런데, HTML을 만든 사람들이 목차를 표현하고 싶을 때, 사용하려고 만든 태그가 .. 2023. 6. 26. 11 최후의 문법 속성과 <img> 태그 1. HTML 에서 가장 중요한 문법은 태그 이다. 그 다음으로 중요한 문법인 속성 이라는 문법이 있다. 2. 이미지를 웹 페이지에 포함 시키고 싶다 ? 태그를 사용 하면 된다. 3. 이미지를 사용할 때는, 어떤 이미지를 사용할것인지를 문법에 적어 줘야 한다. 어떤 이미지인지를 알려주도록 약속된 속성이 source 이다. 줄여서 src 라고 한다. 가 문법이다. 저 큰따옴표 내부에 사용할 이미지의 소스를 넣으면 된다. 이미지가 있는 링크 자체를 넣어도 되고, 이미지가 저장되어있는 경로를 넣어도 된다. 4. 이미지의 크기도 조절할 수 있다. .. 5. 속성은 attribute 라고 한다. 속성은 어디에 놓고 사용하던 상관이 없다. 아무 위치에나 사용하면 되고, 태그가 태그의 이름만으로는 정보가 부족할 때도.. 2023. 6. 26. 10 HTML이 중요한 이유 1. coding 이라는 단어가 2개 있다. 위의 coding은 글씨 크기를 직접 선택해서 키우고, B 버튼을 눌러서 BOLD 처리를 한다. 아래의 coding은 본문 이라고 적혀있는 메뉴를 클릭해서, 크기와 글씨 굵기를 키우는 처리를 한다. 보면 보기에는 크기도 비슷하고, 겉보기에는 큰 차이가 없어서, 아무렇게나 해서 사용해도 괜찮은 느낌이 든다. 하지만 소스 버튼을 클릭해서 내부적으로 어떤 차이가 있는지를 확인해 보자. 예전에는 저게 무엇인지 잘 몰랐고, 소스코드가 있는지 개념 조차도 몰랐겠지만, 이제는 알고 있다. 편집기를 이용해서 글을 쓴다는 것 자체가 내부적으로 HTML 코드를 생산하는 행위 라는 것을. 그동안 HTML이 뭔지는 몰라도 우리는 편집기를 통해 HTML을 만들어 내고 있었다. 위의 .. 2023. 6. 25. 이전 1 2 3 다음