CSS를 이용한 레이아웃 제작(Pt a) - 프런트엔드 개발 시리즈 섹션 5

이 글은 처음으로 제 블로그에 공유되었습니다 - Dillion Megida's Blog
이 시리즈에서 오늘의 주제는 CSS를 사용하여 섹션을 만드는 것입니다. - CSS를 사용하여 섹션을 디자인하는 것입니다.
우리는 CSS가 양식을 제공함으로써 우리의 웹 페이지에 아름다움을 가져다 주었다는 것을 이미 알고 있다.많은 라이브러리가 있습니다. 예를 들어Bootstrap은 이미 당신을 위해 레이아웃을 설계했지만, 이 라이브러리에 들어가기 전에 어떻게 작동하는지 알아보는 것을 권장합니다.동일한 CSS 규칙을 사용합니다.
우리의 지침-Roadmap - Frontend에 의하면 우리는 있다.

카탈로그

부동

포지셔닝

모니터

상자 모형

CSS 메쉬

긁힘 상자

결론

이 책은 좀 길어요. 왜 커피를 안 마셔요?☕

I would explain Flexbox and CSS Grid in my next article on this series.

내용을 깊이 연구하기 전에, 나는 먼저 몇 가지 CSS 힌트를 소개하고 싶다
정확한 이름 클래스 - 논리적이고 대소문자가 적당하며 camelCase가 가장 좋다
이해id와 class-id는 원소에만 유일하고 중용할 수 없다.class 여러 컴포넌트에 사용할 수 있습니다.
!중요 - 요소를 가리키는 속성 값으로 선언하면 덮어쓸 수 없습니다.
측정값 이해 - px, em, rem 페이지의 일치성을 확보하기 위해 적절하게 사용해야 합니다.
사이트 호환성 - 일부 사이트는 일부 속성을 받아들이지 않습니다.이 문제를 해결하는 방법은 때때로 어떤 접두사를 추가하는 것이다.

떠다니다

.element {
    float: none | right | left;
}

이 속성을 사용하면 컨테이너 왼쪽의 오른쪽에 요소를 배치할 수 있습니다.'없다'는 것은 단지 움직이지 않는 것을 가리킨다.
이 코드 좀 봐,

<!-- index.html -->
<div class='container'>
    <div>

    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

