초보자를 위한 CSS 및 HTML 설명: 1부
This article is also available in the following languages: Portuguese.
과거에 몇 사람이 말하기를 공부를 하는 가장 좋은 방법은 다른 사람을 가르치는 것이라고 했다.따라서 저는 일반인의 용어로 CSS와 HTML 언어를 해석하려고 합니다. 그러면 절대적인 초보자들이 이러한 절차를 따라 웹 개발 분야에 진출하는 여정을 시작할 수 있습니다.🧑💻
본고에서 우리는 CSS와 HTML이 실제로 무엇을 의미하는지, 그리고 개발자가 이러한 언어로 웹 페이지를 구축하는 방법을 소개할 것이다.그 배후의 논리는 회화와 비슷하다.어떻게 하는지 알고 싶어요?🧑🎨
소개하다.
너는 나보다 더 잘 그릴 수 있지만, 나는 네가 적어도 한 번은 이런 그림을 그리기 시작했다고 믿는다. 우선, 너는 머리 하나, 아주 유명한 동그라미를 그렸다.그리고 막대기 몸을 만들어 위와 아래의 멤버가 나왔다.
너의 그림은 아마 이렇게 될 것이다.
Image by Monika Zagrobelna on "How to Draw a Stick Figure: a Complex Guide"
그렇다면 CSS와 HTML은 어떤 관계가 있습니까?나는 네가 이렇게 묻는 것이 매우 기쁘다.
웹 브라우저가 구조를 이해하기를 원한다면 웹 페이지를 보여주기 위해서는 반드시 구조를 보여줘야 한다.
HTML 및 페이지 구조🏋️
다음은 HyperText Markup Language (또는 HTML 알파벳 줄임말): 웹 브라우저 요소의 위치와 그것이 어떻게 존재하는지 알려 줍니다.
💡 As you noticed, by its definition, HTML is a markup language, not a programming language. It does not use any variables or functions, so we can't make a full-functional application, nor interact directly with the elements on the page. To do this, we can use JavaScript or any other programming language.
기본적으로 가장 현대적인 웹 브라우저는 단락, 단추, 입력을 어떻게 보여주는지 알려주지 않아도 알 수 있습니다.대부분의 브라우저에서는 HTML Standard와 공급업체 기본값CSS style-sheets으로 정의됩니다.
사실 그것들은 웹 브라우저마다 다르게 보인다.따라서 일부 플러그인은 이를'정상화'로 보여줌으로써 개발자를 도울 수 있다. 예를 들어normalize.css.
또한 HTML에서 우리는 일부 라이브러리를 가져올 수 있다. (이것은 개발자에게 많은 함수를 포함하기 때문에 이 함수들을 반복해서 작성하거나 만들 필요가 없다.) 그리고 일부 메타데이터를 포함한다. 예를 들어
title
, language
.viewport
와 문자encoding
표준(개발자가 일반적으로 사용하는UTF-8
은 우리가 영어로 읽는 실체를 많이 포함하기 때문이다).웹 브라우저가 페이지를 잘 보여주기 위해서는 이 라이브러리와 메타데이터가 너무 중요하기 때문에 웹 브라우저가 작업이 끝나기 전에 불러오기를 원할 수도 있습니다.이것이 바로 우리가 브라우저에서 원소가 무엇인지, 그것들이 어떻게 보이는지 모르기 전에 그것을
head
라고 부르는 이유이다.head
에 로드된 컴포넌트는 body
구조에 있습니다.그것들은 나무의 나뭇가지처럼 끼워 넣을 수 있다.이것이 바로 HTML의 기본 구조, 즉 웹 페이지의 구조이다.실제 페이지는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Here goes the Page's Title</title>
</head>
<body>
<h1>This is a big heading</h1>
<p>And this is a paragraph.</p>
</body>
</html>
이러한 표기 언어의 작업 원리에 주의하십시오: 요소, 예를 들어 title
, 제목h1
과 단락p
은 <
로 시작하고 />
로 끝납니다.또한 <html>
원소에는 두 가지 원소가 있는데 그것이 바로 head
원소를 포함하는 title
이다.그리고body
대부분의 요소가 그 안에 위치하고 웹 브라우저에 표시됩니다.💡 Don't worry if you don't fully understand what this code does yet. We are just getting started, and if you reach this part, well done, you are really making progress! 👏
CSS 및 페이지 모양💄
이제 우리 그림으로 돌아갑시다.우리는 당연히 그것을 더욱 우아하고 재미있으며 심지어 섹시하게 보일 수 있다.그래서 우리는 우리의 캐릭터 친구에게 색채를 더할 것이다.
드로잉에 색상과 효과를 추가할 수 있기 때문에 요소의 모양새나 전체 시트의 모양을 변경할 수 있습니다.이 점을 설명하기 위해서 우리는 우리의 디자인을 완전히 다른 전문적인 외관으로 바꿀 수 있다. 예를 들어 당신이 익숙할 수 있는'미완성 마화'등이다.
“Unfinished Horse Drawing”, by Ali Bati, on Know Your Meme
이것이 바로 CSS의 신기한 점이다. 즉 Cascading Style Sheets 웹 브라우저는 이러한 요소와 웹 페이지의 구조가 어떻게 해야 하는지를 알려주어 성공적으로 나타낼 수 있다.
Google CSS 파일을 조정해서
head
또는 body
HTML 파일에 포함할 수도 있습니다. 이것은 브라우저가 불러오기를 원하는 시간에 따라 달라집니다. 이 변경 사항은 Google이 페이지를 열 때 적용되거나, 모든 요소를 보여준 후에 바로 적용됩니다.CSS에서도 구조를 변경할 수 있습니다.예를 들어, 표시할 요소의 열 또는 행을 만드는 데 사용되는 규칙을 포함할 수 있습니다.또한 CSS는 3D 공간에서 요소가 서로 연관된 위치(!)를 제어할 수 있습니다.
X
,Y
,Z
축에 익숙하시죠?CSS 파일에서 우리는 원소의 위치와 비례를 변경할 수 있지만 z-index
도 변경할 수 있다. 이것은 원소 간의 상호 관련 순서를 알려준다. 값이 낮은 원소는 뒤로 향하고 값이 높은 원소는 앞으로 향한다. 마치 3D 이미지와 같다.간단한 CSS 파일은 다음과 같습니다.
body {
background-color: black;
}
h1 {
color: blue;
font-size: 32px;
}
등급 연결 스타일시트 문법은 이전의 표기 언어와 다르다. 요소는 그들의 선택기에 의해 표시된다. 예를 들어h1
.다음은 하나의 속성과 그 값이다. 예를 들어 우리가 예시한 color: blue;
.속성과 값을 포함하는 선언은 {
및 }
문자에 입력합니다.인터넷에서 보기 좋은 웹 페이지, 템플릿, 디자인 트렌드를 무료로 만드는 방법에 관해서는 아주 좋은 강좌가 많다. 나중에 사용하고, 표시를 해서 검사할 수 있다.
요점을 요약하고 다시 말하다.🧩
우리는 끝났으니 한번 되돌아봅시다.우리는 HTML의 기초 지식을 배웠고
head
와 body
구조를 이해했으며 그 안에 요소가 포함되어 있으며 브라우저가 페이지를 어떻게 정확하게 보여주는지 알려주었다.또한 웹 페이지의 외관과 느낌을 바꾸고 웹 페이지의 앞뒤 요소를 성공적으로 불러오는 디스플레이 방식을 소개하는 CSS의 기초 지식도 소개했다.결론🎉
HTML5와 CSS3(각각의 현재 버전과 최신 버전)은 애니메이션, 모드, 심지어 상호작용 게임을 만드는 데 사용할 수 있다.개발자들이 현재의 많은 문제를 해결하기 위해 새로운 도구와 기술 규범을 만들고 있기 때문에 브라우저도 더욱 스마트해졌다.
UI(사용자 인터페이스)와 UX(사용자 체험)도 이러한 스타일시트와 구조를 새로운 방식으로 사용하고 우리 웹 사용자들에게 아름답고 유용한 인터페이스를 제공한다.
다음 단계🚶♂️
현재 우리는 CSS와 HTML의 기본 지식을 이해했기 때문에 이 시리즈에 관심을 가져 달라고 요청합니다. 그러면 우리는 웹 개발을 더욱 이해할 수 있습니다.다음 글에서, 우리는 이러한 언어를 어떻게 사용하여 처음부터 웹 페이지를 구축하는지 소개할 것이다.
당신은 개발자가 곧 발표할 새로운 버전(예를 들어 HTML6나 CSS4)에서 어떤 큰 것을 창조할 수 있다고 생각합니까?다음에 당신은 어떤 디자인을 실현하고 싶습니까?평론에서 알려주세요.📢
도구책
[1] "CSS: Cascading Style Sheet", MDN 웹 문서: https://developer.mozilla.org/en-US/docs/Web/CSS.
[2] W3Schools에서 온 CSS 소개: https://www.w3schools.com/css/css_intro.asp.
[3] "HTML: 하이퍼텍스트 태그 언어", MDN 네트워크 문서: https://developer.mozilla.org/en-US/docs/Web/HTML.
[4] WHATWG 커뮤니티에서 온 HTML 표준: https://html.spec.whatwg.org/.
Reference
이 문제에 관하여(초보자를 위한 CSS 및 HTML 설명: 1부), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/danilo/css-and-html-explained-for-absolute-beginners-part-1-2hjd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)