클래스(CLASS) 를 알고 싶다면? | HTML & CSS 시리즈 011

클래스는 코딩할떄마다 무조건 등장하는 것 같다.

 

클래스 사용법이 뭔데???

 

이전 시리즈010 에서 사용했던 코드를 들고왔다.

 

1. 위 사진과 같이 스타일 태그를 쓴다.

2. 클래스 이름을 적는다. ex) .big-blue-text (이때 . 을 잊지말자!)

3. { 괄호 안에 스타일 속성,값을 입력해주고 } 로 닫아준다.

4. 클래스로 스타일 해주고 싶은 곳을 가서 태그 부분에 class="클래스이름" 을 적어준다.

 

*해당코드에서는 h1 태그를 클래스를 이용해 스타일 적용시켰는데 

아래 사진과 같이 알맞게 파란색깔 텍스트, 64픽셀, 텍스트 위치 중앙 으로 잘 출력 된 것을 확인 할 수 있다.

 

---

 

텍스트는 알겠는데 이미지에 클래스 적용은 어떻게 하는건데?

<img src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&f
name=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F257BAA4E5752C32C1D" class = "one">

<img src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&f
name=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F257BAA4E5752C32C1D" class = "two">

위에 작성된 코드 처럼 이미지 삽입후 class= "클래스 이름" 을 작성해주면 된다.

+추가로 위에 작성코드는 각각의 이미지마다 다른 클래스를 적용하여 주었는데

만약 같은 클래스로 적용하고 싶다면 뒤에 클래스 이름을 동일시 해주면 된다.

 

 

 

텍스트는 태그 앞에! 이미지는 뒤에? 라고 생각하면 될 것 같다.