섹션 3: HTML & CSS 자세히 알아보기 [7일 - 8일차]

day 7

css 박스 모델

 

border: 테두리두께 테두리유형 테두리색상;

padding: 위쪽크기 오른쪽크기 아래쪽크기 왼쪽크기; (시계 방향)

margin: 상하크기 좌우크기;

margin: 전체크기;

 

ex)

HTML
<p>The Box Model</p>

CSS
p {
    padding: 2px 5px 2px 5px;
    border: 2px dashed black;
    margin: 8px 6px;
}

크롬 개발자 도구에서 박스 모델을 볼 수 있다. -> Styles

ol {
    list-style: none;
    width: 500px;
    margin: 36px auto 0 auto;
    padding: 0;
}

li {
    padding: 16px;
    margin: 32px;
    background-color: rgb(223, 136, 124);
    border-radius: 6px;
}

위 내용을 통해 해당 리스트들을 중앙에 배치할 수 있다.

 

HTML 레이아웃

<header>

<main>

<footer>

 

해당 사이트 참고

>> https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Document and website structure - Learn web development | MDN

 

Selectors & Combinators (선택자 & 결합자)

Selectors

Type - elementname

ID - #id

Group - elementname, elementname

Class - .class

 

Combinators

Descendant - li p - All p with li as ancestor

Child - h2 > p - Only p which are direct children of h2

 

볼록 vs 인라인 요소

Blcok - New line, Full width

Inline - x, x

인라인 요소, 블록 요소 모두 외울 필요X

 

해당 사이트 참고

>> https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content

Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

 

 

 

---

day 8

인라인 요소 같은 경우에는 위 아래에는 여백을 추가할 수 없고 좌우만 추가 가능하다 -> margin

 

display: inline-block;을 통해서 해당 인라인 요소 위 아래에 여백을 추가할 수 있다.

 

마진 상쇄

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing

Mastering margin collapsing - CSS: Cascading Style Sheets | MDN

 

margin이 겹치면 더 큰 여백이 우세해서 합이 아니라 그 값이 된다. 오직 수직 여백에서만 발생 그리고 블록 요소에서만 발생 

display: inline-blcok으로 만들어진 것은 마진 상쇄가 발생하지 않는다 

 

box-shadow 속성

box-shadow: x축오프셋 y축오프셋 테두리흐림정도크기 확산크기 박스그림자색깔;

 

margin 값을 -로 정할 수 있다.

 

너비는 상속 안됨

글꼴은 상속됨

 

모든 CSS 선택자 리스트 

 태그 유형 선택자

o CSS: p { ... }

o 예를 들어 이 HTML 요소를 선택하면: <p>Some text...</p>

o 이 선택자는 이 태그 유형의 모든 HTML 요소를 선택합니다.

● 아이디 선택자

○ CSS: #some-id { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <h1 id="some-id">...</h1>

○ 이 선택자는 이 ID가 있는 요소를 선택합니다(페이지당 한 번만 가능)

● 클래스 선택자

○ CSS: .some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <h1 class="some-class">...</h1>

○ 이 선택자는 이 클래스가 있는 모든 HTML 요소를 선택합니다.

● 속성 선택기(신규)

○ CSS: [src] { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <img src="...">

○ 이 선택자는 이 HTML 속성이 있는 모든 요소를 ​​선택합니다.

● 범용 선택기(신규)

○ CSS: * { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p>....</p><img ...>

○ 이 선택자는 모든 HTML 요소를 선택합니다(상속을 통하지 않고 모든 HTML 요소를 개별적으로 대상으로 지정하는 것처럼 직접 가능).

 

● 그룹화 선택자/선택자 리스트

○ CSS: p, .some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p>...</p><h2 class="some-class">...</h2>

○ 이 선택자는 해당 목록의 개별 선택자와 일치하는 모든 요소를 ​​선택합니다.

● 결합 선택자

○ CSS: p.some-class { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <p class="some-class">...</p>

○ 이 선택자는 두 조건을 모두 충족하는 모든 요소를 ​​선택합니다(예: 이 예제에서는 "some-class" 클래스가 있는 "<p>" 요소).

● 의사 선택자

○ CSS: a:hover { ... }

○ 예를 들어 이 HTML 요소를 선택하면: <a>...</a>(사용자가 해당 요소 위로 마우스를 가져갈 때)

○ 이 선택기는 이 "의사 상태"를 충족하는 모든 요소를 ​​선택합니다(즉, 이 예에서 가리키고 있는 모든 링크).

오늘 작성한 코드

Section2.zip

0.03MB