Like Lion : 9일차

41755 단어 Like LionLike Lion

강의내용

예정

sass, aws, bootstrap, linux에 대해 다뤄볼 예정임.

레티나 대응

미디어 쿼리

모바일 우선 작업 방식이 필요하다
모바일 => 테블릿 => 피씨

  • 작업 방식을 거꾸로하면 컨텐츠 작아진 화면에 넣어야 할 컨텐츠를 구겨넣거나 원래 있던 요소들을 불가피하게 제거해야 할 상활 올 수도

과제 리뷰

동기분들의 과제를 같이 보면서 리뷰시간을 가졌다.
❓ <br> 태그를 쓰지 말아야 하는 이유는?

1️⃣ 의미없는 백그라운드 이미지는 alt 값을 부여하지 않는 것이 좋겠다. 의미를 가지는 img 는 가능한 정확한 alt 값을 넣어주는 것이 좋다.

        <!-- 리뷰 : 백그라운드 이미지라 alt 비워두는게 좋을듯 -->
        <img src="./img/clock.png" alt="clock-transparent" class="img-clock" />
        <!-- 리뷰 : alt에 1만 시간의 법칙 -->
        <img src="./img/title.png" alt="title" class="img-title" />

2️⃣ 시멘틱한 html을 완성하자. p 도 좋지만 인용구를 뜻하는 q 를 적용해도 됐을듯

        <!-- 리뷰 : <q>사용해도 됐을듯 -->
        <p class="intro">"연습은 어제의 당신보다 당신을 더 낫게 만든다."</p>

3️⃣ input 에 label 을 달아주는 것이 좋다

        <!-- 리뷰 : 굳이 p태그로 감싸지 않아도 된다. -->
        <div class="input-line">
          <p>나는</p>
          <!-- 리뷰 : input에 label을 달아줘야 하나, 앞뒤로 설명하는 텍스트가 있어서 안써도 상관없을듯 하다. -->
          <!-- input에 대한 label을 준다면 class: a11y-hidden 을 적용시켜 디스플레이상 보이지 않게 -->
          <input type="text" placeholder="예)프로그래밍" />
          <p>전문가가 될 것이다.</p>

4️⃣ button 의 type 은 submit 으로 설정되어 있다. 타입 지정이 필요하다.

        <!-- 리뷰 : button의 타입 지정바람 -->
        <button class="btn-submit">

5️⃣ input 과 button 을 감싸는 form 태그가 있으면 좋겠다.

6️⃣ 의미없는 백그라운드는 가상요소로 처리하기도

        <div class="click-wrap">
          <!-- 리뷰 : 마찬가지로 굳이 클릭을 설명해줄 필요는 없을듯하다. alt="" -->
          <!-- 의미가 없으니 가상요소로 처리하는 거도 추천 -->
          <img src="./img/click.png" alt="click" class="img-click" />
        </div>

7️⃣ @import font 는 한두개만

/* 리뷰 : 폰트는 용량이 매우 크다. 1개나 2개 정도 사용하라 */
/* 그래서 자주 쓰이지 않는 폰트는 그냥 이미지로 처리하는걸 추천 */

8️⃣ dl 태그는 목록을 표현할 때 좋다.

9️⃣ 웹표준 검사와, css validator 검사는 필수다.

웹표준을 어기지는 않았는지 확인하는 과정
통과하면 최소한의 것을 지켰다는 의미가 되겠다.

<나의 html validator 검사 결과>
경고는 반드시 해야 되는건 아니지만 권장요소
section 태그 내에 h 태그가 없는 것을 경고하고 있다.

<css validator 검사 결과>

he W3C Markup Validation Service
W3C CSS Validator results for TextArea (CSS level 3 + SVG)

그 다음 진짜 화면에서 잘 보이는지 확인을 해보자

실제 내 아이폰에서는 버튼 내의 글자가 깨지고 있다

기본적으로 웹표준 검사와 기기 테스트는 꼭 하자.

