[HTML & CSS] HTML 기본개념 익히기 2

HTML Element

<태그이름>컨텐츠</태그이름>

위의 한 묶음을 HTML Element라고 한다.

각각의 element마다 모양과 쓰임새가 다르다.

즉 HTML은 이 element들의 종합라고 할 수 있다.

예제

index.html

<body>
  <h1>Hello!</h1>
  <h2>Smaller Hello!</h2>
  <p>Paragraph</p>
  <img src="https://live.staticflickr.com/8046/8118532145_0a85320808_n.jpg" />
</body>

실행 화면

위의 실행 화면으로 보아 각각의 element가 어떤 역할을 하는지 알 수 있다.

h1 : 큰 글자
h2 : h1 보다 조금 작은 글자
p : 문장
img : 이미지 삽입

Attribute

attribute는 element의 추가적인 속성을 관리하기 위한 요소이다.

element마다 사용할 수 있는 속성이 모두 다르다.

<img
  width="100px" <- attribute
  src="https://live.staticflickr.com/8046/8118532145_0a85320808_n.jpg" <- attribute
/>

Style Attribute

element의 디자인을 정해주는 속성이 style이다.

<p style="color: red;">Paragraph</p>
<!-- style attribute -->

이 외에도 글자 크기를 조절하는 style="font-size: 20px;" 등이 있다.

CSS의 필요성

그렇다면 모든 태그마다 스타일 속성을 설정해 html을 작성해야하는 것일까?

만약 그렇게 한다면 element가 많은 페이지의 경우 정말 번거로워 질 것이다.

그렇기 때문에 한 번에 스타일 적용이 가능한 CSS라는 것이 필요한 것이다.

CSS 작성법

HTML 문서 안에 작성

<head></head> 태그 안에 <style></style> 태그로 작성해주는 방법이다.

<head>
  <style>
    .myColor {
      color: red;
    }
 
    .mySize {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p class="myColor">red 1</p>
  <p class="myColor mySize">red 2</p>
  <h1 class="myColor">Hello!</h1>
</body>

위에서 myColor는 클래스 명으로 element의 class 속성에 지정해주고 싶은 클래스 명을 넣어주면 디자인이 반영된다.

만약 여러 클래스를 지정해주고 싶다면 큰 따옴표 안에 모두 적어주고 클래스명들의 사이를 공백으로 구분을 해주면 된다.

위의 실행 화면은 아래와 같다.

이러한 구성이 중요한 이유는 만약 myColor 클래스를 가진 모든 element들의 색을 바꾸고 싶을 때, style 태그안에 적어 둔 color만 바꿔주면 한 번에 바꿀 수 있기 때문이다.

보통 HTML 문서 안에 style을 모두 작성할 경우 길이가 너무 길어지기 때문에 따로 파일을 만들어 작성한다.

CSS 파일 안에 작성

따로 파일을 만들어 디자인을 지정해줄 때 주의할 점은 head 태그 안에 꼭 작성한 CSS 파일을 연결해주어야 한다는 것이다.

<link rel="stylesheet" href="style.css">

위의 한 줄을 적어주면 된다.

index.html

<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <p class="myColor">red 1</p>
  <p class="myColor mySize">red 2</p>
  <h1 class="myColor">Hello!</h1>
</body>

style.css

.myColor {
  color: red;
}
 
.mySize {
  font-size: 30px;
}

이렇게 두 파일로 나눠서 작성을 해도 화면은 전과 같다.

Event

사용자가 웹페이지 내에서 클릭을 하거나, 스크롤을 할 때 이벤트가 발생되게 된다.

그런 이벤트를 인식하기 위한 코드를 속성에 넣어줄 수가 있다.

<button type="button" onclick="javascript:alert('clicking');">Click</button>

실행 화면

element마다 발생 가능한 이벤트가 다르지만 우선 button을 예로 들자면 눌렀을 때 발생하는 onclick 이벤트가 있다.

버튼을 누르면 onclick 이벤트가 발생해 alert('clicking')이라는 javascript 코드가 실행되고 clicking이라는 알림창이 뜨게 된다.

이 외에도 focus나 scroll 등의 이벤트들이 있다.