Videos · 동영상
Web Basics — HTML & CSS · 웹 기초 — HTML & CSS
Pick a topic to watch. · 보기를 원하는 주제를 선택하십시오.
21 video lessons · 21 영상 수업
2:20
첫 번째 웹 페이지 만들기
오픈한 모든 페이지는 누군가가 타이핑한 파일입니다. 그려진 것도, 앱에서 디자인한 것도—not—타이핑된 것이며, 다음 5분 안에 직접 타이핑해 볼 수 있습니다. 웹 페이지…
2:28
제목
모든 문단이 동일한 크기의 페이지는 글의 벽이며, 독자는 이를 피합니다. 제목은 독자가 찾은 부분을 찾는 방법입니다. 제목은 ……
2:07
굵게, 기울임, 줄바꿈
지금까지 태그는 전체 블록을 감쌌습니다: 이 줄은 단락, 이 줄은 제목입니다. 여기서 새로운 것이 등장합니다—단어 하나만 …에 감싸는 태그입니다.
2:17
리스트(Lists)
세 항목을 세 개의 문단으로 쓰면 브라우저는 이들이 함께 속해 있음을 알 수 없습니다. list라고 하면 됩니다. 목록은 두 가지 다른 태그를 사용하며, 이것이 ……
2:31
링크
지금까지 쓴 모든 것이 한 페이지에 머물러 있습니다. 하나의 태그를 사용하면 이를 웹의 일부로 만듭니다. 링크 태그는 a(anchor의 줄임말)이며, ……을 가져옵니다.
2:25
이미지
태그는 브라우저에 무언가가 무엇인지 알려줍니다. 이 태그는 어디로 가서 가져올지 알려줘야 하며, 이를 위해 새로운 종류의 정보가 필요합니다. 이미지를 ……에 넣으려면
2:18
실제 웹 페이지
지금까지 페이지의 조각들을 썼습니다. 실제 페이지는 이를 프레임 안에 배치하며, 전 세계 거의 모든 웹사이트의 기본 프레임이므로 ……할 가치가 있습니다.
2:29
주석과 중첩
지금까지 모든 태그는 이전 태그와 옆에 있었습니다. 실제 페이지는 태그를 ……안에 넣으며,这样做时 순서가 중요해지기 시작합니다. 주석은 당신이 ……하는 메모입니다.
2:17
표
이것은 학생들이 가장 자주 틀리는 태그이며, 항상 같은 이유로: 순서를 읽는 대신 추측하기 때문입니다. 표는 ……중첩된 세 개의 태그가 필요합니다.
2:08
형성
지금까지 만든 것은 모두 읽을 대상입니다. 폼은 다릅니다: 방문자가 사용하는 도구이기 때문입니다. type이 text인 입력 필드를 작성하면 실제 상자가 생성됩니다…
2:19
섹션과 클래스
작은 페이지는 하나의 태그 스택으로 충분합니다. 큰 페이지는 그렇지 않습니다—방문자는 제목, 콘텐츠, 하단의 주석을 보며, 만약 당신의 HTML이 단순히 ……라면
2:21
첫 번째 CSS
과정 중반, 두 번째 언어가 등장합니다. HTML은 각 요소가 무엇인지 명시합니다—이것은 단락이다, 저것은 제목이다. CSS는 어떻게 보이는지를 설명합니다—이것…
2:18
셀렉터
지난 수업의 셀렉터는 태그 이름이었으므로 페이지의 모든 문단이 변경되었습니다. 이는 종종 너무 많습니다. 따라서 두 가지 더 있습니다. 점(.)이 ……있는 이름을 작성하세요.
2:19
색상
색상은 페이지가 과제로 보이지 않게 되는 지점입니다. 또한 초보자가 12가지 색상을 선택하여 페이지가 무너지는 지점이기도 합니다. …을 작성하는 가장 간단한 방법은
2:16
텍스트 스타일링
두 번째 수업 때 브라우저가 제목 크기를 정했습니다. 이제는 pixels 단위로 font-size를 사용하여 직접 선택할 수 있습니다. ……에 대해 40px
2:27
박스 모델
두 요소가 원하는 자리에 앉지 않고, 입력하는 어떤 내용도 이를 해결하지 못합니다. 거의 모든 경우, 이것이 이유입니다. CSS는 모든 요소를 상자로 취급하며,…
2:17
여백(margin)
마진은 상자의 외부 공간이며, 여기서 중요한 점은 다음과 같습니다: 주변에 아무것도 없는 상자에서는 마진이 보이는 것을 변화시키지 않습니다. 두 상자를 ……놓으면
2:16
표현
3차 수업부터 이 내용을 관찰했지만 아직 이름이 없었습니다. 일부 요소는 줄 전체를 차지하여 페이지를 가로지릅니다: div, … 등
2:09
너비와 중앙 정렬
주의하지 못했을 수 있는 것이 있습니다: 블록 박스는 이미 페이지 전체 너비입니다. 항상 그랬으나, ……없으면 모서리를 볼 수 없었습니다.
1:58
플렉스박스(Flexbox)
지금까지 만든 모든 것이 아래로 쌓이는 이유는 블록 박스가 그렇게 작동하기 때문입니다. 하지만 네비게이션 바, 카드 행, 툴바 등은 ……位置上에 있어야 합니다.
2:19
프로필 카드
마지막 수업이자 새로운 개념보다는 프로젝트입니다. 프로필 카드를 만들고 있습니다: 상단에 사진, 원하는 색상의 이름, 그리고 ……한 줄