HTML과 CSS 등 태그 인코딩 기술을 얻기 전의 이야기 part1

지난번 일

지난번 일
저번에는 앞에서 말했어요.
어떤 말을 해야 할지 제 소개를 하겠습니다.

이번 담화

이번에 웹 지식이 없는 나는 웹을 알게 되었는데, 동기 중 가장 인코딩할 수 있는 이야기이다.
동기라고는 하지만 그때의 동기이기도 하고 프로그래밍도 처음인 사람이기도 하고...
그런 내가 대학 시절에 프로그래밍을 좀 했지만 이해한다고 해도 그렇지 않다.
웹이 첫 취업이라는 걸 처음 알았어요.
주변에 패션계, 영업, 평면 디자인 등에서 온 사람들이 동기다.
그들은 나와 마찬가지로 웹 지식이 거의 없다.
SES의 웹 엔지니어로 일하기 위해 웹 인코딩에 대한 연수를 진행했습니다.
사전에 코딩 연수가 있다고 해서 사전에 공부도 했어요.
사전 학습 교재는'HTML/CSS 디자인 교과서를 만들면서 배웠어요.'를 사용했다.
이 교재는 웹을 만들기 위해 필요한 것이 대체로 충실하게 실려 있다.
개인적으로도 기교가 좀 있어서 앞으로 인코딩을 배우고 싶은 사람을 추천합니다.
다만 2013년에 발매된 것이기 때문에 정보가 오래된 곳도 있으니 주의하세요.
덕분에 연수도 무사히 마치고 동기들 사이에서 SES로 일을 시작했습니다.
나는 내가 대략 일주일도 안 걸려서 배웠다고 생각한다.
평소 책을 읽지도 않고 읽지도 않던 자신도'일을 위해'라고 생각하면 신기하게도 머릿속에 들어온다.
HTML과 CSS의'여기가 왜 이렇게 됐는지 모르겠다'의 동기화도 있다.
물론 이런 의문이 들지만 잘 모르는 점은 다들 비슷하다.
그 중 하나는 HTML이 블록 구조라는 것을 이해하느냐 하는 것이다.

HTML은 블록입니다.

연수 중에 HTML과 CSS의 기초적인 것을 하면서 실천도 했습니다.
지나간 말이라 잘 기억은 안 나지만 생각나는 걸 써야 해요.
HTML의 라벨과class, CSS의 스타일의 종류 등에 대한 설명을 한 후 실천을 하여 다음과 같은 블록을 쌓았다.

↑ 이런 느낌의 블록을 많이 만들었다.
지금 말하는 것은 cssBattle의 간이판이다.
흔히 볼 수 있는 느낌으로 그림을 재현하는 것이 바로 이런 느낌이다.

<div class="wrapper">
  <div class="block">1st</div>
  <div class="block">2nd</div>
  <div class="block">3rd</div>
</div>  

.wrapper{
  width: 500px;
  height: 500px;
}
.block{
  float: left;
  width: 50%;
  height: 50%;
  background: #33f;
}
.block:first-child{
    width: 100%;
    background: #f33;
}
.block:nth-child(2){
    background: #3f3;
}

더 많은 방법이 있지만 이런 느낌의 블록을 문제 형식으로 진행했다.
(저는 개인적으로 플로트를 별로 사용하고 싶지 않아요. div에도 텍스트가 있어요. 여기서 간단하고 알기 쉬워요...)
이 고목은 정말 쓸모가 있습니까?
이 고목의 모양을 자세히 봅시다.
자세히 보니 빨간색 1장은 제목, 초록색 2장은 내용, 파란색 3장은 사이드바...
흔한 블로그 구성도 볼 수 있다.
이런 구성은 블록 구성이라고 하는데 블록처럼 HTML의 내용을 블록별로 쌓아 놓는다.
또한 웹은 왼쪽 상단부터 HTML의 DOM 요소를 축적한다.
그래서 녹색은 두 번째가 왼쪽, 파란색은 세 번째가 오른쪽이다.
이것을 오른쪽 상단에서 시작하려면 이번 상황float:right;으로 하면 된다.
하지만 간혹 사용하는 css의 스타일은 달라진다.너는 임기응변이 필요하다.
블록 구조를 이해하면 다양한 사이트의 눈이 바뀐다.
이럴 때'어떻게 하는 거야'라고 생각하면 브라우저의 개발자 도구 등 화면에서 확인할 수 있다.

