html 에서 주로 쓰일 거 같은 style 속성 항목들을 정리하려고 합니다.
추후 하나둘 추가 될 것이고, 모든 항목들에 대해 다루지 못할 걸로 예상됩니다.
1. style 사용 법
크게 두가지로 볼 수 있습니다. 하나는 html 파일에서 태그에 직접 넣어서 사용하는 법이고 하나는 CSS 파일을 만들어서 클래스나 아이디를 지정해서 사용하는 방법입니다.
우선 html 태그 내에서 사용하려면
<div style="color:red;">내용</div>
과 같이 문자열 태그 안에 style 속성을 지정하는 방법입니다.
다른 하나는 CSS 파일을 만들고
#mycolor{
color:red;
}
를 입력한 후 html 파일에서 CSS 파일을 링크 걸어 준 후, 문자열 태그를 입력 할 때 id 를 지정하는 방법입니다.
<div id="mycolor">내용</div>
#대신에 . 을 넣거나 아무것도 입력하지 않은 상태로 사용할 경우에는 id 대신에 class 로 불러와서 사용할 수 있습니다.
2. style 속성
color : 글자색
backbround-color : 배경색
width : 폭
height : 높이
font-align : 글자정렬. 좌측, 우측, 가운데
font-size : 글자 크기
font-weight : 글자 굵기
border : 외곽선
3. html 에서 스타일 지정하기
<div></div>로 영역을 지정하거나, <p></p>로 글을 입력 하거나 할 때 사용하면 좋습니다. <span>도 좋고요.
우선 기본적인 사용법은
<태그 style=""></태그> 입니다.
body에도 적용이 가능하지만 특별한 경우가 아닌이상 별로 쓸 일은 없을 거 같네요.
a. color & background-color
컬러는 쉽게 영어로 black, white, red, blue 등을 입력하셔도 되고, RGB값을 16진수로 환산하고 #ff00ef 이런 식으로 해서 입력하셔도 됩니다.
에디터 중에는 color: 까지만 입력해도 사용할 수 있는 컬러가 나오는 것들도 있습니다.
b. width & height
폭과 높이는 px, pt, dm, % 등 다양한 값을 이용해서 지정할 수 있습니다.
폭과 높이는 여러모로 중요한 부분이기 때문에 나중에 한 번 자세히 다루도록 하겠습니다.
c. font-align
left, right, center, justify 값이 있으며, 순서대로 좌측정렬, 우측정렬, 가운데 정렬, 양쪽정렬(균등정렬?)입니다.
d. font-size
글자 크기를 지정 할 때도 폭과 높이 처럼 px, pt, dm, % 등을 사용할 수 있습니다. 보통은 브라우저 기본 설정으로 냅두는 경우가 많지만, 강조 할 때 사용하거나 좀 불필요한 부분일 때 크기를 작게 하는데 사용하기도 합니다.
e. font-weight
굵게 표시하기 위해 주로 사용합니다. bold 값을 지정해 주면 됩니다.
f. border
외곽선을 지정하는 부분인데요, border: 1px solid; 라고 지정하면 상자가 만들어지고, border-left: 1px solid; 라고 지정하면 좌측에만 선이 만들어 지는 등 꾸미기용으로 좋습니다.
4. 간단한 예제
text.html 파일의 내용
stylesheet.css 파일의 내용. text.html 이 있는 폴더의 CSS 폴더 안에 css 파일이 존재해야 합니다.
위 두개의 파일을 각각 만든 후 text.html 파일을 실행시키면
위와 같은 결과물을 얻을 수 있습니다.
개인적으로는 html 내에서 스타일을 지정하는 걸 좋아하지 않습니다. 코드를 알아보기도 어렵고 지저분해지는 느낌이 강하기 때문이죠.
그런데 귀찮을 때, 간단한 것만 하나 지정할 때는 저도 모르게 해 버립니다만, css 파일을 따로 만들어서 하시는 걸 추천드립니다.
관리도 쉽고 여러모로 이득이지요.
속성 항목들은 많긴 한데, 외우기 쉬운 것들은 몇가지 안 되서 정리를 다시 한 번 해야 될 거 같네요.
'Programming > HTML & CSS' 카테고리의 다른 글
| [HTML] 테이블 행(row) 마우스 커서 오버시 색 변경 (0) | 2020.06.25 |
|---|---|
| [HTML] 테이블 각 행(row)별로 색 다르게 지정 하는 법 (0) | 2020.06.25 |
| [html | css]스타일 속성 정리 - font-size 편 (0) | 2019.01.01 |
| [html]기본 구조 및 문자열관련 문법 (0) | 2018.12.25 |