Udemy Section3 (8일차) - 블록, 인라인요소, 마진상쇄, box-shadow, 레이아웃, 스타일링

 

1. 블록요소, 인라인 요소의 스타일 차이

 

- 각 블록요소는 전체 너비 또는 전체 라인을 모두 차지하지만 인라인요소 그렇지 않아. 그래도 표시는 해야하니까 공간이 필요하긴 한거지 :)

 

<Header>영역인 파란색부분은 모든 영역을 포함하고 있지 않은데, 이는 인라인 태그인 <a>태그의 content 까지만 포함하기 때문이야.

 

인라인요소의 경우 padding의 상단,하단 magin의 상단,하단을 적용할때 반드시 따라야할 규칙이 있어!

 

1) 인라인요소에 상단,하단 margin을 적용하여도 아무런 영향을 미치지 않아.

marding 30px을 적용하였어도, 박스모델에는 30px로 표현되지만 real world에서는 아무런 변화가 없을거야 

     ㄴ 좌우 margin만 유효해!

a {

  padding: 12px 48px;

  background-color: rgb(167, 1, 78);

  color: white;

  border: 1px solid rgb(167, 1, 78);

  border-radius: 4px;

  font-size: 24px;

  margin: 30px 0;

}

  

 

결론 : 인라인요소는 위아래 여백이나 패딩에 제한이 있는데, 이는 인라인 블록요소를 사용해 개선할수 있음 

속성값을  display : inline-block으로 개선할수 있음 

 

display : inline ; 

  ㄴ 인라인 요소로 만들겠다

display : block; 

  ㄴ 블록 요소로 만들겠다 -> 이거 설정하면 앵커태그의 넓이가 화면 전체로 확대됨 

display : inline-block; 

  ㄴ인라인과 블록요소를 결합한것인데, 블록요소처럼 세줄에 표시되지않고 같은줄에 표시되고 다른요소와의 거리에 영향을 미침

a {

  padding: 0px 48px;

  background-color: rgb(167, 1, 78);

  color: white;

  border: 1px solid rgb(167, 1, 78);

  border-radius: 4px;

  font-size: 24px;

  display: inline-block;

  margin: 12px;

}

 

 

2. 마진상쇄

 

 인접요소, 수직에서 발생되고 더 큰쪽의 마진이 우선 적용된다.

 

3. box-shadow 속성

 

테두리 주변에 그림자를 추가하는 기능

box-shadow : x축 y축 흐림정도 불투명도 

li {

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

  padding: 16px;

  background-color: rgb(223, 136, 124);

  border-radius: 6px;

  margin: 32px;

}

 

tip) span 은 어디든 쓸수있는 비의미적 인라인요소임

tip) 메인 요소 대신에 div를 사용하기도 하고 이는 main 과 footer를 대신하기도 함 

    <div id= "main-section">

    <div id= "footer">

     ㄴ 컨테이너에 대해 의미론적인 요소가 없으면 div 를 쓰기도 하고 많은 개발자들이 많이들 쓰기도 함 

          -> 이미지는 인라인 요소이긴 하지만 수직 마진 적용 가능하고 음수여백도 적용 할수 있음 

 

 

4.승연스가 처음 만든것 웹페이지

 

body {

  margin: 50px;

}

header {

  text-align: center;

}

img {

  width: 200px;

  height: 200px;

  border-radius: 100px;

  margin-bottom: -95px;

  border: 2px solid black;

}

ol {

  width: 700px;

   ;

}

h1 {

  font-family: 'Oswald', sans-serif;

  color: rgb(97, 91, 91);

  width: 700px;

  background-color: aquamarine;

  margin: 0 auto 0 auto;

  padding: 120px 20px 50px 20px;

  border-radius: 10px 10px 0 0;

  border-top: 2px solid black;

  border-left: 2px solid black ;

  border-right: 2px solid black ;

}

span {

  color: rgb(80, 11, 11);

}

p {

  font-family: 'Fira Sans', sans-serif;

  color: rgb(76, 72, 72);

}

#todays-challenge {

  color: rgb(170, 9, 83);

  font-weight: bold;

  font-size: 48px;

  width: 700px;

  background-color: aquamarine;

  margin: 0 auto 0 auto;

  padding: 0 20px 60px 20px;

  border-radius: 0 0 10px 10px;

  border-bottom: 2px solid black;

  border-left: 2px solid black ;

  border-right: 2px solid black ;

}

 

 

-> 강사님의 정답은? 

 

* 먼저 html 레이아웃부터 잡자.

 

main {

  width: 800px;

  margin: 200px auto 72px auto;

  background-color: rgb(219, 108, 94);

  padding: 24px;

  border: 5px solid rgb(44, 44, 44);

  border-radius: 10px;

  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);

}

img {

  width: 200px;

  height: 200px;

  border-radius: 100px;

  border: 5px solid rgb(44,44,44);

  margin-top: -134px;

}

span {

  color: rgb(80, 11, 11);

}

#todays-challenge {

  color: rgb(170, 9, 83);

  font-weight: bold;

  font-size: 48px;

 

 

tip) decendent : 자손

 

 

5. 모든 CSS 선택자 리스트 [8일차]

지금까지 우리는 이미 많은 주요 CSS 선택자에 대해 배웠습니다. 다음은 CSS에서 사용할 수 있는 모든 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>(사용자가 해당 요소 위로 마우스를 가져갈 때)

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