호랑사과
[생활코딩] 웹어플리케이션 만들기 3일차 본문
이 글은 오픈튜토리얼스의 생활코딩의 '웹어플리케이션 만들기'를 듣고 개인적으로 정리한 내용입니다.
굵은 글씨로 된 제목을 누르시면 해당 강좌로 이동할 수 있습니다.
CSS는 HTML와는 독립된 언어지만 함께 써야한다. CSS는 HTML을 디자인하기위해 존재한다.
<style>이라는 태그를 이용하여 HTML에 적용시킨다. <style>태그가 담고있는 정보는 CSS 문법에 따라 정의한다. <style>은 HTML 언어이다.
h1{color:red} 에서 h1은 h1을 가리키며 이것을 붉은색으로 나타내라는 의미이다.
h1은 선택자(selector)이며 {color:red}는 어떤 효과를 나타낼지 의미하는 서술(description)이다. color:red는 속성이라 가리키며 다른속성과는 ; 으로 구분한다.
CSS를 통해서 HTML 태그를 변경시킬 수 있다.
박스모델은 각각의 HTML 태그들의 위치, 부피, 여백 등을 지정한다.
float을 이용해서 이미지를 왼쪽으로 배치할지, 오른쪽으로 배치할지를 정할 수 있다.
외부로 CSS파일을 만들어서 불러오는 법은 먼저 외부의 CSS 파일(style.css)을 만든다. <head>태그에 <link rel="stylesheet" type="text/css" href="http://localhost/style.css"> 처럼 넣으면 외부의 CSS 파일(style.css)을 읽어와서 style을 적용시킬 수 있다. 이를 이용하면 페이지마다 적용된 중복되는 css코드를 제거할 수 있어서 유지보수가 쉬워진다. 이를 중복의 제거라 한다.
구글 크롬 플러그인의 Stylebot 을 설치하면 웹브라우저 상에서 자신만의 다양한 디자인을 할 수 있다. 수정한 파일은 저장되어 있기 때문에 해당 사이트에 재방문할 시에 수정했던 내용을 바탕으로 하여 웹페이지를 띄워준다. 자신이 바꿨다고 해서 그 페이지가 본질적으로 바뀌는 것은 아니다. 그러나 이 플러그인을 이용해서 먼저 수정을 해보고 실제로 적용하는 쪽으로 사용하면 좋은 툴이라고 생각한다.
'작업실 > 웹프로그래밍' 카테고리의 다른 글
| [생활코딩] 웹어플리케이션 만들기 6일차 (0) | 2017.06.18 |
|---|---|
| [생활코딩] 웹어플리케이션 만들기 5일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 4일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 2일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 1일차 (0) | 2017.06.18 |