/* style.css */
.container {
    width: 400px;
    background-color: lightblue;
    height: 400px;
}
.container div {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.container p {
    font-size: 30px;
}

이것은 우리가 기대하는 정상적인 결과이다. 왜냐하면div원소는 p원소 이전에 성명했기 때문이다.오른쪽으로 띄우다.

/* Add the property of float to the above program */
.container div {
    float: right;
}

우리의 결과는,

당신은 무엇을 알아차렸습니까?

div 오른쪽으로 움직인다. 뿐만 아니라 텍스트는 div를 감싸고 있다. 텍스트는 사용 가능한 공간을 차지한다.이것은 부동점의 기본적인 실현이다.
CSS 부동에 대한 추가 정보 읽기 - CSS Float

포지셔닝

이 속성을 사용하면 페이지의 일부 부분에 요소를 배치할 수 있습니다.
적용된 일부 방법은 부모 요소의 제한을 받을 수 있고, 다른 방법은 요소의 독립을 허용할 수 있다.
CSS의 포지셔닝 값은 div, static, fixed 및 relative 입니다.absolute, top, down 및 left 속성을 사용하여 요소를 더욱 포지셔닝합니다.

These properties can only be used when the display property is set.

- right이것은 모든 요소의 기본 위치입니다.그것의 위치는 페이지의 유량에 달려 있다.그들은 position: static, top, bottom 또는 left의 영향을 받지 않는다.

- right이것은 기본 위치를 기준으로 요소를 배치합니다.예를 들어, 적용 position: relative 시 컴포넌트를 아래로 밀어냅니다.원소의 맨 위에 남은 공간은 다른 원소를 수용하지 않습니다.이러한 요소는 상위 요소에 의존하여 위치를 결정합니다.

- top이 속성은 원소가 기본 위치에 대한 점유를 잃게 하여 다른 원소가 공간을 차지할 수 있도록 합니다.응용 position: absolute 시 부모 원소에 비해 작용하지만 다른 원소는 추진하지 않습니다.

- top이 값은 요소가 어디에 놓여 있든지 간에 특정 위치에 부여될 수 있도록 합니다.이 요소는 모든 위치에 배치할 수 있기 때문에 부모 요소와 독립적입니다.반면 뷰포트를 기준으로 위치를 지정합니다.따라서 어떤 페이지가 스크롤해도 요소의 위치를 파괴하지 않습니다.그것들도 기본적으로 차지하는 공간에 대한 점유를 잃었기 때문에 다른 요소들은 이전의 위치를 차지할 수 있다.예를 들어 position: fixed 요소는 페이지 맨 위로 가져옵니다.

The difference between fixed and absolute is that fixed is positioned relative to the viewport while absolute is positioned relative to the parent element. Similarities remain that they do not affect other elements unlike relative, static, and sticky.

- position: fixed; top: 0이 값은 상대 위치와 고정 위치 사이를 전환합니다.원소를 위해 몇 가지 조건을 성명했다.요소는 상대 위치에서 시작하여 이러한 조건이 충족되면 위치가 고정으로 변경됩니다.예를 들어, position: sticky.여기에서 요소가 브라우저의 맨 위에 도착하면 (페이지가 스크롤된 후에) 고정됩니다.
요소가 top 속성 0을 잃게 하는 것은 무엇이든지 상대적이다.

진열하다

말 그대로 이 속성은 요소의 표시 방식을 제어합니다.이 속성은 매우 많은 다른 값이 있지만, 나는 주요 값을 설명할 것이다.기본 표시 값은 position: sticky, top: 0 또는 block 입니다.하나하나는 모두 다른 용례에서 확정된 것이다.

- inline이 값display: block을 사용하면 요소가 새 줄에 표시되고 최대 사용 가능한 공간의 왼쪽과 오른쪽으로 확장됩니다.우리는 block, <p> 등과 같은 블록 등급 표시가 있습니다. 당신이 이미 알고 있는 바와 같이, 사용 가능한 폭을 최대화했기 때문에 다른 요소는 새 줄로 밀려났습니다.

- <h1-h6>이 값display: inline을 사용하면 요소가 필요한 최대 너비만 차지할 수 있습니다.사용 가능한 공간이 없으면 새 줄이 표시되지 않습니다.내연원소는 inline, <a> 등을 포함한다.

With display: inline, properties such as height & width would take no effect because as I mentioned, the elements only take up the maximum required space it takes for them to be displayed. This is only possible in display: inline-block.

Note: These are default values. You can override them e.g manually changing the display of <a> elements to block or change the display of <p> elements to inline depending on how you want them to be displayed.

- <span>브라우저의 디스플레이 속성과 함께 사용할 때, 이 값display: none은 페이지를 표시할 때 요소를 삭제해야 한다는 것을 브라우저에 알려줄 뿐입니다.또 다른 선택은 값none이 있는 부동산visibility이다.이러한 방법 간의 차이점은 hidden 요소를 위치에서 제거하여 다른 요소가 이 구역을 차지할 수 있도록 하고, display: none 다른 요소가 이 구역을 차지하지 않지만 원소가 보이지 않도록 하는 것이다.

- visibility: hidden값display: inline-block은 원소의 행위가 내연 원소와 유사하지만 inline-block과height 같은 속성을 적용할 수 있도록 허용한다.

- width값display: flex은 요소를 블록급 flex 용기로 표시합니다.

- flex값display: grid은 엔티티를 블록 메쉬 컨테이너로 표시합니다.
이것은 주요 디스플레이 값입니다.다른 값의 목록here을 찾을 수 있으며,display 속성here에서 더 많은 내용을 읽을 수 있습니다
this W3Schools Resource의position 속성을 보십시오.

상자 모형

페이지의 모든 요소는 상자로 간주됩니다.
장방체 모형은 장방체의 원소를 둘러싼 모든 것을 가리킨다.이것들은 grid, padding, margin과 실제 내용이다.
네모난 상자로서의 기본 요소, 예를 들어 borders에 대해 우리는 이 css를 가지고 있다.

.name {
    width: 400px;
    padding: 10px;
    margin-left: 30px;
    border: 2px;
}

상자의 총 너비는 400px(내용폭)+10px*2(왼쪽 채우기 및 오른쪽 채우기)+30px(왼쪽 거리)+2px*2(왼쪽 테두리 및 오른쪽 테두리)=454px입니다.우리의 내용은 400px이지만 상자의 폭은 454px이다.
이것은 상자 모델 배후의 개념으로 그 중에서are 요소는 추가 속성과 내용 자체를 가진 상자로 간주된다.
카세트 모델here에 대한 추가 정보 보기
앞에서 말한 바와 같이, 나는 다음 글에서 CSS 격자와 CSS Flex를 설명할 것이다.

결론

상술한 속성을 적절하게 사용하여 배치하면 아름다운 웹 페이지가 생길 것이다.
나는 그것이 읽을 만하길 바란다.
나는 네가 현재 CSS 레이아웃의 개념을 이해했다고 믿는다. (flex와grid는 포함하지 않는다.)만약 완전히 이해하지 못한다면 위의 공유 문장을 참조하십시오.
이 시리즈에 관한 나의 다음 문장에 주의하세요.
트위터로 연락 주세요.
정말 감사합니다.🤗

결론