KPlay의 코딩 그리고 잡동사니

프로그래밍 언어/HTML → (7)건

  1. 6-1.크롬 개발자도구 둘러보기
    2020.10.05
  2. 6. 개발자도구
    2020.10.05
  3. 5. DOCTYPE
    2020.10.05
  4. 4. HTML의 구조
    2020.10.05
  5. 3. 태그의 중첩과 목록
    2020.10.05
  6. 2. 속성
    2020.10.05
  7. 1. 태그
    2020.10.05

6-1.크롬 개발자도구 둘러보기

​ Elements탭은 웹페이지를 구성하는 태그들을 분석 열람하고 수정할 수 있는 기능이다. ​ ​ ​ Resources탭은 웹페이지를 표현하는데 동원되는 여러가지 리소스들 ​ 가령, html코드라던지, html코드안에 삽입되어있는 이미지라던지 또는 웹페이지의 클라이언트 사이드에서 저장 ​ 되어있는 쿠키라던지 그런 여러가지 정보들이 들어가있다. ​ ​ ​ ​ Network탭은 이 웹페이지를 로드하기 시작했을때부터 웹페이지안에 포함되어있는 ​ 이미지나 리소스들을 네트워크를 통해 가져오는 모습을 보여주는 기능을한다. ​ 각각의 리소스를 가져오는데 얼마나 많은 시간이 걸리고, 어떤 순서로 리소스를 가져오고 ​ 또 그 리소스를 가져올때 어떤 요청이 가고 응답이 오는지 이런정보가 포함되어있다. ​ ​ ​ ​ ​ ..
프로그래밍 언어/HTML 2020. 10. 5. 00:09

6. 개발자도구

아무 사이트나 가서 F12단축키를 누르거나 마우스 우측버튼 -> 검사(N)을 누르면 ​ 개발자 도구라는 것이 나타난다. ​ ​ 개발자도구는 여러가지 기능들이있는데 그중에 좌측상단의 Selecet~어쩌고 버튼을 클릭한 후 ​ 웹브라우저에서 원하는 것을 클릭하면 그것이 어떤 코드로 이루어져 있는지 찾아서 보여준다 ​ ​ ​ 그 옆에는 toggle device toolbar라는 버튼이 있는데 그것을 누르면 ​ 현재 있는 웹사이트가 다른 기기에서는 어떤식으로 보이는지 알 수 있다 ​ 가령, iPad에서는 어떻게 보이는지 알고싶으면 버튼을 누르고 Responsive에서 iPad를 클릭하면 ​ iPad화면에 실제로 어떻게 출력되는지 알 수있다. ​ ​ ​ ​ 마지막으로 Network 부분을 짤막하게 설명하면 ​ 우..
프로그래밍 언어/HTML 2020. 10. 5. 00:08

5. DOCTYPE

html 코드의 가장 윗부분에 들어가는 코드가 있다. ​ 바로 이다. ​ DOCTYPE은 Document type declaration의 약자로 직역하면 ​ "문서 유형 선언"이다. ​ ​ 이것의 의미는 어떤 방식의 html코드로 작성됐는지 선언하는 코드이다. ​ html은 1990년대 팀 버너스리가 만든 Mark up언어라고 했다. ​ ​ 그당시의 html은 19개의 태그밖에 없었던것에 비하여 현재의 html은 ​ 100개가 넘는 태그들이 있고 어떤 코드는 삭제되기도 하고, 어떤태그는 추가되기도 하고, 어떤 태그는 의미가 바뀌기도 하였다. ​ 그렇기 때문에, html코드를 작성했다면 웹브라우저가 어떠한 표준 혹은 약속에 따라서 짜여진 코드인지를 ​ 알아야 하기 때문에, 브라우저에게 어떠한 표준을 따르고..
프로그래밍 언어/HTML 2020. 10. 5. 00:07

4. HTML의 구조

