연말까지 매일 웹 사이트를 꾸준히 만드는 대학생~ 21일째 지면 디자인에 타로카드를 배치해보세요~

9618 단어 MDNJavaScriptCSS

입문


안녕하세요.요즘 주말에 온천 @70days_js!
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
오늘 MDN에서 css의 레이아웃을 배웠습니다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 21일째다.(2019/11/8)
잘 부탁드립니다.

사이트 URL

  • https://sin2cos21.github.io/day21.html

    • 한 일


    우선 단락조의 배치가 무엇인지 보고 바로 알 수 있다.

    이것은 난간 배치다.신문 기사처럼 배치할 수 있는 느낌인가요?
    flexbox와grid 레이아웃으로 완성할 수 있을 것 같지만 제목과 본문이 있는 것을 그룹화하려면 미묘한 번거로움이 있겠지요.
    그래서 이번에 이런 느낌을 사용한 스타일↓
            #container {
            column-count: 4;
            column-gap: 80px;
            column-rule: 1em double rgba(50, 200, 50, .5);
            }

        .all_card {
            break-inside: avoid;
           }
    column-count에서 몇 레벨로 설정할 수 있는지,gap는 레벨 사이의 크기를 지정할 수 있습니다.
    column-rule은 세그먼트와 세그먼트 사이에 선을 그립니다.
    break-inside는 블록 요소를 분열하지 않고 표시합니다.(이것이 없으면 보도 도중에 다음 단락으로 가는 것이 보기 싫다.)
    그래서 이번에 이걸 이용해서 만들었어요. 이거↓.

    최근에 자바스크립트로 완성하고 싶은 열이 생겼는데 html은 상당히 간단해졌다.html 부분은 이것만 ↓
    <body>
    <h1>タロット占い</h1>
    <div id="container">
    </div>
</body>
    타로카드의 표시 등은 모두 자바스크립트로 진행된다.
    let container = document.getElementById('container');
let eventNumber = document.getElementsByClassName('all_card');
let tekitoudesu = [
    '絶好調',
    '危ないかも',
    'うーん、頑張れ',
    'なるほどなぁ・・・',
    'そのままでいい！',
    'その調子だ！'
];

for (var i = 0; i < 8; i++) {
    var divCreate = document.createElement('div');
    var h2Create = document.createElement('h2');
    var number = i;
    var text1 = document.createTextNode(number);
    var text3 = "card" + number;
    var setClass = 'all_card ' + text3;
    divCreate.setAttribute('class', setClass);
    h2Create.appendChild(text1);
    divCreate.appendChild(h2Create);
    container.appendChild(divCreate);
}

for (var i = 0; i < eventNumber.length; i++) {
    eventNumber[i].addEventListener('click', test)
}

function test() {
    let random = tekitoudesu[Math.floor(Math.random() * tekitoudesu.length)];
    alert(`今日のあなたの運勢は"${random}"です！`);
}
    for 문장에서 요소를 생성합니다.이미지는 css로 백그라운드-image를 미리 준비하고 요소에class를 추가합니다.img 요소와 어떤 걸 만들면 좋을까요?
         .card0 {
            background-image: url("talot/talot0.jpg");
        }
    그리고 클래스 이름으로 이벤트 청중이 클릭한 후 준비된 적당한 문장 중 하나만 표시하면 된다.

    감상


    간단한 웹 사이트를 만드는 일을 받아들일 때가 많지 않을 것 같습니다.아직 멀었다는 것을 알지만 실천을 통해 성장 속도가 더 좋을 거라고 생각합니다.싫더라도 성숙하지 않을 때는 어떨까.사람을 괴롭히다.이런 느낌.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

    참고 자료

  • 레이아웃 - 웹 개발 학습｜MDNhttps://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
    • 감사합니다. MDN 씨!이해하기 쉬워요!
    연말까지 매일 지속적으로 웹 사이트를 만드는 대학생들~ 20일째 CSS의 포지션 5개와 플로트 배우기~
    연말까지 매일 웹 사이트를 만드는 대학생~ 22일째 학습 액자~

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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