CSS는 따로 어려운게 아니고
html 코드의 바디 부분에 나오는 블록들에
속성을 달아주는 것이다.
html에서 테이블, 표를 만들때 Style을 통해 테두리를 만들었는데
그것도 CSS의 한 부분이라고 할 수 있다.
근데 구지 body에 명시 안하고 style에 하는 이유를 비유하자면
뼈대를 만들어놓고 스타일을 입혀야지
뼈대 만들면서 입히면 어떻게 될지 모르기 때문이다.
이러한 방법으로 하면 작업이 좀 느려질 뿐만 아니라
사이트 접근 시 뼈대만 보이다가 갑자기 style 효과가 주어지는 등 불안정적인 상태가 보인다.
그러므로 head에 쓰는걸 권장.
예전에 java FX할 때 프로젝트를 만들면 CSS 파일이 항상 담겨 있었다.
.css 확장자 파일은 하나의 style의 집합체라고 보면 되고
html에서 따로 경로 참조 코드를 쓰면 불러와진다.
보통 블록에 Id나 Class를 부여하여
해당 블록을 지정하여 속성을 변경한다.
또한 태그를 써서 전부 선택 할 수도 있다.
Id에 부여하는 방법은 #을 사용하여 잡고
Class를 부여하는 방법은 '.'을 사용하여 잡고
태그는 블록으로 잡는다.
특별한 케이스로도 있다.
만약 표 안의 특정 태그를 잡고싶을 때에는 '>'를 표시해서 자식관계를 표시하는데
'>'는 생략이 가능하다.
또한 input의 경우는 '[]'를 사용하여 특정 type 들만 골라서 변경 할 수 있다.
이러한
아래 예시를 통해 여러가지 경우를 확인해보자.
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "btn.png">
<style>
/*css 주석*/
/*p태그 잡는 법*/
p{
/*전체 p 태그에 배경색 주기*/
background-color: gray;
}
/*class 잡는 법*/
.myclass{
/*class="myclass"의 글자 색상 변경*/
color: brown;
}
/*myid 잡는 법*/
#myid{
color: darkgoldenrod
/*id가 중복인게 여러개 인 경우 무조건 첫번째 것을 인지*/
}
/*여러개 선택*/
p, div{
/*글자 굵기 : 600 b 태그*/
font-weight: 600;
}
/*div의 자식인 p 잡는 법*/
div>p{
/*>를 통해서 자식 관계를 잡는데 >를 생략해도 정상적으로 잡힌다.*/
background-color: blueviolet;
}
/*input 잡는 법*/
input[type = 'text']{ /*[]를 생략하면 input이 전부 잡히고 특정 타입만 변경할 때 쓴다.*/
background-color: forestgreen;
}
input[type = 'email']{
background-color:lightskyblue;
}
/*img 태그 잡는 법*/
img{
/*하나만 설정하면 비율에 맞춰서 작아 진다.*/
width:100;
border: 1px solid white;
/*border는 테두리 라인을 말한다.*/
/*테두리는 다음 장에서 자세히*/
}
/*마우스가 올라갔을 경우 강조 표시*/
img:hover{
border: 1px solid black;
/*테두리(픽셀)가 생기면서 마우스를 올릴 때 마다 이미지가 밀린다.*/
/*위의 border을 통해 픽셀 테두리를 만들어 놓으면 이미지가 밀리지 않는다.*/
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<p id="myid">id가 있는 요소</p>
<p class="myclass">Class가 있는 요소</p>
<p class="myclass">Class가 있는 요소</p>
<p>태그만 있는 요소</p>
<div>DIV 요소</div>
<!--div는 기능 X, 영역만 묶어줌-->
<div>
<p>DIV 안의 P 태그</p>
</div>
<input type="text" placeholder="이름"/>
<input type="email" placeholder="이메일"/>
<br/><br/>
<img src="img/img01.jpg" alt="초록버섯"/>
<img src="img/img02.jpg" alt="꽃"/>
<img src="img/img03.jpg" alt="마리오"/>
<img src="img/img04.jpg" alt="초코송이"/>
</body>
</html>
이미지는 아무거나 쓰세요
위의 코드를 보면 style에 특이한걸 넣은게 아닌데도 코드의 길이가 길다.
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |
|---|---|
| [CSS]03-06.배운 내용 활용해서 사이트의 메뉴 바 만들기 (0) | 2018.10.17 |
| [CSS]03-05.float, link 정렬, 링크 속성, 이미지 밑줄 삭제 (0) | 2018.10.17 |
| [CSS]03-03.background, 배경화면 (0) | 2018.10.17 |
| [CSS]03-02.Border, 테두리 선 (0) | 2018.10.16 |