Web Programming (5) 썸네일형 리스트형 web 5 : script의 위치 + use strict 1. 안에 넣기 웹 브라우저는 html 파일을 한 줄씩 읽으면서 dom 요소로 변환하는데 head 안에 script 태그를 포함하면 필요한 js파일을 다운 받고 실행한 다음 parsing 한다. js파일 사이즈가 클 경우 사용자가 웹사이트를 볼때 많은 시간이 걸리게 된다. 2. 안에 넣기 브라우저가 html을 따라 읽으며 parsing하고 fetching, executing 한다. (맨 마지막에 js파일을 읽는다) 웹사이트가 js에 의존적이라면 서버에서 js를 받아오고 실행하는데 시간이 걸린다. 3. 안에 넣고 asyn 옵션을 사용한다. js파일을 다운받을 것을 명령해놓고 마저 parsing 한다. 먼저 다운로드된 js파일을 실행한다. 4. 안에 넣고 defer 옵션을 사용한다. js파일을 다운받을 것을.. web 4 : html과 css파일 분리하기 디자인에 변경사항이 있을 때마다 html 내의 모든 css(style태그)를 일일이 수정해야하는 번거로움을 해결하기 위해 css부분을 파일로 별도로 빼서 외부에서 관리하는 아이디어를 생각해냈다. css파일을 만들고(예:style.css) html문서의 head 안에 css의 link 태그를 추가한다. type은 "text/css"로 지정한다. link + tap 하고 type 추가하고 css파일의 url을 추가하기 예: html 문서 내에 있던 style 태그는 삭제한다 웹 브라우저는 link라는 태그를 만나면 태그에 적혀있는 속성들을 보고 이 사용자가 외부에 있는 css파일을 읽어오라고 하는거구나, 그리고 외부의 css파일은 이 주소에 있구나 라는것을 이해하고 이 주소에 해당되는 파일을 다운받아서 이 .. web 3 : CSS 1 CSS (Cascading Style Sheet) CSS는 디자인에 집중하는 언어로, HTML이 정보를 전달하는 것에 집중할 수 있게하기 위해서 시각적인 것과 관련된 것들이 퇴출되면서 CSS라는 언어가 만들어졌다. CSS는 HTML과는 서로 다른 체계를 가진, 완전히 다른 독립된 언어이지만 HTML을 꾸미는 것을 목적으로 고안되었기 때문에 두 언어는 웹페이지 내에서 공존하게 되며, 공존하기 위해 사용하는 태그가 (2)박스모델 CSS를 이용해서 각각의 HTML 태그들의 위치, 부피, 여백을 지정하는 것으로 컨텐츠 밖에 border가 있으며, border와 컨텐츠 사이의 여백에 padding이 있다. 또 문서 내의 다른 태그와 이 태그 사이의 간격을 margin 이라고 한다. 컨텐츠의 크기 자체도 wid.. web 2 : 의미론적인 웹(Semantic Web) Semantic Web : 의미론적인 웹 웹에서 html이 차지하는 역할은 정보이며, html은 정보로서의 역할을 더 잘 수행하기 위해 끊임없이 변화와 발전을 거듭해왔다(HTML 1.0~HTML5) 그 중 하나가 디자인 역할을 하는 속성이 css로 분리하는 것, 그리고 html 문서의 정보로서의 가치를 더 높여주는 태그들이 있는데 그게 바로 시맨틱 웹 (정보의 의미를 더 잘 드러나게 한다)이다. (1) 탐색의 nav html 문서의 list에는 웹사이트를 탐색하는 네비게이션 같은 부분도 있고, 문서의 컨텐츠를 표시하는 부분도 있다. *탐색하는 네비게이션이란 눌렀을 때 연결되어있는 페이지로 이동하는 것을 말함* 웹사이트를 탐색하는 정보를 좀 더 분명하게 표시해서 기계들도 이해할수 있게 하는 태그가 html.. web 1 : html 태그와 리스트 태그 a = 링크를 나타내는 태그 생활코딩 어떤 문서에 연결되어 있는가? -> 속성 href = 속성명 " " = 속성 값 클릭한 링크가 현재 창이 아닌 새 창에서 열리게 하기 target = 속성명 " " =속성 값 _balnk: 새로운 창에서 링크를 연다 _self : 현재 창에서 링크를 연다 속성 구분자 = 띄어쓰기(공백) 리스트 항목화, 목록화를 시킬때는 어떤 태그를? 각각의 그룹 별로 목록화 시키기(목록 구분하기) ->각각의 그룹을 태그나 태그로 감싸준다 ul = unordered list(순서가 없는 리스트) ol = ordered list(순서가 있는 리스트) html css javascript 최진혁 최유빈 한이람 +) li 태그는 어떤 텍스트를 감싸주는것 뿐만 아니라 태그들을 또 다른 태.. 이전 1 다음