멋쟁이사자처럼 프론트엔드스쿨 1-5

갓희·2023년 12월 8일
CSShtml멋쟁이사자처럼프론트엔드
1

멋쟁이사자처럼

목록 보기
4/6
post-thumbnail

<section>과 <div> 태그 사용에 관하여

1. div 태그

  • html에서 div요소는 플로우 콘텐츠를 위한 통용 컨테이너
  • CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 영향을 주지 않는다.
  • 보통 다른 요소 여럿을 묶어 clss나 id 속성으로 꾸미기 쉽도록 돕는다
  • <div>contents</div>
  • 특징
    • CSS로 꾸미기 전엔 콘텐츠나 레이아웃에 아무 영향을 주지 않는다.
    • 의미가 없는 순수 컨테이너로서, 아무 것도 표현하지 않는다.
    • 문서의 특정 구역이 다른 언어임을 표시하는 용도로 사용한다.
    • 시각적인 영역을 나누는 것에 사용한다.

  • 잠깐, 플로우 콘텐츠란?


    모든 html 요소는 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한가지 이상에 속한다.
    콘텐츠 카테고리는 느슨한 관계로, 서로 간에 어떤 관계를 형성하진 않으나
    카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때 도움이 된다.
    요소가 아무런 카테고리에도 속하지 않는 것 역시 가능하다.
    콘텐츠 카테고리의 유형에는 메인 콘텐츠 카테고리, 폼 관련 콘텐츠 카테고리, 특정 콘텐츠 카테고리가 있다.
    플로우 콘텐츠는 메인 콘텐츠 카테고리에 속하는 콘텐츠이다.
    메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명한다.
    플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함한다.

contentcategory
위는 메인 콘텐츠 카테고리를 도식화한 것으로,div 요소는 플로우 콘텐츠를 위한 통용 컨테이너이자 플로우 콘텐츠에 속한다.




하지만 우리는 저번 시간에
의미 없는 태그를 남발하는 것보단 의미 있는 태그를 사용하는 것이 더 권장된다는 것을 알게 되었다.
무조건 의미없는 div만 고집하지 않아도 된다
의미없는 태그를 사용하기 보단 영역을 나눌 땐 section 태그를 사용하는 것이 더 좋을 수 있다.

2. section 태그

  • html 문서의 독립적 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
  • 보통 제목을 포함하지만 항상 그런 것은 아니다.
  • <section>contents</section>
  • 특징
    • 요소의 콘텐츠를 따로 구분해야 할 필요가 있다면 <article> 태그를 고려할 수 있다.
    • 단순한 스타일링이 목적이라면 <div> 태그를 사용하는 것 추천
    • 문서 요약에 해당 구획이 논리적으로 나타나야 한다면 <section> 사용 추천

Class 이름 작명

저번 글에서 잠깐이지만, BEM에 관해 언급한 적이 있다.
오늘은 그것에 대해 더 자세히 다루는 시간을 가졌다.
나는 class 이름을 선언할 때, 내부의 콘텐츠를 기준으로 줄여서 사용했었다.
그런데 만약 내부에 있는 콘텐츠가 달라진다면? 이란 질문을 들었을 때,
아.... 그럼 달라질 때마다 class 이름을 바꿔야겠구나... 라는 생각이 들었다.
따라서 오늘 글에서는 어떻게 class 이름을 작명하는게 좋을지 다뤄보겠다!

1. 좋은 class 작명하기

  • 콘텐츠에 종속성이 있는 이름을 사용하기보단, 일관성 있는 이름을 사용한다.
    : 내부의 콘텐츠를 기준으로 사용한다면 확장성이 떨어지므로, 일반적으로 통용되는 이름 사용을 권장한다.
  • class 명의 시작에 숫자 기입은 되지 않는다. 
    <div class="1a">멋사</div> /*불가*/
