HTML&CSS: 정리 상자 및 정보

7826 단어 HTMLBOXCSS
상자는 읽기 쉬운 HTML을 예쁘게 만드는 동시에 페이지의 레이아웃에 중요한 역할을 한다.

인라인 및 블록 상자


브라우저에 표시되는 모든 탭은 상자라고 불리는 내용의 영역을 표시해야 합니다.이 상자는 대체로'내연 상자'와'블록 상자'두 종류로 나뉜다.
· 인라인 상자 텍스트 행 혼입 가능 상자.기본적으로 코스메틱 텍스트의 태그나 양식 부분을 표시합니다.
· 블록 상자 태그에 포함된 컨텐트의 양에 관계없이 부모 요소와 같은 너비의 영역을 확보하는 유형의 상자.
블록 상자에 표시된 라벨은 그 의미와 작용에 따라 크게 다음과 같은 두 가지로 나뉜다.
· 이 라벨은 내용에 어떤 의미가 있다(ex.<h1>~<h6>,<p>タグ)· 다른 태그를 둘러싼 정보 정리 또는 그룹화(ex.<ul>, <li>, <div> 태그)

글머리 기호 표시


• 섹션 열거<ul>, <li>/목록 항목의 시작 부분에 번호<ol>, <li>

<ul>, <li>, <ol>의 CSS

<ul><ol>의 경우 아래 설명된 CSS가 태그 자체에 적용됩니다.
①<ul>,<ol>에list-style-type 속성을 적용하여 목록의 각 항목<li>의 첫머리에 목록 표시나 번호를 표시한다
②<ul>,<ol>에서 목록 태그와 번호를 표시할 공간을 확보하기 위해<ul>,<ol>의 위아래를 공백으로 만들기 위해padding 속성,margin 속성을 적용하였다.
따라서 <ul>, <ol>에 CSS를 적용하지 않더라도 처음부터 위아래 좌우로 공간을 설정합니다.이러한 CSS를 기본 CSS라고 합니다.
기본 CSS를 취소하려면 CSS를 작성해야 합니다.
.subnav ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

태그 하위 탐색의 시작

<ul>, <li> 에 표시된 HTML을 내비게이션처럼 보이도록 하기 위해 <li> 항목의 시작 부분에 이미지를 목록 표시로 표시합니다.
.subnav a{
  padding-left: 16px;
  background: url(../../images/listmark.png) no-repeat left 0 top 4px;
  color: #1864b9;
  text-decoration: none;
}

· <a> 에 왼쪽 채우기를 설정하여 텍스트의 시작 위치를 엇갈리게 합니다.
・ 표시된 이미지가 텍스트의 이미지와 일치하지 않을 경우 "4px"부분의 수치를 조정합니다.

빵 부스러기 목록 만들기


"빵 부스러기 목록"은 현재 표시된 제거 위치를 파악하기 위해 웹 사이트의 첫 페이지에서 계층 구조를 나열하는 것을 가리킨다
<style>
.breadcrumb ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li::after {
    content: "»";
    color: #999;
}
.breadcrumb li:last-child::after {
    content: none;
}
.breadcrumb a {
    text-decoration: none;
    color: #1864b9;
}
</style>
</head>
<body>
<div class="breadcrumb">
    <ol>
        <li><a href="/">ホーム</a></li>
        <li><a href="/products/">製品リスト</a></li>
        <li><a href="/products/lens/">カメラレンズ</a></li>
        <li>広角レンズ</li>
    </ol>
</div>

·display 속성을 통해 원래 블록 상자로 표시된<li>을 인라인 상자로 표시합니다(=요소 전환 디스플레이 상태)
· ".breadcrumbli"에서 선택한 요소의 ":after"에서 각 항목의 텍스트 뒤에 ">"를 표시합니다
·':last-child'를 사용하면 마지막 <li> 만 선택하고 이 요소에서만'>'을 표시하지 않습니다

태그 사용 방법

<div> 태그가 너무 많은 HTML은 읽기 어렵고 유지보수성이 낮아지기 때문에 가능한 한 정보의 총합<div>을 태그로 둘러싸는 것이 중요하다는 것을 깨닫는다
Υ 제목 및 관련 내용 요약
원칙적으로 하나<div>에 둘러싸인 제목은 하나뿐이다.또한 그 총결이 무엇인지 알기 위한 총결<div>에class속성을 덧붙인다
(2) 부품의 경계 형성
개별 정보를 부품으로 간주하고 <div> 으로 둘러싸여 각 부품의 경계를 명확하게 합니다.이렇게 되면'어디부터 어디까지 하나의 부품'이 이해가 쉬워지고 순서의 교체와 교환이 수월해진다
⑶ HTML 계층 일치
아름다운 HTML을 쓰기 위해서는 형제 요소가 같은 범주에 속해야 한다
태그의 분류는 다음과 같습니다.
① 인라인 프레임<img>, <strong>, <a>② 나무상자
(a) 내용에 의미를 부여하는 상자<h1>, <ul>, <p> 등)
(b) 정보를 조직하고 그룹화하는 상자<div>, <section>, <header> 등)
④ 다른 상자의 패키징 구조 만들기
패키징 구조는 <div> 로 둘러싸인 여러 "패키징 구조"를 <div> 로 둘러싸는 것을 말한다.
CSS 가로로 여러 개 정렬에 주로 사용<div>

채우기 테두리 설정


테두리 속성을 사용하여 테두리 주위에 테두리를 추가합니다.테두리 속성 값의 경우 테두리의 [굵기] [선 모양] [색상]을 반각 공간으로 구분하여 지정합니다.
값 및 사용 예
설명
border: 1px none #b7383c
테두리가 표시되지 않습니다.굵기 영역도 확보할 수 없으니 주의해야 한다
border: 1px dotted #b7383c
점선네모서리에 적용하면 각이 더러워지기 때문에 일반적으로 테두리를 한쪽에 적용할 때 사용한다
border: 1px dashed #b7383c
갸름한 점선.네모서리에 적용하면 각이 더러워지기 때문에 일반적으로 테두리를 한쪽에 적용할 때 사용한다
border: 1px solid #b7383c
실선
border: 1px double #b7383c
쌍선

마지막


상자는 CSS에 조정이 많이 되지만 비틀면 나올 정도니 알아봐~
키보드 재활용 문제 해결
linux-Centos 7 하bond와 vlan 기술의 결합 [추천]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage