깡뇽

보호되어 있는 글입니다.

보호되어 있는 글입니다.

Visual Studio Code에서 HTML 파일 만들기 STEP1) Visual Studio Code를 다운로드한다. (나는 예전에 다운로드하았었기 때문에 다시 다운로드하지 않았다.) STEP2) 상단의 메뉴바에 "File"을 선택하고, "Open Folder..."를 클릭한다. STEP3) 원하는 폴더를 고른 후에 "폴더 선택"을 클릭한다. STEP4) 왼쪽에 EXPLORER 아래에 선택했던 폴더가 있을 것이다. 마우스를 올려보면 아이콘이 뜨고, "New Folder"를 클릭한 후 폴더를 하나 더 만들어 준다. STEP5) 그대로 STEP4처럼 마우스를 올리고 아이콘이 뜨면 "New File"을 클릭한 후에 파일명을 "이름.html"이라고 짓는다. html이라고 치면 나오는 "html:5"를 엔터 ..

- 의미론적 HTML(Semantic HTML): 기존 HTML구조(Non-semantic HTML)보다 접근성이 좋고, 검색 엔지 최적화를 향상하며, 쉽게 이해할 수 있기에 사용하는 방식임. ⤷ Semantic HTML에 대한 이해를 도울 수 있는 글 www.internetingishard.com/html-and-css/semantic-html/ Semantic HTML | HTML & CSS Is Hard A friendly tutorial for developing meaningful web pages www.internetingishard.com ① 헤더와 내비게이션: 는 주로 내비게이션 링크 또는 같은 제목들을 포함하고, 는 메뉴와 같은 내비게이션 링크들을 위해 사용됨. ex) 가 를 포함하고 ..

전체 HTML ☆ 표시: 브라우저에서 HTML을 정의하는 것이므로 HTML파일에서 코드 첫 줄에 필수로 적어야 함. - 요소: HTML 코드 모든 것을 포함. - 태그: 과 같은 웹 페이지의 메타 데이터를 포함. HTML의 body 내부 ① 다른 웹 페이지 연결하기: 태그 안에 href속성을 사용하여 다른 웹 페이지의 링크를 걸어줄 수 있음. ex) 태그 안에서 href속성에 제공된 경로는 보통 URL이다. This Is A Link To Webpage ② 새 창에서 다른 웹 페이지 열기: 태그 안에 href속성이 있는 상태에서 target속성을 추가해주면 새 창에서 다른 웹 페이지를 열 수 있음. ex) 태그 안에 href속성과 target속성이 있으며, target속성은 "_blank"여야 한다. T..

① 이미지: 태그로 웹 페이지에 이미지를 추가할 수 있음. 태그 안에는 src속성을 설정해주어야 하며, 이것은 이미지의 원천, 위치 또는 URL 이어야 한다. ex) 태그는 자동으로 닫히는 태그이므로 닫는 태그를 해주지 않는다. ② 이미지 대체 글: 태그 안에 alt속성을 사용하여 텍스트를 대체하는 이미지에 대한 설명을 작성할 수 있음. 만약 의미 있는 정보가 아닐 경우 alt속성을 비워둘 수 있다. ex) 태그 안에 alt속성을 사용할 수 있다. ③ 비디오: 태그로 웹 페이지에 비디오를 추가할 수 있음. 태그 안에는 src속성을 설정해주어야 하며, 이것은 비디오의 링크여야 한다. ex) 태그는 태그와 달리 열기와 닫기 태그가 모두 필요하다. width와 height속성으로 크기를 지정해줄 수 있으며, ..

HTML(HyperText Markup Language): 웹 페이지의 골격 ① HTML요소는 상하구조를 가질 수 있음. ex) 요소 안에 요소를 넣었으므로 는 부모 요소이고, 는 자식 요소라고 할 수 있다. 하위요소는 상위 요소보다 두 칸 들여 쓰기를 하는 것이 필수-! hello-! ② 제목(Headings): HTML에서는 6가지의 다른 제목들 또는 제목 요소가 있음. 이고, 이 중에서 이 주요한 제목으로 사용되며, 숫자가 커질수록 글자 크기는 작아진다. ③ 나눔(Divisions): HTML에서는 요소를 사용하여 부분을 나눌 수 있음. ex) 요소를 사용하여 요소를 그룹화하고 부분을 나누었다. Hello-! Nice to meet you ④ 속성(Attributes): 요소의 여는 태그에 더해지고..