깡뇽

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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"를 엔터 ..

- CSS 구조 : CSS선택기의 내부에는 CSS선언을 써야 함. ☆ 속성 : 요소의 꾸미고자 하는 속성 (예: 크기 size, 색상 color 등) ☆ 값 : 속성의 값 (예: 18px, blue 등) 선언에서 속성과 값은 콜론( : )으로 구분되고, 선언의 끝에는 세미콜론( ; )이 사용된다. - 폰트(Font Family) : font-family 속성을 사용함. ex) font-family: Arial; / font-family: "Courier New"; -> 서체에 띄어쓰기가 있다면 따옴표( " )를 사용한다. 로딩 속도를 위해서는 웹 페이지에 2-3개의 서체만 사용하는 것이 좋다. - 폰트 크기(Font Size) : font-size 속성을 사용함. ex) font-size: 18px; -..

CSS(Cascading Style Sheets): 웹 페이지에서 HTML을 꾸미기 위해 사용하는 언어 - 인라인 스타일: CSS를 HTML 코드 안에 직접적으로 적는 방식. 꾸미고자 하는 HTML요소의 여는 태그에 style속성을 적어주는 것. ex) style속성 안에 색, 폰트 크기 등 원하는 스타일을 적고 마지막에 필수로 ;(세미콜론)을 붙여준다. We can make webpage. - 스타일 태그: 태그를 사용하여 HTML 파일 안에서 CSS 코드를 사용할 수 있는 방식. - CSS 파일: HTML과 CSS 코드를 각각의 파일로 분리하는 방식. CSS 파일은 .CSS 확장자 명으로 만들 수 있음. ex) webstyle.css ★방법) CSS 파일을 사용하려면 HTML 파일과 연결해주어야한다...

- 의미론적 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): 요소의 여는 태그에 더해지고..

- 웹 개발이란? (What is Web Development?) 웹 개발을 위해 HTML, CSS, JavaScript, SQL 4가지의 핵심 언어를 배우는 것이 좋음. ▶ HTML(HyperText Markup Language) : 웹 페이지의 골격 ▶ CSS: 웹 페이지의 HTML로 된 내용에 스타일을 제공하는 언어 ex) 색상, 글꼴, 위치, 레이아웃 등 ▶ JavaScript: 웹 페이지에 상호 작용을 더하는 언어 ex) 사용자가 버튼을 클릭 등 ▶ SQL: 사용자의 데이터를 저장, 검색 및 수정할 수 있도록 데이터 분석과 쿼리를 사용하기 위한 언어 ⤷ 웹 개발과 관련해 이해를 도울 수 있는 기사(codeburst.io/how-to-become-a-web-developer-101-5db4f11e..

"Codecademy"의 "Front-End Engineer" 수강 시작. 1. 프론트엔드 기술자 과정의 시작 (Make your websites interactive with JavaScript) 본 과정 이후에 HTML과 CSS로 전략적 웹을 만들고, 웹을 JavaScript와 상호작용하도록 만드는 등을 할 수 있을 것임. 2. 웹 개발 기본(Web Development Fundamentals) - 웹 개발 소개 (Introduction: Web Development Fundamentals) 2챕터를 통해 고급 수준 인터넷의 구조 이해, 흔하게 사용되는 웹 개발 언어 이해, 프론트엔드에 대한 이해 등을 할 수 있음. - 인터넷이란? (What is the Internet?) 인터넷과 WWW(The W..