반응형

웹 프로그래밍 38

javascript 숲을 보자

웹을 구성하는 대표 언어 세가지 정보의 구조 꾸며주는 스타일 로직 즉 동적인 페이지를 만들기 위한 javascript javascript은 표준화가 중요한 언어 이렇게 여러 다른 스크립트로 만들면 몇 브라우저에서만 호환이 되는 문제 즉 크로스 브라우징 이슈가 생길 수 있다. 그래서 생겨난 표준 ECMAScript ECMAScript 는 여러 버전이 있고 이를 ES1 ES2.. 등으로 줄여서 말한다. ES6은 당연히 그 여섯번째 버전. 이후에도 많이 나왔지만 얘만큼 그 전 버전과 혁신적으로 달라진 버전이 없어서 상징적으로 이 버전을 지칭한다. (c++ 11과 같은 이치) 아무튼 정리하면 - 웹을 이루는 가장 중요한 세 가지 요소 : 구조 스타일 논리 - 정적 / 동적인 페이지 - 자바 스크립트 역할 - 크..

생활코딩 a 태그와 원시웹 / 웹문법 파트 끝

Hypertext Markup Language (HTML) 를 볼 차례 a는 anchor의 약자다 href는 hypertext reference의 약자 htm에서 link를 걸기 위한 태그임 마찬가지로 열고 닫는데 링크걸때본문 속성 target은 페이지 열리는 방식으로 _blank는 새 창으로 열리게 한다 속성 title은 링크가 어떤 내용을 담고 있는지 tooltip으로 보여주는 기능이다. WEB HTML CSS JavaScript 이렇게 WEB HTML CSS JavaScript 링크를 걸어줄 수 있다 ++https://opentutorials.org/course/3084/18889 원시웹 - 생활코딩 --- 우리 수업은 두 개의 산으로 이루어져 있습니다. 하나의 산은 웹페이지를 만드는 것입니다. 여..

생활코딩 html, head, body, title, meta 태그 배움

2021.07.14 - [웹 프로그래밍] - html 기본 틀 만드는 단축키 shit + '1' + tab html 기본 틀 만드는 단축키 shit + '1' + tab 코딩할 수 있는 화면에 shift 키를 누른 상태에서 숫자1을 눌러 ! 를 입력한 후 키보드의 Tab버튼을 누르면 html의 기본 구조 세팅이 완성된다. shit + '1' + tab. so-es-immer.tistory.com 단축키를 실행하면 나오는 완전 기본 틀 이와 같은데 여기서 있는 태그들의 의미를 알아본다 https://opentutorials.org/course/3084/18409 문서의 구조와 슈퍼스타들 - 생활코딩 --- 우리는 HTML의 문법을 마스터했다고 말씀드렸습니다. 말하자면 문장을 만드는 방법을 마스터했다고 할 ..

생활코딩 html 목차 태그 ul ol li (부모 자식 태그)

부모 자식처럼 함께 쓰이는 태그들이 있다 대표적으로 ul-li / ol-li가 있다 https://opentutorials.org/course/3084/18408 부모 자식과 목록 - 생활코딩 --- 이번 시간에는 태그 간의 관계를 나타내는 표현인 부모(parent),자식(child)에 대해서 알아보겠습니다. 아래 코드를 보시죠. (저런 이름의 태그는 없습니다) parent 태그에 대해서 child 태그를 자식 opentutorials.org 1. HTML 2. CSS 3. JavaScript 처음 코드 1. HTML 2. CSS 3. JavaScript egoing k8805 sorialgi 이렇게 되면 위 예시처럼 여러 list가 이어질 때 영역이 구분 안간다 따라서 비슷한 맥락의 li끼리 묶는 태그..

생활코딩 코딩과 html 공부 시작

저번에 css 듣고 강의가 너무 재밌고 좋았어서 html도 들을 예정 https://opentutorials.org/course/3084/18445 코딩과 HTML - 생활코딩 --- 기획을 끝냈으니까 이제 구현을 할 차례입니다. 구현하기에 앞서서 타임머신을 타고 미래로 날아가서 우리가 어떤 일을 하게 될지 보고 옵시다. 화면이 두 개로 쪼개져 있습니다. 집중해서 opentutorials.org html 강의는 20개 정도로 더 길지만 글도 있어서 쉽게 공부할 수 있을 것 같다 이 강의에서 인상 깊었던건 "사람이 하는 일을 코드, 소스라고 하고 기계가 하는 일을 웹페이지, 프로그램이라고 부른다. 우리는 원인인 코드를 통해서 결과를 만드는 것을 이해하는 것이 코딩의 핵심임을 알자. " "우리는 하루에 10..

생활코딩 css 마무리

https://opentutorials.org/course/3086/18333 수업을 마치며 - 생활코딩 Long take 버전 코딩장면만을 담은 버전의 영상입니다. 복습할 때 도움이 되면 좋겠습니다. 좋아하는 음악 틀어놓고 배속으로 보시면 덜 지루합니다. 지식지도 관련된 지식의 지도입니다. 지도 opentutorials.org 가장 중요한건 선택자와 속성이다 속성 더 많은 걸 표현할 수 있고 선택자 더 정확하게 표현할 수 있다 지금은 공부를 그만두기 좋은 타이밍이지만 공부한 걸 써먹기 좋은 타이밍이다. 최대한 써먹자

생활코딩 css 코드의 재사용 - .css 파일을 만들자

WEB HTML CSS JavaScript HTML Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.[2] Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the ..

생활코딩 css 반응형 디자인과 미디어 쿼리 소개

WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speec..

생활코딩 css 그리드2 그리드 써먹기

https://opentutorials.org/course/3086/18322 그리드 - 생활코딩 그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid opentutorials.org 이제 2.html로 다시 돌아가자 vscode에서 여러 줄을 한꺼번에 들여쓰기하려면 드래그해서 영역 표시한다음 tab키를 누르면 된다. 쉽다! 내어쓰기를 하고 싶으면 shift + tab이다. WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the pre..

반응형