Simple Is Best

3. CSS 파일에서 스타일링 본문

HTML & CSS

3. CSS 파일에서 스타일링

데이터미널 2021. 7. 2. 12:09

이전 포스팅에서는 HTML 태그 내에서 간단히 스타일링 하는 방법에 대해서 알아보았다. 

HTML 내의 style 속성을 활용하면 스타일링이 직관적이지 못하고 수정이 불편하다. 

 

본 게시글에서는 CSS 파일을 활용하여 스타일링을 진행한다. 
 <link href="css/main.css" rel="stylesheet">

1. HTML 의 <head> 태그에 위의 코드를 추가한다. 

  •  rel 속성 : 파일의 종류
  • href 속성 : css의 파일 경로

2. 이전 시간에 style 속성에서 적용했던 스타일들을 클래스를 작성해서 옮긴다. (CSS 파일 내) 

.profile {
    width: 10%; 
    display:block; 
    margin:auto;
}

3. HTML 파일 내에 적용할 태그 내에 클래스 명을 붙여준다. 

<img src="apple.png" class="profile">

 

 

2번 과정에서 .을 갑자기 왜 붙이는 거지? HTML 태그를 선택하기 위해!

CSS Selector

1. tag에 대해서 적용 (tag명{})

p{

}

2. class에 대해서 적용 (.class명{})

.class{

}

3. id에 대해서 적용(#id명{})

#id명{

}

 

CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?)

더보기

1. style >>>>>>>> 2. id >>>>> 3. class >> 4. tag

중요! 스타일링을 위해서는 CSS Selector 중 class를 사용하는 것을 권장! 

'HTML & CSS' 카테고리의 다른 글

6. 레이아웃 방법 - 2. display : inline-block  (0) 2021.07.02
5. 레이아웃 방법 - 1. float  (0) 2021.07.02
4. div 태그  (0) 2021.07.02
2. style = "스타일 명령"  (0) 2021.07.02
1. HTML 기본 골격 및 필수 태그와 속성  (0) 2021.07.02
'HTML & CSS' Related Articles more