우리는 아직 우리가 그날 본 CSS를 완전히 이해했는지 모른다.

17900 단어 CSSHTMLtech

우리는 아직 우리가 그날 본 CSS를 완전히 이해했는지 모른다.


엔지니어계의'완전히 이해했다'는 말에는 실제 이해가 아닌 경우가 많다.(일본어 어려워요...)
'완전히 이해했다'중 가장 유명하다고 해도 과언이 아니다.'CSS를 완전히 이해했다'는 말이 있다.이것은 아래 그림처럼 티셔츠로 판매합니다.

이것을 보고 나는 몇 가지 의문이 있다.
  • CSS를 완전히 이해하지 못해서 이렇게 된 외관인가요?
  • CSS를 아는 사람이라도 이 외모를 만드는 게 오히려 어려운가?
  • 일부러 이 외관을 만드는 게 너무 어렵다고 주장하는 거 아니야? CSS를 아는 사람이 아니면 할 수 없으니까 이 외관을 만들면 완전히 이해되는 거 아니야?
    • 의문이 부풀어 오르다.
    그래서 이번에는 CSS를 완전히 이해했다는 보도를 실제로 시도한 것이다.

    CSS 전체 이해 만들기


    네, 실제로 HTML과 CSS로 만들죠.이번에는 다섯 가지 모드를 만들어 보았다.
    다른 방법도 있었지만 생각지도 못했어요.다른 방법을 아시는 분들은 댓글로 알려주세요(웃음)

    전제 조건


    제작 시 전제는 다음과 같다.
  • 동작 확인 브라우저
  • Google Chrome
  • 글꼴이 일치하지 않습니다.
  • HTML 파일은 동일합니다.
    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="destyle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>CSS完全に理解した！</title>
</head>
<body>
    <p class="pattern">パターンX</p>
    <div class="wrapper">
        <div class="content">
            <p>CSS</p>
            <p>完全に理解した</p>
        </div>
    </div>
</body>
</html>
  • 제목<p class="pattern">パターンX</p>의 X는 1~5를 포함한다.

  • 가능<p>CSS<br>完全に理解した</p>.
  • 리셋 CSSdestyle.css를 맞혔다.
  • destyle.css의 내용은 생략한다.
  • style.css에 CSS를 기록합니다.

    • 1. "CSS 완전 이해"의 width를 설정하고 margin을 통해 초과


    CSS 전체 이해의 width를 문자가 접히지 않는 너비로 설정합니다.이번에는 width: 100%로 부모님의 넓이를 지정했다.그리고 margin-left: 52px 딱 오른쪽에 있어요.(52px로서 그림에서 보듯이 오른쪽 종선이''중간을 관통하는 너비를 지정함)
    style.css
    @charset "utf-8";

body {
    margin-top: 40px;
    padding: 0 4%;
    font-size: 1.6rem;
}

.pattern {
    margin-bottom: 8px;
    font-weight: bold;
}

/*パターン1*/
.wrapper {
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    width: 100%;
    margin-left: 52px;
}
    결과야.

    상기 CSS의body와 .pattern는 공통적이며 아래는 생략한다.

    2.white-space:nowrap은 되돌아오지 못하게 한다

    white-space: nowrap를 지정하여 문자 서라운드를 해제할 수 있습니다.그리고 Margin으로 위치를 조정합니다.
    style.css
    .wrapper {
    display: inline-block;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    white-space: nowrap;
    margin-left: 52px;
}
    결과야.

    3. position: absolute로 구성


    위치를 position: absolute로 정렬합니다.되돌림을 피하기 위해 width를 설정합니다.
    style.css
    .wrapper {
    display: inline-block;
    position: relative;
    width: 220px;
    height: 100px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    position: absolute;
    width: calc(100%);
    top: 8px;
    left: 76px;
}
    결과야.

    4.transform:translateX 구성


    위치를 transform: translateX(xx)로 정렬합니다.translateX로 요소를 수평으로 재배치하기 때문에 width를 지정할 필요가 없습니다.
    style.css
    .wrapper {
    display: inline-block;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    transform: translateX(52px);
}
    결과야.

    5.flex-shrink:0 반환 불가


    전체display: flex로 그 자요소flex-shrink: 0로 하면 이 프로젝트는 수축되지 않는다.그리고 Margin으로 위치를 조정합니다.
    style.css
    .wrapper {
    display: flex;
    width: 220px;
    height: 100px;
    padding: 8px 0 16px 24px;
    border: 2px solid black;
    border-radius: 8px;
}

.content {
    flex-shrink: 0;
    margin-left: 52px;
}
    결과야.

    결론


    위에서 설명한 바와 같이 CSS를 조금만 알아도 가능한 방법으로 구현되었습니다.
    처음에 언급한 아래의 답안은 내 마음속에 이미 명확해졌다.
  • CSS를 완전히 이해하지 못해서 이렇게 된 외관인가요?
  • 네, 그렇습니다.일반적으로 CSS를 이해하지 못하면 적절하게 할 수 있다고 생각합니다.
  • CSS를 아는 사람이라도 이 외모를 만드는 게 오히려 어려운가?
  • 는 그렇지 않다.전혀 어렵지 않아요.
  • 일부러 이 외관을 만드는 게 너무 어렵다고 주장하고 CSS를 아는 사람이 아니면 할 수 없기 때문에 이 외관을 만드는 것은 일반적인 의미에서 완전히 이해한 것입니까?
  • 일부러 이런 외관을 만드는 것은 어렵지 않기 때문에 이런 외관을 만들 수 있다는 것은 일반적인 의미에서 완전히 이해되었다.

    • 총결산


    'CSS를 완전히 이해했다','CSS를 완전히 이해했다'를 제작했다.
    이것은 단지 나 개인의 의견일 뿐이다.
    ※ 그나저나 저는 이'CSS를 완전히 이해한다'는 단락을 매우 좋아합니다.(이번엔 티셔츠 삽니다.)
    React - useEffect 후크 - 빠른 가이드
    Nest 공식문서 Controllers

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage