변수로 지정되길 원하는 속성에다가 --을 앞에 붙여주면 된다. --font-size과 같이 하면 된다. 그리고 해당 변수를 사용할 때는 var로 가둬줘야 한다. var(--font-size)처럼 말이다. 그리고 CSS 변수는 본인과 자식 요소에게 적용이 된다. 따라서 .second-list에서의 --font-size는 작용하지 않는다.
class="icon"인 div 태그에 flex를 부여하고 justify-content: flex-end;를 통해 오른쪽 상단에 위치하도록 하였다. class="icons"인 div 태그들에게는 margin: 10px;를 줘서 서로 일정 간격 떨어지게 해주었다. gmail과 image는 링크 태그이지만 마우스를 갖다대지 않은 상태에선 밑줄이 안보기이게 text-decoration: none;으로 해주었다. 마우스를 갖다댔을 때는 밑줄이 생기기에 :hover를 이용하여 text-decoration: underline;을 부여해주었다.
개인적으로 user 모양(Jun의 글자가 들어간 빨간색 원 모양 icon)을 맞추는 것이 가장 어려웠다. 원의 특성상 지름이 어디서든 같기 때문에 height와 width를 똑같이 35px로 맞추고 border-radius: 100px;로 모서리를 없애 원을 만들었다.
google-logo는 header와 240px 만큼의 상단 마진이 남게 해주어 차이를 주었고 text-align을 통해 중앙에 배치하였다. searching-bar 또한 text-align을 통해 중앙에 배치시켰고, searching-bar img { width: 20px; }를 통해 class="searching-bar"인 div 태그 안의 img 태그들의 크기는 20px로 통일시켰다.(돋보기, 키보드, 마이크의 크기가 20px이 된 셈이다) 그리고 돋보기와 키보드, 마이크에 position: relative;를 부여해 searching-bar 안에 들어오도록 조정했다. 이 때 이 3개의 이미지는 부모 태그인 <div class="searching-bar">를 기준으로 위치가 정해진다.
footer가 화면에서 맨 밑에 나오도록 position: fixed;를 부여하고 bottom: 0;와 left: 0;을 부여했다. 3개의 항목으로 이루어진 realfooter2는 display: flex;가 부여되어 있기 때문에 realfooter와 나란히 배치되고 position: absolute와 right: 15px 를 통해 오른쪽에 배치된다.
완성본!
생각보다 비슷하게 만든 것 같다!
하지만 해결하지 못한 문제점도 있다.
보다시피 크기가 줄어들면 searching-bar 안의 이미지들이 엇나가기 시작한다... CSS를 좀 더 이용해보고 언젠가 다시 해보아야겠다.
그래도 Google 홈페이지를 Clone하면서 flex, margin, position에 대해 더 자세히 검색하면서 익숙해질 수 있었다.
※ 링크 태그인 a 태그의 속성값으로 target="_blank"를 부여하면, 새로운 웹페이지에서 링크가 열리게 할 수 있다. 그리고 title="나홀로 메모장 Ver2.0"을 부여하면, 링크에 마우스 커서를 갖다 댔을 시 자그마한 툴팁이 뜨게 된다.
CSS가 필요한 이유
SW사관학교 정글 자료를 공부할 당시 만들었던 사이트를 가져와보았다! 만약 '나홀로 메모장 Ver2.0'이라는 링크를 초록색으로 꾸미고 싶을 때, HTML로만 해결하려고 하면 a 태그 안에 style="color: green"이라는 속성 값을 부여하면 된다. 하지만 점점 색상을 부여해야 할 요소가 많아지는 등, 복잡해지면 일일히 속성값을 부여하는 것은 상당히 비효율적이다. 이를 해결하기 위해 CSS가 등장했는데 HTML이 정보 전달, 즉 뼈대 구성에만 전념하게 하고 꾸미는 부분은 CSS가 전담하게 하여 보다 효율적으로 문서를 작성할 수 있게 되었다.
<head>
<style>
a {
color: green;
}
</style>
</head>
CSS를 작성할 때는 head 태그 안에 style 태그를 넣고, style 안에서 CSS 코드를 작성하면 된다. 위와 같이 작성 시 a 태그의 모든 폰트 색상은 초록색이 된다.
박스 모델
우리가 만든 어떤 요소가 HTML 문서 안에서 얼마만큼의 크기를 가지고 있는지 직관적으로 알기는 어렵다. 이때 border를 이용해서 해당 요소가 어떤 크기를 가지는지 직관적으로 알 수 있다.
전체화면을 3으로 보았을 때 Navigation이 2를, Article이 1을 차지하는 것을 알 수 있다. 이는 페이지의 크기를 늘리거나 줄여도 비율이 유지된다. 만약 150px 1fr;로 했다면 Navigation은 페이지의 크기가 늘어나든 줄어들든 150px를 유지하는 한편, Article은 나머지 부분을 차지하고 페이지 크기 변화를 따라간다.
※ div 태그는 Block Level Element이고 span 태그는 Inline Element이다.
※ caniuse 사이트를 통해 해당 기술이 얼마나 자주 사용되고 어느 플랫폼에서 사용할 수 있는지 확인할 수 있다.
FlexGrid
Flex와 Grid 모두 대부분의 플랫폼에서 사용가능하며 전세계 90% 이상의 인구가 Flex 혹은 Grid로 이루어진 사이트를 이용할 수 있다.
미디어쿼리를 사용하면 페이지의 크기 변화에 따른 동적인 반응을 이끌어낼 수 있다. 위와 같이 @media (max-width: 800px)로 코딩이 된 경우, 이는 최대 800px까지 해당 코드인 display: none;을 실행한다는 뜻이다. 즉 0 ~ 800px까지는 보이지 않다가, 800px부터는 display: none;이 실행되지 않으므로 Responsive가 보이기 시작한다.
반면 @media (min-width: 800px)는 최소 800px부터 해당 코드인 display: none;이 실행된다는 뜻이다. 즉 800px 이상부터는 보이지 않는다. 0 ~ 799px까지는 display: none;이 실행되지 않으므로 Responsive가 보인다.
위 코드에서 head의 style 태그 안에 담긴 것들이 CSS이다. 단순히 h1, li, p와 같은 태그들을 선택할 때는 그대로 입력 후 중괄호 {} 안에 원하는 CSS를 기입하면 된다. id를 선택할 때에는 앞에 #을 붙여주어야 한다. 또한, CSS는 각 코드의 끝에 세미 콜론 ;을 붙여주어야 한다.
참고로 id나 class를 정해줄 때 위와 같이 firstList처럼 이름을 정해주는데, 이 때 대부분의 개발자들이 사용하는 규칙이 있다. first list처럼 쓰는 것이 아닌, _을 활용한 first_list나 앞 단어 이후 붙는 뒤의 단어들의 첫 번째 글자는 대문자로 시작하는 firstList로 이름을 정해준다.
thick과 같은 class의 경우는 앞에 .을 붙여주어야 한다. class의 경우, id와 달리 하나 이상의 요소에 class를 부여할 수 있다. 또한 class명을 thick_alert 혹은 thickAlert가 아닌 thick alert로 지었을 경우, style에 작성한 thick과 alert의 영향을 동시에 받는다.
id는 앞에 #을 붙여주면 되고, 하나의 id명에는 하나의 HTML 요소만 적용하는 것이 원칙이다.
li, p처럼 쉼표를 이용해 2개 이상을 동시에 지정할 수 있다.(Compound)
#nav li, #list > li 처럼 한 요소의 하위 요소를 선택할 수도 있다.
*을 이용하면 HTML body의 모든 요소를 선택하게 된다.
img[alt="cat"]으로 지정하면, img 태그 중 alt 속성의 값이 cat인 HTML 요소를 선택하게 되는 것이다.
Block 요소들은 줄바꿈이 실행되어 새로운 줄에서 시작한다. 대표적으로 p와 div 태그가 있다. Block은 Block이나 Inline을 자식으로 품을 수 있다.
반면 Inline 요소들은 줄바꿈이 실행되지 않아, 새로운 줄에서 시작하지 않는다. 텍스트 흐름과 동일하게 동작한다. 하나에 이러 또 다른 하나가 줄줄이 이어 붙여진다는 것이다. Inline은 Inline을 자식으로 품을 수 있지만, Block은 자식으로 품을 수 없다. Inline의 대표적인 태그로는 span이 있다.
빨간색 점선 박스로부터 위에서 20px, 왼쪽에서 20px 벗어난 파란색 박스를 볼 수 있다. relative-element는 Position Property를 부여하지 않았기 때문에 이동할 수 없는 Static 상태일 것이고, relative-element라는 부모 안의 자식 요소인 code, 즉 <div class="relative-element">는 relative라는 Position Property를 부여받아 top이나 left라는 좌표 Property에 의해 이동할 수 있다.
relative의 경우 기본 위치는 static이고 부모를 기준으로 두고 이동하게 된다.
- Absolute : 가장 가까운 부모 요소 중 position: relative;가 적용된 요소를 찾아, 그 요소를 기준으로 위치가 정해지게 된다. 만약 부모 요소 중 position: relative;를 가진 요소가 없다면, 전체 페이지를 기준으로 위치를 잡게 된다.