강사님 버전

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1만 시간의 법칙</title>
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <main id="app">
        <h1 class="tit-law">
            <img src="images-law/title.png" alt="1만 시간의 법칙" class="img-tit">
        </h1>
        <img src="images-law/txt_subtitle.png" alt="연습은 어제의 당신보다 당신을 더 낫게 만든다." class="img-txt">
        <p class="txt-desc">
            <strong>1만 시간의 법칙</strong>은<br>어떤분야의 전문가가 되기 위해서는<br> 최소한 1만 시간이 필요하다는 법칙이다.
        </p>
        <p class="txt-wannabe">
            나는 <input type="text" placeholder="예)프로그래밍"> 전문가가 될것이다.
        </p>
        <p class="txt-time">
            그래서 앞으로 매일 하루에 <input type="text" placeholder="예)5시간"> 시간씩 훈련할 것이다.
        </p>
        <button type="button" class="btn-exc">나는 며칠 동안 훈련을 해야 1만 시간이 될까?</button>
        <section class="cont-result">
            <h2 class="blind">결과 확인</h2>
            <p class="txt-wannabe">
                당신은 <strong>프로그래밍</strong> 전문가가 되기 위해서
            </p>
            <p class="txt-time">
                대략 <strong>5110</strong> 일 이상 훈련하셔야 됩니다.
            </p>
        </section>
        <footer class="cont-footer">
            <img src="images-law/weniv.png" alt="weniv" class="img-footer">
            <p class="txt-footer">본 서비스 내 이미지 및 컨텐츠의 저작권은 주식회사 WeNiv에 있습니다.</p>
            <p class="txt-footer">
                수정 및 재배포, 무단 도용시 법적인 문제가 발생할 수 있습니다.
            </p>
        </footer>
    </main>
    <!-- <script>

        var myBtn = document.querySelector(".btn-exc");
        var myWannabeResult = document.querySelector(".cont-result .txt-wannabe strong");
        var myTimeResult = document.querySelector(".cont-result .txt-time strong");

        myBtn.addEventListener('click', function () {
            var myWannabe = document.querySelector(".txt-wannabe input").value;
            var myTime = document.querySelector(".txt-time input").value;

            myWannabeResult.innerText = myWannabe;
            myTimeResult.innerText = Math.round(10000 / parseInt(myTime));

        });

    </script> -->
</body>
@charset "utf-8";
.blind{
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}


html{
    background-color: #5B2386;
    text-align: center;
}

#app{
    padding:0 10px;
}
.tit-law{
    position:relative;
}
.tit-law::after{
    position:absolute;
    top:50%;
    left:50%;
    margin:-112px 0 0 -112px;
    display: block;
    content:'';
    width:225px;
    height:225px;
    background-image: url(../images-law/title_bg.png);
    background-size: 225px;
    z-index:-1;
}
.tit-law .img-tit{
    display:block;
    margin:194px auto 0;
    max-width:564px;
    width:100%;
}
.img-txt{
    display: block;
    width:100%;
    max-width: 486px;
    margin:125px auto 78px;
}
.txt-desc{
    position:relative;
    max-width:373px;
    font-size: 18px;
    line-height: 24px;
    margin:0 auto 102px;
    color:#fff;
}
.txt-desc strong{
    font-weight:700;
    font-size: 24px;
    line-height: 24px;
}

.txt-desc::before, .txt-desc::after{
    position:absolute;
    left:0;
    top:13px;
    display: block;
    content:'';
    width:42px;
    height:35px;
    background-image: url(../images-law/txt-left.png);
    background-size: 42px 35px;
}
.txt-desc::after{
    left:auto;
    right:0;
    background-image: url(../images-law/txt-right.png);
}
.txt-wannabe, .txt-time{
    color:#fff;
    font-size: 24px;
    line-height: 24px;
}
.txt-wannabe{
    margin-bottom:27px;
}
.txt-wannabe strong, .txt-time strong{
    font-weight: bold;
    font-size: 72px;
    line-height: 72px;
    vertical-align: -15px;
}
.txt-wannabe input, .txt-time input{
    width: 228px;
    height: 57px;
    margin:0 17px;
    border-radius: 7px;
    border: none;
    font-size: 24px;
    text-align: center;
}
.btn-exc{
    width:100%;
    max-width: 565px;
    height: 66px;
    margin:115px 0 147px;
    font-size: 24px;
    line-height: 24px;
    border-radius: 56px;
    font-weight: bold;
    background: #FCEE21;
    color: #5B2386;
    border: none;
}
.cont-footer{
    margin:257px 0 70px 0;
}
.cont-footer .txt-footer{
    font-size: 12px;
    line-height: 17px;
    color:#fff;
}
.img-footer{
    display: block;
    width:125px;
    height:25px;
    margin:0 auto 20px;
}

@media screen and (max-width:414px){
    .txt-wannabe input, .txt-time input{
        display: block;
        margin: 10px auto;
    }

    .txt-wannabe strong, .txt-time strong{
        display: block;
        margin: 10px auto;
    }

    .btn-exc{
        font-size:18px;
    }
}
[프로그래머스] 실패율 - Java
.NET: 더티(dirty) 읽기, 반복 불가능 및 판독 코드 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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