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

지난번 일

지난번 일
지난번 HTML에서 블록 인코딩이 개수라고 했어요.

이번 담화

이번에는 이게 맞는 건 아니지만 CSS 스타일로 구분해서 사용하겠습니다.
CSS는 HTML의 모양을 담당하며 position, width, color 또는 DOM의 스타일을 지정할 수 있습니다.
나는 이 속성이 매우 많다고 생각하고 기억하고 싶지 않은 사람도 있다고 생각한다.
저도 잘 기억나지 않지만 속성이 영어라서 어떤 속성인지 이해하기 쉬워요. snippet 이런 예측 변환도 있으니까 고민 안 하시겠죠.
음.. 숫자를 처리하면 자연히 기억할 거예요.

여백 지정하기

나는 만약 웹 디자인을 진행한다면 공백의 조정은 불가피하다고 생각한다.
'여기가 1px에서 벗어났다','상하좌우 중앙이 없다'고...
여러분이 공백을 비울 때 사용하는 속성은 무엇일까요?
나는 무의식중에 이곳에 규칙을 설정하여 사용했는데, 참고로 들을 수 있다면 매우 기쁠 것이다.

margin

margin은 원래 공백이라는 뜻으로 요소의 상하좌우 공백을 설정할 수 있다.
따라서 패딩처럼 원소의 안쪽에서 공백을 만들지 말고'원소의 바깥쪽에서 공백을 만들자'.
따라서 원소와 인접 원소 사이에 공백을 남기고 싶을 때 이margin을 사용합니다.

padding

padding은 메운다는 뜻으로 요소 내의 공백을 메운다.
공백을 축소한다고 하지만 패딩을 설정하지 않으면 원소 내의 공백은 근본적으로 없다.
따라서 패딩은'요소의 안쪽에 흰색을 남기는 것'을 인식하는 것이 좋다.

border

border는 경계선이라는 뜻으로 요소의 경계선을 지정할 수 있습니다.
경계선의 너비 등을 지정할 수 있지만 일반적으로 요소의 장식적 요소로 처리되기 때문에 이번 공백은 사은품으로 소개된다는 뜻이다.
내가 배경의 색과 위의 요소의 색을 덮을 때border를 지정하여 요소의 시각화에 사용한다.

box-sizing도 설정하세요(padding,border)

패딩과border를 설정할 때width와height는 px로 지정했지만width와height는padding과border가 설정한 px만 커졌습니까?
설정되어 있기 때문입니다box-sizing: content-box.
content-box에 대해 지정한width와height는 "content의 크기"를 box로 보존합니다. 그 크기에padding과border가 포함되지 않습니다.따라서 원소의 크기는 공백 패딩과border가 지정한 부분으로 커집니다.
그럼'width와height의 px는 지정한 크기를 유지하고padding과border도 지정하고 싶다'는 때는 어떻게 해야 하나요?
이때 설정box-sizing: border-box.
border-box에 대해border까지의 요소를 box로 크기를 유지합니다.
원소의box는 콘텐츠→padding→border 순서로 구성되어 있습니다.
content-box에서 content는 이전에box,border-box는border까지box입니다.
"width와height의 px는 지정한 크기를 유지하고padding과border를 지정하고 싶습니다."경우border-box로 해결할 수 있습니다.
그림이 없으면 잘 모르겠지만 Google Chrome의 개발자 도구는 이 요소의 박스를 확인할 수 있습니다.

이렇게 하면 박스가 시각적으로 어떻게 구성되는지 볼 수 있기 때문에 이해하기 쉽다.

견본

그렇다면 설명은 바로 이런 느낌입니다. 실제로 상술한 설명에서 어떻게 공백을 덧붙일까요? 코드펜으로 만든 간단한 샘플을 사용해 보세요.
See the Pen MARKUP margin padding border by Kido Yuta ( @sutobu000 )
on CodePen .

원소 중 원소의 간격은padding을 사용하고 인접 원소는margin을 사용합니다.

border는 배경에서 요소를 보기 흉하게 만들지 않는 중음의 사용법입니다.p>

그 밖에 margin: 0 auto의 경우 원소는 좌우 너비를 균등하게 유지하기 때문에 중앙 설정을 할 수 있다.하지만 중앙에서 위아래로 구성할 수 없습니다.

위아래 하이트의 지정은markup에서 의외로 심각한 원인이 될 수 있습니다p>

총결산

공백의 뜻을 잘 이해해야 돼요.

marign,padding,border와 3개 속성의 간략한 설명,

이름을 거슬러 올라가면'이럴 때 이걸 사용해야 한다'는 뜻만 익히면 된다.

다른 프로그래밍 언어라도 영어의 뜻을 잘 이해하면 사용법을 이해할 수 있기 때문이다.

나는 CSS의 속성이 특히 뛰어나다고 생각한다.
background과opacity무슨 속성인지 뜻에서도 알 수 있다p>
그럼 영어를 공부하면 되나요?그게 아니라 뜻을 아는 기초 위에서 사용법을 잘 이해하는 것이 중요하다는 것이다.

뜻을 알면서도 사용법을 모른다면 사용설명서의 개요를 읽었을 뿐이다p>

-

공부하려면 직접 홈페이지를 만들어 보는 것이 가장 좋다.br/>
여기서 어떤 속성을 사용하는 것이 좋은지 배워보세요.

다른 사이트도 가장 좋은 참고서이니 개발상 도구로 보면 된다p>
저는 개인적으로 아래의 총결산 사이트를 보겠습니다

- https://81-web.com/

- https://io3000.com/

- https://bm.s5-style.com/

CSS를 더 많이 배우고 싶고, 문제 형식으로 해보고 싶어요!이런 분들은'CSS Battle'을 추천합니다.

https://cssbattle.dev/

html과 css를 사용하여 같은 이미지를 만들고 최소 코드의 글자수로 쓴 사람이 평가됩니다.

자신의 표기력을 측정하는 것도 괜찮다.SEO와는 전혀 관계가 없기 때문에 실제로 웹 사이트에서 이걸 사용하는 것은 고려할 만한...

---

다음에는 받은 디자인에서 표시를 하는 과정에서 어디를 알아봤어

그 일대를 말할 수 있었으면 좋겠어요.기대해주세요.p>

→ 다음