<div class="a1">최고</div> /*가능*/
    (근데 이모지는 된다는 사실이 신기했다..ㅋㅋ
    그치만 사용이 되어도, 되도록 사용하지 않는 것을 권장한다.
  • 되도록 템플릿 개념으로 접근해서 일반적인 유형으로 작성한다.
  • 알아보기 쉬운 이름으로 작성한다.
    : 너무 짧은 이름이나 약자는 알아보기 어렵다.
  • 나름의 규칙을 생각하며, 근거 있게 작성하는 것이 가장 바람직하다.

2. BEM (Block Element Modifier) 방법론

  • 항상 영어 소문자만을 사용. 카멜 케이스 등은 사용하지 않는다.
  • 일반적으로 한 요소는 하이픈으로 연결
    (Ex. input-text, button-submit, modal-alert 등)
  • 네이밍의 조합: 형태-의미-순서-상태 순으로 사용
    (Ex. button-submit-03-disable)
  • 언더바는 파일, 폴더, 이미지 등에만 사용
    (Ex. image_elysia_asset_01.png)
  • 숫자를 사용할 때엔 확장성을 고려해 01, 02,... 혹은 001, 002,... 처럼 사용한다.
    앞에 0을 붙이지 않으면 이미지 정렬 시 1다음 2가 오지 않고 10이 오는 것처럼 정렬 순서가 엉망이 될 수 있다.

3. 케이스 스타일

  • 카멜식 (Camel case): 낙타의 모양에서 따온 방법
    • 첫 단어는 소문자로 시작하고, 두 번째 단어부터 대문자로 시작한다.
    • 단어와 단어 사이는 붙여 쓴다.
    • Ex. mainActivity.java, errorLog.txt 등
  • 케밥식 (Kebab case): 케밥이 꼬챙이에 꽂힌 모습에서 생긴 방법
    • 모든 단어가 소문자로 시작한다.
    • 단어와 단어 사이는 -로 연결된다.
    • Ex. main-activity.java, error-log.txt 등
  • 파스칼식 (Pascal case)
    • 카멜식과 비슷하지만, 파스칼식은 첫 단어도 대문자로 시작한다는 점에서 차이가 있다.
    • 몇몇 언어의 경우 관습적으로 클래스명만 대문자로 시작하는 암묵적인 규칙이 있어 조심해야 한다.
    • Ex. MainActivity.java, ErrorLog.txt 등
  • 스네이크식 (Snake case): 뱀처럼 길게 이어진다.
    • 케밥식과 유사하지만, 각 단어가 -가 아니라 _로 연결된다.
    • Ex. main_activity.java, error_log.txt 등

Box-shadow 속성

  • 선택한 요소에 그림자 효과를 만들어주는 속성
  • initial value: none, inherited: no
  • 문법
 box-shadow: none; /*그림자 효과를 없앰 */
 box-shadow: x-position y-position blur spread color;
 /* x-position: 가로 위치, 양수면 오른쪽, 음수면 왼쪽에 그림자
 y-position: 세로 위치, 양수면 아래쪽, 음수면 위쪽에 그림자
 blur: 그림자를 흐릿하게, 값이 클수록 흐려짐
 spread: 양수면 그림자 확장, 음수면 축소
 color: 그림자 색 */
 box-shadow: inset; /* 그림자를 요소의 안쪽에 만듬 */

이때까지 나는 요소의 영역을 나타내기 위해서 background-color를 사용해서 나타냈다.
오늘 수업에서는 요소의 영역을 나타내기 위해서 box-shadow 속성을 사용했었는데,
이 때 이 속성에 대해 처음 알게 되었다. (신세계)
box-shadow: inset 0 0 10px black;으로 사용했었던 것 같은데 (맞나?)
요소 안으로 그림자가 생기니까 확실히.. 공간을 차지하지도 않고
(이건 백그라운드 컬러도 마찬가지지만)
class명이 같아도 콘텐츠 영역마다 적용이 되어,
border나 background-color보다 영역 구분을 보기가 편했다.

Ex. shadow
(이건 마진 병합 현상 설명할 때 쓰려한 자료인데.. 중복으로 사용좀 해야겠다.
파란 동그라미는 무시해주세욤 ^^.
아무튼 저 section1,2는 class명이 section으로 같은 요소들인데
확실히 좀 더 구분이 가는게.. 느껴지는가..?
background-color로 사용했을 때엔 같은 색으로 표현이 되어 구분이 확실히 가지 않았었지만
box-shadow는 지 요소 안으로 그림자가 져서 같은 class명을 가지든말든, 같은 색의 효과를 주든 훨씬 잘 보이는게 너무 마음에 들었다!)

이 기능을 이제 알게 되다니.. 덕분에 과제할 때 좀 더 뚜렷하게 영역 확인을 할 수 있었다.
앞으로도 계속 써야겠다!!

마진 병합 현상 Margin Collapsing

CSS에서 인접하는 block-level element의 상하단 margin이 서로 병합되는 현상

  • 자연스럽게 보일 수 있도록 하는 것
  • 조건
    • block-level 요소여야 적용된다.
      (inline이나 inline-block은 적용 X)
    • 인접해있는 block 요소의 상하단 마진만 겹친다.
      (좌우 마진은 겹치지 않는다.)
  • 부모 자식 요소 관계에서 마진 병합 현상
    • 아래 코드에서
      ① 부모 자식 요소 간 인접해있고,
      ② 둘 다 block 요소이기 때문에 마진 병합 현상이 일어난다.
    • body도 block 요소이기 때문에, body와 parents 사이 마진 병합이 일어난다.
<body>
	<div class="parents">
		<div class="box">A</div>
		<div class="box">B</div>
	</div>
</body>

margin

  • 마진 병합 현상을 피하는 방법
    • CSS에서, 인접한 블럭 요소 중
      첫 블럭 요소 이름:first-child를 입력하고 margin에 큰 값을 부여한다.
      -> 사실 이 방법은 마진 병합 현상이 일어나지 않게 하려는 것이 아니라,
      시각적으로만 마진 병합 현상이 일어나지 않은 것처럼 된다.
      Ex.
/*HTML*/
<main class="contents">
	<section class="section">section1</section>
	<section class="section">section2</section>
</main>
/*CSS*/
.section {
    background-color: blueviolet;
    box-shadow: inset 0 0 30px white;
    margin: 20px;
    padding: 20px;
} 
/* 여기서 끝나면 마진 병합 현상 일어남 */

.section:first-child {
    margin-bottom: 40px;
}
/* 마진 병합 현상 회피~ */

Ex. shadow

    • 마진 병합 현상이 일어나는 블록 요소 사이에 table 요소를 넣는다.
      • 인접한 block 요소 사이에서 발생한다는 마진 병합 현상의 조건에 맞지 않기 때문에 (table은 table 요소이다.)
      • 그러나 내용 없이 시각적 목적의 html 마크업이기 때문에 사용 지양하는 것이 좋음
      • 경계면에 공간을 차지하고 있는 요소를 삽입한다.
        • ex. border나 padding 값을 주게 되면 마진 병합 현상이 일어나지 않는다.
          : 부모의 마진과 자신의 마진 사이 경계면이 생기게 되기 때문이다.
        • Q. 마진 병합 현상이 일어나는 블럭 요소 사이에
          빈 div(display: inline; 으로 바꾼)을 넣어도 마진이 안겹칠까요?
          A. div에 콘텐츠가 없기 때문에 (속성을 inline으로 바꿨으니까) 마진 병합 현상이 일어납니다.
      • 부모 요소에 display: flow-root; 값을 주게 되면 마진 병합 현상이 일어나지 않는다.
        • Q. 부모 요소가 아니라 서로 인접한 형제 요소들이라면 첫 번째 형제 요소에 display: flow-root; 값을 주면 되나요?
          A. 아니오. flow-root 또한 block 계열 속성이기 때문에 여전히 마진 병합 현상이 일어납니다.
      • overflow 속성의 값이 visible이 아니라면 마진 병합 현상이 일어나지 않는다.
      • 강사님과 멘토님의 방법
        • margin-bottom 으로 쓰고 :last-child로 맨 마지막 요소를 선택한 후,
          margin-bottom: 0;을 많이 사용하신다고 하셨다.

    *
    솔직히 마진이 겹치는 줄도 몰랐는데, 이 현상에 대해 알고나니 보였다 ㅎㅎ..ㅋㅋ
    CSS에서 정해놓은 규칙(?) 같은 현상이라 이 현상을 마주치기 싫다면 내가 알아서 회피해야 할듯,,ㅋㅋ
    근데 이 규칙 맘에 든다.. 이 현상이 없었다면 하나하나 마진을 계산했어야 한다는 생각에.. 어우 머리아퍼

형제 선택자의 종류

1. 일반 형제 선택자 (~) General sibling selector

a ~ b { property: value; }
a와 b가 같은 계층에 있을 때, 지정한 요소의 형제인 모든 요소들을 선택한다.

Ex.

<div>
	<h1>멋사</h1>
	<p>과제</p>
    <p>재밌엉<p>
    <p>히힛<p>
</div>
h1 ~ p {
	color: white;
}

일 때, <h1> 태그 뒤에 있는 모든 <p> 태그의 색을 흰 색으로 변경시킨다.

  • 지정된 요소가 앞에 존재하면 그 요소들의 형제들을 모두 선택한다.
  • a 뒤에 오는 b에 적용한다. (바로 뒤에 올 필요는 없다.)

2. 인접 형제 선택자 (+) Adjacent sibling selector

a + b { property: value; }
a와 b가 같은 계층에 있을 떄, 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.
따라서, 다음에 위치한 형제 요소에만 값이 주어진다.
첫째 말고 둘째만 선택한다는 것

Ex.

<div>
	<h1>멋사</h1>
	<p>과제</p>
    <p>재밌엉<p>
    <p>히힛<p>
</div>
h1 + p {
	color: white;
}

일 때, <h1> 태그 바로 뒤에 있는 <p> 태그의 색을 흰 색으로 변경 시킨다.
(<p>과제</p> 만 컬러가 흰 색으로 바뀐다.)

3. 일반 형제 선택자와 인접 형제 선택자의 차이

  • 일반 형제 선택자: 지정한 요소 뒤의 형제 요소를 선택한다.
  • 인접 형제 선택자: 지정한 요소 바로 뒤의 형제 요소만 선택한다.

*
얘네는 이해가 가면서도 막상 예시를 혼자 적다보면 이해가 안간다.
결합자 모양도 넘흐 헷갈림.. ㅠㅠ
혼동 없게 뜻을 정확히 알아둬야겠다.

:hover

a:hover { property: value; }
사용자가 포인팅 장치를 이용해 상호작용 중인 요소를 선택한다.
보통 사용자의 커서가 요소 위에 올라가 있으면 선택한다.

가상 클래스(의사 클래스)란?

선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.
:hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있다.

  • 예시
a:hover {
	color: orange;
}

라면, 마우스를 a 위에 올렸을 때 a의 색이 orange로 바뀐다.


*
hover를 이용해서 과제할 때 더 풍부한 효과를 줄 수 있었다!
마우스를 올렸을 때와 안올렸을 때 너무 갑작스럽게 효과가 전환되는 것 같다면,

transition에 값을 줘서 전환 시간을 바꿀 수 있다.
덕분에 글자가 뿅!!!!!하고 갑자기 커지는게 아니라 스르륵~ 커져서
더 만족스러운 결과를 얻었다 ^-^v

Background property

1. background-repeat

배경 이미지의 반복 방법을 지정한다.
initial value: repeat, inherited: no

아래 값을 부여했을 때에

  • background-repeat: repeat;: 배경 이미지가 계속 반복된다.
  • background-repeat: repeat-x: 배경 이미지가 x축을 따라 반복된다. (가로로)
  • background-repeat: repeat-y: 배경 이미지가 y축을 따라 반복된다. (세로)
  • background-repeat: no-repeat: 배경 이미지가 반복되지 않는다.

2. background-position

배경 이미지의 위치를 지정한다.
문법: background-position: x-position y-position
initial value: 0% 0%, inherited: no

  • 위치 값으로 사용할 수 있는 것
    • 가로 위치 값: left, center, right, 백분율, 길이
    • 세로 위치 값: top, center, bottom, 백분율, 길이
  • Ex.
    background-position: right center: 배경을 오른쪽 중앙에 배치한다.

*
과제할 때 이 두 가지의 백그라운드 속성을 모두 사용해보았다.
근데 no-repeat으로 설정하니까 반복되지 않는 부분은 흰색 바탕으로 나와서,,..
이걸 어떻게 해결해야하지 찾아봤지만 결국 해결하진 못하였다 ㅠ
그래서 월요일에 여쭤볼 예정...!
그냥 다시 기본값으로 둘지 no-repeat으로 할지 1분 정도 고민하다가
no-repeat으로 뒀다 ^^
반복되는 것 보단 흰색 바탕이 나은 것 같아서..ㅋㅋ

자투리 지식

1. 마진 상쇄 현상

여러 block-level 요소에 서로 다른 마진 값을 넣었을 때, 가장 큰 마진 값이 적용된다.

  • block-level 요소에 padding이나 border 속성을 부여한다면,
    마진 상쇄 조건에 부합하지 않으므로 마진 상쇄 현상이 일어나지 않는다. (경계면 분리)

2. 목록의 컨텐츠 구성

  • ul(unordered list): 순서가 그닥 중요하지 않은 목록을 나타낼 때 사용한다.
    -ol(ordered list): 순서가 중요한 목록을 나타낼 때 사용한다.

3. 한 요소에 class 이름을 두 번 이상 선언할 수 있다.

  • Ex. <div class="section cat"> contents </div>
    라면, 이 div는 section과 cat 두 가지의 class 이름을 가진다.

4. class 셀렉터

  • .wrapper.wow {property: value;}와 .wrapper .wow {property: value}의 차이
    • .wrapper.wow {property: value;}: class 이름 중 .wrapper와 .wow을 포함한 요소를 선택한다.
    • .wrapper .wow {property: value}: .wrapper의 하위 클래스인 .wow를 선택한다.
  • a :hover {property: value;}와 a:hover {property: value;}의 차이
    • a :hover {property: value;}: a의 하위 요소에 hover 효과를 준다.
    • a:hover {property: value;}: a에 hover 효과를 준다.

느낀 점

오늘은 마진 병합 현상으로 거의 한시간 반..? 정도 강의를 들은 것 같다
처음엔 이해가 잘 갔는데, 점점 딥해질 수록 이해도도 같이 떨어졌다..ㅋㅋㅠㅠㅠ
그래도 어떤 조건에 있을 때 이 현상을 볼 수 있는가? 에 대해서는 이해해서 다행이라는 생각.
오늘 수업에서 특히나 어려웠던건, 갑자기 display 속성에 cover를 주는 것이었는데
다행히 이런 방법이 있다~ 정도로만 알고 넘어가면 된다고 하셨...ㄷ....던가...........?
뭔가 다음에 제대로 배울 것 같아서 이게 어떤 값인지 살짝 알아보기만 했다..ㅎㅎ
그 외에는 9시 스터디에서 질문을 열심히 하며(?) 나름 이해를 했다 (오늘 배운 부분에 한해서)
근데 왜.. 과제 코드 짜는건 두시간이 걸리는건지...............
확실히 강사님이 코드를 짜실 땐 몰랐는데,
실제로 내가 코드를 짜보니까 내가 모르는 것이 무엇인지 훨씬 잘 느껴진다.
오늘 예제를 보니 더 잘하고 싶어졌다. ㅎㅎ
이번주 토요일은 없는걸로... 😂😂😂

profile
갓희
나의 개발일지
이전 포스트

멋쟁이사자처럼 프론트엔드스쿨 1-4

다음 포스트

멋쟁이사자처럼 프론트엔드스쿨 2-1

0개의 댓글

관련 채용 정보