WEB2 - CSS

박스모델

CSS box model 소개

강의

 

 

소스코드 

변경사항

 

 

 

박스 모델을 써먹기

강의

 

 

소스코드 

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. Aimhee
    완료!!
  2. 삼색냥
    완료
  3. Boram
    감사합니다~
  4. whynitz
    감사합니다!

    h1 {
    font-size: 50px;
    border: solid 1px skyblue;
    display: inline;
    text-align: center;
    }


    이런 css 코드를 짰더니 '제목'이 화면상에 왼쪽에 정렬되어 있어요. 이유가 뭘까요? display: block; 일 때는 화면상 중앙에 정렬되는데..
  5. 한강
    잘 봤습니다. ^^!
  6. HongKyu Lim
    감사합니다:)
  7. 김정훈
    완료
  8. ryul
    감사합니다
  9. ManualJedi
    브라우저 오류 같습니다. 브라우저를 닫은 후 다시 해 보세요. 개발자 도구는 'Ctrl + Shift + I'가 단축키입니다.
    대화보기
    • June
      너무 재밌습니다 흑흑 감사합니다.
    • HongKyu Lim
      다른 타 강의 봤을때는 이해 않되었는데 지금 보고 바로 이해 했어요 감사합니다:)
    • 프로드리머
      영상 잘봤습니다.
      질문이 있는데요. 강의영상에서는 inspection으로 들어가면 태그에 마우스가 올라갈때마다 위쪽 화면에 색들이 생기는데 저는 마우스를 가져다대도 색들이 생기지 않네요 ㅠㅠ 그래서 어디가 margin 에 해당하는 구간인지 직관적으로 알 수가 없어요. 왜 저는 색이 생기지 않나요??
    • Min Sang Shin
      완료
    • 돼지천재
      감사합니다.
    • Levitas
      신기방기 너무재밌다아아아
    • kaonmir
      와 개재밌어
    • 키보드치는남자
      잘들었습니다
    • newjin87
      ㄴㅓ무 잘보았습니다.
      박스모델 처음에는 허접해 보였는데 완성하고나니 뭔가 멋있고, 뿌듯하네요.
    • icdoit
      감사합니다.
    • Yeonhwa An
      감사합니다
    • 막시무스
      매번 감솨 감탄 입니다. 동영상 강의 <<명장>> 되시겠음...굿짱 입니다.
    • hado273
      완료!
    • 완료
    • 진영
      완료
    • 곤느
      완료입니다~
    • 코딩멍키
      기본적으로 세팅이 되어있는 마진값, 패딩값의 디폴트값이 있나요? 매번 바꿔줘야하는것보다 초기세팅을 바꿀수 있으면 좋겠네요. 아니면 이것도 한방에 바꾸는 코딩을 작성해서 넣는다면? @@ 아 머리가 핑핑도네요.. 언제쯤익숙해져서 파워포인트 만들듯이 슥슥 만들수 있을까요...
    • 한라봉
      완료
    • 다빈
      Margin, padding 이해하기 쉽게 설명해주셔서 감사합니다
    • 필립
      완료
    • 임재현천재
      완료!감사합니다!
    • 감사합니다.
    • 오유상
      감사합니다
    • Lee Sangjun
      와.......... 안보고 혼자 하려고 하면 정말 안되네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    • 시간속으로
      완료
    • 이시권
      css - box model을 배웠을 뿐인데, 이렇게 뿌듯한건 왜일런지요.^^*
      오늘도 멋진 강의감사합니다.
    • 감사합니다
    • aimerthis(이성민)
      감사합니다
    • 감사합니다.
    • 과천영일
      점점 따라가기 힘들긴 하지만 재미있습니다..
    • LuminousCoding
      일단 CSS 속성값에 0을 넣을 때는 단위가 필요 없습니다. 도움이 될지는 모르겠지만 사용하시는 브라우저의 설정에 들어가셔서 쿠키 삭제 해보세요
      대화보기
      • 흐엥
        저도 링링님과 같이 코드가 인식이 안되는지....
        <!doctype html>
        <html>
        <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        h1 {
        border-width:10px;
        border-color:red;
        border-style: :solid;
        }
        </style>
        </head>


        <body>
        <h1 >WYS</h1> WOO YONG SEUNG(WYS) is my name.
        </body>


        </html>

        맨 위의 강의에서 초반부부터 빨간색 라인이 아예 보이질 않는데 잘하시는 분들 도와주세요ㅠㅠ
        ------>>> 해결했습니다!! 올바르지 않은 파일에다가 작성한뒤 복사 붙여넣기 한 것이 문제가 됐었습니다.
        안되시는 다른 분들도 에디터를 통해 html만드신 뒤 따라하시면 잘 되실 것 같습니다~
      • 혹시 margin:0; 이렇게 하신거 아닌가요?
        컴퓨터의 단위인 px 을 안 붙여서 그럴 수도 있거든요.
        제가 그랬거든요
        대화보기
        • 김수환
          가장 필요했던 강의중 하나
        • 소금돌
          박스 모델로... table로 만들거를 다 만드신듯...
          어떤게 좋은건지.. 아직은 잘 모르겠습니다..

          하지만.. margin과 padding에 대한 활용은 배웠습니다.
        • 반자동
          <!doctype html>
          <html>
          <head>
          <title>핵심 정치인들의 정보</title>
          <meta charset="utf-8">
          </head>


          <style>


          a {
          color:black;
          text-decoration: none;
          }

          #active {
          color:red;
          }
          .saw {
          color:gray;
          }
          h1 {
          font-size: 40px;
          text-align: center;
          border-bottom:5px solid red;
          margin:0;
          padding:20px;
          }



          ol {
          border-right:5px solid red;
          width:140px;
          margin:0;
          padding:20px;

          }

          </style>
          <body>

          <h1>정치인들의 정보</h1>

          <ul>
          <ol>
          <li> <a href="red.html" class="saw" title="홍준표 정보"> <h3>레드준표</h3></li></a>
          <li> <a href="problem.html" class="saw" id="active" title="문재인 정보"> <h3>프라블람사람</h3></li></a>
          <li> <a href="ironwater.html" title="안철수 정보"> <h3>안아이언워터</h3></li></a>
          </ol>
          </ul>
          <!-- 이건 동영상 -->
          <p>

          <iframe width="560" height="315" src="https://www.youtube.com/embed/liAxbGAtZLA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

          </p>




          <p>
          <div id="disqus_thread"></div>
          <script>

          (function() { // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');
          s.src = 'https://web1-pw8hvicfyt.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
          })();
          </script>
          <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

          </p>


          </body>



          </html>


          이렇게 했는데 세로 빨간선과 가로 빨간선이 서로 닿질 않네요 ㅠㅠ

          해결했습니다!

          홍준표
          문재인
          안철수

          이 3개에 있는 <h3> 태그를 지웠더니 붙어버리네요 ~
        • 스티치
          점점 디자인적으로 변화되고있는
          웹페이지 모습이 너무 기대되고 재밌습니다.
          빨리 웹사이트를 만들어보고 싶어졌어요+_+
          지치지않고 잘 따라가겠습니다.
          이고잉님 감사드려요
        • 솔백아
          2018.05.03 감사합니다!
        • 2018.4.29 강의 감사해요 :) 2/
        • Dani Choi
          1.
          Selector는 ,를 사용하여 중복된 내용을 가진 selector를 묶을 수 있다.
        • 스페이스몽키
          감사합니다. 실습과정중에 잘 해결이 안 되고있던 부분을 알게 되었어요 감사합니다 ㅎㅎ
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기