[CSS] 생활코딩 3일차

13979 단어 CSSBox ModelBox Model

이번 시간에는 우리가 만든 WEB이라는 홈페이지를 구체적으로 디자인해보는 시간을 가질 것이다.

제목을 나타내는 < h1 >과 하이퍼링크를 나타내는 < a >에는 차이점이 존재하는데, 바로 h1은 화면 전체를 사용한다는 것과 < a >는 자신의 컨텐츠만 공간을 차지한다는 것을 알 수 있다.

이것을 시각적으로 확인하기 위해서 우리는 제목과 하이퍼링크에 테두리를 넣어보는 작업을 해보았다.

<style>
      /*
      block level element
      */
      h1{
        border-width:5px;
        border-color:red;
        border-style:solid;
        /*display:inline; 자신의 공간만 차지하도록 하는 태그*/
        /*display:none; 웹페이지 화면에서 안보이게 하는 태그*/
      }
      /*
      inline element
      */
      a{
        border-width:5px;
        border-color:red;
        border-style:solid;
        /*display:block; 화면 전체를 차지하도록 하는 태그*/
      }
</style>

화면 전체를 쓰는 태그를 우리는 'block level element'라고 부르고 자기 자신만 공간을 차지 하는 태그를 'inline element'라고 부른다. 이 block leverl element와 inline element는 display라는 속성의 기본값일 뿐 CSS로 언제든 바꿀 수 있음을 기억하자.

  h1,a{
        border-width:5px;
        border-color:red;
        border-style:solid;
        /*border:5px solid red; 와 같음(순서 무관)
        /*display:inline; 자신의 공간만 차지하도록 하는 태그*/
        /*display:none; 웹페이지 화면에서 안보이게 하는 태그*/
        /*display:block; 화면 전체를 차지하도록 하는 태그*/
      }

우리는 선택자에서 콤마(,)라고 하는 선택자를 통해서 코드의 양을 획기적으로 줄일 수 있다.

h1{
        border:5px solid red;
        padding:20px;
        margin:20px;
        display:block;
        width:100px;
}

정리하자면, HTML의 태그들은 그 태그의 기본적인 성격에 따라서 화면 전체를 쓰기도 하고 자기 크기만큼을 갖기도 하는데 화면 전체를 쓰는 것을 block level element, 자기 크기만 갖는 것을 inline element 라고 한다.

컨텐츠의 크기를 지정할 때는 폭은 width, 높이는 height, 콘텐츠와 바깥쪽에 있는 테두리 사이의 간격은 padding, 테두리와 테두리 사이의 간격은 margin값을 지정하면 된다.

여태까지 배운 개념을 Box model 이라고 부른다.

Box model을 좀 더 구체적이고 효과적으로 분석하고 디자인하고 싶다면 웹페이지에 오른쪽 마우스를 눌러서 '검사'라는 기능을 사용하면 된다.

<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<style>

  body{
    margin:0;
  }
  a {
    color:black;
    text-decoration: none;
  }
  #active{
    color:red;
  }
  .saw{
    color:gray;
  }
  h1{
    font-size:60px;
    text-align:center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
</style>

</head>

<body>
<h1><a href="index.html">WEB</font></a></h1>
<ol>
  <li><a href="1.html" class="saw">HTML</a></li>
  <li><a href="2.html" class="saw" id="active">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.

현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.
</p>

</body>
<html>

  • tag 테두리 설정: "border"
  • 화면 전체 크기를 갖는 tag = block level element tag
  • 자기 자신의 크기를 갖는 tag = inline element tag
  • block -> inline 속성 바꾸기 : "display"
  • 중복 제거 (선택자 중복, 속성 중복)
  • content와 테두리 사이의 간격 : "padding"
  • 테두리와 테두리 사이의 간격 : "margin"
  • tag 크기 설정 : "width", "height"
  • web page 우클릭 -> 검사 -> Styles : tag CSS 속성 보기
프로젝트 테이블 csv 파일을 이용하여 로우에 데이터 입력하기
백준 1978번 문제(소수 찾기) C++로 풀기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage