Daily coding
CSS : CSS 기초 및 방식 본문
CSS : Cascading Style Sheet
- 문자의 컬러, 종류, 형태지정, 배경색지정,
- 이미지 세팅, 테두리 넣기
- 각종 tag, id, class에 형채를 추가할 수 있음
CSS 적용방식
1. inline 방식
- 위의 방식은 인라인(inline) 방식
- 적용은 잘 되지만 가독성이 좋지 않아서 internal 방식(head에 css넣음)을 사용
<p style="font-size: 10pt">이 부분의 글자 크기는 10pt입니다
style : Attribute, font-size: property
2. internal 방식
<style type="text/css"> 태그 안에 반드시 써주어야한다.
- 방식
태그명 or class(.) or id(#) {
property명 : 값1;값2;값3;
}
** 이미 인라인 방식이 적용된 태그는 인터널로도 변하지 않음
3. external 방식
- 외부 파일에서 css가져옴
- head 태그 안에 <link type="text/css" rel="stylesheet" href="CSS파일주소"> 를 적어준다.
id / class
i d
: CSS의 internal 방식에서는 특정 태그에 아이디를 불러와 속성을 지정할 수 있다.
아이디를 사용하기 위해서는 # 을 반드시 붙여야한다.
아이디는 주로 자바스크립트에서 데이터를 처리할 때 사용한다.
자바스크립트는 id를 한 개밖에 인식하지 못하므로 중복되어 사용할 수 없다.
하지만 CSS 는 중복된 아이디여도 모두 처리를 해주긴 한다. 그래도 자바스크립트에서 충돌이 날 수 있으므로
아이디는 1개만 사용하는 것이 좋다
ex> #tableId {
border : 1 px solid;
}
c l a s s
: CSS의 internal 방식에서는 특정 태그에 아이디를 불러와 속성을 지정할 수 있다.
클래스를 사용하기 위해서는 . 을 반드시 붙여야한다.
클래스는 중복사용이 가능하므로, 같은 속성값을 주고 싶을 때 태그의 클래스를 모두 같게 설정하고
한번에 속성을 부여할 수 있다.
ex> .tableId{
border : 1 px solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* **** internal 방식
태그명 or class or id{
property명 : 값1;값2;값3;
}
인라인 방식이 적용된 태그는 변하지 않음
*/
p{
font-size: 30pt;
}
#p1{ /* # : id임을 뜻함, 아이디가 중복되어도 CSS적용되나, 자바스크립트에서는 아이디 1개만 인식하기 때문에 class로 만드는게 낫다 */
color: red;
font-size: 20pt;
}
p.p2{ /* . : class임을 뜻함, 대부분의 css는 class로 불러옴 */
color: #0000ff;
font-size: 24pt;
}
</style>
<!-- *** External 방식 *** : 외부 파일에서 css가져옴 -->
<link type="text/css" rel="stylesheet" href="./my.css">
</head>
<body>
<!--
CSS : Cascading Style Sheet
문자의 컬러, 종류, 형태지정, 배경색지정,
이미지 세팅, 테두리 넣기
각종 tag, id, class에 형채를 추가할 수 있음
CSS 적용방식
1. 인라인
2. 인터널
3. 익스터널
-->
<p>p tag 입니다 </p>
<p style="font-size: 10pt">이 부분의 글자 크기는 10pt입니다.</p>
<!-- style : Attribute, font-size: property -->
<!-- 위의 방식은 인라인(inline) 방식
- 적용은 잘 되지만 가독성이 좋지 않아서 internal 방식(head에 css넣음)을 사용
-->
<p>p tag2 입니다 </p>
<!-- id / class의 CSS 적용
id는 자바스크립트에서만 1개로 인식, CSS는 모두 적용한다
-->
<h3>h3 태그 입니다 </h3>
<p id="p1">p tag의 id는 p1입니다</p>
<h3 id="p1">h3 tag의 id는 p1입니다</h3>
<p class="p2">p tag의 class는 p2입니다</p>
<h3 class="p2">h3 tag의 class는 p2입니다</h3>
</body>
</html>
'Front-end > Client' 카테고리의 다른 글
| CSS : text 정렬 및 다양한 attribute 들 (0) | 2020.01.09 |
|---|---|
| CSS : text size 의 단위들 (0) | 2020.01.09 |
| HTML : jsp 파일로 자바 콘솔에 출력하기 (0) | 2020.01.03 |
| HTML : Tags - form & input 폼과 인풋 태그 (0) | 2020.01.03 |
| HTML : Tags - Video 비디오 (0) | 2020.01.03 |
