Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

비전공 프론트엔드 개발자

21-12-9 스터디 내용 정리 및 코드리뷰 본문

카테고리 없음

21-12-9 스터디 내용 정리 및 코드리뷰

JJ_hyun 2021. 12. 11. 02:20

첫번째 인덱스에서 아주 탈탈 털렸다. 

필요없는 코드의 남용과 인라인 안에 블록라인이 들어있고 등등.. 아주 난리가 난리가 아니였다. 

그래서 다시 작성하게 된 index_2 !!

재현쌤한테 리뷰를 받지는 못했지만 스터디 그룹의 동급생에게 설명도 해보고, 각자 코드에 대해

토론을 해보는 시간을 가져보았다. 

<!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>리뷰를 기반으로 다시 만들어보기</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <link rel="stylesheet" href="../CSS/test3.css">
</head>
<body>
     <header class="header_contents">
        <img src="../img/title.png" alt="1만 시간의 법칙" class="header_first_img">
        <img src="../img/time.png" alt="시계" class="header_second_img">
    </header>

    <main class="main_contents">
        <img src="../img/txt.png" alt="연습은 어제의 당신보다 당신을 더 낫게 만든다." class="main_first_img">
        <div class="main_contents_position">
            <img src="../img/txtmark.png" alt="큰따옴표" class="main-second-img">

            <p class="main-first-sentence">
                <strong class="main-first-sentence-strong">1만 시간의 법칙</strong>은 <br>
                어떤 분야의 전문가가 되기 위해서는 <br>
                최소한 1만 시간의 훈련이 필요하다는 법칙이다.
            </p>
        </div>

        <p class="main_fir_p">
            나는
            <label for="first-input"></label>
            <input type="text" placeholder="예)프로그래밍" id="first-input" >
            전문가가 될 것이다. <br>
        </p>

        <p class="main_sec_p">
            그래서 앞으로 매일 하루에
            <label for="second-input"></label>
            <input type="number" placeholder="예)5시간" id="second-input">
            시간씩 훈련할 것이다.
        </p>

        <button type="button" class="btn_result">나는 며칠 동안 훈련을 해야 1만 시간이 될까?</button>
        <img src="../img/Frame11.png" alt="손" class="checked">
        <p class="result_first_data">
        당신은 <span class="first_input_result">프로그래밍</span>전문가가 되기 위해서</p>
       
        <p class="result_second_data">대략
            <span class="second_input_result">5000</span>
        일 이상 훈련하셔야 합니다!:)
        </p>

        <button class="main_tranning" type="button">훈련하러 가기 GO!GO!</button>
        <button class="main_share" type="button">공유하기</button>
    </main>

    <footer>
        <img src="../img/weniv.png" alt="위니브로고" class="footer_weniv">
        <small class="footer_small">
            ※ 본 서비스 내 이미지는 콘텐츠의 저작권은 주식회사 WeNiv에 있습니다. <br>
            수정 및 재배포, 무단 도용 시 법적인 문제가 발생할 수 있습니다.
        </small>
    </footer>
</body>
</html>

 

일단 코드의 양이 많이 줄었다. 첫번째 index(이하 index)의 리뷰를 같이 들었던 동급생이라 

문제점을 같이 기억하고 있어서 다행이였다. 

.

.

 

 

CSS 코드

@charset "utf-8";

body {
    background-color: #5B2386;
    color:#fff;
    font-size: 24px;
}
header, main, footer {
    text-align: center;
}
/* 마진을 주고보니 바디의 상단이 뜸, display:inline-block으로 해결.  */

 .header_contents {
    width: 100vw;
    height: 265px;
    text-align: center;
    margin-top: 125px;
    display: inline-block;
}

.header_contents .header_first_img {
    width: 564px;
    height: 112px;
}

.header_contents .header_second_img {
    display: block;
    width: 261px;
    height: 265px;
    margin:0 auto 0;
    transform: translateY(-63%);
}
/* header의 margin-top에 125px을 주었는데 이게 아래 컨텐츠의 영향을줌.
가상요소를 사용하지 않고, html로 사진을 두개 띄워서 display:block을 사용하여 세로배치를 하고, transform의 translate 속성으로 위치를 조정해 주고 보니, header의 높이는 컨텐츠를 두개를 합친 대략 951px정도가
되어버렸다. 왜냐면 Y축으로 -63퍼센트롤 줘서 컨텐츠는 맞췃지만 컨텐츠 크기 자체는 남아있음. --> 해결방법은 그냥 header의 높이는 강제로 지정해버렸다. 재현쌤이 하지 말라는 방법인데, 만약 이렇게 하지 않을경우 main부터 계속 상단의 값을 계산하면서 레이아웃을 잡아야하는 번거로움이 생긴다. position도 같은 상황일꺼라 생각이 든다.  */

 .main_contents {
    width: 100%;
    height: auto;
}

.main_contents .main_first_img {
    margin: 46px 0 156px;
}

.main_contents .main_contents_position .main-second-img {
    width: 600px;
}

.main_contents .main_contents_position
.main-first-sentence {
    transform: translateY(-110%);
    line-height: 40px;

}

.main_contents .main_contents_position
.main-first-sentence .main-first-sentence-strong {
    font-size: 40px;
}

