-
CSS_생활코딩 : 웹페이지에 CSS를 삽입하는 2가지 방법Language/HTML&CSS 2022. 7. 25. 23:00
생활코딩 학습 내용 복습_4일차
- 날짜 : 2022.07.25.월
- 학습내용 : WEB 2
1. CSS의 기본 : 웹페이지에 CSS를 삽입하는 2가지 방법.
■ 그냥 참고 : <!-- , --> : <!-- 와 --> 사이에 어떤 태그가 적히더라도, 웹 상에는 표현되지 않는다.
<!-- <h1><a href="index.html"><font color="red">WEB</font></a></h1> <ol> <li><a href="1.html"><font color="red">HTML</font></a></li> <li><a href="2.html"><font color="red">CSS</font></a></li> <li><a href="3.html"><font color="red">JavaScript</font></a></li> </ol> -->1) 스타일 태그를 쓴다
- <style></style> : 스타일 태그는 html의 문법이면서 동시에 스타일 태그 안쪽에 있는 내용(효과)은 CSS 문법을 사용한다. 해석하면 웹브라우저야 너는 이것을 CSS문법에 맞게 내용을 이해해서 처리해야돼 라는 문법이다. 즉 css 문법은 스타일 태그 안에 쓰인다.
- 또한, 하나의 효과를 적으면 효과를 구분하기 위해 뒤에 ;(semi colon)을 적어서 효과를 의미단위로 나누어준다.
-> 예시 : 웹브라우저에 있는 모든 a 태그에 대해서 붉은 색 처리해줘
※ 코딩을 잘 하는법 = 중복을 제거하는 것! 그리고 그 중복을 제거할 때, 정보를 의미 단위로 묶을 것.
그래서, CSS를 활용해 디자인 하는 것은 HTML보다 효율적이다. 의도를 담을 수 있어서. 중복되는 수많은 태그를 간단한 CSS 한 문장으로 구현할 수 있다는 것은, 단순히 같은 태그의 반복을 줄여준다는 장점 외에도, "어떤 기준으로 묶느냐"에 대한 정보를 자연스럽게 담게한다. 예를 들어, 내가 웹 페이지 디자인을 수정할 일이 생겼다고 해보자. a태그가 걸린 정보 중 아주 중요한 정보의 폰트컬러를 레드로 바꾸는 작업이었다. 그런데, 문제는 a태그가 걸린 정보는 무수히 많았고, 그중에는 중요하지 않은 정보여서 가독성을 위해 검정색으로 표현되어야 하는 정보도 있었고, 여전히 그대로 블루로 표현되야 하는 정보도 있었다. 결국 나는, 레드로 바꾸어야 하는 정보만 선별하여 태그를 수정해야했다. 그런데 만약, 검정색으로 표현되어야 하는 정보와 블루, 레드로 표현 되어야 하는 정보가 태그로 사전에 정의가 되어 있었다면? 나는 해당 정보의 기준만 활용하여 레드로 바뀌어야 하는 정보만 단 몇 줄의 코드로 간단히 처리할 수 있었을 것이다. 하물며, 내가 레드 컬러로 폰트색상을 바꿔야 하는 정보의 기준을 모르고 있었다고 하더라도, 어떤 클래스를 레드로 바꾸어야 하는지만을 알고 있었다면 나는 그 클래스를 레드로 바꾸고 나서는 그 정보가 어떤 기준으로 클래스로 나뉘어 있었는지를 금새 알아차릴 수 있을 것이다.
2) 스타일 속성을 쓴다.
- 스타일 태그로 CSS를 표현하는것 외에 html 태그 안에 속성으로 style 속성을 활용하여 디자인을 설정할 수 있다.
ex) <a href="2.html" style="color:red">CSS</a>
- style="" : 이건 CSS가 아니라 html의 속성이다. ""안에 들어갈 내용은 효과이다. style 속성이 정의하는 효과를 style 속성이 포함된 태그에 적용한다는 의미이다.
- 스타일 태그는 효과만 있어서는 그 효과를 누구에게 지정할 것인지를 알 수 없기 때문에 누구에게 적용할지에 대한 표현과 {}를 포함해 선택자(셀렉터)라고 한다. 그 선택자 안에 효과를 넣어 스타일 태그를 구현한다.
- 따라서, 스타일 속성은 누구에게 효과를 적용할 지 바로 알 수 있기 때문에, 선택자를 사용하지 않는다.
- 또한, 스타일 속성에 효과도 스타일 태그에서의 효과와 마찬가지로 ;(semi colon)가 구분자로 활용된다.
CSS를 공부한다는 것은, 우리는 결국 선택자와 프로퍼티를 알아간다는 것을 의미한다. 그리고 우리가 구현하길 원하는 효과를 프로퍼티라는 키워드로 찾아갈 수 있게 된다.
3) 선택자 적는 법.
- 태그를 단위로 묶는 경우 태그 이름을 적는다 -> ex) a{}
- 태그 안의 class속성으로 묶은 경우 .을 함께 적는다 -> ex) .saw
<head> <meta charset="utf-8"> <title>WEB1 - CSS</title> <style> a{ color: black; text-decoration: none; } .saw{ color: grey; } .active{ color:red; } h1{ font-size: 45px; text-align: center; } </style> </head> <body> <h1><a href="index.html">WEB</font></a></h1> <ol> <li><a href="1.html" class="saw">HTML</a></li> <li><a href="2.html" class="saw active">CSS</a></li> <li><a href="3.html">JavaScript</a></li> </ol> </body> </html>-> 이때, class의 속성의 값(value)은 여러개가 들어갈 수 있고, 띄어쓰기로 구분할 수 있다.
그런데 이것은 좋은 방법이 아니다. 위 코드를 구현해보면, "CSS"단어는 빨간색으로 정상구현되어 있으나 이것이 구현된 이유는 .saw보다 .active가 아래에 있기 때문이다. 이 순서를 바꾸어 구현해보면 즉, "최근의 명령이 더 큰 영향력을 갖는다"는 의미이다. 이 때, class보다 더 상위의 선택자는 "id" 선택자를 활용하면 된다. 즉, "id>class>태그 선택자".이다. 그 이유는 id 선택자가 태그 선택자보다 더 구체적이다. 반대로 태그 선택자가 id 선택자보다 더 포괄적이다. 그래서 포괄적인 선택자로 작업을 한 후에 구체적인 선택자를 활용해 작업하면 효율이 좋기 때문에 이렇게 구분을 해두었다. 같은 이유로 class 선택자를 두 선택자 사이에 두었다.
이것을 종합해보면, id태그가 우선, class가 우선, 그 다음이 태그 선택자이고 같은 위상에서는 최근의 명령이 더 큰 영향력을 갖는다.
'Language > HTML&CSS' 카테고리의 다른 글
[HTML_codecademy] Elements and Structure (0) 2022.08.11 CSS_생활코딩 : BOX 개념, GRID 개념, 반응형 웹 (0) 2022.07.25 HTML_생활코딩 : 동영상 삽입, 댓글 기능, 채팅 기능, 방문자 분석기 (0) 2022.07.21 HTML_생활코딩 : 웹페이지의 구조를 정의하는 태그, a태그 (0) 2022.07.20 HTML_생활코딩 : 웹페이지의 구조를 정의하는 태그, a태그, 웹사이트 완성 (0) 2022.07.20