CSS기초 / 디버깅 / 이미지 맵
CSS(Cascading StyleSheets)
내부 스타일 시트 방법
내부 스타일 시트 방법은 html문서 내부에 직접 css를 작성하는 방법
혼자 공부할 때는 내부 스타일 시트 방법을 추천
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style> <!-- 이처럼 내부에 스타일 선언 -->
p{color:blue;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit.</p>
</body>
외부 스타일 시트 방법
<link href="style.css" rel="stylesheet">
link태그로 외부 css파일과 연결시켜준다.
rel 속성은 relationship(연관 관계)이라는 의미를 가지고 있고, link 태그의 href 속성에 연결된 파일과의 관계를 나타낸다. 즉, 연결하려는 파일이 스타일시트 파일임을 명시하는 것이다.
현업에서는 주로 외부 스타일 시트 방법을 선호한다.
인라인 스타일 방법
<p style="color: green;">Lorem ipsum dolor sit.</p>
위에 처럼 태그가 직접 지원하는 속성을 이용하여 색상을 바꿀 수 도있다.
CSS 기본 문법
선택자는 스타일링하고 싶은 HTML 태그를 선택하는 영역이다.
선언부는 스타일링하고 싶은 속성과 값을 작성하는 영역이다.
CSS color 속성과 색상 단위
h1{color: red;}<!-- 키워드 표현 방법 -->
h1{color: rgb(0, 255, 0);}<!-- RGB 삼원색의 수치로 표현 -->
h1{color: rgba(0, 255, 0,0.5);}<!--rgb뒤에 a를 추가함으로서, 투명도를 추가할 수 있다. -->
h1{color:#FF0000 ;}<!-- 16진수 숫자로 색상표현 / 연속된 숫자나 기호는 하나로 통합할 수 있다.-->
font-size 속성과 크기 단위
h1{font-size: 16px;}
p{font-size: 32px;}
font-size 속성은 웹에선 주로 px, em, rem으로 크기를 조정한다.
-
px단위(pixel)
px는 웹에서 사용되는 가장 기본적인 크기 단위이다. px는 해상도와 관련 있는데 해상도에서 1개의 점이 1px이다.
-
rem단위(root em)
rem 단위는 html 태그의 폰트 크기를 기준으로 배수에 해당하는 크기를 가지게 하기 위해서 사용하는 단위
(웹 브라우저들의 기본 폰트 크기는 대부분 16px)
-
em
rem과 비슷하지만 기준이 최상위 html 태그가 아니라 부모 태그이다.
즉, 부모 태그의 폰트 크기의 배수를 가지게 하고 싶을때 사용한다.
-
vw
vw(viewportt width)는 화면의 가로 크기와 관련 있는 단위이다.
1vw는 화면 가로 크기의 1/100이다.
따라서 화면 크기에 따라서 유동적으로 변한다.
h1{ font-size: 10vw; <!--500px * 0.1(10vw) = 50px--> } p{ font-size: 5vw; <!-- 500px * 0.05(5vw) = 25px--> } -
vh
vh는 viewport height이며, vw가 가로 크기와 관련이 있다면, vh는 세로 크기와 관련 있는 단위이다.
형제? 부모?
<body>
<h1>css color test</h1>
<p>Lorem ipsum dolor sit.</p>
</body>
h1태그와 p태그 입장에서는 형제 태그이며 body태그는 부모 태그이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
/* h1{color: red;} */
/* h1{color: rgba(0, 255, 0,0.5);} */
/* h1{font-size: 16px;}
p{font-size: 2em;} */
p{
font-size: 2em;
}
span{
font-size: 2em;
}
</style>
</head>
<body>
<p>
em 태그의 텍스트 <br>
<span>span 태그의 텍스트</span>
</p>
</body>
</html>
위에 코드를 보면 p태그의 부모태그는 body태그이므로, 기본인 16px의 2배인 32px 크기가 된다.
span태그의 부모태그는 p태그이므로 2배인 64px 크기가 된다.
텍스트 관련 CSS 속성
font-family 속성은 글꼴을 변경할때 사용하는 속성이다.
h1{
font-family:'Times New Roman', Times, serif;
}
여기서 글꼴유형을 꼭 정해둬야하는데, 만약 사용자의 환경에 따라서 글꼴을 적용하지 못하는 경우가 생기는데,
이 경우에 글꼴유형에 지정한 유형으로 출력되게 된다.
그리고 위에서 Time New Roman 다음에 Times가 나열되어있는데 이는 Time New Roman 글꼴이 없을경우,
Times 글꼴을 적용하겠다는 의미이다.
font-weight 태그는 글씨의 굵기를 조정한다. 웹에서는 수치가 아니라 주로 normal, bold 등을 사용한다.
주의할점은 굵기를 조정할때 해당 글꼴이 지원을 해야한다.
p{
font-weight: bold;
}
line-height 속성은 줄 간격을 조정한다.
p{
font-weight: bold;
font-size: 20px;
line-height: 1.5;
}
p{
font-weight: bold;
font-size: 20px;
line-height: 10px;
}
위 처럼 배수로 할 경우에는 20 * 1.5 = 30 만큼 줄 간격이 띄어진다.
크기 단위로 할 경우에는 무조건 font-size의 속성값보다 큰 값이어야한다. 그렇지 않으면 글씨가 겹치게 된다.
HTML 디버깅
실행창에서 F12를 눌러서 원하던 결과와 다른 부분을 찾아내어 디버깅한다.
디버깅을 할때 4가지를 유심히 보자
- css에서 작성한 선택자의 논리적인 부분이 틀린경우가 많다. (오타, 오탈자 등)
- 코드를 저장했는지
- 내가 작성한 css파일과 제대로 연결되어있는지 확인해보기
- 다른 css파일과 연결되어 중복되진 않았는지 확인, 똑같은 선언자가 있는 css파일이 여러개 있을때는 가장 나중에 적용된 css파일의 선언자가 적용된다.
이미지 링크 / 이미지 맵
기존의 a태그를 이용하여 이미지에 링크를 거는 방법 말고 이미지 맵을 사용하여 링크를 걸 수 있다.
이미지맵이란 클릭할 수 있는 영역을 지닌 이미지를 말한다.
<img src="./images/google.png" alt="구글이미지" usemap="#google"><br><br>
<map name="google">
<area shape="rect" coords="0,0,600,180" href="https://google.com"
alt="구글 홈페이지 이동 링크" target="_blank" >
</map>
<img src="./images/google.png" alt="구글이미지" usemap="#google">
<map name="google">
<area shape="circle" coords="136,46,46" href="https://google.com"
alt="구글 홈페이지 이동 링크" target="_blank" >
</map>
area요소는 이미지맵에서 영역을 지정한다.
map요소의 name 속성은 img요소의 usemap 속성과 관계가 있다 즉, usemap과 name이름은 동일해야 한다.
shape는 모양, coords는 만들 이미지맵의 좌표(크기)이다.
댓글남기기