/* position:absolute 를 쓰려고 했으나 순식간에 레이아웃을 다 변형시켜버림, 그래서 그냥 translateY로 위치를 맞춰줌.  */
/* ______________________________________________________________ */
 .main_contents .main_fir_p {
    margin: 0 0 25px;
}

.main_fir_p input::placeholder,
.main_sec_p input::placeholder{
    color:#BABCBE;
    font-weight: bold;
}
    /* ::placeholder 가상요소가 있다고 처음으로 알게됨. color는 input으로 주고 이 가상 요소는 사용자가 입력하기 전 보여주는 텍스트이다. 글자색상, 글자체 등등 변경이 가능하다.  */


 .main_contents .main_fir_p #first-input,
.main_contents .main_sec_p #second-input {
    width: 228px;
    height: 40px;
    font-size: 24px;
    padding:15px 20px;
    border: none;
    border-radius: 7px;
    color:black;
}

.main_contents .btn_result {
    margin-top: 115px;
    background-color: #FCEE21;
    width: 565px;
    height: 66px;
    border: none;
    border-radius: 56px;
    font-size: 24px;
    color: #5B2386;
    font-weight: bold;
    position: relative;
}

 .main_contents .btn_result::after {
    content: '';
    display: block;
    background-image: url(../img/Frame11.png);
    width: 64px;
    height: 72px;
    background-position: left;
    /* transform: translateX(850%); */
    /* position: relative;
    left: 80px;
    top:50px; */
 }
/*    이 코드는 가상요소로 이미지를 띄워서 position으로 위치를 옮기려 했으나 button의 중앙정렬을 해치기 때문에 포기했다.
 */


 .btn_result+.checked {
    position:relative;
    top:50px;
}

.main_contents .result_first_data {
    margin: 147px 0 17px 0;
}

.main_contents .result_second_data {
    margin-bottom: 127px;

}

.main_contents .result_first_data .first_input_result,
.main_contents .result_second_data .second_input_result {
    font-size: 50px;
    font-weight: bold;
    color: white;
    padding:0 10px;
}

/* javascript로 결과값을 받을 span태그의 css요소는 대충 했으나, 상하의 중앙정렬에서 막힘. 원본 페이지를 보면 결과값을 받는 태그는 아래로 조금 내려간 형태이나, 구현하면 부모태그의 레이아웃이 바껴버림. */



.main_contents .main_tranning {
    width: 356px;
    height: 66px;
    background-color: #FCEE21;
}

.main_contents .main_share {
    width: 191px;
    height: 66px;
    background-color: #fff;
}

.main_contents .main_tranning, .main_contents .main_share {
    border: none;
    border-radius: 56px;
    font-size: 24px;
    font-weight: bold;
    color:#5B2386;
    margin: 0 9px 0 0;
}

footer {
    margin-top: 130px;
}

footer .footer_weniv {
    width: 125px;
    height: 25px;
}

footer .footer_small {
    margin-top: 20px;
    font-size: 12px;
    display: block;
    margin-bottom: 100px;
}

전에도 한번 작성했었지만 설명을 위해서 한번 더 복붙을 했다. 

사실 특별히 어렵거나, 이해못하는 코드는 없었지만 토론?을 하면서 새롭게 알게된 사실이 있다.

 

가상요소를 사용할때 이미지태그에는 사용할 수 없다는것..!! 

너무 신기했다. 

1만시간의 법칙.jpg 파일 뒤에 ::after 가상요소를 사용해서 시계.jpg 를 넣고

위치를 조정하려 했는데 자꾸 가상요소가 안나오길래 내가 잘못쓴줄만 알고 가상요소로 구형하고자 근 30분은 넘게

고통받았다 결국 다른 방법으로 구현을 했는데 이유를 알고보니 목막힘이 시원하게 내려간 느낌이였다. 

( 어쩐지,, 버튼 뒤에 손가락.jpg 는 잘 나왔었다 ) 

.

.

두번째는 ::placeholder 가상요소 ! 

 

스터디 친구에게 설명을 해줬는데 역시.. 나만 모르고 있었던게 아니였어!!! 

input 의 text 요소안에 입력을 하였을때 글자색이 변하게 하고 싶었는데 그걸 가능케 하는게 바로 이 태그!!

좋은것을 알려줬다는 뿌듯함이 5분은 기분을 좋게 해주었다.

.

.

서로의 코드를 뜯어보고 설명하느라 두시간은 훌쩍 지나가 버린것같다. 

이후에 스터디의 방향과 어떤 목표를 갖고 할지 등등 정하면서 검색하고 다음시간에 할 과제 등등 을 정하다보니

첫 스터디는 무려 4시간을 넘기는 대업을 기록했다. 

다음 스터디는 21-12-17 16시 이다. 

.

.

 

1. 클론 코딩

2. 서로한테 좋은 영향을 줄 수 있는 글귀나 방향성 개발자가 되면서 꼭 알아야 하는것 혹은

기초를 확립시켜줄 수 있는 자료? 등등을 서로 조사해서 발표를 하기로 했다.

 

클론코딩은 사실 조금은 자신 있는 분야다. javascript는 구현하지 못하지만..

문제는 2번인데 사실 감이 안잡히는데 가상요소 or position vs translate vs margin auto ( 즉 중앙정렬 )에

관해서 조금은 알아보고 싶었다. 어떤 상황에서 쓰는게 좋은지 등등 일단 해보자! 화이팅!!!