깡뇽

- 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..