CSS 실습2

다른 페이지의 레이아웃도 이전시간에 했던 것과 같은 양식으로 수정하기


기본 => style 태그안에 있는 내용을 복사 붙여넣기 하는 것으로 시작.


실습 1. body 안에있는 h2를 50px로 다 키우고 싶다.

h2{
  font-size:50px;
}

작성하고 다 복사 붙여넣기를 해야한다. ==> page수가 엄청 많을 때에는 문제가 된다. 

방법 => CSS를 완전히 HTML로부터 분리한다. 

htdocs 안에 style.css 라는 파일을 만든다. 확장자 명이 css라는 것에 유의한다. 

본래 style 태그 안에 있던 내용을 cut 해서 style.css 안에 paste 

cut 한 페이지로 가서 style 태그를 지우고

link라고 치고 tab 키를 누른다.

href 뒷 부분에 http://localhost/style.css 라고 입력하고 저장을 한다.

type="text/css" 로 지정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <link rel="stylesheet" type="text/css" href="http://localhost/style.css">;
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>


HTML이 link를 만나면 뒤에 있는 내용을 보고 외부에 있는 것을 읽어오려고 한다는 것으로 파악한다. 




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

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

웹 페이지에 코드 삽입하기  (0) 2017.12.18
PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 실습1

- 최종적으로 만들 홈페이지 


실습하기전에 이전에 만들었던 소스 가져오기.

 

이 소스코드


실습 1. 맨 위 그림에서 빨간색 네모부분으로 바꾸기

html에서 header 부분이다.

border을 사용하면 되는데 4면이 다 필요한 것이 아니라 하단의 border만 필요하므로

border-bottom 사용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px solid gray;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
  </body>
</html>


실습 2. 제목과 border 사이가 너무 가까워서 좀 떨어뜨리고 싶다.

padding 사용

padding:20px; 추가.

header {
        border-bottom:1px solid gray;
        padding:20px;
      }


실습 3. 위의 그림에서 왼쪽 아래부분 만들기

본래 코드에서 nav에 해당되는 부분

앞에서 배운 float를 사용하고 left를 사용하면 된다.

nav{
        border-right:1px solid gray;
      }

이렇게만 하면 

맨 위의 그림과 다르게 화면 맨 끝에 테두리가 생기게 됨 : right 로 하면 화면 끝에 생긴다. 

수정하기 위해 필요한 것 : width

이렇게 하면 화면 끝이 아닌 설정한 width 뒤에 선이 생기게 된다. 

nav{
        border-right:1px solid gray;
        width:200px;
      }


실습 4. 맨 위 그림처럼 아래의 설명 부분이 오른쪽으로 오게 하기.

먼저 설명이 있는 html 파일. 예를 들어 이전에 만들었던 page_html에서 위에서 설명한 만큼 수정한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8 /">
    <style>
      header {
        border-bottom:1px gray solid;
        padding:20px;
      }
      nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }
    </style>
  </head>
  <body>
    <header>
    </header>
    <nav>
    <ol>
    </ol>
    </nav>
    <article>
       <h2>JavaScript란?</h2>
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
       JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>

여기서 아래로 내려간 글자를 오른쪽으로 옮기기 위해 float 추가

nav {
        border-right:1px gray solid;
        width:200px;
        float:left;
      }

이렇게 하면 li의 height를 초과하는 부분은 왼쪽 끝부터 글자가 시작되어서 보기가 안좋다. 

1번 방법 이를 위해 nav의 height를 늘려주자.


nav {
        border-right:1px gray solid;
        width:200px;
        height:600px;
        float:left;
      }

2번 방법 아래 내려가는 문자들을 float로 올려주자

article {
        float:left;
      }


글자가 적절한 길이이면 자동으로 올라간다. 


실습 5. article 영역에 적절한 여백 주기. 


너무 붙어있어서 보기가 안좋다. 

padding 사용

article {
        float:left;
        padding:20px;
      }

  • tip : Ctrl + Space ==> 추천기능


실습 6. 앞의 숫자가 마음에 들지 않는다.

소속된 곳에서 list-style:none 삽입

nav ol {
        list-style: none;
      }



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

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

PHP &amp; JavaScript  (0) 2017.12.18
CSS 실습2  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
Float 

웹페이지 레이아웃을 할 때 사용되는 것. 



실습 1. 매우 긴 txt를 body에 넣기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그 

 ...............

생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>


실습 2. 이미지를 삽입하기

원하는 이미지의 주소를 복사

img 태그 사용 src 속성 입력


<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>


실습 3. 이미지에 빨간색 테두리 넣기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    img{
      border:1px red solid;
    }
  </style>
</head>
  <body>
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
  </body>
</html>




글자와 이미지 사이에 여백이 생기는 이유 : 이미지나 글자나 같은 한 행을 차지한다. 같은 행을 차지하는데 크기가 달라서 여백이 생긴다. 


실습 4. 글자를 그림과 같이 위로 끌어올려서 좀 더 아름답게 보이게 하기


float 이용

img 태그 안에 float:left 추가

img{
      border:1px red solid;
      float:left;
    }

right도 해보기

float : 그림과 글자를 나란히 나타나게 하는 역할을 한다. 

left면 왼쪽에 정렬되게 하고 right면 오른쪽에 정렬되게 한다. 





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

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

CSS 실습2  (0) 2017.12.17
CSS 실습1  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
CSS 이론1  (0) 2017.12.16
CSS 이론2

CSS는 태그 별로 기본 디자인을 가지고 있음

CSS를 통해서 모든 디자인을 바꿀 수 있다.


실습 1 : h1태그의 글자 사이즈를 바꾸고 싶다.

font-size:xxpx 사용

속성과 속성의 구분 => ;
  h1 {
    color:red; 
    font-size:10px
  }


실습 2 : h2태그도 h1태그와 같은 효과를 주고 싶다.

    h1, h2 {
    color:red; 
    font-size:10px
  }


실습 3 : 실습 2의 속성은 유지하고 h2에만 밑줄을 긋고 싶다.

h1, h2 {
  color:red;
  font-size:10px
}
h2 {
   text-decoration:underline;
}
실습 4 : header태그 밑에있는 h1에만 효과를 주고 싶다.

  • <h1>CSS</h1>을 header태그로 감싼 후에 header h1으로 구현 가능

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      h1, h2 {
        color:red;
        font-size:10px
      }
       h2 {
         text-decoration:underline;
      }
      header h1{
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>CSS</h1>
    </header>
    <h2>JavaScript</h2>
    <h3>HTML</h3>
    <h1>PHP</h1>
  </body>
</html>

border => 테두리



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

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

CSS 이론 - float  (0) 2017.12.17
CSS 이론 - 박스모델  (0) 2017.12.17
CSS 이론1  (0) 2017.12.16
개발도구 - 아톰  (0) 2017.12.16
HTML실습  (0) 2017.12.14
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

+ Recent posts

티스토리툴바