드림코딩(유튜브 클론코딩 하면서 처음알게된것들 정리 )

<header>태그

사이트 네비게이션이나 페이지에 대한 정보를 담는 태그 페이지 상단에 위치한다.

보통 하나 이상의 제목 요소(h1~h6)나 사이트 로고, 저작권 정보를 포함. 웹페이지나 특정 글 영역 등 해당 부분의 머리글 역할을 한다. 헤더 내부에는 네비게이션 태그를 사용하기도 함 

<header>
	<nav>
    	<ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>
    </nav>
</header>

<section>태그

보통 제목을 나타내는 태그들을 포함하고 있음 (h1~h6) 자식요소로 포함됨 

주제별 영역들을 그룹화 하기위해 사용한다. section요소를 사용하는 예로는 챕터나 탭으로 구분된 대화상자에서

탭된 페이지 논문의 번호가 매겨진 섹션. 홈페이지에서는 소개 뉴스 아이템 연락처 등이 섹션으로 분리 될수 있다. 

 

CSS :root

:root 가상 선택자라고 한다 마치 클래스 처럼 동작해서 이 각각에 element에 상태에 따라서 선택자가 선택되기도 하고 되지 않기도 하는 선택자. 일반적으로 css에서 변수를 선언할때 사용한다. 

:root {
    --white-color:#fff;
    --black-color:#140a00;
}
/* 이렇게 -를 2개 붙이고 변수명을 쓰고 :을 붙이고 원하는 값을 입력하면 된다 */

header {
	color: var(--white-color);
}
/* 사용할때는 var이용해서 적용하고 싶은 값에 변수명을 괄호안에 써주면 된다 */

box-sizing: border-box; (feat.생활코딩)

box-sizing은 박스의 크기를 무엇을 기준으로 계산할지 결정하는 속성이다.

쉽게 말하면 너비와 높이를 계산할 때, padding과 border를 포함할지를 결정하는 속성인 것이다.

예를 들어서 너비를 100px을 주었을때 padding과 border를 포함하지 않았을때는 두 컨텐츠에 같은 크기를 주어도 border나 padding 값이 다르다면 크기가 달라서 보이는데 포함을 했을때는 border나 padding 값을 포함한 크기가 100px이 되는거라서 똑같이 보임

<style>
        *{
            box-sizing: border-box;
        }
        div {
            margin: 10px;
            width: 150px;
        }
        .apple {
            border: 10px solid black;
        }
        .fox {
            border: 30px solid red;
        }
</style>
.
.
.
<div class="apple">Hello</div>
<div class="fox">Hello</div>

왼쪽은 box-sizing: border-box; 적용을 안했을때 border 안에 하얀색 컨텐츠 영역 크기만 같은 모습 오른쪽은 box-sizing: border-box; 적용했을때 모습 border포함해서 크기가 150px인 모습 

max-width

어떤 요소의 최대 너비를 지정 반응형에서 창을 늘릴수록 이미지가 커져서 제한을 두고 싶다면 예를들어서 max-width:500px;로 해주면 창을 아무리 늘려도 이미지 크기가 500px 이상이 안된다.

 

button:focus cursor: pointer; outline: none;

focus는 커서가 깜빡거리는 것을 의미

cursor 속성은 요소 위에 마우스 커서가 올라갔을때 보여주는 모양을 지정 여기서 pointer는 아래 모양임 

outline 속성은 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 설정.

outline 속성은 border 속성과는 달리 HTML 요소의 전체 크기에는 포함되지 않습니다. HTML 요소의 높이나 너비는 outline의 두께에 전혀 영향을 받지 않습니다. 여기서 none은 아웃라인 자체를 없앤다는 의미 

 

margin 0 auto

위 아래 여백은 0으로 하고 양옆은 auto로 지정(좌우 여백을 똑같이 배분)한다는 의미 인데 이렇게 하면 가운데 정렬이 된다. 근데 이렇게 해도 가운데 정렬이 안될때가 있는데 첫째 <!Doctype> 이 제대로 선언이 되어있는지 확인해야 하고

둘째 inline 속성에서는 적용이 되지 않음 따라서 block으로 바꿔 주어야 한다.