2023.01.30 CSS
CSS
33. 스타일 링크하기
html파일에 넣는 것 보다는 별도의 파일을 만드는게 좋다.
왜 그러는가? 페이지가 만들어질때 메인페이지 전체의 색감 등 디자인 서브페이지들 메인을 가져다씀.
공통분모가 있다. 똑같은 스타일들 매 페이지보다 만드는것 보다 공통분모를 참조하는게 좋다.
style.css 만드는사람이 다를 때도 협업의 입장에서도 따로 만드는게 낫다.
파일을 따로만들고
<link rel="stylesheet" href="../css/style.css">로 링크를 연결해줘야한다.
재사용과 집중화라고 할 수있다.
34. 스타일 리셋, 평준화, 현대화
34.1 normailize.css
스타일을 주기 위해서 / normailize.css가있다.
현재 html이 기본적인 스타일을 가지고 있다. html에도 기본스타일이있는데 마음이 안들어서 새로운 스타일을 입히려고 하는 것이다.
문제가 있다. 기존 태그 스타일이 마음에 안들면 아예 스타일이 없는 것을 원할 때가 있다. 다 없애버리고 싶다. 이걸 다적용한 것이
reset.css이다 사람들이 공감을 사서 많이 사용했다.
34.2 reset.css
몇개 수정할거만 수정하고 추가할거만 추가하겟다. 브라우저마다 차이가 있는 기본적인 것 normalize.css 브라우저들의 기본스타일을 똑같게 해주는것.
원하는 것만 변경하면서? 요즘에는 html안만드니 reset.css를 사용한다.
다양한 reset파일이잇는데 왜 남이 만든거 사용안하나? 리셋시키면서 기본스타일을 볼수 있기때문에 손수 하자.\
34.3 Modernize 구버전의 브라우저 지원하기
html5를 지원하는게 있고 안하는 브라우저가 있다.
css 구버전이면 설렉터가 먹지를 않는다. 브라우저가 지원하지 않는 태그라도 자바스크립트에서 태그를 사용해봐라 하면 인식하더라 라고 한다.
과거에는 사장되엇지만 필요성이 생기게 되었다. 이런것들을 쭉 목록화 시켰다. 이파일이 HTML5Shive파일이다.
단순하게 태그만 아니라 기능을 추가하는 것이 생김. 비디오 등 이런 함수 기능들을 담고있는 스크립트 파일이 Check Enabled이다.
modernizr라는 사이트에서 이걸 지원해준다.
https://modernizr.com/ -> Add your detects html5에서 지원하는 데 이 브라우저에서 기능을지원하면 true아니면 false나옴.
그래서 초기화 탬플릿이 필요하다. initializr.com 초기화 사이트 나중에 가져다 쓰자
이수업에서는 직접 준비해서 작성할거임.
35. 레이아웃 블록
기본적인 사전 도구가 있는데 그런 도구가 있었다만 알아두자.
li태그를 배웠다. ul ol 잇어야함. 다른 태그에는 못들어감. 구조적으로 반드시 규칙이 있음. 하나씩 짚을 수없으니 문제가 발생한다.
태그에 대한 기본적인 규칙은 공부따로 하자. 태그에 어려움이 있다면 태그에 대한 사용방법을 보고 배우자.
스타일을 입힐때 무엇부터 해야하나?
1.컨텐츠 블록 스타일링
컨텐트를 마크업하기 최전방 블록을 스타일 입히기 - 가구
2.레이아웃 블록 스타일
가구를 배치하기 위한 방
방을 꾸미고 가구를 넣으면 원하는대로 스타일링이 된다.
그럼 뭐부터? 선택을 해야한다. 일반적으로는 방부터 꾸민다.
스타일이 가진 속성들 폰트색 등 스타일을 배워야하는데 하나씩 알아보는건 의미가 없다.
방을 만들면서 이런 속성이 있음을 배우는게 낫다.
과거에 html만잇을때 방을 꾸미기 위해서 레이아웃 배치 보이지않는 테이블을 깔아서 햇엇다.
대충보앗을때 대충 격자형으로 되어있음. 한번에 만들지 못한다. 한방향으로 여러번의 중첩을 필요하다.
방에서 방을 만들고 방에서 방을 만드는 형태 삐져나온거는 나중에 처리
일단 큰 그림을 그리고 나눈다. 방을 잘못나누면 이어나가는게 어려워짐.
처음부터 만들지 말고 다른사이트를 보고 방을 생각해봐라
https://youtu.be/Oh4hSDmnDsI
36. 제일 큰방(BOX) 꾸미기
높이를 줘야하는데 header aside main footer 이런식으로 나누엇는데 아예방이없는경우도잇고 두개로 나누는 경우도 잇다.
시각적인게 없다면 방을 만들어야한다. 어떤 태그로 해야하나?
asdie와 main을 같이 묶어야한다.
눈에띄게 구분할 수있도록 주석으로 선을 그어주자
높이를 알아내야한다. 높이 어떻게 아나? 디자인파일을 포토샵으로 높이를 재는 것임.
대상을 선별하기 위한 것이 필요하다.
header를 식별자로 줘야하나? 이것은 영역으로 다른 섹션들도 각각 가질 수 있다. 그래서 그냥 사용하면 안된다.
그렇지만 main은 하나만 올 수 있다.
#header{
height: 70px;
}
#visual{
height: 171px;
}
#body{
height: 300px;
}
#footer{
height: 100px;
}하면 예상치 못하게 컨텐츠가 겹치게 된다. 왜그럴까?
박스가 있는데 이 박스의 높이를 결정하는게 컨텐츠의 높이이다. 높이를 한정하지 않는다면 컨텐츠의 크기에 따라 박스의 크기가 발생하는 것임.
컨텐트의 크기에 따라 박스가 정해진다. 박스가 줄어든다고 컨텐트가 줄어들 수있는 것이아님.
박스 밖에잇는것을 그냥보이게 할것인지 히든할것인지 스크롤로 보게 할 것인지.
기본이 모두보이게라 겹친다. 그래서 컨텐트를 주석처리해두고 박스만 보이게 해놓고 시작을 하는게 낫다.
37. reset 파일 추가와 개발자 도구
방을 감싸는 것에 빈공백이 있다. 이것은 html이 기본적으로 가진 스타일 문제이기때문임. 이런것들을 리셋하는 작업이 필요하다.
큰방을 만들면서 큰방주변에 빈공백이 생겻다.
1.이 빈공백이 누구거인지 알아야한다. 개발자도구를 사용할것이다.
2.개발자도구로 원하지않는 태그의 속성을 알아보자. 그리고 그걸 없애서 reset파일로 이끄는 방법을 알아보자.
f12 누르면 개발자도구 나옴. 이것이 성능테스트나 이런 것에서 많이 사용된다.
마우스를 가져다두면 마우스가 올라간 박스의 태그명 속성들이 보인다.
현재 여백은 body의 margin이 잇다.
모든 element는 콘텐트를 감싸는 부분이 있다. 이것을 감싸는 border가 있다. border가 없지만 줄수 잇다. border와 컨텐트사이의 벌리고싶다면 padding이다.
현재태그와 옆의 태그와의 간격은 margin이다. 도구를 통해서 간단하게 테스트 해보고 원하는 것이적용되면 가져오면된다.
하지만 이 body의 margin은 다른데서도 사용하는 reset이니 파일을 따로 만들어준다.
그럼 css파일이 두가지인데 어떻게 엮나? 그냥 link추가햇듯이 추가해주면된다.
<link rel="stylesheet" href="../css/reset.css"> 적용순서상 reset이 먼저니 먼저 작성해준다.
스타일링은 css로 준다는 것은 덮어쓰기 한다는 것이다.
속성을 다알아도 어떻게 활용할 것인지에 따라 달라짐. 매우 귀찮고어렵다. 사람마다 제각각임. 그래서 이 강의에서는 문서를 만드는 틀을 배운다.
두번째 방법은 style파일에서도 필요하다면 import하면된다.
@import url("reset.css"); 같은 파일안에 잇으니 딱히 경로가 필요없다.
어떤게 더 바람직하나?
css가져올때 브라우저가 페이지를 받음. style.css를 요청함. 동시다발적으로 다른게 됨 받고나서 보니 @import를 보고 다시 요청함.
전체적인 시간이 직접 포함햇을때보다 길어짐. 문서가 크고 복잡해지면 그냥 바로 link로 넣어주자. 크게 문제가 업삳면 import하는게 더 바람직하다.
38. 색상 값
Color Kewords vs Hex vs Decimal 그런데 명령어 된 색깔보다 디자이너가 정해준 색을 사용한다.
그래서 숫자로 입력한다. 빛의 3원색
https://chunpinge.tistory.com/140 국비 2일차의 내용을 참조하자. 포인터로 찍어서 색알아보고 넣으면됨
#header{
height: 70px;
background-color: #ffff00;
}
#visual{
height: 171px;
background-color: rgb(0,255,0);
}
#body{
height: 300px;
background-color: rgb(100%,0%,0%);
}
#footer{
height: 100px;
background-color: rgb(155,155,155);
}추가적으로 rgba도 있다. 국비 2일차에 자세히 배웠으니 참조하자.
hsl
systemColor(윈도우테마에 고정된 색)
39. 두 번째방 설정하기(박스 정렬과 최소 높이)
두번째방 각 로고들 컨텐츠가잇는부분과 없는 부분을 나눠보자.
박스가 가운데만 정렬되도로하자.
더작은방은 컨텐트를 어우룰수 있는게 없으니 div로 감싸주자.
<div class="content-box">
이 컨텐츠 박스가 header아래에 잇으니 구분하기 쉽게 들여쓰기를 한번더 해주자.
어딘가에 같은 이름이 존재할 수 있으니 한정도 해주자.
#header{
height: 70px;
background-color: #ffff00;
}
#header > .content-box{
height: 70px;
background-color: red;
}그런데 header크기를 줄일일이 생기면 자식도 바꿔야하면? 자식도 바꿔야하니 귀찮다.
height: inherit; 혹은 height: 100%; 해주면 부모의 영역을 상속한다는 것을 의미한다.
이 차이점은 나중에 알아보도록 하자.
일반적으로 width는 부모를 따라간다.
근데 크기를 줄엿는데 가운데로 안가고 왼쪽으로 붙는다.
마진 left:auto를 주면 미는힘이 생겨서 오른쪽으로 정렬된다. 왼쪽오른쪽에 다 auto를 주면 가운데로 정렬되게 된다.
빈공백이잇을 경우 그사이를 떠돌아다니게 한다.
다른곳에도 필요하니 다 넣어주자.
이랫더니 다 들어가는 내용이라 한정지을 필요가 없어졋다.
부모 영역이 안보이니 좀 연하게 만들어주자.
근데 잘된건가? 잘된게 아님.
main은 높이가 고정이 아니어야한다. 가변길이가 되어야한다.
특화된녀석은 아래로 범용적인거는 위로 보내주자.
.content-box{
height: inherit;
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ff000020;
}
/*-------------------------------------*/
#header{
height: 70px;
background-color: #ffff0020;
}40. 세 번째 방 설정
세번째방을 만드는 내용들 포지션들 등을 알아보자
asdie와 main을 따로 감싸는 방이 필요하다. 그럼 섹션과 연관이 되어있나?
만드는 사람이 분리되어잇을때 css를 만드는 사람은 오로지 시각적으로만 필요한 방을 찾는다. 이 섹션이 있다없다 필요없다.
필요하다면 div로 담으면된다. 문서에 대한 제목을 만드는 섹션과는 상관업삳. 세션은 문서의 제목을 감싸는 영역일뿐이다.
aside와 main에 id를 주었다고 생각해보자.
#asdie{
width:205px;
background:red;
}해주면된다.
실제로 이렇게 너비를 지정해주면 높이가 없어서 보이지 않는다. 그리고 나란히 서는게 아니라 수직으로 선다.
블록 박스의 레이아웃 방식
블록 형식의 기본배치방식은 static 방식이라 겹치지않는 다음위치로 내려간다. 현재는 배치 정보를 지정하지 않고 그냥 적재만 했다.
과거에는 float등으로 꼼수를 활용햇다.
#body>.content-box{
display:flex;
}를 하니 알아서 들어갔다. 자세한 내용은 다음 강의에서 보자.
41. 콘텐츠 블록과 절대좌표
앱을 닮아가는 웹의 레이아웃 기법
css2.0때는 레이아웃이라는게 존재하지 않앗다. 블럭을 배치할때 박스가 순서대로 알아서 담아줫다
3.0부터 레이아웃이 등장했다. 문서웨에 앱에서도 보게 되었기 때문 하나의 플랫폼이기 때문임.
그때 제공하는 포지션을 사용햇다.
부모 컨테이너에게 flex로 쌓아달라하면 배치를 알아서 해주는 도구가 등장햇다.
또한 Grid형태로 담아주도록 하는 것이 제공되기도 한다. Grid는 최근 몇년전부터 등장햇다. 브라우저 호환방식을 알고사용해야한다.
먼저 static으로 알아보자.
약간의 배치방법으로 potision을 사용햇다.
포지션기법중 Absolute를 알아보자.
별개의 내용이니 별도의 파일로 진행해보자.
일단 뉴렉쳐의 reset.css를 사용하도록 하자.
아이템박스 li가 기본크기가 어떤지 보자.
겹치지 않는 것에서 순차적으로 쌓임 너비는 부모의 너비 높이는 컨텐츠의 높이임.
이게 기본적인 크기와 위치임.
position: absolute;
left: 100px;
top: 100px;
position: absolute는 절대적인 위치로 가라고 지정하는 것임. 어디로 가라는 것은 부모가 없어지는 것을 의미한다.
자기를 견인하던 울타리가 사라지니 너비가 컨텐트의 너비가 되게되는 것임.
절대축으로 가서 겹쳐지게 된다. 형제가 잇다면 뒤의 형제가 앞의 형제 위로 간다. 규칙에서빠져서 위로간다.
오른쪽? right하면됨
그럼 기준 좌표가 어디인가? 문서의 (0,0)좌표임
오른족이든 왼족이든 그 기준으로 밀려나는 것임.
그럼 부모의 영역에 맞추고 싶다면?
부모가 position: relative; 되면 부모가 포지션의 기준이 된다.
기본적 적재방식에서 오른쪽위아래에 둘 수있게 되엇다.
42. 상대위치(position:relative)
#s1 li:nth-child(1){
background: red;
position: relative;
left:50px;
top:30px;
}하면 현재 자신의 위치에서 50만큼왼쪽 30만큼위로 간거임.
자기가 가진 위치를 동생들이 가지지 못하게 한다.
부모도 상대적이라면 부모도 자기가 잇던위치에서 밀려나고 자식도 그만큼 또밀려서 잇는다.
상대위치에서 지정되고 상대위치안에서 밀려난다.
43. 고정위치(position:fixed)
#s1 li:nth-child(2){
background: green;
position: fixed;
left:100px;
top: 100px;
}absolute처럼 위치가 보내진다. 뭐가다른가?
스크롤바가 있다고할때 absolute는 문서를 기준으로 위치가 저장된다.
fixed는 브라우저의 화면영역을 기준으로 된다.
도구바같은 것들이 없어지면 안되면? 이걸 사용해서안사라지게 한다.
absolute는 offset영역이 존재해서 포지셔닝을 realteive라면 화면영역을기준으로 하기때문에 종속되지 않는다.
마치 모니터에 스티커처럼 붙일때 사용한다.
44. 붙임위치(position:sticky)
최근에 등장햇고 모바일앱에서 사용하는 것이다.
만약 header를 만들엇다고 해보자. 모바일앱인경우 이 header를 고정하고 싶은 욕구가 잇다.
그래서 fixed를 사용할 수 잇을 것이다. 그런데? 쪼그라들고 동생들이 header자리를 먹어서 가려버린다.
스크롤하면 고정적으로 따라가게 하고싶다면 sticky를 사용하면된다.
45. Flex 레이아웃과 용어
Flexible Box Model and Terminology
flex박스와 용어 알아보자.
css 3.0 부터 레이아웃이 등장햇다.
그런데 과거엔 목록을 표현하는 배치방식만 사용햇다.
2.0에는 display방식이 있엇다. 자기만의 높이 등을 제공하는 것임. 레이아웃기법이잇엇다.
뉴스기사를 보듯이 단순히 문서형태엿다.
3.0 부터는 단순히 붙이는게 아니라 수평으로 넣을수 잇게되엇다.
콘텐츠 블록을 감싸는 블록의 레이아웃 배치방법이 생겨낫다.
콘텐츠 자체를 감싸는 블록의 레이아웃도 등장하게 되엇다.
이것이 flex에서 구현이 되엇고 현재는 gird까지 포함이 되엇다.
바깥을 플렉스 박스라고 둔다. 뭘 두든 플렉스 아이템으로 하고 컨테이너에 담게 된다.
크기나 위치는 이론에 다라서 배치하면된다. 간단한 옵션을 넣으면 수직이나 수평으로 들어간다. 수평으로 한다면 메인축 반대가 크로스축임.
메인시작은 메인 스타트 메인끝은 메인엔드이다.
메인축 시작점끝점 등을 이해할 필요가잇다.
다양한 방식을 제공한다.
좌에서 우로 역순으로 위에서 아래로 아래서 위로 배치하는 방법 등을 제공한다.
오른족으로 가다가 원하는 위치에서 바뀌는 것도 가능하다.
또한 수직정렬 수평정렬을 할 수 잇는데. 쉽게 할 수잇다.
기본적인 용어만 배웟다. 다음강의부터 위치를 정렬해보도록하자.
2023.01.30 후기
본격적으로 문서의 틀이 담겨지는 것 같다. 디자인의 영역은 내가 잘 알지 못하지만 미리 디자인이 정해지고 그곳에 맞춘다는 점이 흥미롭다.
과거부터 다양한 방법들이 나오고 있으니 밑단계부터 알아볼 필요가 있다는 것을 깨닫게 되었다.
자습을 함으로써 수업에 잘따라가고 더 자세히 알 게 되는 것 같다.