전체 글
-
[21.02.19] Javascript 둘째 날WEB/study log 2021. 8. 29. 23:53
진도: ~배열과 반복문의 활용까지 3. 웹페이지 제어하기 -> CSS 선택자는 크게, 태그, id, class 선택자 있음 제어할 태그 선택하기 ->document.querySelector(".myclass"); #".myclass" = 이 웹페이지의 모든 태그 중에 클래스 명이 myclass인 태그를 선택하는 선택자 선택한 태그의 style 바꾸기 -> document.querySelector("body").style. style 중에서 background-color:black으로 바꾸고 싶다 -> document.querySelector("body").style.backgroundColor='red'; 4. 조건문 4-1. 비교연산자와 불리언 -비교연산자는 좌항와 우항 값을 비교 후, 불리언을 반환함..
-
[21.02.17] Javascript 첫째 날WEB/study log 2021. 8. 29. 23:52
javascript 자, 드디어 이 2학년 겨울방학의 마지막에, html과 css 강의를 다 듣고 마침내! Javascript를 시작하게 되었다! 진짜 html이나 css까지는 그래도 호딱호딱 재밌게 들었는데, JS를 시작하려니 막막... 하기도 하고(생활코딩 강좌만 30개) 그냥 딱 깔끔하게 개강하고 나서부터 시작할까? 싶기도 했다. 하지만 또 막상 생각해보니 개강하면 개강하는대로 과제와 밀린 강의에 치여 살 게 뻔하고 방학 때도 꾸준히 하기 어려운 자기 공부가 학기 중이라고는 잘 될까 싶어서 얼른 시작했다! 또 막상 강의 수강 계획을 짜보니 (아주 낙관적으로) 하루에 6~8개 정도 들으면 생활코딩 JS 강의도 개강하기 전에 끝낼 수 있겠더라! 동기 부여 차원에서 나의 우물 안 개구리 시절을 생각해보자..
-
[21.02.13] CSS 셋째 날WEB/study log 2021. 8. 29. 23:47
진도: ~수업을 마치며까지 4. 그리드-위에서 만든 웹페이지에 글을 나란히 배치하도록 끌어올리고 싶다면? -> 그리드 -여기서 새로운 html 태그 등장! 아무 의미 없는 정보를 담는 태그는 division의 약자인 div 태그 사용! (block level element) 아무 의미 없는 정보를 담는 태그는 span 태그 사용! (inline element) -display:grid; 다음에 grid-template-columns 를 써주면 하나의 컬럼에 써줄 수 있음 -> 150px라고 하면 고정적으로 저 부피를 갖게 되고, 1fr이라고 하면 현재 화면 전체를 쓰게 자동으로 조정하는 단위 (2fr 1fr이라고 하면 2:1 비율로 현재 화면의 크기에 맞춰 자동으로 조절됨 ->grid의 장점은 박스 안에..
-
[21.02.12] CSS 둘째 날WEB/study log 2021. 8. 29. 23:45
진도: ~박스 모델까지 1. css 속성 스스로 알아내기 -text size 키우고 싶으면 'css text size property' 등으로 검색해서 찾아볼 수 있다! -text center로 옮기고 싶으면 'css text center property' 등으로 검색해서 찾아볼 수 있다. 강의 중 배운 css 속성 정리 text-align:글자 배열 조정 (중간으로 옮기는 등...) font-size:글자 크기 조정 padding:컨텐츠와 테두리 사이에 여백을 주고 싶다면 margin:테두리와 테두리 사이에 여백을 주고 싶다면 border-bottom:박스(4면 테두리)가 아니라 아래(1면 테두리)에만 선 그어주고 싶다면 display:어떤 태그가 가리키는 범위를 완전히 바꾸는 중요한 속성! displ..
-
[21.02.11] CSS 첫째 날WEB/study log 2021. 8. 29. 23:44
진도: ~혁명적 변화까지 html만 쓰는 데에는 한계가 존재한다! -> "CSS"라는 새로운 언어의 등장 계기 -html과 달리, 웹에 대한 정보(a, p, h1 태그와 같은...) X-> 디자인에 관한 내용 O html과 css는 완전히 다른 언어기 때문에 html 파일이 css가 쓰인다는 것을 알 수 있도록 선언해줘야 함 ->웹페이지에 css 삽입하는 2가지 방법 존재한다! style 태그를 사용한다 -> "선택자"=이 웹페이지에 주고 싶은 효과를 누구에게 줄 것이냐 선택! style 속성을 사용한다 = 원하는 특정 태그 내에 직접 넣어준다 1번 style태그를 사용하는 경우엔 head 태그 내에 style이라는 css 태그를 넣어준다 그리고 그 사이에 a{ color:red }를 적어주면, '이 h..
-
[21.01.03] HTML 둘째 날WEB/study log 2021. 8. 29. 23:42
진도: ~수업을 마치며 3까지 웹 호스팅과 웹 서버 시스템 프로그래밍과 컴퓨터 구조 및 시스템에서 열심히 배웠듯이, client는 server와 여러가지를 주고 받으며 상호작용한다. 웹의 경우에는 html을 호출하고 주는 경우다. 그리고 server에 의해 내 컴퓨터에 있는 문서를 전 세계가 볼 수 있도록 할 수 있다. 그런 server의 역할을 누가 하느냐에 따라 web hosting과 web server로 나눌 수 있다. web hosting의 경우는, 웹 호스팅 업체와 같은 회사에 맡기는 것으로 비교적 쉽다는 장점이 있다. 단적으로 github가 그 예시다. 두 번째로 web server는 사용자가 직접 그 역할을 하는 것이다. 이 방법은 까다롭고 어렵고 컴퓨터를 계속 커놔야 한다는 단점이 있으나,..
-
[21.01.02] HTML 첫째 날WEB/study log 2021. 8. 29. 23:41
진도: ~웹사이트 완성까지 HTML의 장점 1.쉽다 2.중요하다 3.Public Domain이다(저작권 X) html 문법은 기본적으로 태그와 태그를 보충해주는 속성으로 이루어진다. 태그는 150개 이상이 있지만, 자주 사용되는 태그는 한정되어 있기 때문에 그것만 알아둬도 충분하다! 태그 설명 strong-글씨를 진하게 표시한다 u-밑줄을 치고 싶다 heading(h1, h2, h3...)-숫자가 작을수록 글씨의 크기와 진하기↑, 줄바꿈 O p-단락(paragraph) 표시 (더 간격을 두고 싶다면 style="margin-top:40px" 등 css 문법으로 가능) br-줄바꿈 img-사진 업로드 (올리고 싶은 사진의 주소를 src="~~" 에 넣는다) li-목록 표시 ol-ordered list 자동..