ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • CSS 편 - 3일차
      개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 6. 09:00
      반응형



       

      3일차

       

       

       

      08. 박스 모델

      • 간단한 디자인을 만들더라도 필요한 개념이 하나 있다. 바로 박스모델이라는 것이다.
      • 예를 들어 <h1>태그로 감싼 것과 <a>태그로 감싼 것의 차이를 생각해보자.
      • <h1>태그는 줄바꿈이 되어 화면 전체를 쓰며, <a>태그는 줄바꿈되지 않고 다른 콘텐츠와 같은 라인에 위치한다.
      • 이 <h1>태그와 <a>태그의 테두리를 그리면 부피감을 알 수 있다. 아래 코드를 참고하자.
      <style>
    h1{
        border-width: 5px;
        border-color: red;
        border-style: solid;
    }
    a {
        border-width: 5px;
        border-color: red;
        border-style: solid;
    }
</style>
      • border-width는 테두리의 두께, border-color는 테두리의 색상, border-style은 테두리의 스타일을 나타낸다.
      • 하지만 코드의 중복을 제거하면 아래와 같다.
      <style>
    h1, a{
        border: 5px solid red;
    }
</style>
      • 다시 돌아가 <h1>태그처럼 화면 전체를 쓰는 태그들은 블록 레벨 엘리먼트(block level element)라고 하며, <a>태그처럼 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트(inline element)라고 한다.
      • 용어는 크게 중요하지 않으며 아래와 같이 display라는 CSS 속성으로 언제든지 바꿀 수 있다.
      <style>
    h1{
        border: 5px solid red;
        display: inline;
    }
    a {
        border: 5px solid red;
        display: block;
    }
</style>
      • 추가 팁으로 태그를 안보이게 하고 싶다면 아래와 같이 작성하면 된다.
      display: none;
      • 이제 콘텐츠에 존재하는 간격을 알아보자.

      • 검색 엔진에 "css box model"을 검색하면 위와 같은 그림이 여러 종류가 나오며 박스모델의 중요한 개념이다.
      • 콘텐츠(content)에서 테두리(border)를 기준으로 안쪽이 padding, 바깥쪽이 margin이다.
      • 그리고 콘텐츠(content)의 크기를 지정할 때는 폭은 width, 높이는 height로 지정할 수 있으며 아래와 같이 쓸 수 있다.
      <style>
    h1{
        border: 5px solid red;
        padding: 20px;
        margin: 20px;
        width: 100px;
        height: 50px;        
    }
</style>
      • 또한 마우스 오른쪽 버튼를 눌러 제일 아래쪽 검사를 누르면 어떤 태그를 선택했을 때 Styles라는 부분에 이 태그가 어떤 CSS 스타일의 영향을 받고 있는지 잘 보여주며, 매우 중요한 기능이다.
      • 보통 F12로 킬 수 있고, 개발자도구라고 부른다.

       

       

       

       

       

       

      09. 박스 모델 써먹기

      • 위 사진처럼 WEB이라는 제목 아래에 선을 그어주고, 왼쪽 목록 오른쪽에 구분선을 그어줄려면 어떻게 해야 할까?
      • 기존 코드에 아래와 같이 코드를 추가 작성해보자.  
      <style>
    body {
        margin: 0;
    }
    #active {
        color: red;
    }
    .saw {
        color: gray;
    }
    a {
        color: black;
        text-decoration: none;
    }
    h1 {
        font-size: 45px;
        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>
      • 먼저 제목인 <h1>태그의 아래쪽에 줄을 긋기 위하여 border-bottom 속성으로 줄을 긋고, margin과 padding을 조정하여 적당한 간격을 지정하였다.
      • 마찬가지로 목록 태그인 <ol>태그의 오른쪽에 줄을 긋기 위하여 border-right 속성으로 줄을 긋고, width와 margin, padding으로 크기와 간격을 조정하여 지정하였다.
      • 마지막으로 기본값으로 body에 margin값이 지정되어있어 margin을 제거하였다.
      • 이것을 수정하기 전에 확인을 위해서는 개발자 도구를 사용하면 된다.

       

       

       

       

       

       

      10. 그리드 소개

      • 이전 장에서 위 그림처럼 작업하였고 이제 하단부의 내용이 목록 오른쪽에 나란히 위치해야 한다.
      • 이러한 작업을 할 수 있는 최신 방법으로서 그리드(Grid)가 있다.
      • 최종적으로 작성된 코드를 보며 하나씩 확인해보자.
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #grid {
                border: 5px solid pink;
                display: grid;
                grid-template-columns: 150px 1fr;
            }
            div {
                border: 5px solid gray;
            }
        </style>
    </head>
    <body>
        <div id="grid">
            <div>NAVIGATION</div> 
            <div>CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
        </div>
    </body>
