티스토리 뷰

FrontEnd

CSS 적용 오류, Indentation오류 해결하기

chaewonni 2023. 3. 14. 22:20

개발을 하면서 꼭 거쳐야 하는 과정이 바로 '오류 해결'입니다. 개발 중에 예기치 못한 오류가 종종 발생하기도 하는데요, 오늘은 이러한 오류나 에러들을 해결해보도록 하겠습니다.

 

 (개발환경 Visual Studio Code 사용)

 

1. CSS적용 오류

 css란 html 파일을 시각적으로 꾸며주는 역할을 하는 언어인데요. 이런 css 적용법으로는 크게 두가지가 있습니다. 첫번째는 html 문서 속 태그 안에서 style 속성을 작성하는 방법(인라인 스타일), 두번째는 html 파일 전체의 스타일을 하나의 css파일을 만들어 변경하는 방법(외부 스타일)입니다. (사실 html 파일의 <head> 요소에 <style>요소로 사용하여 적용하는 내부 스타일 방법도 있지만 여기서는 넘어가도록 하겠습니다.)

html 문서 속에서 css작성(인라인 스타일)

css 파일을 따로 만들어 적용(외부 스타일)

css적용한 버튼

 만약 모든 css적용을 인라인 스타일로 html파일 속에서 작성한다면, 자칫하면 html파일의 코드가 너무 복잡하고 길어질 수 있습니다. 그래서 css파일을 따로 만들어 적용시키는 외부 스타일 방법을 주로 사용하고 있는데요. 그런데 개발을 하다보면 같은 요소의 css적용을 html 파일과 css파일 모두에서 적용시키는 일이 종종 생깁니다. 이럴 때 생기는 오류가 바로 css적용 오류입니다.

 분명 css파일에서 색깔, 크기, 위치 등의 코드를 수정했는데도 막상 파일을 열어보면 css수정이 적용되지 않는 일이 발생하는 것이죠. 

 

예를 들어, 위의 버튼 색깔을 회색으로 바꾸고 싶어 css파일의 코드를 아래와 같이 수정했다고 합시다.

그런데 파일을 열어보면 버튼의 색깔이 회색으로 바뀌지 않은 것을 볼 수 있습니다. css적용이 되지 않았다는 것이죠. 

css적용이 안됨

html파일을 살펴보았더니, html파일 속에서 인라인 스타일로 작성된 css에서 버튼의 색깔이 아직 갈색(#7E6F63)으로 적용돼있음 볼 수 있습니다.  

html파일에서 인라인 스타일로 작성한 css코드를 아래와 같이 수정하였더니,

css적용 잘됨

버튼의 색깔이 회색으로 잘 바뀌었음을 확인할 수 있습니다. 

 

 html파일에서 작성한 css가 css파일에서 작성한 css보다 더 강력한 힘을 가지고 있는 거 같습니다.  그래서 아무리 css파일에서 코드를 수정해도, 적용이 되지 않는 것이죠. 

 따라서 개발을 하실 때, css파일 속 코드를 아무리 수정하여도 css가 적용이 되지 않는다면, html파일에서 이미 같은 요소의 css적용이 따로 되지는 않았는지 살펴보는 것이 중요하겠습니다.

 

※팁: F12

 위와 같은 오류를 좀 더 쉽게 살펴볼 수 있는 방법이 있습니다. 바로 F12 기능키 (개발자도구)를 사용하는 것인데요.

F12를 눌렀을 때

F12 키를 누르면, 화면 오른쪽에 해당 html의 코드들이 뜨는 것을 확인할 수 있습니다. 

좀 더 확대해서 보면, 상단은 html파일의 코드이고 하단은 css파일의 코드임을 확인할 수 있는데요. css파일의 코드를 잘 보면 position:absolute; background-color:~~;, border:~~; 코드에 줄이 쳐져 있는 것을 볼 수 있습니다. 바로 위의 html파일에서 position:absolute; background-color:~~;, border:~~; 코드들을 따로 작성해 주었기 때문에  css파일의 코드들은 적용이 되고있지 않다는 것을 보여주는 것이죠.

이렇게 F12 개발자 도구 키를 이용하면 css적용 오류를 비롯한 다양한 오류들을 보다 쉽게 확인하고 알아낼 수 있습니다.

 

 

2. Indentation(들여쓰기) 오류

 이번에는 아주 간단하면서도 아주 중요한 Indentation오류를 같이 살펴보도록 하겠습니다. 

 파일을 열었더니 "KeyError"가 발생하면서 아무것도 보이지 않는 현상이 발생했습니다. 

짙은 하늘색으로 몇번째 line에서 오류가 발생했는지 알려주고 있는데요,

해당 line으로 가서 확인해보았더니, return True의 indentation이 잘못되었음을 확인할 수 있습니다. 

따라서 이와 같이 indentation을 수정해주었더니

 

원했던 화면이 잘 뜨는 것을 확인할 수 있습니다.

 

개발을 하실 때 Indentation(들여쓰기)도 잘 신경써야 하겠습니다.

 

 

 오늘은 개발을 하면서 생기는 수많은 오류 중 두가지를 살펴보았습니다. 간단하면서도 아주 중요한 오류들인데요. 

오류를 겪고, 이를 직접 해결해보는 과정은 개발 능력 향상에 큰 도움이 된다고 생각합니다.

모두들 오류 잘 해결하셔서 행복한 개발하시길 바랍니다~~! 

 

 

이 글은 이화여자대학교 '오픈 sw 플랫폼' 강의 프로젝트 팀의 기술 블로그 [디버깅] CSS 적용 오류, Indentation오류 해결하기 (tistory.com) 에서 제가 작성한 글을 저의 개인 블로그로 가져온 것입니다.^^

'FrontEnd' 카테고리의 다른 글

미디어쿼리 (media query)를 이용하여 반응형 웹 만들기  (0) 2023.03.15
javascript/ 등록한 사진들을 해당 화면에서 바로 확인할 수 있도록 구현하기  (0) 2023.03.14
html/css 깔끔한 파일선택 버튼 만들기  (1) 2023.03.14
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함