카테고리 없음

css정리2

dywm23 2025. 2. 2. 05:13
  • css로 박스 만드는 법
<style>
      h1{border-width:5px;
        border-color:red;
        border-style: solid;}  
        /* h1태그는 화면 전체를 쓰는 것을 알 수 있음 block level element
        element는 태그와 같은 의미
        display:inline;이라고 해주면 컨텐츠 부피만큼 블록이 만들어짐*/
      a{border-width:5px;
        border-color:red;
        border-style: solid
        /* 자기 자신만의 컨텐츠크기만큼 크기를 갖는 것을 inline element
        */
        /* h1, a{
        border:5px solid red;}로 간략하게 줄여서 하는 것이 정석이다.(순서 상관x) */
      }
    </style>

 

 

 

 

  • css로 박스 만드는법2
<style>
   
         h1, a{
        border:5px solid red;
         padding:10px;
        margin:0px;
        /* solid 테두리 실선인지 단선인지 정함, solid는 단선
        border 테두리 굵기, 컨텐츠와 테두리 사이 간격 padding,
        테두리와 테두리리 사이의 간격 margin */
        width:100px;
        /* 박스 넓이 조정, 즉 inline과 block사이의 테두리 부피정도 width */
        /* 우클릭 후 inspect의 style 후 원하는 해당 코드를 클릭하고
         맨 밑에 있는 그림으로 css정보 나타내는 도구 확인 */
        }
     
    </style>
</head>
<body>
    <h1>css</h1>
    <h1>css</h1>
 
width가 100px일때 모습
width가 2000일떄 모습

 

 

  • 박스 모델 사용해 웹사이트 만들기
<style>
 
    h1{
            font-size:45px;
            text-align:center;
            border-bottom:1px solid gray;
            margin:0;
            padding:20px;
            /* web의 테두리와 테두리 간격 크기 줄이기위해 검사 통해
            margin값이 존재해서 위와 본문과의 간격이 벌어진것을 확인
            web과 컨텐츠와 테두리와의 간격
             벌리기 위해 패딩값 부여
            */
        }
        ol{
            border-right:1px solid gray;
            width:100px;
            margin:0;
            padding:20px;
            /* ol도 화면 전체 쓰는 block level
            따라서 단선을 목차 바로 오른쪽에 주기 위해
            width를 100px로 지정 */
        }

    </style>
</head>

<body>
    <h1><a href="index.html">web</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>

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse dolorem natus aliquam aliquid quidem, quam vitae voluptates facilis quod quia aspernatur inventore laudantium officiis, architecto minima? Placeat perferendis consequatur quasi!
    Eius adipisci delectus <br><br> repellat in. Voluptatum nam adipisci natus, sequi nobis obcaecati architecto! Corrupti dignissimos earum provident eos, nisi, autem eius eveniet minus delectus optio nihil corporis reiciendis, cupiditate excepturi!
    Nostrum, eligendi consequuntur natus doloribus sequi expedita labore fuga ullam possimus dolor non id voluptatum accusamus voluptatem ratione, enim nulla quo aspernatur. Delectus, rerum! Quisquam explicabo sequi voluptate corporis. Deserunt!
    Eius soluta unde nobis maxime non totam temporibus expedita magni voluptatum. Quaerat exercitationem, non nobis possimus voluptate vitae alias dolor amet aperiam porro id, natus obcaecati fuga ratione, perspiciatis doloribus.
 
 
 
 
 
padding값이 0일때 web이라는 컨텐츠와 그것을 감싸는 밑줄(테두리)이 바짝 붙어있는 모습

 

 

margin값이 존재할 때 모습

 

 

완성된 웹페이지의 모습(grid 작업x)

 

 

 

h1태그의 검사창

 

 

 

ol태그의 검사창

 

 

 

  • grid로 박스 모델 합치기
<style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
            /* 하나의 column에 배치:grid-template-columns 첫번쨰(150px), 두번째(1fr) 순으로 칼럼 크기정함
            navigation 150px 고정이기에 화면 크기 변경해도 고정
            article은 최소 1fr을 쓰는 것이기에 화면 크기 변경하면 커지며
            최소 1fr을 유지함. 즉 나머지 공간을 다 쓴다는 의미이다. */
        }
        div{
            border:5px solid gray

        }
        div태그는 회색으로 감싸고 grid 태그가 감싸는 전체 테두리를 핑크색으로 설정

    </style>
</head>
<body>
    <div id="grid">
    <div>navigation</div>
    <div>article,article,article,article</div>
</div>
    <!-- 아무런 용도 없이 디자인의 용도로만 쓰이는 것 div태그
     비슷한 예로 span이 존재, span은 inline level
     navigation과 article을 나란히 놓기 위한 방법: grid
     grid 사용하기 위해서는 grid 부모 태그로 하는 자식 태그가 필요하기에 div 사용
     id값은 grid가 아니여도 상관이 없음. display:grid코드만 존재하면됨. -->
</body>

 

 

 

  • 미디어쿼리
<style>
        div{
            border:10px solid green;
        font-size: 60px;
            }
        span{border:10px solid green;
            font-size: 60px;}    
            @media(min-width:800px){
            div{
                display:none;
            }
            span{
                display:none;
            }
        }
        /* 800보다 창 크기 넓으면 사라짐
        화면의 특성에 따라서 어떤 조건 만족할떄만
        css 내용 동작하도록 하는 것을 미디어쿼리라고함
        여러가지 화면 형태 존재하는 현재에서서 중요한 존재임 */
    </style>
