3. *CSS 기초

html 꾸미기 : CSS 사용 : 어떻게? : CSS 파일 생성해서 불러오기 or head 태그 안에 style 태그를 만들어서 CSS 문법 입력하기

CSS 선택자 이해

다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것

 

선택자란? : 다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것 : p 태그를 꾸미고 싶다면 p 적는 식으로

이건 p 태그가 모두 red 색상으로 바뀜 : 근데 특정 p 태그만 바꾸고 싶으면 어떻게? : p 태그에 'id'라는 속성값 부여 : id가 thisis인 태그만 바꾸고 싶다 : thisis는 그냥 지은 id이며, 이걸 제대로 쓰려면 #thisis 사용 : id 'thisis'는 중복 사용 불가능

 

하지만 중복하고 싶으면 'class' 사용 : class의 경우에는 #이 아닌 ' . ' 사용

 

선택자는 이와같이 태그, class, id 기준 등 다양한 기준이 가능하다 :  CSS Diner 사이트(https://flukeout.github.io/)로 상세한 이해 가능

 

CSS 기초 레이아웃 이해하기 ( Display, Position, Flex, Grid는 무엇인지 대략만 ) 

Flex란?  html에서 레이아웃을 변경, 배치하고, 만드는 기능을 명확하게 수행할 수 있는 속성이다

 

웹 페이지를 개발할 때, 모바일용, PC용 두 가지를 모두 개발하기 번거로움 존재(ex naver.com, m.naver.com) : 이를 해결하기 위해서 유튜브와 같이 브라우저 사이즈에 맞춰서 레이아웃이 변경되는 '반응형' 기능을 생각해냄 : 여기까진 괜찮았는데, html에는 레이아웃을 만드는 명확한 기능이 없었음 : 'flex'라고 하는 레이아웃을 만드는 CSS 기능을 만듦

 

레이아웃을 준비할 때, 보통 박스로 여러 공간을 나누어 구성하는 것부터 시작 : 이는 CSS에서 'div'라는 태그를 사용하는데, 레이아웃을 나눈다(division)는 의미에서 파생 : '옷'이라는 박스 안에 봄옷, 여름옷, 가을옷, 겨울옷 박스 등

위와 같이 박스를 분리해 놓는 것부터 시작 : flex 기능을 통해 위치를 변경할 것 : 박스의 보이는 순서를 변경하거나 정렬하는 등 :  flexboxfroggy사이트(https://flexboxfroggy.com/#ko)로 상세한 이해 가능

 

 

지금까지 배운 것들을 통해 간단한 navbar를 만들어볼 것

a 태그는 링크 연결

이제부터 CSS를 사용해 꾸며보자 : 작성할 내용이 많을 것이기 때문에 style 태그 사용 보단 css 파일 따로 만들고, link 태그로 연결

근데 가장자리에 여백이 왜 있을까? : 개발자도구 키는 습관

body 태그가 여백을 만들고 있음을 알 수 있고, 'margin' 이라는 값이 8로 설정되어 있음 : 이를 0으로 설정하기

Display란?  html 요소의 표시 방식 즉, 레이아웃을 결정할 수 있는 속성이다. 아예 숨길지(none), 레이아웃을 유연하게 조정할지(flex) 등을 결정할 수 있다.

이제부터 flex를 사용해볼 것 : header 박스 안에 있는 박스들을 정렬 등 유연하게 배치

 

박스를 만들 때 div만 쓸 수 있는 건 아님 : 개발자들이 암묵적으로 보통 메뉴 같은 것을 만들 때는 'li'라는 리스트 태그를 사용함 : a 태그는 콘텐츠 영역이 딱 메뉴 1, 2, 3 만큼의 박스 크기임 : 박스를 하나 더 만들고 그 안에 a 태그를 만드는 게 더 이뻐 보일 수 있음

 

그럼 menus 박스와 icons 박스를 div에서 'ul'로 바꿀 것인데, ul은 항상 li와 같이 사용됨 : 이는 즉, ul 태그 안에 li 태그 3개와 각각의 li 태그 안에 a 태그가 있게 됨

ul 태그는 기본적으로 '•'이 붙음 : list-style: none 적용시 사라짐 : flex의 경우 header의 자식 3개한테만 적용한 것이니 메뉴와 아이콘에도 flex 하려면 따로 적어줘야 하겠지

 

근데 메뉴1, 2, 3가 너무 딱딱 붙어있음 : menus에 flex 해서 space-around 적용하면 되지 않을까? : space-around가 적용된 상태여도 안됨

menus를 살펴보면 본인 콘텐츠 영역만큼만 범위가 설정되어 있음 : menus 박스의 width 사이즈가 크지 않아서 그럼 : 200px 정도로 설정하면

해결되는 것을 볼 수 있음 : 하지만 이런 것이 항상 정답이라고는 할 수 없음 : 이렇게 픽셀을 고정해 놓기 싫을 수 있음 : menus li를 통해, padding 영역을 확장시킬 수 있음

 

이제 아이콘을 넣어볼 것 : 용량 등의 효율성 문제로 아이콘을 텍스트화 시킴 : 이는 width를 늘리는게 아니라 폰트 사이즈를 늘리면 자동으로 아이콘이 커질 것임 : 폰트 어섬(https://fontawesome.com/) 사이트를 보통 사용하는데, 매번 링크를 가져오기 번거롭기 때문에 cdn(https://cdnjs.com/libraries/font-awesome)을 통해 사용할 수도 있음 : 해당 기능은 http 요청을 통해 데이터를 가져오는 것 : 하지만 인터넷 연결으로 가져오는 것이기 때문에 단점이 많음

이제 폰트 어섬 페이지에서 원하는 아이콘을 검색후 제공하는 i 태그를 html 소스코드에 적용

# 부분에 본인의 sns 링크나 원하는 링크를 입력해놓으면 연결될 것

 

 

그러면 flex가 생긴 가장 큰 이유가 반응형이였음 : 반응형은 다시 무슨 의미가 되는가? : 브라우저 사이즈가 '얼마'보다 작으면 css 파일이 덮어씌워졌으면 좋겠다는 의미였음 : @media 사용 : 태블릿과 모바일의 경계 : 768px

이런 개념을 바탕으로 사이즈가 작아지면 버튼들의 순서가 바뀌도록 설계도 가능

 

그럼 이제 사이즈가 작아질 때만 생기는 메뉴 bar를 만들자 : <div id = "logo"> 에다가 적어도 되지만, 맨 끝에 a 태그를 사용하여 작성

근데, 지금은 사이즈가 클 때도 메뉴바가 나타남 : css 파일에서 display: none;을 통해 사라지게 한 후, @media screen 내부에 display: block; 작성 시, 사이즈가 작아질 때만 나타나게 됨

메뉴바의 위치를 바꾸고 싶음 : position : position은 여러 가지 기능이 있는데, 그중 absolute : 내 태그의 부모(a 태그의 부모는 <div id = "header">)의 시작점으로 이동 

위치 이동

Position이란?  html에서 태그(요소)를 원하는 위치에 배치하기 위해 사용하는 속성이다. 정확한 위치 지정을 위해 left, right, top, bottom 속성과 함께 사용되는데, 다음과 같은 위치 지정 방법이 존재한다.

 

static(속성을 별도 지정 안했을 때, 문서에서 원래 있어야하는 위치에 배치된다), relative(요소를 원래 위치를 기준으로 이동할 수 있다), absolute(본인의 부모 요소 시작점 기준으로 위치한다), fixed(화면 즉, 뷰포트를 기준으로 고정되어 스크롤해도 위치가 변하지 않는다), sticky(스크롤에 따라서 효과가 나타나는 형식인데, relative와 fixed를 혼합한 방식으로 특정 지점까지 스크롤되면 fixed처럼 고정된다)

 

Grid란? Grid란 행(Row)과 열(Column)로 구성된 구조를 활용해 html 요소를 정렬하고 배치하는 개념이다. 수평, 수직 등 1차원적 방향으로만 레이아웃을 나눌 수 있는 flex와 다르게 2차원적으로 수평 수직을 동시에 나누어, 행과 열을 사용해 자유자재로 배치가 가능하다.