-
0. 목차
1. CSS란?
2. CSS를 적용하는 3가지 방법
2-1. 인라인 스타일
2-2. <style> 태그 사용
2-3. 외부파일 생성🔥
3. 파일경로 표시 방법
3-1. 절대경로와 상대경로
3-2. 터미널로 디렉토리 이동해보기
4. 본격적인 CSS 다루기
4-1. margin과 padding
1. CSS란?
HTML로 구현해 낸 엘리먼트의 속성값을 사용자가 원하는 스타일로 변경하기 위한 스타일시트
디스플레이 속성(block ↔ inline), 글자의 크기, 배경색, 블록사이즈 등등 모두 변경이 가능하다.
HTML 작성 시 실제로 사용되는 엘리먼트는 몇 가지 안되므로CSS를 이용한 스타일 편집이 중요하다
- CSS의 문법
html의 속성값은 queryString으로
key="value"
ex) type="text"형태를 가지는 것에 비교하여
css는 object 형태를 띄며 (*편의상의 표현으로 정확히 object라고는 할 수 없음)
key:value;
ex) font-size:12px;위와 같이 쓸 수 있다.
주의할 점은 끝에 ;(세미콜론)을 반드시 붙여야 한다는 것이다.
끝나는 부분을 지정해줌으로써 컴퓨터가 이해할 수 있게 해주고 코드를 보는 사람에게도 가독성을 높여준다.
2. CSS를 적용하는 3가지 방법
2-1. 인라인 스타일
인라인 스타일은 html파일의 <body> 내에 사용된 엘리먼트에 직접적으로 style속성을 부여하는 방식이다.
<h1 style=“font-size:12px;”>내용</h1> <h1 style=“font-size:12px; background:red;”>내용</h1>아래에 후술할 방법들을 포함하여 가장 적용 우선순위가 높은 방식으로, 외부파일을 사용하여 적용된 스타일이 있더라도 인라인 스타일은 덮어쓰기를 해버린다.
2-2. <style>태그 사용
<style> 태그는 html 파일의 <head>에 작성되며, <body>의 엘리먼트에 id나 class 같은 선택자를 부여하고 해당 선택자에 스타일을 입히는 방식이다.
이를 위해서는
1. <body>내의 엘리먼트에 선택자를 부여할 줄 알아야하고 (선택자의 종류와 사용방법 파악)
2. 컴퓨터적인 사고방식으로 처리결과를 알아야 한다. (컴퓨터의 우선순위 파악)
- 선택자에 따른 <style>태그 작성법
<h1 style="font-size:12px; background:red">1</h1> <h2 id="title">2</h2> <h3 class="title">3</h3>위와 같은 엘리먼트들이 있다면, h1은 그 자체로 스타일의 설정이 끝나지만, h2나 h3는 부여한 id, class(선택자)를 이용해 <head>에서 style을 설정해주어야한다.
<head>에는
<style> <!-- id="title"의 css 설정 --> #title{ font-size:12px; background:yellow; } <!-- class="title"의 css 설정 --> .title{ font-size:12px; background:purple; } </style>위와 같이 <style>태그를 작성한다.
예시코드에서 볼 수 있듯이 <body>에서 엘리먼트에 부여한 선택자에 따라 조금씩 <style> 작성방법이 다른데,
id는 #(ID명) { }
class는 .(class명) { }
해당 엘리먼트 전체를 선택자로 쓴다면 (엘리먼트명) { }
모든 엘리먼트에 스타일을 입힐 땐 * { }
로 쓸 수 있다.
또한
<ul class="menu1"> <li>리스트1</li> <li>리스트2</li> <li>리스트3</li> <li>리스트4</li> </ul> <ul class="menu2"> <li>리스트1</li> <li>리스트2</li> <li>리스트3</li> <li>리스트4</li> </ul>이런 엘리먼트 내부의 엘리먼트에도 각각 지정이 가능한데,
<ul> 내부의 모든 <li>에 css를 적용할 땐
ul > li { }menu2 클래스를 가진 <ul> 내의 <li>에만 css를 적용할 땐
.menu2 > li { }로 쓸 수 있다.
2-3. 외부파일 생성
지금까지는 html 파일 내에서 css를 작성했다면, 이번에는 .css 라는 확장자를 가진 외부파일을 통해 작성하는 방식이다.
(❗️가장 일반적이고 많이 사용하는 방법이므로 잘 알아두어야 한다.)
이 때, html파일의 <head>에 원하는 css파일을 불러오는 <link>태그를 사용해야한다.
<link href="./css/index.css" type="text/css" rel="stylesheet">위 코드는 앞으로도 외부의 css 파일을 불러올 때 매번 사용해야 하는 코드이므로 잘 외워두자.
<link>에 붙은 속성들의 의미는
href="파일경로"
type="파일형태" : "text/css", "text/javascript", "application/txml" 등의 타입이 있다고 함. 아직 뭔지 잘 모르겠음.
rel="stylesheet" : html과 link된 파일과의 연관관계라고 하며,
파일경로에 대해서는 아래에서 좀 더 상세히 정리해두었다.
3. 파일경로 표시 방법
3-1. 절대경로와 상대경로
파일 경로를 나타내는 방법은 크게 절대경로와 상대경로 두가지 방법이 있다.
먼저, 절대경로란 해당하는 디렉토리의 절대적인 위치로 Root(Users폴더)를 기준으로 하여
/Users/HB/Documents/workspace/html/211221
형태로 쓸 수 있다. (맥)
상대경로란 현재 본인이 있는 (실행하고 있는 파일의) 폴더를 기준으로 경로를 작성하는 것이다.
예를 들어 내가 211221폴더에 있는 파일을 실행중이라면
./ 는 211221 폴더,
../ 는 html 폴더를 말하며,
html 폴더 내의 어제 작업한 폴더(211220)의 경로는 ../211220 로 쓸 수 있다.
위에서 사용한 <link>의 파일경로(href)를 다시 보면
<link href="./css/index.css" type="text/css" rel="stylesheet">작성 중인 html이 있는 폴더(./) 내의 css폴더를 열어 그 안의 Index.css 파일을 연다는 뜻이다.
❗️맥에서는 경로의 구분값을 /(슬래시)로 쓰지만 윈도우에서는 \(백슬래시)나 ₩를 사용하고 리눅스에서는 ,(콤마)를 사용한다.
3-2. 터미널로 디렉토리 이동해보기
terminal을 사용하여 경로를 연습해볼 수 있다.
맥을 기준으로 정리하면,
pwd : 현재 경로를 출력해줌
cd (이동할 폴더) : 현재 경로 내에 있는 폴더 중 입력한 폴더로 이동한다.
ls : 현재 경로 내의 내용을 출력해준다. (ls -al 등..)
+)
cd ~ : 홈 디렉토리로 바로 이동
cd .. : 상위 폴더로 이동
4. 본격적인 CSS 다루기
4-1. margin과 padding
'HTML, CSS' 카테고리의 다른 글
6. CSS활용 - 팝업창, 회원가입 폼 (1) 2021.12.28 5. CSS로 애니메이션 효과 넣기 (0) 2021.12.27 4. 실습 - 홈페이지 클로닝하기 (2) (0) 2021.12.24 3. 실습 - 홈페이지 클로닝하기 (1) (0) 2021.12.22 1. 브라우저의 개념과 HTML 기초 (1) 2021.12.20