CSS 박스 모드(DIV 레이아웃 빠 른 입문)1/3 페이지 를 철저히 이해 하 는 것 을 추천 합 니 다.
이런 속성 들 을 우 리 는 그것 을 우리 일상생활 의 상자(상자)로 옮 겨 이해 할 수 있다.일상생활 에서 보 이 는 상자 도 이런 속성 을 가지 기 때문에 상자 모델 이 라 고 부른다.그 내용 은 상자 안에 담 긴 물건 이다.채 우 는 것 은 상자 에 담 긴 물건(귀중 한 것)이 손 상 될 까 봐 첨가 된 거품 이나 다른 내진 보조재 이다.테 두 리 는 상자 자체 이다.경계 에 대해 서 는 상자 가 놓 여 있 을 때 모두 쌓 여 있 으 면 안 되 고 일정한 공간 을 남 겨 통풍 을 유지 하 는 동시에 쉽게 꺼 낼 수 있 도록 해 야 한 다 는 것 을 의미한다.웹 디자인 에 있어 서 내용 은 문자,그림 등 요 소 를 가리 키 지만 작은 상자(DIV 내장)일 수도 있다.현실 생활 에서 상자 와 달리 현실 생활 에서 물건 은 보통 상자 보다 크 면 안 된다.그렇지 않 으 면 상자 가 버 틸 수 있 고 CSS 상 자 는 탄력 이 있 으 며 안의 물건 은 상자 자체 가 가장 크 지만 손상 되 지 않 는 다.충전 은 너비 속성 만 있 고 생활 속 상자 안의 내진 부재료 두께 로 이해 할 수 있 으 며 테 두 리 는 크기 와 색깔 의 구분 이 있 습 니 다.우 리 는 생활 속 에서 보 이 는 상자 의 두께 와 이 상 자 는 어떤 색 재료 로 만 들 었 는 지 이해 할 수 있 습 니 다.경 계 는 바로 이 상자 와 그 물건 이 얼마나 거 리 를 유지 해 야 하 는 지 이해 할 수 있 습 니 다.현실 생활 에서 우리 가 한 광장 에서 서로 다른 크기 와 색깔 의 상 자 를 일정한 간격 과 순서 로 놓는다 고 가정 하면 마지막 으로 광장 상공 에서 아래 를 보면 보 이 는 도형 과 구 조 는 우리 가 해 야 할 웹 페이지 의 지면 디자인 과 유사 하 다.다음 과 같다 박스
지금 은 CSS 상자 모델 에 대해 얼마나 이 해 했 는 지,아직 투철 하지 않 으 면 계속 내 려 다 보면 나 는 뒤에서 예 를 들 어 상자 의 개념 으로 그것 을 설명 할 것 이다.우리 의 사고방식 을 바 꾸 는 전통 적 인 프론트 데스크 톱 웹 디자인 은 이렇게 진행 된다.요구 에 따라 먼저 메 인 톤,어떤 유형의 그림 을 사용 해 야 하 는 지,어떤 글씨체,색깔 등 을 사용 해 야 하 는 지 를 고려 한 다음 에 Photoshop 과 같은 소프트웨어 로 자 유 롭 게 그 려 낸 다음 에 작은 그림 으로 자 르 고 자 유 롭 지 않 게 디자인 HTML 을 통 해 페이지 를 만 들 고 CSS 로 조판 한 후에우 리 는 이 사상 을 바 꿔 야 한다.이때 우 리 는 주로 페이지 내용 의 의미 와 구 조 를 고려 해 야 한다.왜냐하면 강력 한 CSS 가 제어 하 는 웹 페이지 이기 때문에 웹 페이지 를 잘 만 든 후에 당신 이 원 하 는 웹 페이지 스타일 을 쉽게 조정 할 수 있다.게다가 CSS 조판 의 또 다른 목적 은 코드 를 쉽게 읽 을 수 있 고 블록 이 뚜렷 하 며 코드 재 활용 을 강화 하 는 것 이기 때문에 구조 가 매우 중요 하 다.만약 당신 이 나의 홈 페이지 디자인 이 매우 복잡 하 다 고 말 하고 싶다 면,나중에 그런 효 과 를 실현 할 수 있 습 니까?내 가 너 에 게 알려 주 고 싶 은 것 은 만약 에 CSS 로 실현 할 수 없 는 효 과 를 얻 지 못 한다 면 보통 표 로 도 실현 하기 어렵다.왜냐하면 CSS 의 통 제 력 이 너무 강하 기 때문이다.참고 로 CSS 로 조판 하 는 것 은 실 용적 인 장점 이 있다.만약 에 네가 웹 사 이 트 를 주문 하 는 것 이 라면 만약 에 CSS 조판 웹 페이지 를 사용 했다 면 나중에 고객 이 만족 하지 않 을 것 이다.특히 색조 가 있다 면.그러면 고치 기 가 상당히 쉽다.심지어 몇 가지 스타일 의 CSS 파일 을 고객 이 선택 할 수 있 도록 맞 춤 형 으로 만 들 거나 프로그램 을 써 서 동적 호출 을 실현 하여 사이트 가 동적 으로 스타일 을 바 꾸 는 기능 을 가지 게 할 수 있다.구조 와 표현 분 리 를 실현 하 는 것 은 진정 으로 구조 실천 을 시작 하기 전에 한 가지 일 을 인식 해 야 한다.구조 와 표현 이 분리 되 는 것 도 CSS 구조의 특색 으로 구조 와 표현 이 분 리 된 후에 야 코드 가 간결 하고 업데이트 가 편리 하 다.이것 이 바로 우리 가 CSS 를 배 우 는 목적 이 아 닙 니까?예 를 들 어 P 는 구조 화 된 태그 이 고 P 태그 가 있 는 곳 은 이것 이 단락 블록 임 을 나타 낸다.margin 은 표현 속성 이다.나 는 한 단락 을 오른쪽 에 두 글자 높이 들 여 놓 으 려 고 한다.어떤 사람들 은 빈 칸 을 추가 하고 빈 칸 을 계속 추가 하려 고 할 것 이다.그러나 지금 은 P 태그 에 CSS 양식 을 지정 할 수 있다.P {text-indent: 2em;}，이러한 결과 body 내용 부분 은 다음 과 같 습 니 다.이것 은 표현 제어 라벨 을 추가 하지 않 았 습 니 다.
1 2 3 다음 페이지 전문 을 읽다
좋은 웹페이지 즐겨찾기
