본문 바로가기

CSS박스모델2

[CSS] 5. CSS 박스모델 실습하기 CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 지난번 배운 내용을 바탕으로 아래의 홈페이지처럼 테두리를 만들어보도록 하겠습니다. 1. Web 글씨 아래에 밑줄 긋기 2.html 파일에서 스타일 태그를 아래와 같이 수정합니다. Web이 h1태그에 있으니 이 h1태그속성에 boder-bottom:1px solid gray을 줍니다. 아래에 1px 사이즈로 밑줄을 그어주는데 gray 색깔로 하는뜻입.. 2020. 10. 7.
[CSS] 4. CSS 박스모델(padding,margin,border,content) CSS 강의목차 1. CSS 시작, 글 색깔 바꿔보기 2. 스타일속성(선택자,정의,속성) 개념정리 3. CSS 속성과 선택자에 대한 이해 4. CSS 박스모델(padding,margin,border,content) 5. CSS 박스모델 실습하기 6. CSS 그리드 기본사용법 및 활용 7. 반응형 웹페이지 만들기(미디어쿼리 @media) 8. CSS코드의 재사용 먼저 아래와 같은 웹페이지와 같이 간단한 형태의 디자인을 웹페이지에 적용해보려고 합니다. 이를 위해서 CSS박스모델이 필요한데요. 1. 먼저 box.html의 새파일을 만듭니다. 아래와 같이 기본적인 내용을 입력했습니다. 그리고 적당한 웹페이지를 CSS에 a href태그로 링크를 겁니다. 아래와 같이요 이제 style 태그를 아래와 같이 입력합니다.. 2020. 10. 7.