[TIL] 1주차 ⎮ HTML,CSS - ＂html 단축키 emmet 사용하기＂ ➕ ＂block vs inline＂ ➕ ＂float와 clearfix＂

1일차부터 쉽지 않다…아좌좌

0. 유용단축키

• 윈도우 문서 폴더 경로에 cmd 치고 code . 하기 > 바로 vscode 켜짐
• lorem10

1. html

🎀 emmet

vscode 플러그인으로 빠르게 html 코드를 작성할 수 있다. 아래 문법을 사용하고 tab키를 누른다.

child	>
sibling	+
반복	*
클래스	. (디폴트 div태그)
아이디	#
넘버링	$
텍스트	{}

div#container>ul.nav>li.item*3>a.link{Menu $}+p.desc{This is item $ description}

<div id="container">
    <ul class="nav">
        <li class="item"><a href="#" class="link">Menu 1</a></li>
        <li class="item"><a href="#" class="link">Menu 2</a></li>
        <li class="item"><a href="#" class="link">Menu 3</a></li>
    </ul>
    <p class="desc">This is item 1 description</p>
    <p class="desc">This is item 2 description</p>
    <p class="desc">This is item 3 description</p>
</div>

🎀 정리

• 1em = 16px
  • 부모body에서 1em 사이즈 조정하면 사이즈 바뀔 수 있음
• 블록 단위. 부모의 블록 단위
• lorem10, 10개 단어 자동생성
• 태그 이름 쓰고 tab하면 태그 자동생성
• 인라인 태그, 코드상 엔터로 작성되어도 화면에는 한 줄로 표시됨

🎀 block vs inline vs inline-block

참고

1. 블록
   • 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기만큼 차지한다. {width: 100%; height: auto;}
     • width, height로 크기를 지정할 수 있다.
     • padding, margin으로 상하좌우 여백 지정 가능
   • 여러 블록 요소들이 있으면 수직으로 쌓인다 == 한 개의 블록은 기본적으로 한 줄(행) 을 차지한다.
   • 태그 : div, h1, p
2. 인라인
   • 너비와 높이가 내부 컨텐츠 크기만큼 설정된다. {width: auto; height: auto;}
     • width, height로 크기를 지정할 수 없다.
     • padding, margin으로 좌우 여백 지정 가능
   • 여러 개의 인라인 요소는 수평으로 쌓인다. (n열)
   • 태그 : span, img
3. 인라인 블록
   • 인라인처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정된다.
     • width, height로 크기를 설정할 수 있다.
     • 상하좌우 여백을 지정할 수 있다.
   • 수평으로 쌓인다.
   • {display: “inline-block”;}

2. css

💚 css 우선순위

* < tage(1) < class(10) < id(100) < inline style
점수 부여

+) attribute란 태그 안의 class, style 등을 말한다.

<a href="#" class="link-class" id="uniqueLink" style="color: red;">aaa</a>

• a태그에는 4개의 attribute가 사용되었다.

💚 html, css 단위정리

css 단위 속성 정리

em	부모요소의 폰트 크기를 기준으로 함. 기본 1em=16px	상대
rem	루트 요소의 폰트 크기를 기준으로 함. 기본 1rem=16px. 위와 비슷하지만 루트 요소이므로 더 일관됨	상대
px	픽셀 단위	절대
%	부모태그를 기준으로 퍼센티지를 지정	상대
vw	웹브라우저의 너비를 기준	상대
vh	웹브라우저의 높이를 기준	상대
vmin	웹브라우저의 높이와 너비 중 더 작은 것을 기준	상대
vmax	웹브라우저의 높이와 너비 중 더 큰 것을 기준	상대

💚 css reset

기본적인 태그의 스타일을 초기화해야 원하는 스타일로 제대로 적용될 수 있다. 유명한 2가지 css파일이 존재한다.

1. reset.css

   모든 스타일링을 초기화시킨다. 모든 태그들에 대해 마진과 패딩을 0으로 주고 폰트 크기도 초기화한다. 도화지로 만든다고 보면 된다.

2. normalize.css

   모든 브라우저에서 동일하게 적용될 수 있도록 만들어졌다. 기본적인 폰트 크기는 두고 패딩이나 마진을 제거한다.

배우는 과정이므로 일부 태그만 초기화했다.

💚 css 선택자

1. .menu > li {}

   자식선택자 : 메뉴 클래스의 1촌 자식, 바로 자식인 li 요소에만 스타일을 적용한다.

2. .menu li {}

   후손선택자 : 메뉴 클래스의 모든 li 요소에 스타일을 적용한다.

💚 float

레이아웃을 구성할 때 float 를 사용할 수 있다. 말그대로 띄워서(float) 왼쪽이나 오른쪽에 배치할 수 있다. 페이지 전체의 레이아웃을 잡을 때 중요하게 사용된다.

float와 clear:both

블록 요소들을 상하가 아닌 좌우로 배치 되도록 할 수 있다. ⭐️⭐️⭐️⭐️⭐️

float : “after + clear” 💚

float 속성을 이용해 블록 요소를 좌우로 배치하면 부모 요소는 float 속성이 적용된 요소의 높잇값을 알 수 없다. 이를 해결하기 위해

1. 가상의 요소=빈박스 등에 after를 생성 > 자식을 생성
2. content로 빈문자
3. 이 빈박스를 block요소로 변환 {display : block;}
4. 마지막에 clear:both를 적용
   1. clear은 left, right, both 세가지 속성을 가진다. float된 요소들로 인해 다음에 오는 block요소가 영향을 받지 않도록!한다. 즉 블록요소에 사용한다.

!!! 부모 요소에 float의 영향을 해제해서 높잇값을 인식할 수 있다.

12보이지 않는 자식 요소를 추가해 3블록 요소로 설정하고 4float속성을 해제해서 부모가 float 요소의 높이를 인식할 수 있게 한다.

자식 요소의 높이를 인식하지 못하면 부모의 높이가 0이 될 수 있다. 설정해도 보이지 않는 이유! 이러면 추가적으로 다음 요소가 위에 덮어씌워지며 섹션이 겹쳐지는 오류가 발생할 수 있다.

45p

해당 스타일을 정의해두면 class에 clear를 추가해서 쉽게 부모가 자식 요소의 높이를 인식할 수 있다.

• clearfix 기법을 구현한 것이다.

💚 자주 사용하는 css

margin : 0 auto; // 가운데 정렬
padding: 10px 0; // 상하적용 좌우적용