생활코딩

tag 시작부분 닫는부분 html의 기본구조

강의를 들으며 만든 웹페이지를 깃허브를 통해 웹호스팅했다 아직 볼품없지만 주소를 남겨본다..ㅎㅎ https://365support.github.io/web1/ 깃허브 웹 호스팅 할때 주의할점 *main 파일이름을 index.html로 업로드해야한다 (만든 사이트가

📕웹페이지 안에 css를 삽입하는 방법 📕 css의 문법selector 선택자declaration 효과property value 속성의 값📚css의 속성을 스스로 알아내는법 ✔ 텍스트를 바꾸고 싶으면 텍스트가 웹페이지에서 어떤 태그를 가지고 있는지 찾고✔ 검색ex

class 선택자색을 바꾸고 싶을때 style태그를 써서 변경 할 수 있지만 이렇게 되면 중복이 발생하게 된다중복을 없애기 위해 텍스트를 같은 그룹으로 묶고 그 그룹에 대해 정보를 지정해 주는 방법 \-> class라고 하는 html의 속성을 주는것 ex) 속성의 값으

처음 알게된 atom 팁코드에 html을 치고 엔터를 누르면 기본구조가 바로 완성된다!이 태그들을 확인하기 위해서 태그에 테두리를 그려 부피감을 확인하려할때선 두께 색 선 종류를 지정한다 border-width 테두리 두께border-color 테두리 색border-s

h1 태그의 테두리 사용boredr을 사용해 테두리를 추가해보면 web 위의 공간이 많이 남는것을 알수있다무엇을 수정해야하는지 알기 위해 검사를 통해 margin을 수정해야 한다는것을 찾을 수 있다margin을 0으로 수정해주고 나면margin값이 없어지고 위의 여백도

9강에서는 박스모델로 제목과 목차를 구분하는 구분선을 배웠고 오늘은 본문의 내용을 목차 나란히 위치하게 옆으로 올리는 작업을 배운다! 이 작업을 위해서는 grid가 필요한데 grid는 2차원(행과 열)의 레이아웃 시스템을 제공한다 1 div, span 화면에 ht

10강에서는 글자를 나란히 놓기위해 그리드를 배웠고오늘 그리드를 지금 작업중인 파일에 적용해보기로 한다나란히 놓고자 하는 태그는 ol태그와 h2, p 태그인데먼저 h2와p를 div로 묶어준뒤ol과 div를 부모 div태그로 감싸준다바깥 div태그를 그리드로 지정해주기

반응형 웹, 반응형 디자인화면의 크기에 따라 웹페이지가 반응해서 최적화된 모양으로 바뀌게 하는 것웹은 수많은 형태의 화면에서 동작해야한다 여러가지 화면에 대응되는 웹페이지를 만들기 위해 몸부림을 쳤고 웹을 개발하는데있어 걸림돌, 웹의 단점이었다다양한 환경에서 적용할 수

12강에서는 미디어쿼리를 배웠고오늘은 예제에 도입해 실습하는 시간이다!화면의 크기가 작아지면 이전에 만들어놓은 웹페이지는 큰화면 기준으로 만들었기때문에 답답해 보인다내 페이지는 동영상이 들어갔기때문에 동영상 크기보다 작아지면글씨도 페이지에 맞게 작게 이동하지 않았다본문

배웠던 css코드를 다른 페이지에도 같이 적용해보자! 1 중복제거의 필요성 style태그를 복사해서 다른 페이지에 붙여 넣었더니 화면이 붙여넣은 페이지에서는 제대로 작동하지 않는다 왜그런지 확인해보자! split right라는 기능으로 옆에 놓고 비교해봤더니 di

1 javascript의 등장html의 등장으로 정보를 표현하고 주고받을수 있게 되었지만html은 정적이다한번 화면에 출력되면 언제나 그 모습 그대로이기 때문이다반면에 게임은 사용자의 조작에 반응해서 프로그램이 움직이게 된다웹페이지도 게임처럼 동적으로 사용자와 상호작용

javascript 는 html위에서 동작하는 언어이다html이라는 컴퓨터 언어에 완전히 다른문법을 가지고있는 javascript를 어떻게 적용할것인가에 대한 것을 배워보자!html의 코드로 javascript가 시작된다고 알려주는 코드script 태그 안쪽에 js가

1 콘솔(console) js실행하는 또다른 방법 지금까지 js를 실행하기 위해 웹페이지 즉 파일을 만들었다 하지만 경우에 따라 파일이 아니더라도 코드를 실행해야하는 가벼운 상황이 있다 그럴때 사용하면 좋은것이 바로 콘솔이다! 2 console의 위치 검사

컴퓨터 프로그래밍에서는 데이터를 처리하는것이 아주 중요한 일이다그렇기 때문에 컴퓨터에서는 데이터를 잘 처리하기 위해서 종류별로 데이터를 잘 분류하기위해 많은 노력을 하고있다javascript라는 컴퓨터 언어에 어떤 형태의 데이터들이 있는가 살펴보자!데이터 타입에는 6개

변수는 '바뀔 수 있는 어떤 값'이다x는 변수영어로는 variable라고 한다=는 대입연산자이다오른쪽 항의 값을 왼쪽의 변수에 대입한다대입연산자는 좌항과 우항을 결합해서 우항의 값을 만들어낸다는 특징이 있다1은 언제나 1이기 때문에 1에다 2를 대입하면당연히 오류가 난

