[목차]
A. CSS
B. CSS 문법의 기초
B-1. CSS의 display 속성
C. CSS를 적용하는 3가지 방법
A. CSS(cascading style sheets)
웹사이트의 모양을 바꿀 때 쓰는 기술로 HTML을 꾸며주는 역할을 한다.
*CSS를 사용함에 따라 HTML은 뼈대이자 데이터를 구분(구별)하는 용도로 쓰인다.
ex)아우터, 상의, 하의, 악세사리...
예를 들어 h1은 사이트의 가장 중요한 제목(사이트의 로고 등)에 사용하는 엘리먼트로
이러한 HTML 태그를 통한 의미부여를 '시멘틱'이라고 한다.
<section>, <article>, <header>, <footer> 등의 엘리먼트는
모두 <div>와 같은 블록화 효과를 지녔다.
<footer> , <div id=footer>
*_전자가 시멘틱 기능은 더 크지만 범용적으로 <div>를 쓰는 경우가 더 많은 듯 하다._
B. CSS의 문법의 기초
<head> 태그 하단에 <style> 틀을 삽입한다.제목
<head> <style> #logo { background: red; } </style> </head> <body> <h1 id="logo" class="logo">제목</h1>
*여기서 id=logo를 삭제하면 css 처리가 안되는 것을 확인할 수 있다.
(id는 #logo와 매칭, class는 .logo와 매칭되는데 여기서 #과 .을 '선택자'라고 부른다.)
CSS를 익히기 위해서는 어떠한 선택자와 속성값들이 있고,
또 그 속성마다 어떠한 값을 넣을 수 있는지를 머릿 속에 파악하는 것이 중요하다.
B-1. CSS의 display 속성
12 3
<head> <style> #header { background:red; display: inline; } </style> </head> <body> <div id="header">1</div> <span>2</span> <span>3</span> </body>
CSS를 통해 display: inline; 을 삽입시 html이 가진 고유의 속성도 변경됨을 알 수 있다.
(div는 블록 속성을 주는 엘리먼트임에도 CSS 태그로 인해 inline 효과를 지니게 되었다)
이것이 CSS의 힘이다.
display: inline; 에서는 넓이와 높이 설정이 불가능한데
이것을 조정하려면 디스플레이 속성을 block으로 바꿔주어야 한다.
12 3
<head> <style> #header { width: 200px; height: 200px; background: red; display: block; } </style> </head> <body> <div id="header">1</div> <span>2</span> <span>3</span> </body>
이제 높이와 넓이가 각각 200인 빨간색 박스가 그려졌다.
그러나 넓이와 높이를 한정해도 블록효과 자체는 한 줄을 끝까지 차지함을 알 수 있다.
이 문제를 해결하려면12 3
<head> <style> #header { width: 200px; height: 200px; background: red; display: inline-block; } </style> </head> <body> <div id="header">1</div> <span>2</span> <span>3</span> </body>
위와 같이 display: block이 아닌 display: inline-block을 삽입해야 한다.
이렇게 CSS의 display 속성에는 inline, block, inline-block 3가지가 있음을 알게 되었다.
C. CSS를 적용하는 3가지 방법
1. HTML의 <head> 영역아래에 <style> 엘리먼트 틀 만들기
(지금까지 해 온 방식)
2. inline 스타일 (<head> 영역 안에 따로 <style> 태그 틀을 만들 필요가 없다.)
* 이 방식은 남용하지 않는 것이 좋다.12 3
</head> <body> <div id="header" style="background: blue; width: 200px; height: 200px;">1</div> <span>2</span> <span>3</span> </body>
3. 외부파일을 이용하는 방법
링크 엘리먼트를 이용해서 CSS 파일을 HTML 파일과 연결하는 방식이다.
(주로 css용 디렉토리를 따로 만들고 그 안에 *.css파일을 만들어 연결한다.)
<link href="./public/css/index.css" type="text/css" rel="stylesheet">
→상대경로 (현재 디렉토리를 기준으로)
(./은 생략해도 무관하며 '.'은 현재 디렉토리, '..'은 뒤로가기, 즉 상위 디렉토리로의 이동을 의미한다.)
<link href="C:/Users/workspace/221012/public/css/index.css" type="text/css" rel="stylesheet">
→절대경로
* type="text/css" rel="stylesheet"은 고정틀이므로 암기.
** 만약 3가지 CSS 적용 방식을 동일 대상에 중복해서 적용한다면?
순서에 따라 위에서부터 아래로 해석하는데 제일 아래에 달린 태그의 우선도가 가장 높다.
그러나 inline 스타일은 작성순서와 무관하게 강제적용된다. 1
<head> <style> #header { width: 200px; height: 200px; background: red; display: inline-block; } </style> </head> <body> <div id="header" style="background: blue; width: 200px; height: 200px;">1</div>
(아래에 적힌 파란박스가 우선 적용되었다.)
