[6주 2일차]HTML&CSS

 

 

HTML 작성 순서

1. 칸 나누어준다. (div 갯수 파악하고 작성한다.)

2. 부모안에 자식 갯수 파악하고 나누어준다.

3. 각 칸에 요소값 부여한다. (id or class)

CSS 순서

1. UI 구조분석한다(네모로 칸 구별함)

2. HTML 코드 생산

3. *(Universal Code)로 상속시킬 값 작성 (*는 전체에 상속됨)

4. Tag 선택

5. 부모 / 자식 관련 설정 부여

      5-1 부모의 경우 display, justify-content, align-items 값을 부여한다.

      5-2 자식의 경우 position, padding, margin으로 세부 위치 조정한다.

 

 

 

 

 

 

HTML

   <section id="first_section">
        <img src="img/미소.JPG" alt="">
        <h1>hi!</h1>
        <h2>안녕하세요!</h2>
        <button>Contact Me</button>
    </section>

    <section id="second_section">
        <h1>Service Offers</h1>
        <p>안녕하세요 저의 기술 스펙을 전달해드리겠습니다.</p>
        <div id="skill_box">
            <div class="skills">
                <div class="skill_icon">
                    <i class="fab fa-java"></i>
                </div>
                <h3>백엔드</h3>
                <p>설명해보까</p>
            </div>

            <div class="skills">
                <div class="skill_icon">
                    <i class="fab fa-css3-alt"></i>
                </div>
                <h3>백엔드</h3>
                <p>설명해보까</p>
            </div>

            <div class="skills">
                <div class="skill_icon">
                    <i class="fab fa-html5"></i>
                </div>
                <h3>백엔드</h3>
                <p>설명해보까</p>
            </div>

        </div>
        <div></div>
    </section>

    <section id="third_section">
        <h1>My work</h1>
        <p>project</p>
        <div class="catergory">
            <button>All<span>8</span></button> <!--span 특정 문자를 지정(나중에 꾸며줄라고)-->
            <button>Front-end<span>3</span></button>
            <button>Back-end<span>3</span></button>
            <button>Mobile<span>2</span></button>
        </div>
        <div id="project_box">
            <div class="boxes">
                <a href="#">
                    <img src="./img/coffee-gray.jpg" alt="">
                    <div class="text_box">
                        <h3>youtube site</h3>
                        <h4>clone coding</h4>
                    </div>
                </a>
            </div>
        </div>
    </section>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

 

 

CSS

 

/*first section 시작*/
#first_section{
    /*부모*/
    /*text-align:center (가운데 정렬 방법2)*/
    display: flex;
    flex-direction: column; /*세로로 펼치기 90도 틀어버린다 생각*/
    align-items: center;
    justify-content: center;
    color: white;
    /*자신*/
    background-image: url(img/체크1jpg.jpg);
    padding: 60px;


}
#first_section img{
    width: 250px;
    height: 250px;
    border: 3px solid white;
    border-radius: 50%;
}
#first_section>button{ /*button은 인라인 요소라 상속 안됨*/
    background-color: transparent; /*바탕화면 투명하게 설정*/
    color: white;
    padding: 2px 5px;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 5px;
}

/*first section 끝*/


/*second_section 시작*/
#second_section{
    /*부모*/
    text-align: center;

    /*자신*/
    padding: 10px;

}
#skill_box{
    /*부모*/
    display: flex;
    justify-content: space-evenly;  /*n/1되어서 정렬됨*/
    align-items: center;

    /*자신*/
   /* border: 1px solid red;*/
    margin: 20px 0;
}
.skills{
    /*border: 1px solid green;*/
    padding: 20px;
}
.skill_icon{
    /*부모*/
    font-size: 70px;
    color: black;
    line-height: 170px; /*글자 세로 중앙정렬 높이 넓이와 크기 맞춤*/
    text-align: center; /*글자 가로 중앙정렬*/

    /*자식*/
    margin: 0 auto; /*위아래는 0 좌우는 자동으로 마진을 줌(블럭 요소만 가능)*/
    /*자기 자신이 속한 공간에서 남은 공간(마진)을 auto를 이용하여
     반으로 나눠 중앙으로 정렬 시킬수 있다. (자기 스스로 정렬)*/
    width: 170px;
    height: 170px;
    /*border: 1px solid blue;*/
    border-radius: 50%;
    transition: all 2s;

}
.skill_icon:hover{
    color:rgb(246, 78, 106);
    transform: /*rotate(-30deg)*/ scale(1.5);
}

/*second_section 끝*/

/*third_section 시작*/
#third_section{
    /*부모*/
    text-align: center;
    /*자신*/
    padding: 10px;
}
.catergory button{
    /*부모*/   



    /*자신*/
    font-size: 20px;
    padding: 0 5px;
    margin: 0 10px;
}
.catergory button span{
    /*자신*/
    background-color: red;
    border-radius: 50%; /*배경 원으로 생성*/
    display: inline-block; 
    /*정사각형으로 먼저 만들기 위해 인라인 블록으로 전환*/
    /*버튼은 인라인이기때문에 width height 안됨 그렇기때문에 블럭으로 바꿔줌*/
    width: 25px;
    height: 25px;
    line-height: 24px; /*글자 세로 중앙정렬으로 맞춤*/

    /*이동*/
    position:relative;
    top:-20px; 
    left: 5px;

    /*투명도 조절*/
    opacity: 0;
    transition: all 400ms;

}

.catergory button:hover span{
    top:0px;
    opacity: 1;
}


/*third_section 끝*/


/*project_box 시작*/
#project_box{
    /*부모*/
    display: flex;
    justify-content: flex-start;/*왼쪽 정렬*/
    align-items: center; /*세로중앙정렬*/


    /*자신*/
    padding: 10px;
}
.boxes{
    position:relative; /*앱솔루트의 기준*/
    width: 250px;
    height: 250px;
    border: 1px solid red;
    overflow: hidden;

}
.boxes a{
    display: block;
}
.boxes a img{
    max-width: 100%;
    max-height: 60%
}
.text_box{
    border: 1px solid red;

    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*background-color: rgba(0,0,0, 0.5); 
    백그라운드만 사라지게 하고싶으면 background에 opacity 사용*/
    background-color: black;
    opacity: 0;
    transform: translateY(10px);
    transition: all 500ms;
    color: white;

}

.text_box:hover{
    opacity: 0.8;
    transform: translateY(0px);
}
.text_box h3:after  /*가상 삽입*/
{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: white;
    position:relative;
    left:50%;
    transform: translateX(-30px);
    margin: 3px 0;
}
/*project_box 끝*/

 

 

 

 

 

 

 

 

 

 

 

정렬하는 명령어 정리