Front-End (38) 썸네일형 리스트형 [JavaScript] 230323 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 1. 자바스크립트에서는 string을 써줄 때 큰 따옴표, 작은 따옴표 모두 가능하다. "hi" 'hi' 2. app.js에 이렇게 써줬다. console.log("이건 콘솔에 나타날 거야."); 그리고 나서 아래의 app.js를 연결시킨 index.html를 실행하면 이렇게 콘솔에 뜬다. console.log(출력할 내용); 를 하면 괄호 안에 있는 것들이 콘솔창에 출력된다. 3. 변수 만들기 (1) const const는 constan.. [JavaScript] 230322 학습일기 https://nomadcoders.co/javascript-for-beginners 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript for Beginners nomadcoders.co 노마드 코더 로 학습한 내용을 정리하였다. 자바스크립트를 배우는 건 오늘이 처음이다. 열심히 해보쟈. 1. 자바스크립트를 다루는 방법 중 하나는 브라우저의 console을 이용하는 것. 자바스크립트는 브라우저에 이미 설치되어있음. 오른쪽 마우스 > 검사 눌러서 이렇게 콘솔을 눌러주면 된다. 맥 기준 fn + F12 를 눌러도 바로 콘솔창으로 갈 수 있다. 2. console에 alert("HI") 를 쳤더니 이렇게 뭐가 떴다 자바스크립트를 이용해서 내가 브라우저에 영향을 미친 것이.. [HTML/CSS] 220318 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 가상클래스(Pseudo Class),가상 요소(Pseudo Element)에 대해 알아보자. 1. 슈도 코드(pseudocode) 프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위해 사용하는 언어. 다른 프로그램 개발자나 이용자에게 모듈이 하는 일과 작동원리를 설명하는 데에 쓴다. 2. :hover 가상 클래스 가상 클래스(pseudo class)를 이용하면 요소의 상태에 따른 스타일 지정이 가능. :hover : 마우스가 위에 있을 때 적용. Click Here This is a normal div. This is a normal div에 마우스를 올려놓으면 요로케 바뀜.. [HTML/CSS] 220317 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이제 CSS에 대해서 알아보자. 1. CSS: 웹의 전반적인 스타일을 미리 저장해 둔 스타일시트 2. 인라인 스타일(In-line Style) 속성 Heading 1 Heading 2 -거의 대부분의 HTML 태그에 사용할 수 있는 속성 -화면에 보여지는 visual한 상세 설정이 가능함. 웹페이지에는 다음과 같이 표시됨. 더보기 Heading 1 Heading 2 3. CSS -Cascading Style Sheet의 약자 -cascade: 폭포 - 즉 계단식 폭포와 같이 상위요소-> 하위요소로 차례로 스타일 적용 4. 페이지 스타일 Page style Heading 1 Headi.. [HTML/CSS] 230316 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. Form에 대해서 더 알아보자. 1. 자유 텍스트 입력 Textarea Please introduce yourself here - 사용자의 자유로운 텍스트 입력 - rows, cols 속성으로 크기 조절 가능 - 와 사이의 글자가 textarea 안에 표시된다. 웹페이지에는 다음과 같이 표시된다. 더보기 Please introduce yourself here Please introduce yourself here이 textarea 안에 들어있고 이 글자들은 커서를 textarea 안에 갖다 대도 사라지지 않는다. 자기소개를 하려면 저 글자들을 지우고 써주면 된다. 2. 파일 선택 F.. [HTML/CSS]220314 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 이미지를 다뤄보자. 1. 이미지 주소를 복사해 HTML에 가지고 오면 내 서버가 아니라 다른 서버에서 이미지를 가져올 수 있다. 2. 이미지 Image 원본 width만 지정 height만 지정 -태그는 -src 속성에 이미지 파일의 URL을 지정, 종료태그 없음. 여기서 src는 source의 약자 -width = "xx", height="xx"로 크기를 픽셀(pixel) 단위로 지정 가능 -width, height를 지정해주지 않으면 원본 크기로 -width 속성이나 height 속성 둘 중 하나만 지정하게 되면, 나머지는 원본 크기 비율에 따라 자동 조절됨. -웹 페이지에는 다.. [HTML/CSS] 220313 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. 링크에 대해 알아보자. 1. 앵커 Anchor Visit Google -태그는 , -href 속성을 이용할 때 URL 주소를 사용하여 다른 리소스로 연결 -href는 hyper reference의 약어, URL은 Uniform Resource Locator 의 약어. -href는 내부적으로 클릭했을 때 나오는 사이트. -실제로 사용자 눈에 보이는 것은 와 태그 사이에 있는 것. -웹 페이지에는 다음과 같이 표시된다. 더보기 Visit Google Visit Google이라는 파란색 글씨를 눌러보면 이렇게 구글이 나온다. 2. URL에 대해 더 자세히 알아보자. https://www... [HTML/CSS] 230312 학습일기 https://www.udemy.com/course/so_easy_html_css/ 유데미 에서 학습한 내용을 정리하였다. HTML은 정말 처음 배워본다. 화이팅하자. 1. 인터넷은 TCP/IP 프로토콜을 이용. 인터넷에서는 사용 목적에 따라 다양한 프로토콜을 이용. 웹은 HTTP 프로토콜 이용. 이메일은 SMTP 같은 프로토콜을 이용. 파일 송수신 서비스에는 FTP 전용 프로토콜을 이용 2. 우리가 웹브라우저의 주소창에 www.google.com을 입력하면 내부적으로 어떤 프로토콜이 www.google.com을 ip주소와 변환해줌. 그러면 이제 어떤 서버에 접속하게 됨. 이 서버가 웹서버. 이 웹서버가 우리가 접속한 결과로서 우리가 보는 화면을 띄워줌. 웹은 웹 브라우저로 웹 서버에 저복하고 결과로 H.. 이전 1 2 3 4 다음
