HTMLベース

33860 ワード
テキストリンク
3月17日内容整理
<!--외부스타일 초기화하여 한번에 초기화 할수 있지만 초보들은 다 초기화 하여 설정을 첨부터 하는게 어려움-->
<!--태그안에 초기화 하며 한번에 통괄하여 적용하기 어려움-->
<!--스타일은 제일 안쪽에 있는 후손에 적용한 스타일을 먼저 적용한다.
예)  <h1><a href="#">html/css</a></h1>  h1과 a 모두 스타일 주었을때 a를 먼저 적용함-->
<!--W3C 스쿨에 가면 최신의 스타일을 찾을수 있으므로 꼭 확용하여 쓰기-->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">

  <title>스타일연습</title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }

    body{
      /*width값이 12로 나누어 떨어지는 12의약수로 설정하는게 도움이 됨*/
      width: 960px;
      margin: 0px auto;
    }

    li{
      list-style: none;
    }

    a{
      text-decoration: none;
      color: black;
    }

    img{
      border:none;
    }

    .test{
      color: brown;
      text-decoration: line-through;
      font-family: 궁서체, sans-serif;
      font-style: italic;
    }

    #test1{
      background-color: aqua;
      /*display: none; 보이는거를 숨기는 역할을 한다.*/
      /*overflow: hidden; 은 넘치게 되는부분은 숨기는 기능이다.*/
    }

    /*a 는 인라인 레벨 태그라서 너비와 높이값을 가질수 없다.
    이때 너비와 높이를 같게 하고 싶으면 display: inline-block; 으로 설정하면
    너비와 높이를 가질 수 있다.*/

    h1>a{
      display: inline-block;
      width: 400px;
      height: 100px;
      background-color: yellow;
      border: red;
      letter-spacing: 5px;
    }

  </style>
</head>
<body>
  <div>
    <h1><a href="#">html/css</a></h1>
    <h1 class="test">자바</h1>
    <h1 id="test1">데이터베이스</h1>
    <h1 class="test">자바스크립트</h1>
  </div>
</body>
</html>
位置
1)親要素は他の値と一致する必要があるため、相対的に設定します.
2)親要素は、受信時のwidth、height値を設定します.
3)サブエレメントが絶対です.
<!--display:none 은 내용과 영역모두 없애는 것
visibility: hidden; 은 내용은 없애는데, 영역은 그대로 지정해준다.-->
<!--overflow:auto; 이거는 넘치는 내용에 대해서 사이즈 보고 자동적으로 
넘치는 부분에 대해서 스크롤을 만든다.-->
<!--position은 위치를 잡는건데-->   
<!--1)부모요소는 relative 다른값하고 어울려야 하니까 -->
 <!--2)부모요소는 받드시 width,height 값을 설정한다.
3)이때 자식요소는 absoulte-->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>스타일연습01</title>
  <link href="./css/basic.css" type="text/css" rel="stylesheet">

  <style>
    
    .top{
      width: 960px;/*지울부분 있어도 그만 없어도 그만*/
      height: 150px;
      background-color: aquamarine; /*지울부분*/
      margin-bottom: 20px;
    }

    .topNav{
      background-color: greenyellow;
    }

    .topNav>ul{
      text-align: right;
    }

    .topNav li{
      display: inline-block;
    }

    .topNav li>a{
      display: inline-block;
      padding: 5px 10px;
    }

    .topNav li>a:hover{
      background-color: blue;
      color: white;
      border-radius: 5px;
    }

    .log{
      background-color: coral; /*지울부분*/
      text-align: center;
    }

    .logo>img{
      display: inline-block;
      width: 30px;
      height: 40px;
      margin-right: 10px;
    }

    .logo>h1{
      display: inline-block;
    }

    .mainMune{
      background-color: greenyellow;
      margin-top: 10px;

    }
    .mainMune>ul{
      text-align: center;
    }

    .mainMune li{
      display: inline-block;
    }
    .mainMune li>a{
      display: inline-block;
      padding: 10px 20px;
      font-weight: bold;
      font-size: 14pt;
      letter-spacing: 5px;
}
    .mainMenu li>a:hover{
      color :blueviolet;
    }


    .content{
      width: 960px;
      height: 600px; /*지울부분*/
      background-color: antiquewhite; /*지울부분*/
      margin-bottom: 20px;
    }

    .footer{
      width: 960px;
      height: 200px;
      background-color: mediumseagreen;
    }

  </style>

</head>
<body>
  <div class="top">
    <div class="topNav">
      <ul>
        <li><a href="#">로그인</a></li>
        <li><a href="#">회원가입</a></li>
        <li><a href="#">사이트맵</a></li>
      </ul>
    </div>
    <div class="logo">
        <!--width="50px" height="50px" 옆에쓴 이거는 임시로 사이즈조정-->
        <img src="./images/big_Tree01.jpg" width="50px" height="50px"> 
        <h1>자바기반 클라우드 융합 개발자</h1>
    </div>
    <div class="mainMenu">
      <ul>
        <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 class="content">
    <h1>이미지 들어갈 부분</h1>
    <div class="aa">
      안녕하세요.
    </div>
    <div class="bb">
      최빛나 입니다.
    </div>

  </div>
  <footer class="footer">
      2022 최빛나
  </footer>
  
</body>
</html>
Modern Java in Action #4
デザイン学習日記