</head>
<body>
    <div>responsive</div>
    <span>oasaaaaaaaaaaa</span>
    <!-- 검사를 누르고 창 크기 조절하면 창의 넓이 수치를 확인할 수 있다 -->
</body>
 
div는 블록 레벨 span은 인라인 레벨임을 알 수 있다.

 

 

 

 

 

  • grid와 미디어 쿼리 이용해 웹페이지 완성
<style>
       
        h1{
            font-size: 400%;
            text-align: center;
         border-bottom:1px solid gray;               
            text-align:center;
         padding:10px;
        margin:0;
        }

        ol{
        border-right:1px solid gray;
         padding:17px;
        margin:0px;
        width:100px;}
       

        #grid{
            display:grid;
            grid-template-columns: 150px 1fr;
        }

        #grid ol{                                                                         

            padding-left:33px;
            /* 검사에서 ol태그 선택 후                                              
            더블클릭해 수치 조정,
            적당한 값 찾으면 코드 수정, 웹에서 바꾼다고 저장
            목차 왼쪽에 딱 붙기에 여백을 주기위함 */
            /* 나중에 다른 ol목차가 나올 수 있으니
            grid에 해당하는 ol이라는 의미로 #grid ol로 해준다   
            x*/
 
 
        }
        #grid #article{
            padding-left:25px;
            /* 본문이 border-right:1px solid gray 선에 닿기 때문에 본문에 id를 article로 주고
            article의 왼쪽 패딩에 25픽셀을 부여해 여백을 남김 */
            /* 여기는 따로 article이라는 id를 부여해 크게 상관없지만
            의미를 확실히 하기 위해서 grid에 속한 article임을 표시한다
            실수로 grid article이라고 이어서 적으면 grid만 실행되므로
            #grid #article로 띄어서 작성 !!! */
        }
 
padding-left 0일때 모습
 
 
 
 
        @media(max-width:600px){
            #grid{
                display:block;
            }
            ol{
                border-right:none;
            }
            /* 창이 600px 이하일 때 텍스트가 세로로 너무 길어짐
            block레벨로 화면 전체를 차지하게 한다. 따라서 밑으로 내려오게됨*/
            h1{border-bottom:none;}
        }

        </style>
 
<body>
    <h1><a href="index.html">web</a></h1>                          
 
<div id="grid">              목차와 본문을 합치는 것이기에 <h1>은 그리드로 묶지 않는다.
    <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html" style="color:green;text-decoration:underline">css</a></li>    
        <li><a href="3.html">javascript</a></li>
    </ol>
 
<div id="article">
    <h2>css</h2>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse dolorem natus aliquam aliquid quidem, quam vitae voluptates facilis quod quia aspernatur inventore laudantium officiis, architecto minima? Placeat perferendis consequatur quasi!
    Eius adipisci delectus <br><br> repellat in. Voluptatum nam adipisci natus, sequi nobis obcaecati architecto! Corrupti dignissimos earum provident eos, nisi, autem eius eveniet minus delectus optio nihil corporis reiciendis, cupiditate excepturi!
    Nostrum, eligendi consequuntur natus doloribus sequi expedita labore fuga ullam possimus dolor non id voluptatum accusamus voluptatem ratione, enim nulla quo aspernatur. Delectus, rerum! Quisquam explicabo sequi voluptate corporis. Deserunt!
    Eius soluta unde nobis maxime non totam temporibus expedita magni voluptatum. Quaerat exercitationem, non nobis possimus voluptate vitae alias dolor amet aperiam porro id, natus obcaecati fuga ratione, perspiciatis doloribus.
 
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed odio commodi, consectetur saepe aut amet similique odit in cumque laudantium tempore suscipit fuga impedit quibusdam? Iure eligendi molestias repellendus fuga.
    Dolor</p><p
    style="margin-top:65px;">necessitatibus esse facere atque itaque similique repudiandae minus a nobis facilis eius accusantium dolore, impedit ad culpa nisi quidem. Eius cum laboriosam iste totam iusto officiis tenetur fugiat asperiores.
    Iusto</p>
</div>
 # h2태그와 p태그를 묶기위한 div
</div>
# grid효과를 주기위한 공통의 부모 grid태그
 
<!-- grid 생성 위해 부모 자식 div 생성
 바깥 쪽의 div가 부모 -->
 미디어 쿼리 실행x 넓이 600px 이상
 
 
 넓이 600픽셀 이하이기에 border bottom과 border right가 사라진 모습
또한 b id가 그리드인 디스플레이가 block 레벨이됨

 

 

  • css 코드의 재사용

이러한 css 코드의 style 태그를 모든 페이지의 파일마다 옮겨 적는 것은 무리가 있다.

만약 페이지수가 1억개라고 가정한다면 css코드를 수정할 때 1억개의 파일을 모두 수정해야 하기 때문이다.

따라서 style.css라는 파일을 만들어 css 코드를 붙여넣기한다. 이 파일을 끌어다가 css 코드를 사용하는 것이다.

<link rel="stylesheet" href="style.css">
    <!-- 이 한줄로 style 태그를 한 페이지에 담아 모든 페이지의css를 수정할 수 있다. -->

붙여넣기 한 파일과 style.css에는 style 태그가 더이상  존재해서는 안된다.

'카테고리 없음'의 다른글

  • 현재글css정리2

티스토리툴바