5일차, 오늘은 복습의 날입니다! 지금까지 배운걸 깔끔하게 정리해보고자 합니다. 그럼 파이팅~~
HTML은 구조, 틀을 만드는 마크업 언어, CSS는 스타일을 담당하는 디자인 언어입니다.
JavaScript는 구조와 스타일이 완성된 각각의 요소에 상호작용의 역할을 한다고 할 수 있습니다. => 프로그래밍 언어
HTML은 tag들의 집합이다!
Tag는 <>로 묶인 HTML의 기본 구성요소, <>로 시작해서 </>로 끝난다.
<div> => 한 줄을 차지합니다
<span> => 컨텐츠 크기만큼만 공간을 차지합니다
<img> => 속성(attribute)이라는 것이 존재한다. ex) <img src="https://..."/>
<a> => 하이퍼텍스트, href 속성 target 속성)
<ul> & <li> => ul은 순서가 없어! ol은 순서가 있어.
<input> => type 속성 placeholder 속성
참고) radio와 checkbox 차이 => 하나만 가능, 여러 개 가능의 차이!
주의) radio는 같은 name 속성으로 묶어주기
EX) <input type="radio" name ="group"/> 옵션1
<input type="radio" name ="group"/> 옵션2
<textarea> => 일반 input text와는 줄바꿈이 가능하다는 차이시맨틱 요소란?
시맨틱 요소란 의미를 가지는 태그들 시맨틱.
시맨틱 요소를 사용해야 하는 이유
첫째, 검색 엔진이 시맨틱 요소를 중요한 키워드로 고려합니다. 즉, 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있다는 것입니다. 둘째, 여러 개발자가 함께 작업할 때 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 그뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.
시맨틱 요소의 종류
<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.id와 class를 사용!
1) id => 고유한 이름을 붙일 때 (중복 허용 X)
2) class => 반복되는 영역을 유형별로 분류할 때
사용자 인터페이스(UI; user interface)란, 컴퓨터와 사용자가 상호작용하기 위한 연결고리를 말합니다. 이전에는 CLI(Command-Line Interface)가 사용되었으나, 일반 사용자가 쉽게 사용할 수 있는 UI가 필요해졌고, 이를 사용자 인터페이스 또는 UI라고 부르게 되었습니다. UI는 애플리케이션과 사용자 간 상호작용을 가능케 하고, 매우 중요한 역할을 합니다.
<li class="menu-item selected">Home</li>하나의 요소에 여러 class를 적용하는 방법 (띄어쓰기를 통해서 적용한다)
글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요합니다.
크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
이때에는 vw, vh를 사용하세요. 웹사이트의 보이는 영역을 Viewport라고 합니다.
박스를 벗어나는 콘텐츠 처리
박스 크기보다 콘텐츠 크기가 더 큰 경우에는 콘텐츠가 박스 바깥으로 빠져나옵니다.
overflow 속성
CSS에서 박스 모델(Box Model)은 HTML 요소의 크기와 위치를 결정하는 방법입니다.
박스 모델은 크게 Content, Padding, Border, Margin으로 구성됩니다.
box-sizing 속성의 기본값은 content-box이며, 이 경우 Content 영역의 크기만 요소의 크기로 계산됩니다. 반면, box-sizing: border-box를 사용하면 Content, Padding, Border 영역의 크기가 모두 요소의 크기로 계산됩니다. 이렇게 box-sizing 속성을 사용하면, 요소의 크기와 위치를 조정할 때 보다 정확하게 제어할 수 있습니다.
====================================================================
자식 셀렉터
자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다.
header > div { }
후손 셀렉터
후손 셀렉터는 첫 번째로 입력한 요소의 후손 모두를 선택합니다.
header div {}
형제 셀렉터
형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.
section ~ p { }
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다.
section + p { }
따라서 형제셀렉터는 선택자 뒤에 일치하는 모든 형제 요소를 선택하는 반면, 인접형제셀렉터는 선택자 뒤에 일치하는 첫 번째 형제 요소만 선택합니다.
가상 클래스 셀렉터
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택합니다.
EX) a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다.
부정 셀렉터
div:not(:nth-of-type(2)) { }
:not() 부정 셀렉터는 내부에 다른 셀렉터를 포함할 수 있습니다. :nth-of-type(n) 셀렉터는 지정된 유형의 요소 중에서 n번째 요소를 선택합니다. 예를 들어, :nth-of-type(2)는 두 번째로 나타나는 요소를 선택합니다.
====================================================================
display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법입니다.
부모 요소에 적용해야하는 Flexbox 속성들
바로 속성을 지정해주는 위치입니다. Flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있습니다. 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않습니다. 우선은 부모 요소에 적용해야하는 속성들부터 알아보도록 하겠습니다.
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.
flex-wrap : 줄 바꿈 설정하기
justify-content : 축 수평 방향 정렬
justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.
align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.
grow(팽창 지수)는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수)는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기)는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미합니다.
section을 flex 박스 준다고 할 때, 각 div에 대해서 flex-grow값을 지정
section div:nth-child(1) 이런식으로 각각 하나씩 줘야함
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
flex-basis
Item의 (공간 배분 전) 기본 너비를 설정합니다.
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
많은 것을 배웠다. 중요한건 이걸 내가 얼마나 흡수하는냐인것 같다!
