[CSS] CSS의 기본 개념과 간단한 예제 코드

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Archives

Today

Total

관리 메뉴

MY MEMO

[CSS] CSS의 기본 개념과 간단한 예제 코드 본문

STUDYING/WEB

[CSS] CSS의 기본 개념과 간단한 예제 코드

l_j_yeon 2017. 4. 19. 21:36

강의 생활코딩 : https://opentutorials.org/course/1

CSS : Cascading Style Sheet

+) Cascading : 최상위 노드 부터 아래로 스타일 속성들이 상속되는 모습이 마치 폭포처럼 보이기 때문

CSS는 독립된 언어 -> HTML을 디자인하기 위하여 고안된 것

html파일 안에서 쓸때는

H1 {color:red}

H1 : 선택자 selector {color:red} : 서술 description

박스모델? css를 이용해서 html의 위치 부피 여백을 지정하는 것이 box model이다

chrome 브라우저의 개발자 도구에서 픽셀을 변화시키면서 실질적으로 볼 수 있음.

그럼 연습 코드를 보자 코드는 모두

참고 : https://opentutorials.org/course/1688/9350 에서 배운고 코딩하였다.

index.html

page_jsp.html

page_operation.html

page_variable.html

style.css

결과물

+) 이미지 삽입하기

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <style>
  img{
  	border:1px solid red;
  	float:left; /*두개의 컨텐츠가 나란히 화면에 배치되도록 하는*/
  	width:100px;
  	height:;
  }
  </style>
</head>

<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/course/1/5641.png" />
생활코딩
Coding Everybody
Opentutorials.org
코스 전체목록
도움말
로그인
웹 애플리케이션 만들기
 
언어
 
클라이언트
 
서버
 
개발도구
 
프로젝트 관리
 
기타
생활코딩
 
hello world

생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.

온라인 강의 소개

입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 또는 커뮤니티에 포스팅 단위로 파편화되어 있습니다. 그래서 최소한 무엇을 검색해야 하는지를 아는 사람들을 위해서는 더 없이 좋은 공간이지만, '무엇을 모르는지 모르는 상태'의 입문자에게는 그림의 떡으로 남아 있습니다. 다시말해서 전문가를 더욱 전문가답게 만드는 혁신에 머물고 있는 것이죠.

생활코딩은 컴퓨터와 인터넷이 존재하는 시대의 공부방법은 어때야 하는가를 찾는 작업을 꾸준히 하고 있습니다. 정보기술이 발전하지 않았던, 낭만적인 시절에는 어떤 일을 하려고 하면 그것을 하기 위해서 필요한 거의 모든 것을 알고 있어야 했습니다. 검색할수도 없었고, 질문하기도 어려웠기 때문입니다. 한편 한번 배운 지식만으로도 평생을 살아 갈 수 있었습니다.

오늘날은 인터넷이 연결된 환경에서 일을 합니다. 언제든지 검색하고, 질문할 수 있습니다. 또 많은 일을 기계가 대신해줍니다. 이런 시대의 공부방법은 과거와 달라져야 한다고 생각합니다.  생활코딩이 지향하는 목표는 작은 교육입니다. 작은교육의 핵심은 '무엇을 모르는지 모르는 상태'에서 '무엇을 모르는지는 아는 상태'가 되는 것입니다. 무엇을 모르는지를 알면, 지금 당장 그 지식을 익히지는 않더라도, 그 지식이 정말 필요할 때 그 지식을 구하려 할 것입니다. 이 때 하는 공부는 이전과 같지 않을 것입니다.

수업소개

생활코딩 실습 시리즈인 웹 애플리케이션 만들기는 웹 기반의 서비스를 만드는 최소한의 절차를 배경지식 없이 무작정 따라하는 코스입니다. 이 코스를 완주하면 웹서비스가 어떤 맥락에서 시작되고, 어떤 과정을 통해서 현실화 되는지에 대한 전체적인 인상을 갖게 될 것입니다. 생활코딩을 지금 시작한다면 여기서 시작하시면 됩니다.

이 수업을 완주하신 후에는 자신이 하고자 하는 일에 따라서 적합한 수업을 선택해서 심화학습하시면 됩니다.

웹 프로그래밍

웹 애플리케이션 만들기 
프로그래밍 오리엔테이션
HTML
CSS
javascript
jQuery
PHP
mysql
리눅스
 안드로이드 프로그래밍

Java
안드로이드 (계획 중입니다)
청소년 프로그래밍

스크래치
이곳의 댓글을 통해서 수업화를 원하는 기술을 알려주시면 스케줄에 따라서 수업을 만들겠습니다.

생활코딩 Youtube 채널

생활코딩의 모든 동영상 강의는 Youtube를 통해서 서비스 되고 있습니다. Youtube 채널을 구독하시면 생활코딩의 새로운 동영상을 받아보실 수 있습니다.

http://www.youtube.com/user/egoing2

저작자표시 비영리 변경금지

'STUDYING > WEB' 카테고리의 다른 글

[DATABASE] 관계형 데이터 베이스 (0)	2017.04.21
[JSP] JSP 기본개념과 간단한 예제 (0)	2017.04.20
[PHP] MYSQL 연동 (0)	2017.04.20
[PHP] PHP의 기본 개념과 간단한 예제 (0)	2017.04.20
[HTML] Definition of HTML and Simple Practice (0)	2017.04.18

공유하기 링크

페이스북
카카오스토리
트위터

'STUDYING/WEB' Related Articles

Comments

MY MEMO

[CSS] CSS의 기본 개념과 간단한 예제 코드 본문

[CSS] CSS의 기본 개념과 간단한 예제 코드

'STUDYING > WEB' 카테고리의 다른 글

티스토리툴바