</html>
      • 먼저 NAVIGATION과 많은 글이 있는 각각의 내용을 테두리를 주고 나란히 배치하기 위하여 <div>태그를 사용하였다.
      • <div>태그는 division의 약자이며, 무색 무취와 같은 태그이다. display 속성은 기본적으로 블록 레벨 엘리먼트이다.
      • 만약 display 속성이 인라인 엘리먼트인 태그를 사용할 때에는 <span>태그를 사용하면 된다.
      • <div> 두 개의 태그를 나란히 배치하기 위해 그것을 감싸는 부모 태그가 필요하여, 디자인 목적만으로 <div id="grid">을 사용하였다.
      • 이제 grid를 사용하기 위해서 display 속성에 grid를 쓰지만 아무 변화가 없다.
      • 하지만 grid-template-columns 속성을 추가한 다음 첫 번째 칼럼은 150px정도의 부피를 갖고, 두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr을 지정하였다.
      • 이 상태에서 많은 글이 있는 영역은 자동적으로 커지고 NAVIGATION 영역은 150px을 고정적으로 차지하게 된다.
      • 만약 150px가 아닌 1fr을 작성할 경우 서로 각각 1:1의 비율로 두 칼럼은 같은 크기가 되며, 2fr로 할 경우 2:1의 비율로 두 칼럼의 크기가 정해진다.
      • 특히 많은 글이 있는 영역은 글자가 많아 자동으로 칼럼이 커지고 왼쪽에 NAVIGATION을 감싸는 태그도 자동으로 커지게 된다. 이것이 바로 그리드이다.

      • 그리드는 아주 최신 기술이다. 이러한 최신 CSS 기능을 사용하려면 현재 환경에서 사용할 수 있는지 데이터에 근거해서 판단할 필요가 있다. 이를 아래 사이트에서 확인할 수 있다.
      • https://caniuse.com/
       

      Can I use... Support tables for HTML5, CSS3, etc

       

      caniuse.com

      • 여기서 grid를 검색해보면 초록색, 연두색, 빨간색 순으로 각 웹 브라우저 별로 사용할 수 있거나, 부분적으로 사용할 수 있거나, 사용할 수 없음을 알 수 있다.

       

       

       

      11. 그리드 써먹기

      • 전 장에서 배웠던 그리드를 사용하여 아래와 같이 웹 페이지를 꾸며보자.

      • 왼쪽 목록인 <ol>태그와 오른쪽에 본문내용이 오기 위해서는 먼저 본문 내용을 묶어야 한다. 이 때 의미도 없고 기능도 없는 <div>태그를 사용한다.
      • 그러면 이제 <ol>태그와 본문인 <div> 태그가 남고, 이 두 개를 그리드를 사용하기 위해서 하나로 묶어야 하며 그러기 위해서는 공통의 부모 태그가 필요로 한다. 마찬가지로 <div>태그를 사용하여 묶어준 후 그리드로 지정하기 위해 id 값으로 'grid'를 지정한다.
      • 그리고 id가 'grid'인 태그에 대해 display: grid로 지정하고, grid-template-columns에서 첫 번째 칼럼인 <ol>태그는 150px로 설정하고, 두 번째 칼럼인 <div>태그는 1fr로 지정한다.
      • 웹 페이지가 어느정도 형태가 갖춰지면 조금 다듬기 위해 개발자 도구를 키고 <ol>태그의 padding 값이 20px인데 이것을 더블클릭하여 적당히 33px로 하니 깔끔하여 <ol>태그에 대해 padding-left 33px로 설정한다.
      • 이렇게 설정하니 본문의 글이 밀리는 현상이 있어 본문인 <div>에 id값으로 'article'을 지정하고 #article에 대해 padding-left값을 20px로 설정한다.
      • 몇 가지 정리를 해보자.
      • 먼저 .saw 부분과 #active 부분은 필요없으므로 지운다.
      • 그리고 <ol>태그가 현재 내비게이션 역할로 쓰이고는 있지만 본문에 <ol>이 들어갈 경우 문제가 될 수 있어 id 값이 'grid'인 태그 밑에 있는 <ol> 태그라고 지정하면 더 의미가 분명해진다.
      • 아래의 완성된 코드를 보자.
      <!--2.html-->
<!DOCTYPE html>
<html>
    <head>
        <title>WEB1 - CSS</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0;
            }
            a {
                color: black;
                text-decoration: none;
            }
            h1 {
                font-size: 45px;
                text-align: center;
                border-bottom: 1px solid gray;
                margin: 0;
                padding: 20px;
            }
            #grid {
                display: grid;
                grid-template-columns: 150px 1fr;
            }
            #grid ol {
                border-right: 1px solid gray;
                width: 100px;
                margin: 0;
                padding: 20px 20px 20px 33px;
            }
            #article {
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <div id="grid">
            <ol>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
                    CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
                    Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
                    The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
                    The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.
                </p>
            </div>
        </div>
    </body>
</html>

       

       

       

       

      해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

      CSS 편 - 5일차  (0) 2025.05.08
      CSS 편 - 4일차  (0) 2025.05.07
      CSS 편 - 2일차  (0) 2025.05.05
      CSS 편 - 1일차  (0) 2025.05.04
      HTML 편 - 5일차  (2) 2025.05.03

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바