CSS란?
= Html 같은 마크업 언어에 종합적인 표현을 해주는데 필요한 Style Sheet 언어
- Style을 적용하는 세가지 방법을 알아보겠습니다
- head 에 style이라는 태그를 만들고 설정자 지정 후 색깔을 표현하는 방법
<!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>
/*설정자 h2*/
h2{
color: green;
}
</style>
</head>
<body>
<h2>조금 작은 제목</h2>
<input type="text" name="아이디" id="userid" placeholder="아이디를 입력하세요..."><br><br>
<input type="password" name="비밀번호" id="userpassword" placeholder="비밀번호를 입력하세요...">
</body>
</html>
- 태그에 직접 style을 지정하는 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성</title>
</head>
<body>
<h1 style="color: red;">제목</h1>
<input type="text" name="아이디" id="userid" placeholder="아이디를 입력하세요..."><br><br>
<input type="password" name="비밀번호" id="userpassword" placeholder="비밀번호를 입력하세요...">
</body>
</html>
- 외부 css 파일 불러오기
- 먼저 html 코드를 하나 짜줍니다.
<!--파일명 : CSS01.html-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 속성</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>조금 작은 제목</h2>
<input type="text" name="아이디" id="userid" placeholder="아이디를 입력하세요..."><br><br>
<input type="password" name="비밀번호" id="userpassword" placeholder="비밀번호를 입력하세요...">
</body>
</html>css와 연동하려면 css파일을 찾아줄 link 코드가 필요합니다.
<link rel>= "stylesheet" href="style.css"- 위와 같이 style.css 라는 파일을 불러 온다는 뜻에서 head에 적용시켜주고,
그리고 CSS파일 따로 만들어서 html과 연동 시켜줍니다.
/* 파일명 : style.css */
h2 {
color: red;
}=> 주의 사항 : html과 CSS를 연동할 때 유의할 점은 CSS의 파일 위치가 어딘지 확실히 기입을 해줘야 합니다.
- 위의 사항은 css 파일과 html이 같은 파일에 위치해 있을 때 연동할 수 있는 코드입니다.
<link rel>= "stylesheet" href="/CSS/style.css"예를 들어 HTML의 위치는 User/CSS01.html에 저장 되어 있고
CSS의 위치는 User/CSS/style.css 에 저장 되어 있다면 위와 같이 파일 장소를 정확히 알려줘야 한다는 것이죠!
추가적으로 자세한 선택자 속성에 관해!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 속성</title>
<style>
*{
/* font 우선순위 Times가 없으면 monospace 이것도 없으면 sans-serif */
font-family: 굴림 Times, monospace, sans-serif;
}
h1 {
font-size: 100px;
/* 선택자 정렬 */
text-align: center;
/* color : #16진수, 16진수, 16진수 */
/* 1,2,3....8,9, a(10),b(11).....f(15) */
color: rgb(255, 185, 185);
}
p{
/* 예를들어 고객사에서 한 폰트 사이즈를 바꿔달라고 할때
px로 지정하면 하나부터 열까지 다바꿔줘야하지만 rem 사용하면 유지보수가 편함. */
font-size: 2rem;
text-align: end;
color: #00ff00;
}
span {
/* color 설정법 */
color: rgb(0%, 0%, 100%);
}
</style>
</head>
<body>
<h1>Again...</h1>
<p>let's go to <span>home</span></p>
</body>
</html>font-family
- 폰트의 스타일을 지정 해주는 것. 먼저 쓴 폰트 스타일이 웹 상에 나타나는 우선순위로써
위의 예제와 같은 경우 1순위 굴림 Times, 2순위 monospace, 3순위 sans-serif 인 것 이죠.
font-size
-
px : 보통 컴퓨터 화면 디스플레이의 px값은 1980 * 1080이 보통 설정 값이죠.
위의 100px은 그 중 100px만큼 채우겠다라는 뜻입니다. -
rem: 기본적으로 컴퓨터에서 주는 폰트 사이즈는 16px로
위와 같이 2rem은 16px의 2배로 출력해달라는 뜻 입니다.
text-align
- 지정한 텍스트를 정렬해주는 기능 입니다.
위의 예문처럼 center로 지정 하면 말 그대로 글을 중간 지점으로 정렬 해준다라는 말입니다.
color
- RGB의 16진수를 이용한 디자인 기능
h1 {
color: #00ff00;
}color를 나타내는 RGB는 보통 16진수로 나뉘어집니다.
위의 코드 처럼 color : #16진수, 16진수, 16진수
즉.
1,2,3....8,9, a(10),b(11).....f(15)
color: #00ff00;
이와 같이 16진수를 이용 하여 색깔을 나타낼 수 있습니다.
#앞에 00이니까 빨간색은 들어가지 않았고, 15는 f 니까 초록색이 full로 들어 갔고
ff 뒤에 00이 들어갔으니 파란색도 제외 된 것이라고 생각하면 됩니다.
기초부터 차근차근 달려볼까요 :)