-
[ CSS ] CSS 처음 시작하기_CSS 작성 방법코딩의 즐거움/CSS 2020. 11. 9. 23:22
[ CSS ] CSS 처음 시작하기_CSS 작성방법
html은 텍스트
css 디자인
이렇게 머릿속에 입력해 두면 구분하기 편하다.
html에 전달하고자 하는 내용을 적어주고,
css로 꾸며주면 된다.
우선 CSS 코드 작성 방법부터 알아보자.
선택자 { 속성 : 값; }
CSS를 구성하고 있는 문법이다.
선택자를 적고 { } 안에다가 주고싶은 속성에과 값을 부여하고
; 로 막아주면 HTML에 적용이 된다.
아래는 작성예이다.
html body태그 안에 제목태그인 h1에 안녕하세요. 라는 글자를 적었다.
h1(선택자) { width(속성) : 100px(값) ; }
-> h1 제목 태그에 width 너비를 100px만큼 주겠다는 의미.
h1{ height : 100px; }
-> h1 제목 태그에 height 높이를 100px만큼 주겠다는 의미.
h1 { border : 1px solid red ; }
-> h1 제목태그에 border 테두리를 1px 두께의 solid (이건 선의 형태)로 빨간색상을 주겠다는 의미.
주어진 css 문법에 속성과 값을 대입해서 html을 꾸며주면 된다.
그럼 html에 css 효과를 어떻게 적용하나?
내가 배운 4가지 방법을 공유하겠다.
<h1>css 효과 적용하기</h1>
위와 같이 작성한 html h1 제목태그에
테두리 두께 2xp 에 색깔은 보라색
으로 css로 효과를 줘보자
우선 css 적용 첫번째 방법 : html 태그 안에 style 코드 작성
h1 태그에 보라색 테두리 적용하기.
<h1 style="border:2px solid purple;"> css 효과 적용하기 </h1>
h1 태그 안에 style="속성:값;" 을 적어서 적용해주면 된다.
이 방법은 보통 카페나 블로그처럼 head 태그가 노출이 안되는 경우에 작성하기 좋다.
css 적용 두번째 방법 : head 태그 안에 css 코드 작성하기
동일하게 2px 두께의 보라색 테두리가 나타나게 css 적용하기
이번에는 <body> 태그가 아닌 <head>안에 <style> 태그로 묶어서 css를 적용해주었다.
<head>
<style>
h1{
border : 2px solid purple ;
}
</style>
</head>
이 방법은 현재의 html 내에서만 적용이 가능하고,
html 태그 안에 적용하는 것보다 훨씬 편하고, 다양한 디자인을 줄 수 있다.
css 적용 세번째 방법 : 외부에 css 적용하기
세번째 방법은 link를 걸어서 다른 곳에 적은 css 문서에 연결하는 방법이다.
<head> 태그안에 링크를 걸어준다.
<head>
<link ref="stylesheet" href="style1.css">
</head>
link 태그는 닫는 태그가 없으며
href 안에 연결하고자하는 문서의 css이름.확장자(css)를 정확하게 입력해줘야 한다.
링크를 걸어준 css문서에 디자인 하고자하는 css 코드를 적어주면 된다.
위 방법은 여러개의 html 문서에 적용이 가능하며,
수정할 때도 동일한 확장자명으로 지정이 되어 있다면 한번에 수정이 가능하기 때문에
적용만 잘 해주면 코드 작업하기가 한결 수월하다.
보통 css 작성 내용이 많이 때문에 외부스타일시트를 많이 사용하는 편이다.
css 적용 네번째 방법 : 제이쿼리 @import 적용하기
<head>
<style>
@import(스타일시트이름.css);
</style>
</head>
@import로 외부 스타일시트에 연결해서 적용해주는 방법이 있다.
이방법도 여러개의 html 문서에 적용이 가능하며,
@import 별로 영역을 분류해서 지정해주기면 좋다.
예를 들어서
@import(header_style.css)는 헤더부분에 들어가는 내용만 작성하고,
@import(footer_style.css)는 푸터부분에 들어가는 내용만 작성해두면
나중에 수정하거나 다른 html에 적용할 때 편리하고 좋다.
이렇게 html에 css 적용하는 방법 총 네가지에 대해서 포스팅을 했는데,
네개 모두 상황에 따라서 사용되기 때문에 익혀두는 게 좋다.
어차피 계속 사용하다보면 저절로 익혀지기 때문에,
그냥 많이 연습해보면 저절로 익혀진다.
'코딩의 즐거움 > CSS' 카테고리의 다른 글
[ 코딩 ] css background 속성 (0) 2020.12.08 [ 코딩 ] css display 속성 (0) 2020.12.05 [ css ] 토글버튼 - 메뉴버튼 클릭 시 메뉴가 나타나게 만들기 (0) 2020.11.28 [ CSS ] 후손 선택자와 자손 선택자 (0) 2020.11.24 [ CSS ] CSS padding 과 margin 적는 순서 + 차이 (0) 2020.11.10