[1] 강의
웹 프로그래밍(풀스택)
3. CSS - FE
1) CSS 선언방법
[2] 개념 정리
CSS를 HTML 안에 선언하는 방식 3가지에 대해서 알아보자
style을 HTML페이지에 적용하는 3가지 방법
1. inline
HTML태그 안에다가 적용합니다.
다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.
<p style="border:1px solid gray;color:red;font-size:2em;">
2. internal
style 태그로 지정합니다.
구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다.
별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>
3. external
외부파일(.css)로 지정하는 방식입니다.
CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.
현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다.
internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다.
이후에 아래처럼 link태그로 추가하면 됩니다.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</div>
</body>
</html>
4. 우선순위
inline은 별도의 우선순위를 갖지만, internal 과 external은 우선순위가 동등합니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됩니다.
[3] 강의 정리
CSS 기본 사용법에 대해서 알아보자. CSS의 선언은 선택자와 그 다음 property, value로 구성된다고 할 수 있다. 자바 스크립트를 아는 사람은 brace를 안다. 오브젝트를 표현하는 건데 그 안의 값은 따옴표나, 작은따음표나 큰따옴표 없이 이렇게 property 이름을 쓰고 value를 쓴다. 프로그래머들이 처음 CSS를 하면 헷깔릴 수 있는데 문자열이 아니고 그냥 어떤 속성 이름을 주면 된다. color 콜론, 그 다음 세미콜론. 물론 이걸 붙여서 할 수도 있고 띄어서 할 수도 있고 아무 문제 없다. 얘를 selector라 그런다. 그리고 안에 property, value라고 한다. 진짜 코딩할 때에는 보통 한줄 띄어 쓰고 얘가 이제 왼쪽 정렬일 때 띄어 써서 다음 줄로 어떤 property와 value를 표현할 수 있다.
style을 HTML 페이지에 적용하는 3가지 방법이 있는데 inline, internal, external 세 가지 방법이 있다. HTML 태그 안에다가 넣는 방법을 우리가 inline이라고 한다. HTML 태그가 기본 태그가 있는데 이쪽 body 하위에 span이 있고 그 안에다가 style="color:red;" 이렇게 되어있다. 만약에 뒤에 나오겠지만, 나중에 말씀드리겠지만 같은 속성을 inline에 넣는 거랑 internal에 넣는 거랑 external에 넣었을 때, 여기를 color를 red, 여기는 blue, 얘는 green 했다. 그러면 여기 쓰여있는 순서대로 우선해서 적용이 된다. 즉 같은 스타일을 어떤 걸 부여로 하려고 했을 때 같은 셀렉터로 어떤 동일한 속성 값의 어떤 다른 value를 넣었다. 그러면 inline에 적용된 게 최우선으로 적용이 되게 돼있다. 그래서 이렇게 inline으로 적용한 style는 다른 어떤 파일에 CSS로 다른 방법으로 선언한 것보다 먼저 적용되게 되어있다. 같은 속성을 추가하려고 할 때.
inline 말고 external 방법도 있다. HTML에 CSS를 집어넣는 거는 그렇게 좋은 방법은 아니다. 왜냐면 구조를 표현하는 HTML에 CSS가 들어있으니까 구조와 스타일이 섞여있기 때문이다. 그래서 유지 보수가 어렵고 좀 관리하기 어렵다. internal 방식은 이렇게 head 안에 바로 style을 넣을 수가 있다. 이 방식의 장점은 예를 들어서 별도의 CSS 파일을 관리하지 않아도 된다는 장점. 또 서버에 CSS 파일을 부르기 위해서 별도의 브라우저가 요청을 또 보내는 일을 하지 않는 장점. 이런 게 있다. 그거에 대해서 좀 더 차이점을 찾아보시면 좋을 거 같다. 아무튼 이렇게 inline으로 간단한 HTML에 CSS가 정말 조금 들어있다. internal 방식으로 넣을 수도 있다.
마지막 external 방식이 있다. 이렇게 HTML이 있고 별도의 CSS 파일을 만들어서 include 시키는 거다. 포함을 시켜서 하는 방법도 있는데 보통 이제 이런 식으로 많이 한다. HTML 안에 CSS를 넣지 않고 별도 파일을 분리해서 관리하는 게 좋을 것 같다. 어떤 방법이 좋을까는 조금 더 고민을 해보면 좋을 것 같다. 한번 실습을 간단하게 만들어보도록 하겠다. body에 div 하위에 p 태그 하나를 만들겠다. 그래서 p 태그 안에 어떤 내용을 썼다. 그래서 이 내용이 나왔다. p 태그에 바로 넣을 수 있다. style은 어떤 걸로 할까. color:blue; 이런 걸 하나 넣었다. 그러면 여기에 color 값이 blue가 나왔다. 그 다음에 div 하위에 p이다. 그래서 이렇게 internal 방식으로도 표현을 할 수가 있다. 이번에는 color 값은 말고 font-size라는 합성어를 이용해서 20픽셀이라는 걸 한번 넣어보겠다. 20픽셀을 하면 지금 글자보다는 커진다. 실제로 증가된 걸 확일할 수 있다. external로 어떤 CSS를 넣을 수 있다. 혹시 여러분들이 CSS 개발을 해야 된다면 이런 방식으로 우선 하는게 좋을 것 같다.
제가 미리 파일을 만들어 놨는데 div 하위에 p 태그가 있고 이번에는 다시 color를 red로 만들어보겠다. 이번엔 red로 반영되지 않는다. 그거는 이렇게 external로 한 방식이 여기서 선언한 방식보다 우선하지 않기 때문에 여기서는 color를 blue로 했으니까 이게 먼저, inline에 가장 먼저 반영이 된다. 그러면 여기다가 border라고 어떤 영역의 테두리로 지을 수 있다. border에 slategray라는 회색 색깔을 넣어서 한번 해보겠다. 여기 이렇게 표현이 됐다. border가 표현이 된 걸 확인할 수 있다. DOM 인스펙터로 찍어봤을 때는 inline으로 들어가는 정보가 바로 나온다. 열어보면 inline으로 표현된 정보가 바로 이 코드 안에 보이고 inline으로 표현된 정보를 element.style 이라 그래가지고 element에 바로 그 style 정보에 있는 거라는 걸 여기서 표현해주고 또 div 안에 p의 border 값이 정해져 있어라고 css basic.css 파일이 있어라고 라인 수도 나온다. 또 div > p에 font-size가 있다고 해서 css basic.html에 역시 또 위치까지 정확히 이 스타일이 어디에 반영됐는지 표현을 해주고 있다.
아래 보면 이렇게 margin, border, padding 해서 어떤 값이 나오고 여기에 할당된 어떤 박스 모델에 대한 값이 나오는데 우리가 아직 박스 모델은 배우지 않았다. 다만 border가 1이라고 해서 border는 뭐다 이렇게 표현이 된다. 간단하게 3가지 방식을 알아봤다. inline, internal, external에 대해서 알아봤다. 각각의 장단점을 조금 더 찾아서 학습을 해보면 좋겠다.
'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-4 강의 정리 (0) | 2022.03.23 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-3 강의 정리 (0) | 2022.03.22 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-2 강의 정리 (0) | 2022.03.22 |