# 4. TIL

홈페이지 만들기를 하면서 새롭게 알게된 것을 정리

1. not 선택자

선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용하는 방식

.amount > li:not(:last-child) > div{border-right:1px solid gray;}

출처

---

2. position 속성

• fixed : 문서의 흐름과 상관없이 위치를 좌표로 결정

• relative : 브라우저 창이 기준(기준점: 브라우저 왼쪽 위 꼭지점)

• absolute : 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값

• static : 브라우저에서 자연스럽게 해당 요소들의 위치를 결정하게 됩니다. 보통 display 속성에 따라 배치가 결정

.amount{
    position:relative;
    top:-66px;
    display: flex;
    width:1280px;
    background: white;
    box-shadow: -1px 0px 8px rgba(0,0,0,0.1);
    margin:auto;
}

출처1 출처2

---

3. display 속성

display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다.

• lnline : display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 즉, contents의 크기만큼 공간을 차지합니다. 따라서 width, height 속성을 지정해도 무시됩니다.

• block : display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 단, width, height, margin, padding 속성을 지정할 수 있습니다.

• inline-block : display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 위아래 간격 지정이 가능합니다.(여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.)

• flex : 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공

.header{
    display: flex;
    width:1280px;
    margin: auto;
    background: auto;
    height:86px;
}

출처1 출처2

---

4. Responsive Web

CSS 속성에는 반응형 웹을 만들 수 있게 도와주는 여러가지 속성이 있다.

속성명	설명	기준
vw(viewport Width)	1vw = 뷰포트 너비의 1%	viewport
vh(viewport Height)	1vh = 뷰포트 높이의 1%	viewport
vmin	vw와 vh 중 더 작은 것을 적용	viewport
vmax	vw와 vh 중 더 큰 것을 적용	viewport
em	1em = 부모의 폰트 크기	font-size
rem	1rem = html 요소에 지정된 폰트 크기	html 요소(root element)
calc	브라우저의 크기가 늘어나거나 줄어들 경우 일정 영역만큼을 뺀 나머지를 반환해 적용

background:url("image/photo2.jpg") center center / cover no-repeat;    
    padding-top : calc (300 / 1000 * 100%);

출처

---

5. Responsive Web과 Adaptive Web

• 반응형 웹 : 하나의 페이지가 유동적인 레이아웃으로 PC, 모바일, 태블릿 등 다양한 기기의 디스플레이 해상도에 맞추어 구성되는 웹 기술

• 적응형 웹 : 적응형 웹이란, 정해진 해상도에 맞춰서 제작한 내용에 따라 화면이 구성되는 기술

다양한 기기가 나옴에 따라 모든 웹 사이즈에 호환될 수 있게 하면 좋겠지만, 그렇게 하면 코드가 엉켜서 복잡해진다. 따라서 다양한 서비스(유투브)가 있는 홈페이지라면 적응형 웹페이지를 만드는 것이 좋고 간단한 웹페이지(크롬 등)이라면 반응형 웹페이지가 좋다.


홈페이지 제작 의도와 업종에 따라서 차이점을 비교하고 더 나은 방향으로 제작하기!

출처