본문으로 바로가기

[3일차] #9. 박스모델 써먹기

category Develop/WEB2 - CSS 2018. 12. 10. 21:24






3일차



1. CSS 등장 (30분)

 - 수업소개

 - CSS 등장 이전의 상황

 - CSS의 등장

 - 혁명적 변화

2. CSS 속성을 스스로 알아내기 (8분) 

3. CSS 선택자를 스스로 알아내는 방법 (15분)

4. 박스모델 (16분)

5. 그리드 (10분)

6. 반응형 디자인 (9분)

7. CSS 코드의 재사용 (12분)

8. 수업을 마치며 (15분)





#9. 박스모델 써먹기


▲ 밑줄만 있는 박스 만들기


Html
border-bottom:1px solid gray;


▲ 좌우 구분줄 만들기



□ <ol></ol> ⇒ <ol>태그는 화면 전체를 통제

□ 크롬 콘솔을 이용하여, 조정하고자 하는 부분 체크

Html
<style>
    ol{
        border-right:1px solid gray;
        width: 100px;
        margin:0;
        padding:20px;
      }