웹브라우저를 제어하는방법

지금까지는 js가 무엇인가 무엇을할수있는가를 살펴봤고이제는 js라는 프로그래밍 언어가 무엇인가를 알아볼 차례다프로그래밍언어의 보편적 의미javascript는 컴퓨터 언어 + 컴퓨터 프로그래밍 언어html은 컴퓨터 언어 + 컴퓨터 프로그래밍 언어html js 는 둘다 컴

컴퓨터 프로그래밍 언어라면 어떤 언어든 가리지않고 가지고 있는 핵심적 기능 조건문, 반복문, 함수에 대해 배워보자! 1 조건문 예고 조건문이라는것은 하나의 프로그램이 하나의 흐름으로 가는것이 아니라 조건에 따라서 다른 순서의 기능들이 실행되도록 하는것이다 예제를

불리언과 비교연산자를 어디에 쓰는지 알아보자!

강의를 통해 비교연산자, 불리언, 조건문이라는 도구를 살펴보았고 이 관념적인 도구들이 얼마나 현실에서 구체적인 도움을 주는지 확인해보자 지난 강의에 만들었던 night day 버튼을 하나로 합쳐 보자!

코딩을 하다보면 비효율적인것이 생기기 마련인데동작하는 건 그대로 두고 코드자체를 효율적으로 만들어 코드의 가독성을 높이고 유지보수를 편리하게 만들고 중복된 코드를 낮추는 방향으로 코드를 개선하는 작업이다예를들어 위에만 있던 버튼을 밑에도 넣고싶어 붙여넣기를 하면제대로

js의 새로운 문법을 배우기 위해 예제에서 불만족을 찾아보자링크의 색이 밝은 화면에서는 괜찮지만 어두운 화면에서 보면 잘안보이는걸 발견할수있다이걸 웹페이지에 있는 모든 링크를 style속성값을 밝혀주는 코딩을 하게 된다면 링크가 있는만큼 반복적인 작업을 해야한다코드의

앞의 강의만으로는 배열이 왜 필요한지 모를 수 있다이번 강의로 배열과 콤비비인 반복문과 배열의 용도를 알아보자!리스트를 만들어 순서대로 실행될 기능을 만들어 넣었다1234가 순서대로 실행이 되었고필요에 따라 2,3번째 실행되어야 되는 명령을 여러번 반복해서 실행해야 될

배열과 반복문을 결합하면 어떤 강력한 효과를 갖는지 살펴보자먼저 자바스크립트를 사용하지 않고 태그를 짜보았다만약 목록이 1억개이고 li태그가 아닌 다른 복잡한 태그이고 이것에 대해 빈번한 수정이 있다면 글목록을 작성하는 것이 어렵다js에서 연관된 데이터를 담는 방법이

배운 배열과 반복문을 야간모드일때는 링크들이 밝게 나타나고주간일때는 어둡게 나타나도록 투입해보자검사를 통해 웹페이지에 있는 모든 a태그를 가져오려고 할때querySelector 라고 하는 함수는 a태그에 해당되는 태그중 첫번째에 해당되는것만 가져온다우리가 할려는것과 맞

함수(function)라는 도구의 사용법을 살펴보자 함수하면 떠오르는 이미지는 수납상자다 코드가 많아지면 코드를 잘 정리정돈하기 위한 도구가 필요하다 첫번째로 아주 간단하며 강력한 도구가 함수이고 더 큰 도구는 객체라는 것도 있다 input 이라는 코드가 하나 있

동작하는 내용은 똑같지만 코드를 효율적으로 하는것을 리팩토링이라 하고그 중요한 수단 중 하나가 함수이다버튼만들어둔 코드를 효율적으로 바꿔보자input버튼이 여러개가 중복해서 등장한다면 나쁜일이 생길 수 있다js코드를 카피해서 head태그 안쪽에 script태그를 만든

새로운 도구 객체(object)를 도입해보자 중요하지만 어렵다 함수라는 것의 기반 위에서 객체가 존재한다 프로그래밍을 하다보면 코드가 많아지고 그 코드를 정리하기 위해 함수를 쓰고 함수와 함수가 연관되어 있는 변수들이 많아지게 되면 복잡도의 한계에 도착하게되고 이

객체를 생성하는 법을 알아봤고 이제생성된 객체에 어떤 데이터가 있는지 모조리 가져와야 하는 경우배열에서는 반복문으로 데이터를 가져온다객체에서는 어떻게 해야하는지 검색해보자object 객체 iterate 순회한다,반복적으로 가져온다for in 이라는 걸 쓰면 된다고 한다

객체에는 데이터를 담을 수있다문자를 담았지만 배열,숫자 다 담을 수 있다이제는 객체에 함수를 담아보자! coworkers라는 객체에 showAll이라는 메소드를 추가하고 싶다1번처럼 하게되면 함수가 되게된다원래 함수 정의하던 방식인 2번과 다르지만똑같은 뜻이라고 보면

이번시간에는 열어놓았던 문을 닫는 시간이다 코드를 마저 작성해보자이런식으로 코딩을 하고 싶다면1 함수의 이름으로 중복되지 않도록 했던 코드(BodysetColor, BodySetBackgroundColor)들을 바꿔서 body라고 하는 변수에 객체를 담을 것이다2 그