HTML & CSS

HTML - div, img / CSS - 선택자, css 적용방법

꿈다루 2020. 5. 26. 16:38

div

  • 'division'의 약자, '분할'을 뜻한다. 
  • 문서의 부분이나 섹션을 정의 
  • 명확한 의미가 없기 때문에 단순히 특정 범위를 묶는 (wrap)용도로 사용 => 묶인 부분들에는 CSS나 JS 적용  
<body>
  <div>
    <p></p>
  </div>
  <div>
    <div>
      <h1></h1>
      <p></p>
    </div>  
  </div>
</body>

 

img

  • HTML에 이미지를 삽입할 때 사용
  • src와 alt는 필수 속성
<body>
   <img src="./daru.png" alt="다루">
</body>
속성 의미 값
src (필수)이미지의 URL URL
alt (필수)이미지의 대체 텍스트(alternate)를 지정  

 

 

CSS 

div {
  font-size:20px;
  color:red;
}


선택자 {
  속성:값;
  속성:값;
}

 

선택자(selector)

  • HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)

1. 태그명으로 찾기

<div>
  <h1>제목</h1>
  <p>본문</p>
</div>



//CSS
h1{
  color : red;
}

p{
  color : blue;
}

 

2. 클래스로 찾기

    - 명확하게 원하는 요소를 찾기 위해 사용 

// class="title"은 글자색이 빨강색
.title {
  color:red;
}
// class="main-text"는 글자색이 파랑색
.main-text {
  color:blue;
}

<h1 class="title">제목1</h1>    // 적용
<h1>제목2</h1>                  // 미적용

<p class="main-text">본문1</p>  // 적용
<p>본문2</p>                    // 미적용

 

CSS 선언방식

1.태그에 직접 작성하기(인라인)

<div style="color:red;">태그에 직접 작성1</div>
<div style="color:red;">태그에 직접 작성2</div>

단점 : 같은 속성과 값을 반복적으로 적용할 경우 하나씩 다 찾아서 적용시켜야 하므로 비효율적

 

2.HTML에 포함하기(내장-embeded)

<head>
  <style>
    div{
      color:red;
    }
  </style>
</head>

<body>
  <div>HTML에 포함1</div>
  <div>HTML에 포함2</div>
</body>

 

3.HTML 외부에서 불러오기

  • CSS 코드를 완전히 분리하여 사용

  • 분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용 가능 

<head>
  <link rel="stylesheet" href="/css/main.css">
</head>

<body>
  <div>HTML에 외부에서 불러오기1</div>
</body>
<head>
  <link rel="stylesheet" href="/css/main.css">
</head>

<body>
  <div>HTML에 외부에서 불러오기2</div>
</body>

 

 => main.css

div {
  color:red;
}

 

저작자표시