Keyword overview
Box model
The Code Card
CSS display: inline-block
https://lshjju.tistory.com/832
CSS display: inline-block
웹 디자인에서 요소를 한 줄로 나열하면서도 크기를 자유롭게 조절하고 싶을 때 사용하는 display: inline-block 속성에 대해 알아보겠습니다.이 속성은 이름 그대로 inline의 특징과 block의 특징을 모
lshjju.tistory.com
CSS Box Model
https://lshjju.tistory.com/761
CSS Box Model
이미지 출처https://www.w3schools.com/css/css_boxmodel.asp웹 페이지의 모든 요소는 사각형의 상자 모양으로 구성되어 있는데, 이를 **CSS 박스 모델(Box Model)**이라고 부릅니다.이 모델은 요소를 구성하는 네
lshjju.tistory.com
CSS Borders property
https://lshjju.tistory.com/762
CSS Borders property
이미지 출처https://velog.io/@mazorika/CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8%EA%B3%BC-%EB%B0%95%EC%8A%A4-%ED%85%8C%EB%91%90%EB%A6%AC 박스 모델 방향은 딱 이것 하나만 기억하세요.12시 - top03시 - right06시 - bottom09시 - left이
lshjju.tistory.com
CSS Margins property
https://lshjju.tistory.com/763
CSS Margins property
이미지 출처https://codingeverybody.kr/css-margin-%EC%86%8D%EC%84%B1/요소와 요소 사이의 바깥쪽 여백을 결정하는 CSS 마진(Margin) 속성에 대해 알아보겠습니다.마진은 박스 모델의 가장 바깥쪽 영역으로, 인접
lshjju.tistory.com
CSS Padding property
https://lshjju.tistory.com/764
CSS Padding property
이미지 출처https://codingeverybody.kr/css-margin-%EC%86%8D%EC%84%B1/요소의 내부 공간을 결정하는 CSS 패딩(Padding) 속성에 대해 알아보겠습니다.패딩은 테두리(Border)와 실제 콘텐츠(텍스트나 이미지) 사이의
lshjju.tistory.com
CSS display Property
https://lshjju.tistory.com/831
CSS display Property
이아웃 시스템의 뼈대를 이루는 CSS display 속성에 대해 알아보겠습니다.display 속성은 웹 페이지의 모든 요소가 화면에서 어떻게 보이고, 주변 요소들과 어떻게 배치될지를 결정하는 가장 기초적
lshjju.tistory.com
CSS Float property
https://lshjju.tistory.com/830
CSS Float property
과거 웹 레이아웃의 핵심이었으며 현재도 텍스트 흐름을 제어할 때 요긴하게 쓰이는 CSS Float 속성에 대해 알아보겠습니다.1. 정의 (Definition)float은 사전적 의미로 '뜨다' 또는 **'부풀다'**라는 뜻
lshjju.tistory.com
CSS box model Position control steps
https://lshjju.tistory.com/690
CSS box model Position control steps
CSS 포지션 속성은 유아이 빌딩할 때 숨쉬듯 사용하는 스킬입니다. 아주 많이 사용하는 스킬이라 스텝으로 정리해 드립니다.포지션 속성으로 어떤 오브젝을 원하는 방향에 배치하고 싶다면 아래
lshjju.tistory.com
Self training
CSS display: inline-block
https://www.w3schools.com/css/css_inline-block.asp
CSS Box Model
https://www.w3schools.com/css/css_boxmodel.asp
CSS Borders
https://www.w3schools.com/css/css_border.asp
CSS Margins
https://www.w3schools.com/css/css_margin.asp
CSS Padding
https://www.w3schools.com/css/css_padding.asp
CSS The display Property
https://www.w3schools.com/css/css_display.asp
CSS Float
https://www.w3schools.com/css/css_float.asp
Code training
08-1 CSS와 박스 모델
박스 모델의 기본 구성
콘텐츠 영역의 크기를 지정하는 width, height 속성
박스 모델의 너비와 높이 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/box-width.html
박스 모델의 크기를 계산하는 box-sizing 속성
박스 모델에 그림자 효과를 주는 box-shadow 속성
실습 - 버튼 항목에 그림자 효과 추가하기
1단계 텍스트에 그림자 효과 추가하기
2단계 그림자 효과의 형태 조절하기
3단계 그림자 속성값 변경하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/08/box-shadow.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/box-shadow.html
08-2 테두리 스타일 지정하기
박스 모델의 방향 살펴보기
테두리 스타일을 지정하는 border-style 속성
박스 모델의 테두리 스타일 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/border-1.html
테두리 두께를 지정하는 border-width 속성
박스 모델의 테두리 두께 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/border-2.html
TIP - 개발자 도구 창에서 테두리 두께 확인하기
테두리 색상을 지정하는 border-color 속성
박스 모델의 테두리 색상 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/border-3.html
테두리 스타일을 묶어 지정하는 border 속성
테두리 스타일을 묶어서 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/border-4.html
꼭짓점을 둥글게 만드는 border-radius 속성
꼭짓점마다 따로 둥글게 처리하기
TIP - 꼭짓점을 타원형으로 만들기
08-3 여백을 조절하는 속성
요소 주변의 여백을 설정하는 margin 속성
margin 속성으로 여백 설정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/margin-1.html
margin 속성을 사용하여 웹 문서를 가운데 정렬하기
웹 요소를 수평으로 중앙에 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/margin-3.html
마진 중첩 이해하기
마진 중첩 이해하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/margin-3.html
콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성
다양하게 패딩 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/padding.html
실습 - 패딩과 마진으로 보기 편한 버튼 만들기
1단계 버튼 만들기
2단계 버튼에 스타일 추가하기
3단계 버튼을 중앙에 배치하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/08/button.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/button.html
08-4 웹 문서의 레이아웃 만들기
블록레벨과 인라인레벨을 바꾸는 display 속성
목록을 사용해 세로 네비게이션 만들기
목록을 사용해 가로 네비게이션 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/display.html
왼쪽이나 오른쪽으로 배치하는 float 속성
웹 브라우저에서 정상적인 흐름을 보여주는 텍스트와 이미지
이미지를 왼쪽으로 플로팅 시키기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/float-1.html
float 속성을 사용해 가로로 배치하기
박스 영역을 좌우로 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/float-3.html
foat 속성을 해제하는 clear 속성
플로팅 해제하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/float-4.html
TIP - display:inline-block 과 float:left 속성은 어떻게 다른가요?
08-5 웹 요소의 위치 지정하기
웹 요소의 위치를 지정하는 left, right, top, bottom 속성
텍스트 요소 자유롭게 배치하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/left-top.html
배치 방법을 지정하는 position 속성
position 속성으로 요소 위치 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/08/position-1.html
실습 - 배경 위에 글자 표시하기
1단계 HTML 파일과 CSS 파일 나란히 놓기
2단계 CSS 파일 수정하기
3단계 HTML 파일 확인하기
4단계 부모 요소에 position 속성 추가하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/08/position-2.html
https://github.com/lshjju/doit-hcj-new/blob/main/08/css/position-2.css
결과
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/position-2.html
https://github.com/lshjju/doit-hcj-new/blob/main/08/results/css/position-2.css
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| Flexbox layout (0) | 2025.11.06 |
|---|---|
| RWD and Media query (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |
| Text style (0) | 2025.11.06 |
| CSS basic (0) | 2025.11.06 |