간단한 스타일 넣는 법
<p style="font-size : 20px; color : red"> 글자 </p>거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다.
거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다.
여러개를 넣고 싶다면 뒤에 쭉 나열해주시면 됩니다.
세미콜론 까먹으면 안됩니다.
자주 사용하는 글자 스타일들
font-size : 20px;
font-family : 'gulim';
color : black;
letter-spacing : -1px;
text-align : center;
font-weight : 600;영어 단어를 잘 알고 계시면 무슨 뜻인지 바로바로 파악은 쉽습니다.
이미지 정렬과 폭 조정
display : block;
margin-left : auto;
margin-right : auto;
width : 150px;이미지는 width 많이 사용합니다. px 혹은 % 이런 단위로 폭을 조정가능합니다.
이미지를 가운데 정렬하고 싶으면 display : block; margin-left : auto, margin-right : auto 를 기입해주면 됩니다.
텍스트의 일부만 스타일을 변경하고 싶을 때
<p>안녕하세요 저는 <span style="color : red;">뛰어난</span> 개발자입니다.</p><span> 이라는 태그로 감싼 뒤에 스타일을 주면 됩니다.
<span> 태그는 가끔 글자 일부를 싸매고 싶을 때 사용하는 큰 의미없는 태그입니다.
<strong> 태그로 글자 일부를 싸매면 간단히 굵게 표현도 가능합니다.
(참고) span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며,
display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없습니다
폭, 높이를 주고싶으면 얘를 감싸고 있는 <p>에 주십시오
style 속성 안에 들어갈 코드가 매우 길어지면
HTML이 더러워지기 때문에 이걸 다른 파일로 빼서 작성할 수 있습니다.
CSS 파일로 빼면 됩니다.
0. CSS를 사용하시려면 CSS파일을 만든 후 HTML에 첨부해야합니다.
우선 작업폴더에 .css로 끝나는 파일 아무거나 하나 만드시고
HTML 파일로 돌아와서
<link href="님들의css파일경로~~" rel="stylesheet"><head>태그 안에 <link>태그를 넣으시고
href라는 속성에 여러분의 .css 파일 경로를 지정해놓으면 css 파일 이용가능합니다.
저는 css 폴더 안에 main.css 파일을 만들었기 때문에
css/main.css 이렇게 경로를 적었습니다.
"현재 html파일과 같은 경로에 있는 css 폴더 내부의 main.css 파일을 첨부하라"는 뜻입니다.
그럼 이제 css 파일에서 스타일 작성이 가능한데
정확한 방법은
1. CSS파일에 스타일을 집어넣고 .어쩌구 작명해줍니다
.profile {
width : 200px;
display : block;
margin : auto;
}스타일을 적고 .어쩌구 이렇게 아무렇게나 작명하고 { } 중괄호로 묶어줍니다.
위의 코드는 3줄의 스타일을 .profile 이렇게 하나의 단어로 묶은겁니다.
그 단어를 클래스라고 부릅니다.
2. HTML에 클래스 명을 첨부해서 스타일을 넣을 수 있습니다.
<img src="lion.png" class="profile">class 속성을 열고 클래스명을 집어넣으면
css 파일에서 묶어놨던 스타일들이 다 적용됩니다.
3. Brackets 에디터에선 클래스 만드는 작업을 빠르게 하실 수 있습니다.
class 하나 미리 작명하시고 거기다가 커서 찍고 ctrl + e / command + e 누르면
<link>로 연결해둔 css 파일이 열리기 때문에 css 파일 수정이 쉽게 가능합니다.
class 말고 다른 식으로도 스타일을 묶을 수 있는데
.profile { font-size : 20px } /*클래스*/
#special { font-size : 30px } /*아이디*/
p { font-size : 16px } /*태그*/CSS selector 라고 칭하는 것들입니다.
클래스 selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일을 적용가능합니다.
아이디 selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일을 적용가능합니다.
태그 selector는 p { 스타일~~ } 이렇게 적을 수 있고 모든 <p> 태그에 스타일을 적용가능합니다.
점과 샵 기호를 잘 외워두도록 합시다.
셀렉터의 우선순위
물론 class, id를 동시에 가지는 html 요소라면
스타일이 겹칠 수 있습니다. 그럴 경우 우선순위가 존재합니다.
style="" (1000점)
#id (100점)
.class (10점)
p (1점)
정확한 카운트법은 아니지만 아무튼 이런 식입니다.
점수가 높을 수록 더 우선적으로 적용됩니다.
'html' 카테고리의 다른 글
| form, input, 버튼(button) (0) | 2024.07.04 |
|---|---|
| 네모박스(box),레이아웃,float, display (0) | 2024.07.04 |
| html 언어_태그_링크 (0) | 2024.07.04 |
| css 배경속성(background,position(좌표)) (0) | 2024.07.04 |
| 24.07.03> this, dom (0) | 2024.07.03 |