CSS 이론

도입

HTML => 너무 못생겼다. 

정보를 꾸미기 위한 언어 CSS

Cascading Style Sheet




CSS => Style 을 위한 언어

HTML + CSS : CSS는 독립적인 언어이긴 하지만 HTML 없이는 의미가 없다. 

HTML : 정보에 집중

CSS : 디자인에 집중








HTML과 CSS의 공존

=> Style이란 태그

tip : Ctrl + \ 를 통해 왼쪽에 있는 Tree View를 껐다 켰다 할 수 있음


CSS실습 전 코드




실습 1 : h1태그의 색과 글자크기를 바꾸고 싶다. 

<style>
  h1 {color : red}
</style>

CSS의 시작과 끝은 style 태그에 있다. 

<style> 까지 HTML 코드이고 이 안에 있는 내용이 CSS 코드이다. 

이유 : Markup(꺽새) 가 있으므로

h1의 의미 : h1이란 태그를 가지고 있는 것들의 속성을 설정







1번 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h3>HTML</h3>
  </body>
</html>

2번코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1 {color:red}
    </style>
  </head>
  <body>
    <h1>CSS</h1>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
    <h1>PHP</h1>
  </body>
</html>



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

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
HTML실습  (0) 2017.12.14
HTML 문법 - 태그의 중첩  (0) 2017.12.14
도구의 필요성

삽과 포크레인


삽 : 직관적 사용

포크레인 : 훨씬 효율적


반드시 알아두었으면 좋겠다는 개발도구

버전 관리 시스템 (Version Control System)

문제가 발생했을 때 언제, 누구에게서 발생했는지를 파악할 수 있게 해준다.

여러사람이 함께 작업할 때 질서를 잡아준다. 

GIT 에 대해 배우기


코드 편집기 (Editor)

=> GITHUB 에서 만든 아톰


다운받고 settings -> install -> emmet 검색 & install 



<html></html> 이렇게 칠 필요 없이

html + tab 을 하면 자동으로 완성

리스트 3개가 있는 부분은 

li*3>a + tab으로 한번에 만들어 줄 수 있다.


이전 사진과 다르게 localhost가 opentutorials.org로 바뀌었다. 

이처럼 한번에 여러 내용을 수정하고 싶을 때

Ctrl 키를 누르면 MultiSelection이 가능해진다. 하고 수정하면 된다.
저작자표시 비영리 변경금지

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론2  (0) 2017.12.16
CSS 이론1  (0) 2017.12.16
HTML실습  (0) 2017.12.14
HTML 문법 - 태그의 중첩  (0) 2017.12.14
HTML 이론 - HTML의 기본문법과 속성  (0) 2017.12.12
HTML실습

최종적으로 만들 페이지.


제목을 나타내는 태그 <hx> x는 숫자이다. 

<h1> -> 진하게 글씨가 나온다.

<h2> -> <h1> 보다 작은 글씨가 나온다.

태그 없이 쓰면 앏게 나온다.



중간실습

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
  </head>
  <body>
    <h1>JavaScript</h1>
    <ol>
      <li>JavaScript란</li>
      <li>변수와상수</li>
      <li>연산자</li>
    </ol>
  </body>
</html>

정보의 전달을 위한 것이 html이라는 것을 상기하면서 작성 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
  </head>
  <body>
    <h1>JavaScript</h1>
    <ol>
      <li>JavaScript란</li>
      <li>변수와상수</li>
      <li>연산자</li>
    </ol>
    <h2>변수와 상수</h2>
    변수란
    <ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항</li>
    </ul>
  </body>
</html>


html 코드화 한다 = Markup 한다.


의미론적인 웹

Semantic Web 

웹에서 html이 차지하는 것은 정보

디자인적인 측면은 CSS로 분리

html 정보를 더욱 잘 들어내게 하는 것들 => Semantic Web

문서를 탐색하는 역할을 하는 정보 네비게이션

<ol>
      <li>JavaScript란</li>
      <li>변수와상수</li>
      <li>연산자</li>
</ol>

문서에서 본문에 해당되는 내용 컨텐츠

<ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항</li>
</ul>

두 내용은 성격이 다르다

<nav>

기계들 입장에서 안에있는 list들이 navigation의 역할을 하는 것임을 분명히 알 수 있다.

어떤 기능이 있는 태그는 아니다. but navigate하는 역할의 내용이라는 것은 분명히 알 수 있음 => 의미론적인 웹

<header>

<h1>으로 감싸져 있던 내용은 문서의 간판에 해당되는 내용임. 여기에는 <header> 태그를 달아서 더 분명히 할 수 있다.

<article>

본문에 해당되는 내용은 <article> 태그로 감싸서 의미를 더 분명히 할 수 있다. 


사이트 완성


index.html => 대문 페이지라는 약속이 되어있음. (Default)


1,2,3 리스트를 클릭하면 해당하는 정보를 나타내는 article 이 나오도록 만들기.

link를 넣기 위해

<a herf=""> 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
  </head>
  <body>
    <header>
    <h1>JavaScript</h1>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
  </body>
</html>


다음 link의 내용을 추가.

제목을 누르면 index.html로 갈 수 있도록 링크를 추가. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
   
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>연산자</h2>
       연산자는 계산을 할 때 사용되는 것 입니다.
    </article>
  </body>
</html>


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

'웹 프로그래밍' 카테고리의 다른 글

CSS 이론1  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
HTML 문법 - 태그의 중첩  (0) 2017.12.14
HTML 이론 - HTML의 기본문법과 속성  (0) 2017.12.12
수업소개 ~ 서버와 클라이언트  (0) 2017.12.04

+ Recent posts

티스토리툴바