초보자를 위한 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.)
좋은 웹페이지 즐겨찾기