​ ​ HTML코드에서 웹브라우저 '본문'에 표시되는 내용을 쓰는 코드들과 ​ 그 이외에 해당되는 것들을 쓰는것들은 분리되어있다. ​ 기본적으로 이게 html코드의 가장 기본적인 골격 구조이다.
프로그래밍 언어/HTML 2020. 10. 5. 00:07

3. 태그의 중첩과 목록

1. 태그 - 리스트(목록)을 생성해주는 태그 ​ ​ ​ ​ ​ 2. 태그 - 태그들의 그루핑을 하는 태그 이렇게 ui태그 안의 li태그처럼 '태그안의 태그'가 존재 할 수 있다. ​ ​ 그런데 위의 ui태그와 아래의 ui태그안에 존재하는 li태그 안의 내용들은 종류가 다르다. ​ 위에는 수업의 목차이고, 아래에는 수업에 참여한 학생이다. ​ 수업의 목차는 순서가 있지만, 수업에 참여한 학생은 순서가없다 ​ ​ 이렇게 순서가 있는 리스트와 없는 리스트로 구별하려면 ​ ​ ​ ​ ​ ​ 3. 태그 - 순서있는 리스트를 생성하는 태그 그 li태그들을 ui태그대신 ol태그로 감싸주면 된다. ​ ​ ​ ​ ​ 지금까지 나온 태그들의 뜻풀이를 해보면 ​ li는 당연히 list의 약자이며 ​ ol은 ordered ..
프로그래밍 언어/HTML 2020. 10. 5. 00:07

2. 속성

웹 페이지를 보다보면 '링크'라는 것을 자주 볼 수 있다. ​ 특정 글자를 클릭하면 그 글자에 내장된 사이트 url로 이동하는 문법이다. ​ 링크를 거는 태그는 라는 태그인데 이 링크를 걸기 위해서는 ​ '태그' 문법에 '속성'이라는 문법까지 추가해줘야한다. ​ ​ 가령, 아인슈타인이라는 글자에 위키피디아 아인슈타인 사이트의 링크를 걸고싶으면 ​ 아인슈타인 라는 코드를 써야하는데 ​ 여기서 시작태그 a뒤에 오는 href라는것이 '속성' 이라는 문법이다. ​ ​ 더 나아가, 링크를 눌렀을 때 현재 페이지가 아닌 새탭에서 링크 된 사이트를 열게하고싶다면 ​ target이라는 속성을 추가한다 ​ 아인슈타인 ​ 이렇게 href나 target같은 '속성'이라는 문법이 추가되면 웹 페이지에 더욱 많은 기능을 추가 ..
프로그래밍 언어/HTML 2020. 10. 5. 00:06

1. 태그

Html은 웹을 만들 수 있는 가장 기본적인 프로그래밍 언어이다. ​ ​ Windows의 텍스트 에디터인 메모장 파일을 하나 만든 뒤 ​ "안녕 Html"을 입력하고 저장(확장자를 html, 모든파일, utf-8)하면 ​ 그 파일은 웹 브라우저로 열 수 있고 열었을때 메모장에 입력한 글씨가 나타난다. ​ ​ ​ html의 가장 기본적인 문법으로 "태그"가 있다 ​ 이는 ''꺽쇠표시를 이용해서 구분하며 '시작태그'와 '닫히는태그'로 나뉜다 ​ 둘다 꺽쇠 안에 원하는 키워드를 넣어주며 닫히는 태그 앞에는 슬래쉬(/)를 넣어주어 태그의 끝을 표시해준다. ​ ​ 가령, 글자를 굵게 표시하고 싶을 때 사용하는 태그로 이라는 태그가 있다 ​ 이 문자는 강조 표시됩니다 이러한 코드로 작성된다. ​ ​ HTML의 사전..
프로그래밍 언어/HTML 2020. 10. 5. 00:06
◀ 1 ▶

티스토리툴바