dukDukz

2021.03.08 경일 홈페이지 앞 부분 작성 본문

웹 개발/HTML 과 CSS

2021.03.08 경일 홈페이지 앞 부분 작성

헤일리_HJ 2021. 3. 8. 10:58

1. 첫번째 수업

.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    
    <div>김승원</div>
    <div>김동철</div>
    <div>이우철</div>
    <div>이혜준</div>
    <div>도정현</div>
    <div>허유영</div>
    <div>윤세호</div>

    
        인라인 형태 : 작성한 그 만큼만 공간을 차지한다.  span
        블록 형태 : 한 줄을 다 차지한다.  div
    
  </body>
</html>

**** inline 설명 참고 aboooks.tistory.com/85

.css

*{margin: 0; padding: 0;}


div{
    background-color: red;
    width: 200px;
    height: 200px;
    /*display: inline;    /* inline 은 css가 잘 안먹힌다*/
    /*display: inline-block; /*inline-block은 먹힘
    float: left; /*강제로 옆으로 갖고옴. 간격을 없애고 붙여줌
}


#a{
    background-color: red;
}

.a{
    background-color: cornflowerblue;
}

 


[선택자 class와 id]

class 와 id 의 차이점은? 없다!
id는 무조건 하나
class는 여러가지 작업할때 이름 중복 가능

ID? CLASS?
레이아웃을 작성할때는 ID를 많이 쓰는 편 (암묵적인 룰/ 웹 표준)

 

 

2. 두번째 수업

 

[margin과 padding]

 

1. 마진: 외부에 영향

margin: 10px 10px; 상하 좌우

           10px 20px 30px 40px

           top right bottom left

 

2. 패딩: 내부에 영향 사방으로 10px씩 늘어난다.

 

heiget, width: 20px;

padding: 10px;

--> 각각 30px 로 늘어남

이미지를 넣을 때 많이 쓴다.

 

+)

 margin: 0 auto;      /*위 아래는 마진 없고 가운데 정렬한다*/

 

 

 

 

3. 세번째 수업

 

main.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1 class="logo">
             <a href="#">
                 <img src="./img/logo.png"></a>   
            </h1>

            <div class="gnb">
                <ul class="menu">
                    <li><a href="#">학교소개</a></li>
                    <li><a href="#">교육과정</a></li>
                    <li><a href="#">취업정보</a></li>
                    <li><a href="#">커뮤니티</a></li>
                    <li><a href="#">상담신청</a></li>
                </ul>
            </div>
            
        </div>

        <div id="container">
            <div id="visual">
                main flash
            </div>
            <div id="contants">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        </div>
        <div id="footer">
            copyright &copy; All reserved
        </div>
    </div>
</body>
</html>

 

main.css

/*CSS style sheet*/

*{margin: 0; padding: 0;}


ul,li{
    list-style: none;       /*불렛포인트 제거*/
}

#wrap{
    width: 100%;
}

a{
    text-decoration: none;
    color: #333;
}

a:hover{
    text-decoration: underline;
}

#header{
    width: 1200px;
    margin: 0 auto;      /*위 아래는 마진 없고 가운데 정렬한다*/
    height: 102px;
    /*border-bottom: 1px solid #333;*/
}

.logo{
    /*float: left;*/
    display: inline-block;
    margin-top: 20px;
}

.gnb{
    float: right;
}

.gnb>ul>li{
    float: left;
    display: inline-block;
    padding: 40px 0;
    width: 120px;
}

.gnb>ul>li>a{
    font-size: 19px;
    color: #004385;
    font-weight: bold;
}

.menu{
    float: right;
    margin: 10px ;
}

.menu > li{
    float: right;
    margin-right: 30px;
}


#container{
    width: 1200px;
    margin: 0 auto;
}

#footer{
    width: 1200px;
    margin: 0 auto;
    background: yellow;
}

 

결과값

 

 

****

display: inline-block;   이란?

m.blog.naver.com/PostView.nhn?blogId=leesd88&logNo=220682157303&proxyReferer=https:%2F%2Fwww.google.com%2F

'웹 개발 > HTML 과 CSS' 카테고리의 다른 글

2021.03.16 회색 네모 박스 위치 조정  (0) 2021.03.16
2021.03.15 경일 아카데미 홈페이지 만들기  (0) 2021.03.15
2021.03.11 경일 홈페이지_공동 코드 작성  (0) 2021.03.11
2021.03.10 경일 홈페이지_ 뒷 부분 까지 작성 / 새로운 CSS  (0) 2021.03.10
2021.03.09 경일 홈페이지 앞 부분 안보고 작성해보기  (0) 2021.03.09
'웹 개발/HTML 과 CSS' Related Articles more