이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS, inline과 block
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 선택자 우선 순위 (캐스케이딩) 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
웹페이지의 디자인을 담당하는 CSS에서 박스 모델은 아주 중요한 내용입니다.
아래의 생활코딩 강의 영상으로 같이 공부해봅시다.
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
border-width:10px;
border-style: solid;
border-color:red;
위의 코드처럼 이렇게 긴 코드를
border:10px solid red;
이렇게 짧게 축약할 수 있습니다.
CSS 폰트의 글꼴, 굵기, 줄 간격 설정
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 글자 정렬 text-align 이 포스팅은 PC로 작성되었습니다. 모바일로 보
gogogameboy.tistory.com
속성들을 축약하는 내용에 대해서는 위의 포스트를 통해서 공부를 한 적이 있습니다.
p태그의 컨텐츠와 테두리 사이의 간격은 padding, p태그끼리의 간격은 margin이라는 속성을 씁니다.
width 값을 지정하지 않으면 화면 가로 전체를 사용하게 됩니다.
참고로 a태그에는 width와 height는 적용되지 않습니다.
다음 포스트
CSS 박스 사이징
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 박스 모델 (padding, margin) 이 포스팅은 PC로 작성되었습니다. 모바일
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 마진 겹침 (0) | 2021.01.01 |
|---|---|
| CSS 박스 사이징 (0) | 2021.01.01 |
| CSS, inline과 block (0) | 2020.12.31 |
| CSS 선택자 우선 순위 (캐스케이딩) (0) | 2020.12.31 |
| CSS 구글 크롬 테마 변경하기 (0) | 2020.12.30 |
댓글