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 이론 - 박스모델

기본 템플릿 만들기 

template.html파일을 만들고 

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
  </body>
</html>

이 코드를 저장해 둔 후 이 것을 매번 작성하는 수고할 필요 없이 복사해서 사용하자. 


실습 1. ol과 li 를 이용해서 수업의 리스트를 출력하기.

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
</head>
  <body>
    <ul>
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

  • li 3번 연속되는 부분은 li*3 + tab으로 빠르게 입력할 수 있다. 


실습 2. li 태그에 테두리 넣기

테두리는 border로 설정가능 

style 태그를 head에 넣고 

border:1px : 테두리는 1px의 두께

한칸 띄우고 red : 빨간색으로

한칸 띄우고solid : 단색으로 그린다

=> border:1px red solid;
=> 한칸 띄우는 것이 속성을 구분하는 약속 

solid 말고 dotted로 하면 점선

li {
  border:1px red solid;
}


실습 3. li가 3개인데 중간에 있는 li에만 적용시키고 싶을 경우

html의 속성 중 id를 사용하면 된다. 

<li id="selected">css</li> 로 해서 

id값이 selected 인 것만 수정할 수 있다.

id를 나타내는 특수한 기호 #을 이용.

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    #selected {
      border:1px red solid;
    }
  </style>
</head>
  <body>
    <ul>
      <li>html</li>
      <li id="selected">css</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>


실습 4. css와 테두리 사이의 파란색 동그라미 친 공백을 조절하고 싶다. 


padding 이용

ex) padding:30px을 css코드에 추가

#selected {
      border:1px red solid;
      padding:30px;
    }



실습 5. JavaScript에 파란색 테두리 주기

<!DOCTYPE.html>
<html>
<head>
  <meta charset="utf-8"/ >
  <style>
    #selected {
      border:1px red solid;
      padding:30px;
    }
    #extra{
      border:1px blue solid;
    }
  </style>
</head>
  <body>
    <ul>
      <li>html</li>
      <li id="selected">css</li>
      <li id="extra">JavaScript</li>
    </ul>
  </body>
</html>


실습 6. css와 javascript 사이의 간격 주기


margin 이용

#selected {
      border:1px red solid;
      padding:30px;
      margin:50px;
    }




태그와 태그사이의 간격 정리 - 박스모델



크롬을 이용한 박스모델 

마우스포인터를 css위에 올려놓고 오른쪽 클릭 -> 요소검사



크롬 개발자 도구는 실시간으로 수치를 바꿔보면서 어떻게 하는 것이 시각적으로 아름다운가를 확인하는데 큰 도움을 준다. 

이 개발자 도구로 수정했던 내용은 원래의 소스코드에 영향을 미치지 않는다. 

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

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

CSS 실습1  (0) 2017.12.17
CSS 이론 - float  (0) 2017.12.17
CSS 이론2  (0) 2017.12.16
CSS 이론1  (0) 2017.12.16
개발도구 - 아톰  (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

+ Recent posts

티스토리툴바