https://blog.naver.com/maestro23/222446221150
HTML에서 선언하는 방식으로는
HEAD에서 < style > 태그를 사용하는 방법과 -- 내부스타일시트 방식
태그 속성으로 style을 사용하는 방법이 있다. -- 인라인스타일 방식
(아래 참고)
<head>
<style> ... </style>
</head>
간단한 웹페이지를 제작할 때엔 아래처럼 주로 태그 속성으로 사용했다.
<a style = " "> </a>
간단하게 p태그에 id를 각각 만들어주고,
1번은 class를 c_1으로 2,3번은 class를 c_2로 만들어줬다.
아래 이미지와 같은 페이지가 생성될 것이다.
<body>
<p id ="p_1" class = "c_1"> 1번 </p>
<p id = "p_2" class = "c_2"> 2번 </p>
<p id = "p_3" class = "c_2"> 3번 </p>
</body>
결과 :
너무 심심하니까
p 태그마다 각각 다른 글씨색을 지정해줘야겠다.
< head > 안에서 선언할 때에는
< style > < /style > 태그 안에 작성을 해주면 된다.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p_1 { color : red; }
#p_2 { color : blue; }
#p_3 { color : green; }
</style>
</head>
결과 :
#아이디이름 { 속성명 : 속성값; }
아이디가 아니라
클래스에 지정을 해주고 싶으면 . 을 쓰면 된다.
.클래스이름 { 속성명 : 속성값; }
클래스 이름에 따라 적용된다.
<style>
#p_1 { color : red; }
#p_2 { color : blue; }
#p_3 { color : green; }
.c_1 { background-color : #e3aef5; }
.c_2 { background-color : grey; }
</style>
결과 :
이렇게 작성을 하면 위 이미지와 같이 화면에 표현된다.
아까 c_1은 p태그 1번에만 적용을 해줬기 때문에
c_1만 hex코드 #e3aef5가 적용된 것이고
나머지 c_2클래스에 해당되는 p들은 grey가 적용된 것이다.
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 { color : aqua; }
</style>
</head>
<body>
<p id ="p_1" class = "c_1"> 1번 </p>
<p id = "p_2" class = "c_2"> 2번 </p>
<p id = "p_3" class = "c_2"> 3번 </p>
<h1 id = "h_1" class = "c_1"> 1번 h1 </h1>
</body>
결과 :
1번
2번
3번
<p style = "color: orange;"> 1번 </p>
결과 :
1번