인코딩은 숫자입니다, 형님.

위에서 사용한 것은div로 상황에 따라 섹션,article,header,footer 등을 구분하여 사용한다.
갑자기 섹션과article 등을 사용하는데 솔직히 뭐가 달라요?그렇게 생각하는 사람도 많아요.
솔직히 둘 다 똑같이 사용할 수 있고 사용해도 장애가 없다.
하지만 각각의 HTML 태그는 각각의 역할을 합니다.
머리글입니다. 꼬리글 등입니다.
솔직히 하나하나 기억하는 게 힘들어요.초보자가 여기서 기억하고 싶은 것은 매우 고통스러운 것이다.
나는 우선 HTML과 CSS를 사용하여 인코딩하는 것이 가장 빠르다고 생각한다.
그곳에서는 라벨의 작용을 개의치 않고 전부 사용하고, 인코딩이 다 될 때까지 기다린다.
인코딩이 끝난 후에 인코딩을 검사하는 사람이 있으면 보세요. 사람이 없으면 스스로 조사하세요.
이렇게 하면'여기는 이 라벨을 쓰는 것이 좋다','여기는 이 라벨을 쓰면 안 된다'는 것을 알게 된다.
내 생각에 남은 것은 이것이 중복된 것이다.
나는 인코딩이 품위라기보다는 경험의 수량이라고 생각한다.
사건이 안 나와도 블록 연습만 해도'더 좋은 글쓰기가 있다'고 생각하면
이대로도 성장하고 있을 거야.

총결산

인코딩은 숫자를 처리해야 한다
나는 블록의 블록 구조는 어떤 사이트에서도 말할 수 있다고 생각한다.
(WebGL과 같은 표현은 제외)
웹의 적목이 왼쪽 상단에서 쌓인다.
이것만 이해하면 세css의 스타일 지정만 축소됩니다.
나는 이 블록의 구조를 이해하고 어떻게 쌓아야 좋을지 생각해 사이트를 만들면 더욱 깊이 이해할 수 있다고 생각한다.
이곳의 사용 방법이 정확한지 의심스러울 때 어쨌든 조사해야 한다.
그리고 W3C의 사용법에 따라 하는 것이 좋습니다.
W3C는 World Wide Web Consortium의 약칭으로 웹 기술 표준화를 진행하는 비영리 단체입니다.
대부분의 사이트에도 이 표준화된 규정이 있습니까?따라야 하기 때문에 불안할 때 이곳의 검증 검사를 통해 확인할 수 있다.
https://validator.w3.org/
이후 구글 크롬을 사용한다면 확장 도구web Developer도 추천한다.
-
이렇게 웹 지식이 전혀 없는 저는 SES로서 일을 시작했습니다.직장을 옮겼어요
당시에는 아직 한 사람도 사이트를 만들지 않고 일부 일만 했다.
그럼에도 불구하고 당시 동기 중에는 인코딩이 가장 좋았던 것 같다.
비록 완성되었다고 하지만 나는 이것이 이 블록의 구조를 이해하는 것인지 이해하지 못하는 것인지의 차이라고 생각한다.
나는 개인적으로 가르치지 않는 것도 크게 다르다고 생각한다.
「 HTML/CSS 디자인 교과서를 만들면서 배웠어요. 」
이 교재는 정말 웹을 만드는 기초가 있다.
나는 다른 교본도 틀림없이 같다고 생각하지만, 나는 네가 이런 교본을 사는 것을 건의한다.
그 다음은 반복 연습이다.세어라!
다음 CSS 패딩 및 margin 구분 사용
나는 모든 사람이 각자의 사용 방법을 가지고 있다고 생각한다. 나는 이렇게 사용해서 구분한다
말하고 싶어요.기대해주세요.
→ 다음