css 이미지와 글자 스타일 하는 방법 정리, html 스타일

이번 글에서는 이미지와 글자를 스타일 하는 방법에 대해서 정리를 하겠습니다. 

html 안에서 스타일을 해보도록 하겠습니다.

( 원래는 css를 따로 빼지만 html과 함께 작업이 가능합니다. )

기본적인 css 작성법에 대해서 알아보겠습니다.

 

 

간단하게   CSS 스타일 넣는 방법에 대해서 정리를 하겠습니다. 

<p style="font-size : 20px; color : red"> 글자 </p>

거의 모든 태그는 style="" 이라는 속성을 열 수 있습니다.

거기 안에 스타일이름 : 스타일값; 형식으로 스타일을 넣으면 됩니다.

여러개를 css 속성값을 넣을 수 있습니다.

그리고 속성값을 많이 쓰게 된다면...

세미콜론을 꼭 한 속성이 끝날 때 마다 넣어 줘야 합니다. 

 

 

자주 사용하는 글자 스타일들

font-size : 10px; /* 폰트의 크기를 설정 */ font-family : 'gulim'; /* 폰트 서체를 설정 */ letter-spacing : -1px; /* 폰트 자간을 조정 */ text-align : center; /* 폰트를 중앙정렬 하고 싶을 때 */ font-weight : 300; /* 폰트 굵기 */ color : black; /* 폰트 색깔 */

 

 

이미지 정렬과 폭 조정

display : block; margin-left : auto; margin-right : auto; width : 300px;

이미지는 width 많이 사용합니다. px 혹은 % 이런 단위로 폭을 조정가능합니다.

이미지를 가운데 정렬하고 싶으면 display : block; margin-left : auto, margin-right : auto 를 기입해주면 됩니다. 

실무에서 가운데 정렬을 할 때 많은 쓰는 기능입니다.

 

 

텍스트의 일부만 스타일을 변경하고 싶을 때 

<p>저는 배가 고픕니다. <span style="color : red;">치킨을</span> 먹고 싶어요</p>

<span> 이라는 태그로 감싼 뒤에 스타일을 주면 됩니다.

<span> 태그는 가끔 글자 일부를 싸매고 싶을 때 사용하는 큰 의미없는 태그입니다. 

(학습사항) span 태그는 display : inline 이라는 스타일 속성을 내포하고 있으며,

display : inline을 가지고 있는 요소는 폭, 높이 등을 단독으로 결정할 수 없습니다.

폭, 높이를 주고싶으면 얘를 감싸고 있는 <p>에 주십시오)

 

<strong> 태그로 글자 일부를 싸매면 간단히 굵게 표현도 가능합니다.

 

 

 

CSS를 넣어주는 다른 방법에 대해서 알아보겠습니다.

 

이렇게 html안에서 css를 작성할 수 있습니다.

간단한 사이트를 만들고자 한다면 이렇게 이용하는것이 나쁘지 않습니다.

그러나 코드가 길어진다면 좋은 방법은 아닙니다.

문제를 해결하기 위해서 css 파일을 따로 빼내서 관리를 하는 겁니다. 

 

css 를 따로 빼는 방법은 아래와 같은 코드는 head에 넣으면 됩니다.

href는 css파일의 경로입니다. 알하서 작성을 하면 됩니다.

<link rel="stylesheet" href="style.css" />

 

css에서 기본적인 작성법은 아래와 같습니다.

.card {   width: 250px;   display: block;   margin-left: auto;   margin-right: auto; }

중괄호 안에서 스타일을 작성하면 됩니다. 

그리고 .card 가 있습니다. 점을 찍어서 선택을 하게 되는데

이것을 클래스라고 부릅니다.

적용은 html에 class를 만들고 내가 작성한 이름 card를 넣으면 됩니다. 

<img src="firebase-4.jpg" class="card" />

팁 : Brackets 에디터에선 클래스 만드는 작업을 빠르게 가능함

class 하나 미리 작명하시고 거기다가 커서 찍고 ctrl + e / command + e 누르면

<link>로 연결해둔 css 파일이 열리기 때문에 css 파일 수정이 쉽게 가능합니다.

단 비주얼 스튜디오 코드로는 불가능함

 

class 말고 다른 여러가지 방식으로도 스타일을 줄 수 있습니다. 

.profile__card { font-size : 50px }  /*클래스 선택*/ #onlyOne { font-size : 40px } /*아이디 선택*/ div { font-size : 26px } /*태그 선택*/

CSS selector 라고 부르시면 됩니다.

 

클래스 selector는 .클래스명{ }  >>  class="클래스명"을 가진 요소에 스타일을 적용가능

아이디 selector는 #아이디명 { }  >>  id="아이디명" 속성을 가진 요소에 스타일을 적용가능

태그 selector는 p { 스타일~~ }  >>  <p> 태그에 스타일을 적용가능

 

주의 : . 과 #을 실수 할 때가 많다.

 

 

셀렉터의 우선순위

 

물론 class, id를 동시에 가지는 html 요소라면

스타일이 겹칠 수 있습니다. 그럴 경우 우선순위가 존재합니다.

알아두면 좋은 정보

 

1등 : style=""  html 태그 안에 직접 쓰는 스타일
2등 : #id  아이디 셀렉터
3등 : .class  클래스 셀렉터
4등 : p , div , span 등 태그를 직접작성